블록 레벨 요소
- 마크업을 할 때 줄이 바뀌는 특성을 가지고 있다.
<body>
<h1>블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가진다.</h1>
<h2>블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가진다.</h2>
</body>
- 텍스트(문자) 와 인라인 요소를 자식요소로 포함할 수 있다.
- 블록 레벨 요소를 블록 레벨 요소에 포함할 수 있는 경우와 없는 경우가 있다.
- 대표적으로 <h>,<p>,<div>,<address>,<ol>,<ul>,<dl>,<table>,<form>,<header>,<section>,<footer>,<nav>,<article>,<aside> 등이 있다.
인라인 요소
- 줄바꿈이 일어나지 않는다.
<a>
- 줄바꿈이 일어나지 않는다.
- 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다.
- 블록 레벨 요소를 자식 요소로 포함할 수 없다.
</a>
<a>
- 줄바꿈이 일어나지 않는다.
- 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다.
- 블록 레벨 요소를 자식 요소로 포함할 수 없다.
</a>
- 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다.
- 블록 레벨 요소를 자식 요소로 포함할 수 없다.
- 대표적으로 <a>,<img>,텍스트 관련 요소(<em>,<strong>,<mark>,<b>,<small>,<sub>,<sup>),<input>,<select>,<label>,<span>,
기본 요소
제목<h1>~<h6>
- 블록 레벨 요소
- html문서에서 제목을 정의할 때 사용하는 태그
- <h1>~<h6> 태그는 블록 레벨 요소는 포함할 수 없다.
문단<p>
- 블록 레벨 요소
- html문서에서 단락을 정의할 때 사용하는 태그
- 블록 레벨 요소를 포함할 수 없다.
- 텍스트의 행을 바꿀 때 <br>태그를 사용
주소<address>
- 블록 레벨 요소
- html문서의 소유자나 조직에 대한 연락처 정보를 정의할 때 사용
- 일부 블록 레벨 요소를 포함할 수 없다.
- 보통 <footer>태그 내에 많이 사용
- 기본 이텔릭으로 표현된다.
<address>
- html문서의 소유자나 조직에 대한 연락처 정보를 정의할 때 사용<br>
- 일부 블록 레벨 요소를 포함할 수 없다.
</address>
링크<a>
- 인라인 요소
- 다른 html 문서의 이동이나 동일한 문서 내에서 이동, 이메일 주소등에 사용
- href 속성은 링크의 목적지를 지정할 수 있다.
- html5에서 블록레벨 요소도 포함 할 수 있게 되었다. 다만 <input>,<button>,다른링크<a>는 포함할 수 없다.
<a href="http://google.com", target="_blank">href 속성은 링크의 목적지를 지정할 수 있다.</a>
이미지<img>
- 인라인 요소
- html문서에 이미지를 삽입할 때 사용
- <img>태그의 필수속성 src 속성은 불러올 이미지의 경로를 지정하고 상대경로 및 절대경로 모두 적용가능
- 웹 접근성을 위해 이미지를 설명하는 alt 속성을 필수적으로 정의할 것
<img src = "http://live.lge.co.kr/wp-content/uploads/2020/06/AI%EC%9A%A9%EC%96%B4%EC%82%AC%EC%A0%84_00.jpg"
witdh = "400px", height="200" alt = "인공지능">
'AI > Web' 카테고리의 다른 글
| HTML5 미디어 요소, 기타 요소 (0) | 2021.08.11 |
|---|---|
| HTML5 그룹 요소, 구조 관련 요소 (0) | 2021.08.10 |
| HTML5 목록, 표, 폼 관련 요소 (0) | 2021.08.10 |
| HTML5 텍스트 관련 요소 (0) | 2021.08.09 |
| HTML5 기본 구성 (0) | 2021.08.09 |
