HTML layout

다람·2022년 6월 22일
0

HTML

목록 보기
7/8

layout

  • 특정한 공간에 여러가지의 구성요소를 보기좋게 효과적으로 배치하는 작업
  • 웹 페이지의 레이아웃은 웹 사이트의 외관을 결정짓는 중요한 요소
    (좋은 레이아웃은 좋은 UI를 이끌어낸다)
  • HTML에서 여러가지의 레이아웃 작성 방법을 제공한다.

layout 만드는 방법

  1. table을 이용한 레이아웃 처리
    --> HTML5가 나오면서 사용빈도가 낮아졌다.
  2. div을 이용한 레이아웃 처리
    --> 속성명(id, class)을 이용해서 각각의 div을 구분
  3. 시맨틱 태그를 이용한 처리
    --> 말 그대로 태그명이 해당 영역에 대한 명칭을 가지고 있다.

semantic 태그

  • 태그명 그 자체가 의미를 가지고 있는 태그
  • 요소가 스스로 브라우저와 개발자 모두에게 자신이 왜 쓰였는지를
    직관적으로 보여주는 요소
  • 기본 div 등의 요소로 레이아웃을 제작했을 때 영역 및 목적의 파악이
    늦어지는 단점을 보완하기 위해 등장한 태그(요소)

semantic 태그 정리

  • header : HTML 문서의 머리를 정의하는 태그
    도입부에 대한 내용을 정의하는 태그
  • nav : HTML 문서 사이에 탐색할 수 있는 링크들의 집합
  • main : HTML 문서의 실질적 내용을 정의하는 태그 (section이 더 많이 활용)
  • section : HTML 문서의 전체적 내용과 관련있는 컨텐츠, 요소들의 집합
  • article : 해당 요소의 내용 자체만으로도 이해가 되어야하는 태그
  • aside : 태그 페이지 이외의 별도의 컨텐츠를 정의하는 태그
    article 내부, 외부에 들어가는 정도
  • figure / figcation : 이미지, 그래픽, 비디오 등의 컨텐츠들을 정의하는 태그
  • footer : HTML 문서의 바닥글
    일반적으로 사이트의 작성자 혹은 저작권 정보나 연락처 등을
    명시하는 태그 (기업정보)
      

semantic 태그 예시

<header>여기는 헤더</header>
<nav>여기는 메뉴</nav>
<section>여기는 세션</section>
<footer>여기는 바닥글</footer>

div 태그 예시

 <div id="header">header</div>
 <div id="nav">nav</div>
 <div id="section">section</div>
 <div id="footer">footer</div>

semantic 태그와 div 태그 둘 다 활용해서 사용하는 것이 개발실력 향상!

profile
안녕

0개의 댓글