[ HTML] inline, block, div, span, id, class

하루입니다.

 

 

---

 

 

수많은 엘리먼트와 html과 태그들의 악수 요청 ... 

 

블록 엘리먼트

• 항상 사용가능한 최대 너비를 차지한다. 항상 새로운 줄에서 시작한다. 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다.
• 엘리먼트의 너비(width)를 지정할 수 있다.
• 대표적인 태그
  • h1~h6, p, ol, ul, li, dl, dt, dd, table, form, div
  • article, aside, section, nav, video, footer

 

인라인 엘리먼트

• 컨텐츠를 표시하는데 필요한 만큼의 너비만 가진다. 새로운 줄에서 시작하지 않을 수도 있다.
• 엘리먼트의 너비(width)를 지정해도 적용이 되지 않는다.
• 대표적인 태그
  • a, img, strong, em, small, del, b, i, br
  • input, select, textarea, button, label

div 태그

• 컨테이너 태그 : 컨테이너처럼 한데 묶어서 조작하기 용이하게 한다는 뜻.
• 블록엘리먼트를 그룹으로 묶을 수 있는 태그다.
• <div> 태그도 블록엘리먼트다.
• div, 모든 블록 엘리먼트, 모든 인라인 엘리먼트를 담는 태그다. 

 

다음 홈페이지

실제 사용 예시. div를 찾자 거의 600개 넘게 나왔다. 

 

 

 

 

페이지를 구성한다는 건 적절히 나누고 묶는 것의 연속인 느낌

 

 

 

 

크게 파랗게 묶고, 그 안에 비슷한 것끼리 묶고, 그 안의 좌 우로 묶고, 그 안에 상 중 하로 묶고, 그 안에 좌우 반반으로 묶고 ... 

 

 

 

 

span 태그

• 컨테이너 태그
• 인라인 엘리먼트
• <span> 태그는 텍스트를 담는 태그다.
• <span> 태그를 사용해서 담은 텍스트는 style, id, class를 사용해서 다양한 스타일로 표시할 수 있다.

 

 

 

id 속성

• 모든 태그가 가지는 속성이다.
• id 속성
  • 특정 엘리먼트(태그)를 식별하기 위한 용도로 사용된다.
  • 웹문서 전체에서 똑같은 id 속성값을 가진 태그는 없어야 한다.
  • id의 속성의 값은 고유해야 하며, 숫자로 시작할 수 없다.
  • 특정 아이디값을 가진 태그(엘리먼트)에만 스타일을 지정할 때 사용.
  • 특정 아이디값을 가진 태그를 선택해서 javascript로 조작해야 할 때 사용.

  <div id="news">
  	<div id="news-section"></div>
  	<div id="sports-section"></div>
  	<div id="ent-section"></div>
  	<div id="movie-section"></div>
  	<div id="movie-section"></div> // 이건 안 돼요 (id 동일)
  </div>

   

   

   

class 속성

• 모든 태그가 가지는 속성이다.
• 같은 클래스값을 가진 태그는 같은 스타일이 적용되게 하기 위한 용도로 사용된다.
• html 파일내에 같은 클래스값을 가진 태그들이 여러 개 있을 수 있다.

영화 포스터라는 스타일로 묶인 요소들.

 

<style>
	<div id="boxoffice">
		<div class="movie-poster"><h3>영화제목</h3> <strong>순위</strong> <img src="" alt="" /><p>영화설명</p></div>
		<div class="movie-poster"><h3>영화제목</h3> <strong>순위</strong> <img src="" alt="" /><p>영화설명</p></div>
		<div class="movie-poster"><h3>영화제목</h3> <strong>순위</strong> <img src="" alt="" /><p>영화설명</p></div>
		<div class="movie-poster"><h3>영화제목</h3> <strong>순위</strong> <img src="" alt="" /><p>영화설명</p></div>
		<div class="movie-poster"><h3>영화제목</h3> <strong>순위</strong> <img src="" alt="" /><p>영화설명</p></div>
	</div>

boxoffice 라는 id 식별값 속성을 가지게 되고, movie-poster라는 class 묶음 속성을 가지게 된다.

 

 

 

중요한 이유

 앞으로 자바스크립트를 배울 건데, 원하는 태그를 찾고 조작하기 위해서는 id와 class를 잘 알아야 한다.

 

 

---

 

 

잘못된 정보에 대한 지적은 언제나 환영입니다. 

 

복습 끝!