HTML심화 - 웹 앱의 구조 잡기(로그인 창 만들기2)

1. 웹 앱의 구조 잡기

- 큰 틀에서 영역 나누기

 

- 각 영역을 태그로 표현하기

- html 코드 작성

<div>
	<div>댓글 9M</div>
	<input type="text" placeholder="댓글을 입력해주세요">
	<button>등록</button>
</div>

<ul>
	<li>
		<div>ouo0****</div>
		<div>시각장애인들을 위한 지원이 정말 반갑네요 앞으로도 ... </div>
		<span>2018-03-22 23:29:22</span>
		<button><img src="thumbup.png"> 0</button>
		<button><img src="thumbdown.png"> 0</button>
	</li>
	<li>
		<!-- 두번째 게시물은 생략 -->
	</li>
</ul>

 

2. id 및 class 목적에 맞게 사용하기

- id(#) : 고유한 이름을 붙일 때

- class(.) : 반복되는 영역을 유형별로 분류할 때

<div id="writing-section">		// Selector 사용 - div#writing-section
<li class="comment">			// Selector 사용 - li.comment

 

- 각 태그에 id와 class 적용 (반복되는 영역은 id로 지정할 수 없음)