HTML 인라인 요소, 블록요소, 인라인블록

인라인(inline) 요소

- 한줄에 여러개 배치

- 기본 너비값 = 컨텐츠 width값

- 크기값을 가질 수 없음

- 상-하 margin X (좌우 O)

(text서식)

 

블록(block) 요소

- 한줄에 only One

- 기본 너비값 = 100%

- 크기값 O

- 상하좌우 margin O

(레이아웃)

 

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

- 한줄에 여러개

- 기본 너비값 = 컨텐츠 width값

- 크기값 O

- 상하좌우 margin O

 

 

인라인	블록	인라인-블록
span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, abbr, time	div, p, table, blockquote, ul, ol, li, dl, dd, table, tr, td, th, form, hr, h1~h6, header, nav, footer, main, section, article, asid, figure, figcaption, summery, details, address	img, input, button, textarea, select, Font Icon(대부분), video, audio, iframe

 

---

예시와 함께

인라인 요소

인라인 요소의 특징을 한 번 알아보자

<a href="http://www.naver.com">네이버</a>
<a href="http://www.google.com">구글</a>
<a href="http://www.daum.net">다음</a>

a { /*토막상식 : a태그는 유일하게 body의 컬러지정 따르지 않음*/
    color: black;
    text-decoration: none;
    border: 1px solid red;
}

인라인요소 중에 하나인 a태그이다.

width와 height 값을 따로 지정하지 않고 border 속성을 주었을 때

content의 너비에 맞게 윤곽선이 생긴 것을 알 수 있다. (기본 너비값= 컨텐츠 width값)

 

a { 
    color: black;
    text-decoration: none;
    border: 1px solid red;
    width: 400;
    height: 300px;
    margin: 50px;
}

크기 값을 지정하고 margin값을 넣어보았다.

width, height는 적용이 되지 않은 모습이고, (크기값을 가질 수 없음)

margin 값은 하나를 넣었을 때 상-하-좌-우 가 동일하게 적용이 되어야 하지만

좌,우 만 적용이 되었다. (상-하 margin X (좌우 O))

---

블록 요소

이번에는 블록요소!

<div></div>
<div></div>
<div></div>

div {
    border: 1px solid red;
}

블록 요소인 div태그이다.

border 속성만 주고 크기 값을 지정하지 않았는데

width의 기본값이 100%로 지정되어 있는 것을 알 수 있다. (기본 너비값 = 100%)

 

div {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    margin: 50px
}

크기 값을 넣어주었다. (크기값 적용 가능)

인라인 요소와 달리 잘 적용이 되었고, 각 요소가 세로로, 한 줄에 하나씩 배치되어있다.

또한 margin값이 상하 좌우로 동일하게 들어간 것을 알 수 있다. (상하좌우 margin O)

---

인라인-블록

마지막으로 인라인-블록 요소

<img src="images/google.png" alt="">
<img src="images/naver.png" alt="">
<img src="images/daum.png" alt="">

img {
    border: 1px solid red;
}

인라인-블럭 요소 중 하나인 img태그이다.

border특성만 준 상태인데

3개의 이미지가 가로로 배치되어있고, (한줄에 여러개)

윤곽선이 이미지에 딱 맞게 설정이 되어있다. (기본 너비값 = 컨텐츠 width값)

 

img {
    border: 1px solid red;
    height: 50px;
    width: 200px;
    margin: 20px;
}

이번엔 크기 값도 지정하고, margin값을 주었다.

width, height 값이 적용이 된 모습이고, (크기값 O)

margin도 상하좌우가 동일하게 적용이 되었다. (상하좌우 margin O)

 

---

3개의 요소를 서로서로 변환?!

 

지금까지 3가지 종류의 요소를 알아보았는데

이 세가지 요소를 변환을 하며 활용할 수 있다.

 

바로 display 속성을 이용하는 것!

 

display에 주로 사용하는 값

: block, inline-block, inline, none, flex

 

예시

<a href="http://www.google.com">구글</a>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.com">다음</a>

a {
    color: #000;
    text-decoration: none;
    border: 1px solid rgb(201, 201, 201);
}

 

인라인 요소인 a태그이다.

이것을 display를 이용해 블록 요소로 바꾸어보면?

a {
    color: #000;
    text-decoration: none;
    border: 1px solid rgb(201, 201, 201);
    display: block;
}

 

블럭요소의 특징인 한 줄에 하나, width 기본값 100%가 적용된 모습이다.

a {
    color: #000;
    text-decoration: none;
    border: 1px solid rgb(201, 201, 201);
    display: block;
    width: 200px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
}

 

위처럼 블록요소로 바꿔서 크기값, 상-하 margin 등을 적용할 수 있다.

 

하지만 블록요소는 가로로 배치를 할 수 없다. 

 

이번엔 인라인-블록 요소로 바꾸어보면?

a {
    color: #000;
    text-decoration: none;
    border: 1px solid rgb(201, 201, 201);
    display: inline-block;
    width: 200px;
    margin: 5px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
}

 

가로로 잘 배치가 된 것을 알 수 있다.

 

 

이런 식으로 자신이 구현하고 싶은 방식대로

인라인, 블록, 인라인-블록을 선택하면 된다!