블록 레벨요소 (Block-level Elements)
블록 요소는 하나의 박스라고 생각해 박스안에 데이터를 넣는거지 ! 그러니깐 내용물을 넣어야해
<address> - 연락처 정보
<article> HTML5 - (의미있는) 단락 컨텐츠
<aside> HTML5 - 부가 컨텐츠.
<audio> HTML5 - 오디오 플레이어
<blockquote> - 긴 ("블럭") 인용구.
<canvas> HTML5 - 캔버스
<dd> - 정의를 설명.
<div> - 문서의 분할
<dl> - 정의된 목록
<fieldset> - 필드 정의 레이블
<figcaption> HTML5 - 그림 캡션
<figure> HTML5 - 캡션이 포함된 그룹 미디어 컨텐츠 (참고 <figcaption>).
<footer> HTML5 - 페이지나 섹션의 푸터
<form> - 입력 폼
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> - 제목 크기 (1~6)
<header> HTML5 - 페이지나 섹션의 헤더
<hgroup> HTML5 - 그룹 헤더 정보
<hr> - 수평선 (구분선).
<noscript> - 스크립트를 지원하지 않는 컨텐츠의 사용
<ol> - 정렬된 목록
<output> HTML5 - 폼 출력
<p> - 문단
<pre> - 미리 정의된 문자
<section> HTML5 - 웹 문서의 섹션
<table> - 테이블 (표)
<tfoot> - 테이블 푸터
<ul> - 정렬되지 않은 목록
<video> HTML5 - 비디오 플레이어
ex>
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
인라인 요소(Inline Element)
인라인 요소는 그 자체 테그명만 있어도 유추 or 실행이 가능해
<a>
<abbr>
<acronym>
<audio>
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>
ex>
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
둘을 구분해보면 ?
블록 레벨 요소
0. 블록 레벨 요소는 마크업을 할 때 줄이 바뀜
1. 다른 블록 요소 안에 인라인 요소 적재가능.
2 블록 요소 안에 블록요소를 포함할수 있다 ( 일부는 포함 X)
3. 대부분의 블록엘리먼트는 새로운 줄에서 시작. (줄바꿈 O)
4. 사용자가 사이즈 설정 가능 가로, 세로 사이즈 적용 가능
5. 안쪽여백(padding), 바깥쪽여백(margin) 적용가능
인라인 요소
0. 인라인 요소는 마크업을 할때 가로로 정렬
1. 인라인엘리먼트는 전 엘리먼트 바로옆에 붙어서 시작한다.(줄바꿈 X)
2. 인라인 요소 안엔 인라인 요소만 포함가능 ( 인라인요소안에 블록요소 X)
3. 일반적으로 사용자가 크기를 설정 불가 그들이 정해놓은 크기를 그대로 사용(width, height XX) .
예외 input, textarea, select, img
4. 안쪽여백(padding), 바깥쪽여백(margin)이 좌우측만 적용
같이 써보면?
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
문법에러는 발생 & 실행은 가능하지만 줄바꿈 발생
위에처럼 실행은 했지만
display 속성값을 변경하여 인라인 & 블록 설정값을 변경 가능함!