[부스트코스 - 웹 UI 개발] 3. 콘텐츠모델, 시멘틱 마크업, 블록과인라인

콘텐츠 모델

 

: html5에서 html 요소들의 성격에 따라 그룹을 지어둔 것

 

 

 

1. metadata

 

콘텐츠의 표현,동작, 다른문서와의 관계등 정보를 포함 하는 요소들 그룹

ex) meta, title, link

(대부분 head 태그 안에 들어가는 요소들)

 

 

 

 

2. flow

 

대부분의 요소들 

 

 

 

 

3. sectioning

 

아웃라인에 영향을 주는 요소들

ex) nav, article, section

 

 

 

 

4. phrasing

 

텍스트 꾸미는 요소 (마크업)

ex) a, i, br

 

 

 

 

5. embedded

 

이미지 비디오 등 와부콘텐츠 표현

ex) img

 

 

 

 

 

6. interactive

 

사용자와 상호작용하는 요소

ex) input, form 

 

 

---

시멘틱마크업

 

브라우저가 코드를 잘 이해할수 있도록 하는 것

= 의미에 맞는 태그와 요소를 사용하고 구조화를 잘해 주는 것

 

 

<b>  - 텍스트를 굵게 해 줌(시각적으로만)   -  <strong> 텍스트를 굵게 해 줌(중요하다는 의미 포함)

 

 

<i>  -   텍스트를 기울려 줌(시각적으로만) -  <em> 기울려 줌(다른 텍스트에 비해 더 강조한다는 의미 포함)

 

 

<u>  -  텍스트에 밑줄을 쳐 줌  -  <ins> 새롭게 추가된 내용이라는 의미 포함

 

 

<s>  -  텍스트에 중간선을 그어 줌 -  <del> 삭제된 내용이라는 의미 포함

 

 

(참고로 후자들이 시멘틱마크업)

 

이처럼 브라우저 상에는 같은 것처럼 보이는 태그일지라도 

내포하고있는 의미가 다르므로 시멘틱마크업을 잘 사용하여 코드를 짜야 함

 

header : 헤더

nav : 메뉴 (카테고리)

main : 이 페이지의 메인 부분

   article : 이 자체만으로 독립적으로 고유한 정보를 나타내는것을 묶어줄 때

   section : 연관있는 내용들을 묶어줄 때

footer : 

---

 

 

block level 

 

한줄에 하나의 요소만 표시 (가로 영역 박스)

ex)div, p, h

 

inline level에 포함이 된다 (감싸진다)

 

 

 

 

inline level

 

한줄에 여러개 요소 표시 자기내용만큼 자리차지

inline level 요소는 블록레벨에 감싸지지 않음

ex) span, a 

 

예외)))  <a> 요소는 인라인요소지만 블록 요소에 감싸지는게 가능

---