블록 레벨 요소와 인라인 요소
블록 레벨 요소
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. <h1>, <h2>,<p> 요소들은 블록의 성질을 가지고 있어서 화면상 줄 바꿈 현상이 일어나는 것을 볼 수 있습니다.
인라인 요소(inline element)
인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력 됩니다. <strong>, <span> 요소들은 인라인 성질을 가지고 있어 행이 바뀌지 않고 한 줄로 출력됩니다.
블록 레벨 요소와 인라인 요소의 특성
마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 요류를 방지할 수 있습니다. 인라인 요소에는 블록 레벨 요소가 지식으로 올 수 없는 문법적 특징이 있습니다. <span>은 인라인 요소이고 <h1>은 블록 레벨 요소입니다. 즉,인라인 요소의 자식 요소로 블록 레벨 요소를 마크업 했기 때문에 문법 에러가 발생합니다.
블록 레벨 요소 특징
1.블록 레벨 요소는 줄 바꿈이 일어납니다.
2.블록 레벨 요소는 텍스트와 인라인 요소를 자식으로 포함 할 수 있습니다.
3.블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다.
인라인 요소 특징
1.인라인 요소는 줄바꿈이 일어나지 않습니다.
2.인라인 요소는 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다.
3.인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.
블록레벨요소와 인라인요소는 콘텐츠 카테고리로 대체 되었다.
| 컨텐츠 종류 | 내용 | 해당요소 |
|---|---|---|
| 메타데이터 콘텐츠 | <head> 태그안에서 포함되는 요소들로 콘텐츠의 표현 동작 설정 문서간 관계를 설정 정보전달을 포함한 요소를 의미 | <base>,<linka>,<meta>,<noscript>,<script>,<style>,<title> |
| 플로우 컨텐츠 | <body>태그 안에 포함되는 대부분의 요소들로 내용흐름에 관한 요소를 의미 | <h1>,<h2>,<h3>,<h4>,<h5>, <h6><adress>,<p>,<a>,<img>,<ul>,<ol>, <dl>,<table>,<form> |
| 섹션 콘텐츠 | heading과 footer의 범위를 정의하는 요소를 의미 | <artticle>,<aside>,<nav>,<section> |
| 헤딩 콘텐츠 | 섹션의 헤더를 정의하는 요소를 의미 | |
| <meta> | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. |
| <meta> | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. |
| <meta> | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. | * HTML 문서의 설명, 키워드,문서의 작성자 등을 지정합니다. |