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

[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)

분류 제목
게시물이 없습니다.
24/18
목록
찾아주셔서 감사합니다. Since 2012