*네이버 부스트코스의 웹 ui개발 공부한 것 정리*

 

1) 콘텐츠 모델

  • HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙이 있음
  • 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 함
  • 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됨

  • Contents Models의 7분류
    • Metadata Content: 콘텐츠의 style(표현), script(동작)을 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소, 대부분이 <head>태그 내에 들어가는 요소들임
      더보기
      base,
 link, 
meta,
 noscript,
 script,
 style,
 title
    • Flow Content: 문서에 사용되는 대부분의 요소 
      더보기
      a, abbr, address,
map>area, article, aside,
audio, b, bdo, blockquote,
br, button,
      canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,
      fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img,
       input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,
      output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,
      style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr
    • Sectioning Content: 헤딩과 푸터의 범위를 결정하는 요소, 아웃라인이 있음 
      더보기
      article, aside, nav, section
    • Heading Content: 섹션의 헤더를 정의하는 요소 
      더보기
      h1, h2, h3, h4, h5, h6
    • Phrasing Content: 문서의 텍스트이며 문단 내부 레벨로 마크업하는 요소 
      더보기
      a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed,
       i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output,
       progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,
      var, video, wbr
    • Embedded Content: 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현하는 요소      
      더보기
      audio,
 canvas,
 embed,
 iframe,
 img,
 math,
 object,
 svg,
 video
    • Interactive Content: 사용자와 상호작용을 하는 요소    
      더보기
      a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,
      object[usemap], select, textarea, video[controls]

 

 

 

 

 

2) 시멘틱 마크업

  • 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻
  • 시멘틱이란 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 의미
  • 프로그래밍 언어란 사람과 기계 사이의 정해진 약속이며 HTML 역시 마찬가지
  • 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작함

  • 위 코드를 작성해서 화면을 보면 각각의 요소가 같은 모습으로 표현되나 의미는 같지 않음
    • <b>: 의미없이 단순히 텍스트를 굵게 표현 vs <strong>: 중요하다는 의미
    • <i>: 단순히 기울어진 글자를 표현 vs <em>: 글자의 특정 부분을 강조하는 의미
    • <u>: 글자에 밑줄이 그어짐 vs <ins>: 내용이 새롭게 추가되었음을 의미
    • <s>: 글자에 중간선이 그어짐 vs <del>: 내용이 삭제되었음을 의미

 

  • 의미에 맞는 태그, 요소를 사용하고 문서를 표현할 때 구조화를 잘 해주는 것이 시멘틱 마크업!

 

 

 

 

 

3) 블록&인라인

  • 블록 레벨 요소(Block level)
    • 한줄에 하나의 요소 표시
    • 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됨
    • 일반적인 모든 요소를 포함하며 div, h1~h6, p, ul, li, table 등 
    • 블록 레벨 요소는 인라인 레벨 요소의 자식 요소가 될 수 없음
    • 일반적인 모든 요소(블록, 인라인 레벨 등)를 자식 요소로 가질 수 있음
    • 단, h1~h6, p 요소는 블록 레벨 요소이지만 내부 요소로 Phrasing Content만 허용

 

  • 인라인 레벨 요소
    • 한 줄에 여러 개의 요소 표시
    • 하나의 라인 안에서 자신의 내용만큼의 박스를 만듬
    • 블록 레벨의 자식 요소이며 span, i, img, em, strong 등
    • 단, a는 인라인 레벨 요소이지만 자손으로 블록 레벨 요소를 가질 수 있음

 

 

 

 

 

 

 

'HTML&CSS' 카테고리의 다른 글

6. 폰트, 텍스트  (0) 2022.09.30
5. 단위, 배경, 박스모델  (0) 2022.09.30
4. CSS 이해하기  (0) 2022.09.15
2. HTML 태그  (0) 2022.09.13
1. HTML 이해하기  (0) 2022.09.13

+ Recent posts

티스토리툴바