티스토리 뷰

HTML5

그룹 컨텐츠 요소

nc2u 2018. 10. 27. 12:01

  • <p> : 문단, p 요소 보다 더 적합한 요소가 있을 때에는 해당 요소를 사용함
  • <blockquote> : 다른 소스로부터 가져온 인용 섹션. 인용된 소스의 URL 주소가 있다면 cite 속성으로 표시
  • <pre> : 형식화된 텍스트 블록을 표현
  • <hr> : 문단 레벨에서 주제의 분리, 마침 요소 없이 단독으로 사용
  • 목록

– 순서가 있는 목록 : 순서가 바뀌면 의미가 바뀌는 목록
<ol> 요소로 정의
<li> 요소가 목록 아이템을 정의
– 순서가 없는 목록  : 목록 아이템이 말머리 기호로 시작
<ul> 요소로 정의
<li> 요소가 목록 아이템을 정의
– 정의 목록  : 사전식 정의를 위해 사용
<dl> 정의 목록 요소
<dt> 정의 목록 제목 요소
<dd> 정의 목록 데이터(값) 요소

  • <figure> : 사진, 일러스트, 비디오 등을 표시
  • <figcaption> : figure요소 내용에 대한 캡션, <figure>요소 내부에서 사용
  • <div> : 스타일 또는 스크립트 목적으로 콘텐츠를 분리하기 위해 사용
  • 전역 속성

– 대부분의 요소에서 속성으로 사용 가능한 전역 속성
– id 속성은 HTML 코드 내에 유일한 식별자
– class 속성은 HTML 코드 내에 같은 값을 다수 가질 수 있음
– class 속성은 css 나 자바스크립트에서 HTML 코드 내 여러 요소에 동일한 스타일 또는 작동을 적용하기 위해 사용
– title 속성은 요소의 조언 정보를 나타내며 웹 브라우저에서 툴팁으로 표시

  • 텍스트 관련 요소 : 인라인 레벨 요소

– <a> 하이퍼링크
href 속성으로 링크 경로를 지정
target 속성은 어떤 윈도우에서 링크가 열릴지 결정
_self : 현재의 웹 브라우저 창에서 링크가 열림
_parent : 현재의 웹 브라우저 창의 부모 창이 있다면 그 부모 창에서 링크가 열림
_top : 최상위 웹 브라우저 창에서 링크가 열림
_blank : 새로운 웹 브라우저 창을 생성하고 링크가 열림
– <em> : 내용을 강조

  • <strong> : 내용이 중요함을 나타냄
  • <q> : q 요소는 인용을 나타내는 인라인 요소
  • <cite>  : 책, 수필, 시, 대본, 논문, 그림, 연극, 영화 등과 같은 작품의 제목을 언급하거나 참조 했을 때 사용
  • <abbr> : abbr 요소는 약어 및 두문자어를 나타냄. title 속성을 이용하여 두문자의 원형을 나타냄
  • <i> : 다른 언어 표시나 영문에서 이텔릭체로 표현하는 숙어인용, 분류학 등에 사용
  • <b> : b요소는 의미 있는 중요성을 부가하지 않고 눈에 띄게 하기 위해 사용
  • <sup>, <sub>

– sup 요소는 위첨자를 나타낸다.
– sub 요소는 아래첨자를 나타낸다.

  • <span> : 인라인 레벨에서 스타일을 적용하거나 스크립트에서 사용하고자 콘텐츠를 분리하는 역할
  • <br> : 마침 요소 없이 사용되며 문단 분리가 아닌 단순 줄바꿈을 표시. <p> 요소 대용으로 사용하면 안됨
  • <img>

– img 요소는 이미지를 의미.
– img 요소는 마침 요소가 없이 단독으로 사용.
– src 속성에 이미지의 경로를 지정.
– alt 속성은 이미지를 대체하기 위한 텍스트. 반드시 사용.



'HTML5' 카테고리의 다른 글

[HTML5] DATA 속성 사용법  (0) 2019.01.26
HTML5의 섹션요소  (0) 2018.10.27
HTML5의 구조  (0) 2018.10.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크