HTML 심화 개요
와이어프레임을 설계하는 방법과, id와 class 속성을 목적에 맞게 사용하는 것이 중요합니다.
학습 목표
- 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
- 와이어프레임만 보고 HTML로 코딩할 수 있다.
<div>요소 또는<section>,<header>등의 시맨틱 요소로 영역을 구분하는 이유를 이해할 수 있다.- HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.
개념 학습
- 웹페이지의 구조 잡기
- 큰 틀에서 영역 나누기 (와이어프레임)
- 각 영역을 태그로 표현하기 (HTML)
- 댓글화면 목업(Mock-Up) 예시 (HTML)
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<div>
<div>댓글 2</div>
<input type="text" placeholder="댓글을 입력해주세요" />
<button>등록</button>
</div>
<ul>
<li>
<div>hyeonwooga</div>
<div>HTML부터 리액트까지 전부 복습, 개념 공부하기</div>
<span>2022-06-29 13:32</span>
<button>👍🏻 0</button>
<button>👎🏻 0</button>
</li>
<li>
<div>zzaru</div>
<div>취업하고 시니어 개발자, 기술이사 or 창업까지 화이팅</div>
<span>2022-06-29 13:33</span>
<button>👍🏻 0</button>
<button>👎🏻 0</button>
</li>
</ul>
</body>
</html>
- id 및 class를 목적에 맞게 사용하기
- id : 고유(unique)한 이름을 붙일 때, 중복 불허용
- HTML 태그 :
<div id="id"> - Selector :
div#id
- HTML 태그 :
- class : 반복되는 영역을 유형별로 분류할 때, 중복 허용
- HTML 태그 :
<div class="class"> - Selector :
div.class
- HTML 태그 :
- id와 class 이름을 정해주는데 정해주는 데 있어서 camel case, snake case, kebab case, BEM 등등 표기법이 다양하니 상황에 맞게 활용하여 이름을 붙여줍니다.
- id : 고유(unique)한 이름을 붙일 때, 중복 불허용
- 댓글화면 목업(Mock-Up) 예시 (HTML)
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
</head>
<body>
<div id="section__comment-create" class="section">
<div id="text__comment" class="text">댓글 2</div>
<input id="input__comment" class="text" type="text" placeholder="댓글을 입력해주세요" />
<button id="button__comment" class="text">등록</button>
</div>
<ul id="section__comment-list" class="section">
<li id="list__first" class="list">
<div id="username__first" class="username text">hyeonwooga</div>
<div id="content__first" class="content text">HTML부터 리액트까지 전부 복습, 개념 공부하기</div>
<span id="time__first" class="time text">2022-06-29 13:32</span>
<button id="btn__thumb-up-first class="thumb-up text">👍🏻 0</button>
<button id="btn__thumb-down-first class="thumb-down text">👎🏻 0</button>
</li>
<li id="list__second" class="list">
<div id="username__second" class="username text">zzaru</div>
<div id="content__second" class="content text">취업하고 시니어 개발자, 기술이사 or 창업까지 화이팅</div>
<span id="time__second" class="time text">2022-06-29 13:33</span>
<button id="btn__thumb-up-second class="thumb-up text">👍🏻 0</button>
<button id="btn__thumb-down-second class="thumb-down text">👎🏻 0</button>
</li>
</ul>
</body>
</html>
<!-- 공부목적으로 <body>내 모든 태그에 id, class 전부 달아줌 -->
Aim for the TOP, Developer