• 회원가입
  • 로그인
  • 구글아이디로 로그인

[intro] HTML - block요소 vs inline요소 ★★★★★ - (블락요소/블럭요소/블록요소 vs 인라인요소) 구별 차이점 비교 (= HTML 요소 성질/특성 종류)

목차
  1. 블럭 (block) 요소
  2. 인라인 (inline) 요소
  3. 인라인블럭 (inline-block) 요소
  4. 예제: block 요소 vs. inline 요소
  5. (블럭요소/인라인요소)간 속성변경/중앙정렬

※ 외래어표기법 상, block은 "블록"이 맞음.

 

블럭 (block) 요소 


요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소
  • width, height 값 먹힘. 


[블럭요소군]


  • <address> - 연락처 정보.
  • <article> - 단락 콘텐츠.
  • <aside> - 부가 콘텐츠.
  • <blockquote> - ★ 긴("블록")  인용구.
  • <details> - 상세 정보 위젯.
  • <dialog> - 대화상자.
  • <dd> - 설명 목록의 정의 설명.
  • <div> - ★ 문서 분할.
  • <dl> - 설명 목록.
  • <dt> - 설명 목록의 정의.
  • <fieldset> - 필드 집합의 라벨.
  • <figcaption> - <figure> 태그 안 독립콘텐츠의 제목
  • <figure> - 미디어 콘텐츠 그룹과 설명. (<figcaption> 참고)
  • <footer> - 페이지나 구역의 푸터.
  • <form> - 입력 폼.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - ★ 1~6단계 제목. (숫자 작을수록 글자가 큼.)
  • <header> - 페이지나 구역의 헤더.
  • <hgroup> - 헤더 정보 그룹.
  • <hr> - 수평선(구분선).
  • <li> - ★ 목록의 항목.
  • <main> - 문서에서 하나 뿐인 중심 콘텐츠.
  • <nav> - 탐색 링크를 포함.
  • <ol> - ★ 순서 있는 리스트 (= 정렬된 목록)
  • <p> - ★ 문단.
  • <pre> - 있는 그대로 표시.
  • <section> - 콘텐츠 영역섹션.
  • <table> - ★ 표 (=테이블).
  • <ul> - 순서 없는 리스트 (= 정렬되지 않은 목록.)
 
 

인라인 (inline) 요소

 

요소 안 내용 길이에 좌우, 해당 요소 안 내용 길이 만큼만 너비 차지하는 요소.

  • width, height 값을 줘도 안 먹힘.  display:inline-block 속성 줘야 먹힘.

 


[인라인 요소군]

 

  • <b> 
  • <big>
  • <i> 
  • <small>
  • <tt>
  • <abbr> 
  • <acronym> 
  • <cite>
  • <code>
  • <acronym> 
  • <cite>
  • <code>
  • <dfn>
  • <em>
  • <kbd> 
  • <em> 
  • <kbd> 
  • <strong> 
  • <samp> 
  • <var>
  • <a> 
  • <bdo>
  • <br>  
  • <map> 
  • <object> 
  • <q>
  • <script>
  • <span
  • <sub> 
  • <sup>
  • <label>

 

 

인라인블럭 (inline-block) 요소

 

inline 특징 (= 옆으로 나열) + block 특징 (= 너비높이지정 가능)

 



  • <button>
  • <img>
  • <iframe>
  • <input> 
  • <select>
  • <textarea>

 

 

예제: block 요소 vs. inline 요소

 

<style>

* {color:white; margin:10px;}

div {background:red; width:300px; height:100px;}

span {background:blue; width:300px;  height:100px;}

</style>


<div>block 요소1: 홈짱닷컴 Homzzang.com</div>

<div>block 요소2: 홈짱닷컴 Homzzang.com</div>

<span>inline 요소1 : 홈짱닷컴 Homzzang.com</sapn>

<span>inline 요소2 : 홈짱닷컴 Homzzang.com</sapn>

 

결과보기

 
 

(블럭요소/인라인요소)간 속성변경/중앙정렬

 

블럭요소, 인라인요소 간 속성변경

 

(블럭요소 + 인라인요소 ) 중앙정렬

https://homzzang.com/b/css-282  

 

박스요소 + 아이템요소

https://homzzang.com/b/html-1

 

HTML5 경우, 인라인요소가 블럭요소를 포함 불가.

(예)

<h2><a href="//homzzang.com">홈짱닷컴</a></h2> (O)

<a href="//homzzang.com"><h2>홈짱닷컴</h2></a> (X)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012