728x90
반응형

▶ 섹션(section) 요소

: HTML 문서의 독립적인 구획을 나타냄, 더 적합한 의미를 가진 요소가 없을 때 사용.

 

 

 

▶ 섹션과 관련된 태그

태그명  속성
<main> 문서의 주요 컨텐츠 영역 설정
<section> 주제별 그룹의 컨텐츠 섹션 설정
<article> 문서의 독립적인 컨텐츠 섹션 설정
<aside> 주요 컨텐츠의 보조적 컨텐츠 섹션 설정
<header> 문서의 소개 및 메뉴 그룹 컨텐츠 섹션 설정
<nav> 문서에 대한 메뉴 링크를 제공하는 섹션 설정
<footer> 문서 관련 정보 및 관련 링크 컨텐츠 섹션 설정
<h1> ~ <h6> 각 섹션의 제목 설정
<address> 문서 관련 연락처 컨텐츠 섹션 설정
<body> 문서의 모든 콘텐츠 [각주:1]를 포함하는  영역 설정

 

 

ex) 섹션 영역

 

 

▶<header>

- HTML 문서의 헤더 영역을 의미하는 태그

- 제목이나 내비게이션, 검색 등 소개 및 탐색에 도움을 주는 내용을 포함

- 텍스트, 인라인 요소, 블록 레벨 요소를 포함 O

- <header>, <footer> 태그는 자식요소로 포함 할 수 X

- HTML 문서는 여러 개의 <header> 요소를 포함할 수 O

- <head>[각주:2]와 달리 웹 페이지 상단에 정보를 보여줌.

 

 

▶<body>

-  한 문서에 단 하나만 존재할 수 있음

-  문서의 두 번째에 와야 하는 요소

- 특정한 조건[각주:3]에서는 태그를 시작 태그나 종료 태그를 생략할 수도 있음

- HTML5 이후 <body> 태그의 모든 레이아웃 관련 속성들을 지원하지 않음.

 

 

▶<nav>

- 메뉴, 목차, 인덱스 등에 사용

- 다른 페이지나 현제 페이지의 다른 섹션으로 이어지는  주요 탐색 링크 블록을 위한 요소

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

- 하나의 문서 안에 여러 개의 <nav> 태그를 가질 수 O

- 그러나, 메인 메뉴가 아닌 곳에서는 잘 사용하지 않음

 

 

▶<main>

- 주요 컨텐츠  전체를 감싸주는 태그

- 해당 문서의 중심 주제 또는 주요 기능과 직접적으로 관련 되어 있거나 확장되는 컨텐츠로 구성

-한 문서에 단 하나만 존재 할 수 있음

- <article>, <aside>,<footer>,<header>,<nav> 요소의 자식 요소로 올 수 X

 

 

▶<aside>

- 메인 컨텐츠와 직접적으로 관련이 없는 보조적 영역을 의미

- HTML 문서의 왼쪽 or 오른쪽의 사이드 메뉴나 광고 등으로 사용

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

 

 

▶<section>

- HTML 문서에서 맥락이 같은 요소들을 주제별로 그룹화 하는 태그

- 문서에 포함된 독립적인 섹션(section)을 정의

- 섹션 주제에 대한 제목 요소(<h2~h6>)를 자식 요소로 포함하는 경우가 많음

-텍스트, 인라인 요소, 블록 레벨 요소 포함 O

 

 

▶<article>

- HTML 문서 내에서 독립적으로 배포나 재사용이 가능한 컨텐츠를 정의

- 안에 포함될 수 있는 요소는 블로그 포스트, 뉴스 보도 기사, 논평 등이 있음

- 텍스트, 인라인 요소, 블록 레벨 요소 포함 O

-  <adress>의 자식 요소로 사용할 수 X

-하나의 문서에 다수의 <article> 존재 가능

 

 

▶<footer>

- HTML 문서의 푸터 영역 (페이지 하부 영역)을 의미함

- 섹션 작성자나, 저작권에 관한 정보, 연락처, TOP 버튼 등을 포함

- 하나의 문서에 다수의  <footer> 사용 가능

-링크를 포함할 수도 있음

 

 

▶<address>

- 사이트 주소, 회사 이름, 회사 주소 등 처럼 주소나 연락처에 관련된 정보를 표시

- 연락처보다 광범위한 정보를 포함할 수 O

- 주로 <footer> 영역에서 자주 사용

- <body> 요소 안에서는 해당 문서의 연락 정보를 나타냄

- <article> 안에서는 해당 글에 대한 연락 정보를 나타냄

-약간의 공백이 자동 삽입되어 다른 텍스트들과 구분됨

 

 

▶<h1> ~ <h6>

-문서에서 제목을 정의할 때 사용

-숫자의 순서가 낮을수록 중요한 제목을 정의함

-단계를 건너뛰지 않고 순차적으로 사용해야함

-<h1>~<h6>까지의 모든 태그의 폰트 크기나 굵기가 서로 다르게 설정되어 있음

 

 

 

 

 

  1. 하이퍼링크, 이미지, 텍스트,리스트 등 [본문으로]
  2. <head>태그는 웹 화면에 보이지 않는 내용을 주로 다룸. [본문으로]

  3. [시작태그가 생략될 수 있는 경우]

    1. 요소가 비어 있는 경우

    2. 첫 번째 항목이 공백, 주석, <script>, <style> 요소가 아닌 경우

    [종료 태그가 생략 될 수 있는 경우]

    1. <body> 요소가 시작 태그를 가지고 있으며, 바로 뒤에 주석이 따라오지 않는 경우 [본문으로]

728x90
반응형
728x90
반응형

시멘틱 마크업[각주:1]

▶ 시멘틱(Semantic)은 사전적 뜻은 "의미 있는" 혹은 "의미론적인" 정도로 해석 가능.

▶ 의미에 부합하는 태그를 사용하여 HTML 문서를 작성하라는 뜻이라고 볼  수 있음.

▶ 같은 정보라도 개개인 마다 받아들일 수 있는 의미가 다르므로

    시멘틱하게 마크업 하기 위해 각 태그가 가지고 있는 의미대로 용도에 맞게 적절히 사용하여야 함.

 

      -제목을 정의하기 위해 <h1>~<h6> 중 적절한 태그를 골라서 사용.

      -헤더를 정의하기 위해 <header> 태그 사용.

      -목차, 색인 등에 <nav> 태그 사용.

      -순서 목록 작성 시 <ol> 태그를, 비순서 목록 작성 시 <ul>태그 안에 <li> 태그 사용.

 

시멘틱 마크업을 해야 하는 이유

1. 검색 엔진이 시멘틱 태그를 중요 키워드로 간주, 검색엔진 최적화에 유리.

2. 웹 접근성 [각주:2]이 필요한 사용자가 의미를 잘 파악할 수 있도록 하기 위함.

3. 같은 태그로 둘러싸인 코드 보다 적절한 태그를 사용하였을 때 가독성이 높아짐.

 

 

논리적 순서 마크업

▶ 논리적 순서에 의해 마크업을 하는 것은 매우 중요함.

▶ 키보드나 마우스, 터치 패드와 같은 입력 장치 만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수         있도록 하는 입력장치 접근성과 밀접한 관련이 있음.

▶ 콘텐츠는 사용자가 내용을 쉽게 이해할 수 있도록 논리적인 순서로 제공되어야 하기 때문.
▶ 단순히 디자인의 시각적인 흐름 보다는 내용에 대한 논리적 흐름 순서를 정확히 파악하는 것이 중요.

 

 

예를 들어서,

이 사이트를 디자인 한다고 쳤을 때, 파란색 화살표 순(국가자격시험 - 전문자격시험··· 순)으로 HTML 문서를 작성하는 것보다,

빨간색 화살표 (국가자격시험 - 원서접수···) 순으로 HTML 문서를 작성하는 것이 논리적인 순서이며, 사이트 사용자도, 사이트 제작자도 알아보기 쉽다는 것.

 

 

이처럼 마크업을 할 때는 디자인의 시각적 흐름 보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요함.

 

  1. HTML 태그로 문서를 작성하는 것. [본문으로]
  2. 장애인이나 고령인 사용자들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용하며, 이해할 수 있도록 보장하는 것. [본문으로]
728x90
반응형

블록 레벨 요소 (Block-Level Elements)

  • 마크업(Mark up) 시 줄이 바뀌는 특성(세로정렬)을 가짐. 
  • 박스 개념으로 가로 폭 전체를 홀로 차지하고, 옆에 다른 요소를 두지 않음. (한 덩어리라고 이해하면 쉬움)
  • 텍스트 요소 (문자)와 인라인 요소를 자식 요소(안에 들어가는 요소)로 포함 시킬 수 있음.
  • 블록 요소 중에서도 자식 요소로 포함 시킬 수 있는 요소가 있고, 아닌 요소가 있음.

 

자주 쓰이는 블록 레벨 요소

1. <h1> ~ <h6>: 제목을 정의할 때 사용하는 태그

 

2. <header>

: 헤더를 정의할 때 사용하는 태그 (머리글)

 

3. <p>

: 단락을 정의할 때 사용하는 태그

 

4. <nav>

: 주로 메뉴, 목차, 색인 등을 정의하는 태그

내비게이션처럼 쉽게 찾을 수 있도록 사용함.

  

5. <table>

: 표를 만드는 태그

 

6. <ol>

: 순서 목록을 정의할 때 사용하는 태그

 

7. <ul>

:  비순서 목록을 정의할 때 사용하는 태그

   <li> 태그만 자식 요소로 올 수 있음.

 

8. <li>

: 항목을 정의할 때 사용하는 태그

 

9. <div>

: 요소들을 그룹으로 정의하는 태그 

 태그 자체에는 아무런 의미도 없음.

 

인라인 요소 (Inline Elements)

  •  마크업(Mark up) 시 가로 정렬 됨. (줄 바꿈이 없음)
  •  자신의 글자 수 만큼의 영역만 차지함.
  •  텍스트(문자) 요소와 인라인 요소를 자식 요소로 포함할 수 있음.
  •  블록 레벨 요소를 자식 요소로 포함 할 수 없음.

 

자주 쓰이는 인라인 요소

 

1. <span>

: 인라인 요소들을 그룹으로 정의하는 태그

 

2. <a>

: 링크를 지정할 때 사용하는 태그

 

3. <br>

: 줄 바꿈 시 사용하는 태그

 엔터(Enter)라고 생각하면 쉬움.

 

4. <strong>

: 중요한 텍스트 (문자)를 정의하기 위한 태그

 <strong> 태그 사이의 문자는 굵고 진하게 표시됨.

 

5. <img>

:이미지를 삽입하기 위해 사용하는 태그

 

 

+ Recent posts

티스토리툴바