티스토리 뷰

Web/HTML

HTML5 섹션 요소+ text 요소

HAN_PY 2020. 6. 29. 16:40
반응형

섹션이란 의미가 연결되는 콘텐츠의 집합을 나타낸다.

1. 구조적 마크업의 이해

  • 구조적 마크업은 문서의 구조를 정의

    • 콘텐츠의 종속관계

  • 표현적 마크업은 문서의 외형을 정의

    • 디자인

  • 구조적 마크업과 표현적 마크업의 혼용(하지마)

    • 문서의 구조는 HTML을 사용, 문서의 표현은 CSS를 사용

  • 문제점

    • 접근성 저해
    • 높은 유지비용
    • 문서 크기 비대화

  • 블록 레벨 요소와 인라인 레벨 요소

    • 블록 레벨 요소: 줄 바꿈이 일어나는 레벨요소
      • 제목, 문단, 인용문
    • 인라인 레벨 요소: 줄 바꿈이 일어나지 않는 행의 일부 요소
      • 강조, 링크, 이미지

2. HTML5의 섹션 요소

의미가 연결되는 콘텐츠의 집합

section
<!DOCTYPEhtml>
<html>
<head>
    <title>2022년 여름 졸업식순</title>
</head>
<body>
    <h1>졸업</h1>
    <section>
        <h1>예식</h1>
        <p>시작 행렬</p>
        <p>교장 폐회사</p>
    </section>
    <section>
        <h1>졸업생</h1>
        <ul>
            <li>Moliy</li>
            <li>Susan</li>>
        </ul>
    </section>
</body>
</html>

section요소로 내용을 분리
섹션 요소는내용적으로 분리되어 있어 자체적인 타이틀 필요

nav
<nav>
    <ul>
        <li><a href="index.html">홈</a></li>
        <li><a href="about.html">회사소개</a></li>
        <li><a href="product.html">제품</a></li>
        <li><a href="support.html">고객지원</a></li>
    </ul>
</nav>

목록으로 내비케이션을 만든 예
CSS와 JavaScript 적용 시 다양한 동적 네비게이션 메뉴 만들 수 있다.

article
<article>
    <header>
        <h1>삶에서 가장 중요한 원칙</h1>
        <p><time pubdatedatetime="2009-10-09T14:25"></time></p>
    </header>
        <p>당신 주변 어디에라도 마이크가 있다면
            생각해야합니다. 농답이 아니에요.</p>
    <footer>
        <a href="?comments=1">Show comments</a>
    </footer>
</article>

독립적인 글(댓글 같은 것)
아티클 요소: 제목, header, footer, 그리고 섹션 요소까지 포함

aside
<aside>
    <h1>스위스</h1>
    <p>스위스, 지질학적으로 유럽의 중심에 있으며
        유럽 여러 조약의 슨인국이지만 EU에 가입하였다.
    </p>
</aside>

문서의 주요 콘텐츠와 별개의 영역 정의

header
<header>
  <p>Whlcome to...</p>
  <h1>Voidwars!</h1>
</header>

페이지 또는 섹션의 머릿글 그룹
페이지의 제목, 소개, 네이게이션 등이 포함
섹션 요소가 아니므로 새로운 섹션을 의미하지 않음

footer
요소가 section 요소인지 아닌지에 따라 문서 구조가 달라짐

일반적으로 연관 문서에 대한 정보를 담음(작성자, 링크, 저작권 정보.. 등)
섹션 요소가 아니므로 새로운 섹션 아님

헤딩
<body>
  <h1>이걸 그림이라고 부릅시다</h1>
    <h2>시작하기</h2>
    <h2>간단한 도형</h2>
      <h3>캔버스 좌표 다이어그램</h3>
    <h2>경로</h2>
</body>

h2는 h1이 생성한 섹션의 안쪽
h3은 h2가 생성한 섹션의 안쪽

섹션의 제목
h1~h6까지 존재
h1이 가장 높은 등급
h6이 가장 낮은 등급

hgroup
<hgroup>
    <h1>The reality dysfunction</h1>
    <h2>Space is not the only void</h2>
</hgroup>

hgroup등급은 h1과 동일
h2는 서브 타이틀 역할만하고 섹션 생성은 X

섹션의 제목 그룹(h1~h6 요소를 그룹 지음)
에이치그룹은 hgroup에 포함됨 헤딩 요소의 가장 높은 등급
서브 타이틀의 범주의 생성을 감추기 위해 사용

섹션 요소의 구조 결정
  • 요소를 겹쳐 상위 요소와 하위 요소를 생성
  • 섹션 내부에서는 타이틀(헤딩)의 등급에 따른 구조화
  • 헤딩 요소: 섹션의 시작은 표기 되지만 섹션의 끝은 표기 되지 않음
address

가장 가까운 조상 요소인 article 또는 body요소의 연락처 정보 의미
영향력: 가장 가까운 조상 요소에 한정
내용은 연락처 정보의 형태면 어떤 형태도 허용

그룹 콘텐츠 요소

그룹으로 내용을 분리하는 역할

문단과 인용

p

  • 문단의 시작과 끝에 p요소 정확히 기제

  • 좀 더 적합한 요소를 사용 하는 것이 더 구조적이다.

왼쪽으로 만들고 최종 수정에서 오른쪽으로 바꾸면된다.

blockquote

인용을 의미
여러 단락이면 p 넣으면 된다.

pre

형식화된 텍스트 블록 표현
html은 공백 두개를 인지하지 못함. 다 하나로 인지

hr

문단에서 분리선
문단 레벨에서 주제의 분리를 나타냄
씬 전환 또는 섹션 내에서 다른 화제로의 전환
시각적으로는 분리를 위한 선이 하나 보이지만 표현적 마크업(가시적으로만)으로 사용하면 안됨.

목록

  • 텍스트 콘텐츠를 설명하기 위해 자주 사용되는 구조
  • 세가지 목록이 있다.
    • 순서 있는 목록
    • 순서 없는 목록
    • 정의 목록
figure

일반적으로 사진, 일러스트, 비디오 등을 표시하고 주석을 다는 용도
제거하거나 위치 옮겨도 주된 흐름에 영향 없음
figure요소에 캡션을 넣으려면 figcaption을 사용한다.

div

특별한 의미 없다.
스타일 또는 스크립트 목적으로 콘텐츠를 분리하기 위해 사용
단순 분리 목적

id, class, title

  • 전역 속성으로 HTML 모든 요소에서 속성으로 사용 가능

  • id 속성

    • HTML에서 유일한 값
    • css나 javascript에서 id에 적은 값을 적으면 이걸 가리킨다

  • class 속성

    • 여러 요소에 같은 클래스 값을 적용 할 수 있다.
    • HTML 코드 내 여러 요소에 동일한 스타일, 작동 적용 위해 사용
    • 구조보다는 스타일이나 작동 이름으로 정해야 한다.

  • title 속성

    • 요소의 부가적 정보를 나타낸다.
    • 아래의 예는 한자의 정보를 한국말로 적은거네.

텍스트 관련 요소

텍스트 구조를 나타내는 온라인 레벨 요소

a

하이퍼링크를 나타냄
herf 속성으로 링크 경로 저장

a가 href 속성을 가지면 추가로 타겟을 지정 할 수 있다.

em, strong

em - 내용 강조하기 위해 사용

strong - 내용이 중요함을 표시

q, cite

인용 구두점을 사용하면 안된다.

abbr

약어 및 두문자어 나타냄

title 문자를 지정하여 abbr 에서 사용할 때는 원형표시로만 이용해야한다. 약어 스타일을 적용 할 때 span 보다는 abbr 로 해야 구조적으로 완벽하다

i, b

구조적의미 부여

i - 문장 내에서 다른 나라 언어 사용 할 때 사용

b - 의미 있는 중요성을 부가하지 않고 눈에 띄게 하기 위해서만 사용

i,b 대신에 위에 적은 em, strong을 사용하자.

sup, sub
  • 위첨자(sup)와 아래첨자(sub)는 표현적 마크업이 아니다.
  • 디자인적 요소가 아니기 때문에 구조적 마크업이다.
span, br, img

alt(알트 속성)- 이미지를 못불러 올 때 텍스트로 대체하는 것
alt는 이미지가 안보여도 이미지를 추측할 수 있는 글이어야 한다.

반응형

'Web > HTML' 카테고리의 다른 글

[html] 비디오(mp4) 영상 태크  (0) 2021.12.19
[html] 이미지 태그 기초  (0) 2021.12.16
HTML 기초 알아보기  (0) 2021.12.07
Marking up text(텍스트 마크업)  (0) 2020.06.29
HTML basic  (0) 2020.06.29
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함