[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 웹표준과 HTML5
지난 서비스 기획 수업을 마무리 하고 이번 주 부터는 웹개발의 첫 시작 부분인 HTML부터
다시 교육이 시작되었습니다. 시작하기 전엔 이걸 처음부터 다시 하는게 괜찮은걸까 했지만
지난 프로젝트에서 리액트로 진행하면서 굉장히 기초 부분에 있어 부족하다라는걸 느꼈던 나이기에
다시 기초 수업부터 듣는다는 건 어떻게 보면 복습도 하고 몰랐던 부분을 채워넣을 수 있을 기회라고 생각하였습니다.
우선 강사님에 대해서 소개해주셨는데 현재 주)세이프홈즈 대표이사님으로 계신다고 합니다...!!
뿐만 아니라 여기에 도움을 주실 멘토분들도 소개해주셨습니다.
수업 내용
웹 표준과 기초 상식
앞으로 계속해서 꾸준히 발전해나가야 할 역량들이네요 ㅎㅎ
저는 이러한 배경지식들이 나름 나중에 도움이 되는거 같더라고요! HTML5가 현재 버전입니다.
이러한 역사들에 대해서는 생각해 본 적이 없었는데 흥미로웠습니다.
컴퓨터가 서로 데이터를 주고 받는 방법
HTTP
- HTTP(Hyper Text Transfer Protocol)는 HTML문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜
IP 주소
- 인터넷에 연결되어 있는 모든 장치들을 식별 할 수 있도록 각각의 장비에 부여되는 고유 주소
- ex) 192.0.0.1
DNS(Domain Name System)
- 숫자로 구성된 복잡한 IP를 사용자가 쉽게 기억하고 입력할 수 있는 도메인 네임으로 변환하는 시스템
ex) https://www.naver.com/ → 125.209.222.141
컴퓨터가 서로 데이터를 주고 받는 방법
HTML, CSS, JS 상관관계와 작동순서
HTML5의 기본 요소
HTML5의 기본 구조
사실 이런 부분에 있어서는 이렇게 정리된 내용을 보는게 아니라 듣고 넘어갔던 기억밖에 없어서
자세히는 몰랐는데 한 번 읽어보니 이런거구나~ 하면서 나중에 찾아보면 좋을 듯 합니다.
그리고 이번 시간에 가장 중요하다고 생각했던 개념인 바로 시맨틱 태그입니다.
시맨틱 태그(SEMANTIC TAG)
- 사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그.
- 시맨틱 태그가 나오기 이전에는 <div> 태그로 일일히 위치와 범위를 정하고 각 태그들에 class 이름으로 구분을 지음
시맨틱 태그(SEMANTIC TAG)의 종류
이렇게 종류에 따라 다음과 같이 네이버 메인 페이지를 나눌 수 있습니다.
이런 시맨틱테그를 사용하게 된다면 확실히 class명으로 header, main등으로 구분해야하는 일들이 줄어
더 수월할 수 있지 않을까 라는 생각을 했습니다.
이러한 시맨틱 태그를 이용하게 된다면
웹 접근성을 높이고 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)도
원할한 소통이 가능하도록 도울 수 있다고 합니다.
또한 추후 업데이트 및 수정할 때 코드 수정이 쉬워진다네요.
테이블
FORM
과제
- (구)세이프홈즈 랜딩페이지 반응형 퍼블리싱 - html만 작성 (클론코딩)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
nav ul {
list-style-type: none;
margin :0;
padding: 0;
overflow: hidden;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
nav ul li {
display: inline-block;
/* 가로로 정렬 */
}
</style>
</head>
<body>
<!-- 헤더 부분 -->
<header>
<!--헤더 맨 윗부분 -->
<nav class = "headerwrap">
<ul>
<li>
<a href = https://safehomes.kr/ class = "home">세이프홈즈</a>
</li>
<li>
<div class = "buttonask">
<button>문의하기</button>
</div>
</li>
<li>
<div class = "buttonstart">
<button>시작하기</button>
</li>
</ul>
</div>
</nav>
<!--헤더 바로 밑-->
<div class = "header-text">
<div class = 'header-tex1main'>
내 집 보증금, <br>
경매로 날아가면 어떻게 하지?
</div>
<div class = 'header-textsub'>
지금 걱정 해결하기 >
</div>
</div>
</header>
<!-- 메인 화면 부분 -->
<main>
<div class ="main-text" >
세이프홈즈, 전/월세 보증금 지킴이 서비스입니다.
</div>
<br><br>
<!-- 메인1 -->
<nav>
<ul>
<li>
<img src = "images\image1.jpg" alt ="사진1" width="293", height="233"><br>
<div style = "font-size: 21px;" >
등기부등본 등을 분석한 <br>
보증금 지킴이 리포트
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<img src = "images\image2.jpg" alt ="사진2" width="293", height="233"><br>
<div style = "font-size: 21px;" >
보조금 보호를 위한<br>
Check-List
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<img src = "images\image3.jpg" alt ="사진3" width="293", height="233"><br>
<div style = "font-size: 21px;" >
등기부등본 변동에<br>
따른 실시간 알림 서비스
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
</ul>
</nav>
<br><br><br><br>
<div class ="main-text2" style=>
지금 바로 사용하기 >
<br><br><br><br>
</div>
<div class ="main-text" style=>
부동산을 찾았지만 망설이고 계시나요?
<br><br><br><br>
</div>
<!-- 메인2 -->
<nav>
<ul>
<li>
<img src = "images\image4.jpg" alt ="사진4" width="293", height="233"><br>
<div style = "font-size: 21px;" >
부동산 중개 업자는 항상 괜찮다고 <br>
한다. 과연 그럴까?
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<img src = "images\image5.jpg" alt ="사진5" width="293", height="233"><br>
<div style = "font-size: 21px;" >
절차가 이것저것 너무 많은데 빠뜨<br>
린 절차가 있지 않을까?
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<img src = "images\image6.jpg" alt ="사진6" width="293", height="233"><br>
<div style = "font-size: 21px;" >
평생 힘들게 모은 보증금을 나중에<br>
돌려 받지 못 하면..
</div>
<div style = "font-size: 13px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
</ul>
</nav>
<br><br><br><br>
<div class ="main-text" style=>
세이프홈즈, 어떻게 내 보증금을 지킬 수 있을까요?
<br><br><br><br>
</div>
<nav>
<ul>
<li>
<div style = "font-size: 21px;" >
#1
</div>
<div style = "font-size: 21px;" >
계약 전 주소 검색
</div>
<div style = "font-size: 16px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<div style = "font-size: 21px;" >
#2
</div>
<div style = "font-size: 21px;" >
보증금 지킴이 리포트 확인
</div>
<div style = "font-size: 16px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<div style = "font-size: 21px;" >
#3
</div>
<div style = "font-size: 21px;" >
계약 전 주소 검색
</div>
<div style = "font-size: 16px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
</ul>
<br><br>
<ul>
<li>
<div style = "font-size: 21px;" >
#4
</div>
<div style = "font-size: 21px;" >
실시간 등기 변동 알림
</div>
<div style = "font-size: 16px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
<li>
<div style = "font-size: 21px;" >
#5
</div>
<div style = "font-size: 21px;" >
계약 기간 안심하고 살기
</div>
<div style = "font-size: 16px;">
내 보증금을 어떻게 지킬 수 있을까?라는 단계 <br>
를 거쳐서 여러분들에게 계약전 보증금 지킴이 <br>
리포트 제공
</div>
</li>
</ul>
</nav>
<div>
<br><br><br><br>
조금 더 알아보기 >
<br><br><br><br>
</div>
<nav>
<ul>
<li>
<img src = "images\Border.jpg" alt ="border" width="296", height="642">
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<img src = "images\Border.jpg" alt ="border" width="296", height="642">
</li>
</ul>
</nav>
<nav>
<ul>
<li>
<img src = "images\Border.jpg" alt ="border" width="296", height="642">
</li>
</ul>
</nav>
<div>
<div class = "main-text">
서비스 가격은 어떻게 될까요?
</div>
<br><br><br><br>
<nav>
<ul>
<li>
<div>
전/월세 보증금<br>
지킴이 리포트
</div>
<div>
해당 플랜은 여러분을 위해 리포트를 제공합니<br>
다. 실제로 이 리포트는 언제 어디서든지 사용할<br>
수 있고 그렇습니다.
</div>
<div>
80,000 KRW
</div>
<div>
1회 50,000원 / 1주 80,000원
</div>
<div>
<button>지금 바로 사용하기</button>
</div>
</li>
<li>
<div>
등기부 등본 변동<br>
알림 서비스
</div>
<div>
해당 플랜은 여러분을 위해 리포트를 제공합니<br>
다. 실제로 이 리포트는 언제 어디서든지 사용할<br>
수 있고 그렇습니다.
</div>
<div>
50,000 KRW
</div>
<div>
1년 50,000원 / 2년 80,000원
</div>
<div>
<button>지금 바로 사용하기</button>
</div>
</li>
</ul>
</nav>
</div>
<!-- 세이프홈즈, 없었으면.. -->
<div>
<div class = "main-text">
<br><br><br><br>
세이프홈즈, 없었으면 큰일 날 뻔했어요!
</div>
<br><br><br><br>
<nav>
<ul>
<li>
<div>
<ul>
<li>
<img src = "images\Oval.jpg" alt ="border" width="48", height="48">
</li>
<li>
<div>
홍길동님<br>
전/월세 보증금<br>
지킴이 리포트
</div>
</li>
</ul>
</div>
<div>
공인중개사가 계약을 너무 서두르는 느낌이 들어 불안했는데, 세이프홈즈를 통해<br>
서 리포트를 받아보니 아니나 다를까 위험요소가 너무 큰 매물이었습니다. 근저당<br>
이 너무 높게 잡혀있었고, 보증보험 적합 대상도 아니라 경매로 넘어가게 되면 보<br>
증금을 돌려받기 힘들 것 같아 해당 매물 계약을 포기하고, 더 안전한 매물을 찾아<br>
서 계약할 수 있었습니다.
</div>
</li>
<li>
<div>
<ul>
<li>
<img src = "images\Oval2.jpg" alt ="border2" width="48", height="48">
</li>
<li>
<div>
홍길동님<br>
등기부 등본 변동 알림 서비스<br>
</div>
</li>
</ul>
</div>
<div>
첫 부동산 계약이라 확인해야할 것이 중구난방이어서 불안했어요. 인터넷과<br>
공인중개사에게 확인을 했지만 그래도 불안했어요. 내 전재산인데... 그런데 세이프홈<br>
즈에는 확인해야 할 것이 쉽게 나와있어서 준비물 준비하듯이 착착 할 수 있었습<br>
니다. 부동산 잘 아는 친구가 생긴 것 같아 좋았습니다.
</div>
</li>
</ul>
</nav>
</div>
<br><br><br><br>
<div>
후기 진위여부 파악하러 가기 >
</div>
<br><br><br><br>
<!-- 내 보증금, 안전하게~ -->
<div>
<div>
내 보증금, 안전하게 보호하려면<br>
지금 시작하세요
</div>
<button>
지금 바로 시작하기
</button>
</div>
</main>
<footer>
<div>
(주) 세이프홈즈
</div>
<div>
사업자 등록 번호 : 250-26-01109 | 대표 : 정동훈<br>
경기도 성남시 수정구 대왕판교로 815 기업지원허브 혁신기술존 260-3호<br>
문의 메일 : safehomes.kr@gmail.com<br>
</div>
</footer>
</body>
</html>피그마의 화면을 보고 HTML(뼈대)을 만들어보았습니다.
지난 수업 시간에 배웠던 시맨틱 태그를 사용하여 <header>, <main>, <footer>로 나누어 구성하였습니다.
확실히 아직까진 css를 추가하지 않아 예쁘거나 정돈된 느낌은 없습니다.
하지만 시맨틱 태그를 이용하여 코딩해보니 조금 더 레이아웃을 구분하기 쉽다는 생각이 들었고
앞으로 시맨틱태그를 적극적으로 활용해야겠다는 생각을 했습니다.
아직 많이 부족하지만 수업을 통해 발전해나간다는 생각이 들어 정말 다행이라고 생각하고
질 좋은 수업을 가르쳐주신 세이프홈즈 대표님께도 감사드립니다..! 앞으로도 계속 잘 배워나가겠습니다. ㅎㅎ
수업 시작 전 대표님의 멘트가 매우 기억에 남습니다.
나만의 속도로 페이스를 잃지 마시고 묵묵히 걸어가세요.
뭔가 지금 저에게 필요한 말이지 않을까 싶었습니다.
개발자로 새로운 도전을 하게 된지 6개월이 넘어가는데 불안하기도 하면서 초조해지고 있던 찰나에
마음가짐을 다시 붙잡고 공부할 수 있게 된 말씀이신거 같아 너무 감사합니다!
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.