Web

HTML5 - 구조적 마크업 이해! HTML5의 기타 그룹 컨텐츠 요소와 전역 속성

DeFo 2020. 6. 6. 10:03
공부 환경
-혼자 간단하게 웹 페이지를 만들어 보고 싶어서 시작
-퇴근 후 짬짬히
-느리지만 꾸준하게 할 예정

 

웹 초창기

하나의 HTML 파일에 웹 페이지의 모든 것이 정의되었던 혼돈의 시기를 지나 😓..

결국에는 컨텐츠의 구조와 표현을 구분하게 되었다.

 

2020/06/04 - [Web] - HTML5 - 구조적 마크업 이해! HTML5의 섹션 요소

2020/06/05 - [Web] - HTML5 - 구조적 마크업 이해! HTML5의 그룹 컨텐츠 요소

 

이어서 HTML5의 구조를 정의하는 구조적 요소에 대해 알아보자

 

HTML5의 기타 그룹 컨텐츠 요소

이전 포스팅 HTML5 그룹 컨텐츠 요소에 이어 기타 그룹핑 요소를 알아보자면

 

<figure>, <figcaption>

사진, 일러스트, 비디오 등을 표시하고 주석 다는 용도

참고 요소여서 요소를 제거하거나 위치를 옮겨도 문서의 주된 흐름에 영향을 미치지 않음

<figcaption> 요소를 포함하며 <figcaption> 요소는 <figure> 요소 내용에 대한 캡션이다.

 

ex)

<figure>
	<img src="dog.jpeg" alt="날씨가 좋아서 뽀삐가 산책하고 있습니다.">
    <figcaption>산책 중인 강아지 뽀삐</figcaption>
</figure>

 

※ <img> 는 텍스트 관련 요소로 봅니다 ※

<img> 요소는 이름에서 알 수 있듯이 이미지를 의미하며 마침 요소 필요 없이 단독으로 사용됨

시각적 이미지를 의미하지만 디자인을 위한 표현적 요소는 아니다.

-> 디자인 용도로 이미지를 사용할 때는 CSS에서 지정해야 함

 

<img>의 필수 속성 src와 alt

흔히 alt는 지정 안 하는 경우가 많으나 HTML5 스펙에서는 alt 속성 반드시 지정 요구함

-src 속성에 이미지의 경로를 지정한다

-alt 속성은 이미지를 대체하기 위한 텍스트.

  alt 속성은 반드시 사용하여 이미지를 설명하여 이미지가 로딩되지 않는 환경에서도 컨텐츠에 접근 할 수 있게 하자!

 

 

<div>

구조적 특별한 의미 없음.

스타일 또는 스크립트 목적으로 컨텐츠 분리 위해 사용

HTML5 이전에는 섹션 요소가 많지 않아 <header>나 <article> 분리 용도로 사용함.

-> but! HTML5에서는 이전 버전과 달리 용도에 따라 구분하여 사용할 수 있는

    다양한 특성의 섹션 요소가 생겼기 때문에 <div>는 단순 구분 의미 목적으로 사용해야 함

 

 

 

전역 속성

대부분의 요소에서 속성으로 사용 가능한 전역 속성

 

id 속성 class 속성 title 속성

-HTML 코드 내 유일한 식별자


 -여러 요소에 같은 class 값 가질 수 있음.
-CSS나 JavaScript에서 코드 내 요소들에 동일한 스타일, 작동 적용 위해 사용		 -요소의 조언 정보
-웹 브라우저에서 툴팁으로 표시됨

 

id 속성 ex)

코드 내 요소를 구분할 수 있는 유일한 식별자로 사용한다.

<img id="beforeButton" src="before.jpg">
<img id="nextButton" src="next.jpg>

 

class 속성 ex)

같은 특정을 지닐 요소들에 중복으로 동일한 class 값을 부여할 수 있다.

<p class="yellowText">일학년 입니다. 노락책 모자 입니다. </p>
<p class="yellowText">이학년 입니다. 노란색 모자 입니다.</p>
<p class="greenText">삼학년 입니다. 초록색 모자 입니다.</p>
<p class="greenText">사학년 입니다. 초록색 모자 입니다.</p>
​

 

title 속성 ex)

<ul>
<li title="출구는 오른쪽에 있습니다.">The exit door is on the right.</li>
</ul>

 

 

 

내용은 모두 개인 공부 기록 용이기에 부족한 부분이나 내용상 오류가 있을 수도 있습니다.
참고용으로 보시기 바랍니다.
혹 잘못된 내용이 있을 시 댓글 남겨주시면 수정하도록 하겠습니다.