Post

block, inline-block, inline 차이

Posted Updated
Preview Image
By sunhew 18 min read

HTML & CSS

해당 포스팅에서는 block, inline-block, inline 차이에 대해 다룹니다. 꽤 많이 길기에 오른쪽에 있는 목차를 활용해 주세요.

HTML & CSS 목차

  • 웹 표준, 웹 접근성
  • 반응형 작업
  • 레거시 코드, IR 효과 시멘틱 태그
  • CSS 우선순위, Position 속성
  • block, inline-block, inline 차이 ✔️
  • data 속성
  • seo, 최적화 방법, ID vs class 차이


Block

Block_의 개념

“Block“은 HTML과 CSS에서 주로 사용되는 용어 로, 두 가지 주요 개념을 설명합니다. HTML 요소의 디스플레이 속성과 그로 인해 발생하는 레이아웃 동작 입니다. 블록 요소는 웹 페이지의 구조를 정의 하고, CSS를 통해 레이아웃과 스타일을 조정 하는 데 중요한 역할을 합니다.

HTML 블록 요소

항상 새로운 줄에서 시작

  • 블록 요소는 다른 콘텐츠와 구분 되어 항상 새로운 줄에서 시작 합니다.
  • 블록 요소 하나가 끝나면 다음 블록 요소는 새로운 줄에서 시작 합니다.

전체 너비를 차지

  • 블록 요소는 기본적으로 부모 요소의 전체 너비를 차지 합니다. 이로 인해 같은 줄에 다른 블록 요소가 있을 수 없습니다.

내부에 다른 블록 및 인라인 요소를 포함할 수 있음

  • 블록 요소는 다른 블록 요소와 인라인 요소를 포함 할 수 있습니다.

주요 블록 요소

1
2
3
4
5
6
7
8
9
10

<div></div>
<p></p>
<h1></h1>
<ul></ul>
<ol></ol>
<li></li>
<section></section>
<article></article>
<nav></nav>
<footer></footer>

CSS 디스플레이 속성

CSS에서 display 속성을 사용하여 요소의 디스플레이 유형을 지정 할 수 있습니다. display: block 은 요소를 블록 레벨로 지정 합니다.

1
2
3

.block-element {
    display: block;
}

블록 요소의 레이아웃 특성

차지하는 공간

  • 블록 요소는 부모 요소의 전체 너비를 차지합니다. 예를 들어, <div>는 기본적으로 부모의 전체 너비 를 가집니다.

크기 조정

  • width 와 height 속성을 사용하여 블록 요소의 크기를 조정할 수 있습니다.
  • 기본적으로 너비는 100% 이며, width 속성을 통해 이를 조정할 수 있습니다.
  • width: 50% 로 설정하면 부모 요소 너비의 50%를 차지 합니다.

패딩, 마진 및 경계

  • 블록 요소는 패딩, 마진, 경계(border)와 같은 박스 모델 속성을 적용 할 수 있습니다. 이러한 속성은 요소의 레이아웃과 공간 배치를 관리 하는 데 사용됩니다.
1
2
3
4
5
6
7

.block-element {
    display: block;
    width: 50%;
    padding: 10px;
    margin: 20px auto;
    border: 1px solid #000;
}

내부 요소 배치

  • 블록 요소는 내부에 포함된 다른 블록 요소와 인라인 요소를 정렬하고 배치 합니다.
  • 블록 요소 안에 포함된 요소들은 순서대로 쌓입니다(위에서 아래로).


인라인 요소와의 차이점

인라인 요소

  • 인라인 요소는 콘텐츠의 흐름을 유지 하며, 주변의 다른 콘텐츠와 같은 줄에 배치 됩니다.
  • 주로 텍스트와 관련된 요소들이 인라인 요소입니다. 예를 들면 <span> , <a> , <strong> , <em> 이 있습니다.

블록 요소

  • 블록 요소는 항상 새로운 줄에서 시작 하며, 전체 너비를 차지 합니다. 주로 구조적인 요소 들이 블록 요소 입니다. 예를 들면 <div> , <p> , <h1> 이 있습니다.


블록 요소 예시 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Element Example</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 20px;
        }

        .block-element {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="block-element">Block Element 1</div>
        <div class="block-element">Block Element 2</div>
        <div class="block-element">Block Element 3</div>
    </div>
</body>

</html>

위의 예시예서 .block-element 클래스는 display: block 속성을 사용하여 블록 요소로 지정 되었습니다. 각 블록 요소는 부모 컨테이너의 전체 너비를 차지 하며, 아래로 쌓입니다.


inline-block

inline-block의 개념

inline-block 은 CSS에서 요소의 display 속성을 지정할 때 사용하는 값 중 하나로, 인라인 요소와 블록 요소의 특성을 모두 가집니다. 이를 통해 요소를 블록처럼 취급하면서도 인라인 요소처럼 같은 줄에 배치 할 수 있습니다.

주요 특성

같은 줄에 배치

  • inline-block 요소는 인라인 요소처럼 같은 줄에 배치 됩니다. 이는 여러 inline-block 요소들이 한 줄에 나란히 배치될 수 있음을 의미 합니다.

블록 요소처럼 크기 조절 가능

  • inline-block 요소는 블록 요소처럼 width 와 height 속성을 사용할 수 있으며, 블록 요소처럼 패딩(padding), 마진(margin), 경계(border) 등의 박스 모델 속성을 적용 할 수 있습니다.

인라인 요소와의 차이

  • 인라인 요소 는 width 와 height 속성을 무시 하지만, inline-block 요소는 이를 존중 합니다. 또한 인라인 요소는 주로 텍스트 콘텐츠와 함께 사용 되며, 블록 요소는 구조적인 레이아웃을 구성 합니다.

inline-block 사용예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline-Block Example</title>
    <style>
        .inline-block-element {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #000;
            background-color: lightblue;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div class="inline-block-element">Box 1</div>
    <div class="inline-block-element">Box 2</div>
    <div class="inline-block-element">Box 3</div>
</body>

</html>

위의 예제에서 .inline-block-element 클래스는 display: inline-block 속성을 사용합니다. 이 속성 덕분에 요소들이 같은 줄에 나란히 배치되며, 각 요소는 지정된 너비와 높이 를 가집니다.

주요 속성 설명

width와 height

  • inline-block 요소는 블록 요소처럼 너비와 높이를 지정 할 수 있습니다.

padding, margin, border

  • 모든 박스 모델 속성이 적용됩니다.

수직 정렬(vertical-align)

  • 인라인 요소와 마찬가지로 수직 정렬을 조정 할 수 있습니다.
  • 기본값은 baseline 이지만, top , middle , bottom 등 다양한 값을 사용 할 수 있습니다.
  • 예를 들어, 위의 예제에서 vertical-align: top 을 사용하여 요소들이 상단에 정렬 되도록 했습니다.

인라인 요소와 블록 요소와의 비교

특성inline 요소block 요소inline-block 요소
줄 바꿈같은 줄항상 새로운 줄에서 시작같은 줄
크기 속성무시 ( width , height 적용 불가)적용 가능적용 가능
박스 모델 속성일부 적용 가능 ( padding , margin 중 좌우만)적용 가능적용 가능
수직 정렬vertical-align 가능불가능vertical-align 가능

활용 사례

inline-block 은 다양한 레이아웃을 구성하는 데 유용 합니다. 특히 다음과 같은 경우에 많이 사용됩니다

네비게이션 바

  • 메뉴 항목들을 나란히 배치할 떄 유용 합니다.

이미지 갤러리

  • 이미지나 썸네일을 나란히 배치하여 갤러리를 구성할 때 사용 됩니다.

카드 레이아웃

  • 카드형 레이아웃을 만들 때 각 카드를 inline-block 으로 설정하면, 카드를 한 줄에 여러 개 배치 할 수 있습니다.

폼 요소

  • 폼의 입력 요소들을 한 줄에 배치할 때 사용 됩니다.

주의 사항

화이트 스페이스 문제

  • HTML 코드에서 inline-block 요소들 사이에 공백이 있으면 그 공백이 요소들 사이에 간격으로 적용 됩니다. 이를 해결하기 위한 몇 가지 방법은 다음과 같습니다

    • 요소들 사이의 공백을 제거하거나 HTML 태그를 붙여 씁니다.
    • 부모 요소의 font-size 를 0으로 설정 하고, 각 요소에 필요한 font-size 를 개별적으로 지정 합니다.
    • CSS 그리드 또는 플렉스 박스 레이아웃을 고려 할 수도 있습니다.

브라우저 호환성

대부분의 최신 브라우저는 inline-block 을 잘 지원하지만, 오__래된 브라우저에서는 일부 문제__ 가 있을 수 있습니다. 최신 CSS 레이아웃 기술과의 호환성을 확인 해야 합니다.


inline

inline의 개념

inline-block 은 CSS에서 요소의 display 속성을 지정할 때 사용하는 값 중 하나로, 인라인 요소 를 나타냅니다. 인라인 요소는 블록 요소와 달리 같은 줄에 다른 요소들과 함께 배치 되며, 주로 텍스트와 관련된 작은 요소들에 사용 됩니다.

주요 특성

같은 줄에 배치

  • 인라인 요소는 다른 인라인 요소들과 함께 같은 줄에 배치 됩니다. 요소의 크기는 그 내용에 따라 결정됩니다.

크기 조절 제한

  • width 와 height 속성을 사용할 수 없습니다. 인라인 요소의 크기는 주로 그 내용에 의해 결정됩니다.

박스 모델 속성 제한

  • padding 과 margin 속성은 사용할 수 있지만, 상하 패딩과 마진은 요소의 레이아웃에 영향을 미치지 않습니다. 또한 경계(border) 속성은 적용할 수 있지만, 요소의 레이아웃을 변경하지 않습니다.

주요 인라인 요소

HTML에서 자주 사용되는 인라인 요소는 다음과 같습니다.

코드설명
<a>하이퍼링크를 정의
<span>일반 텍스트를 그룹화
<strong>중요 텍스트를 강조
<em>텍스트를 이탤릭체로 강조
<img>이미지를 삽입
<code>코드 조각을 나타냄
<br>줄 바꿈을 삽입
<label>폼 요소에 대한 라벨을 정의

사용 예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Elements Example</title>
    <style>
        .inline-element {
            color: red;
            border: 1px solid black;
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <p>This is a <span class="inline-element">span element</span> within a paragraph.</p>
    <p>Here is an <a href="#" class="inline-element">anchor element</a> in another paragraph.</p>
</body>

</html>

위의 예제에서 .inline-element 클래스는 span 과 a 요소에 적용 됩니다. 이들은 모두 인라인 요소이기 때문에 다른 텍스트와 같은 줄에 배치 됩니다.

주요 속성 설명

1
2
3
4
5
6

.inline-element {
    display: inline;
    padding: 10px;  /* 좌우 패딩만 레이아웃에 영향을 줌 */
    margin: 10px;  /* 좌우 마진만 레이아웃에 영향을 줌 */
    border: 1px solid #000; /* 경계는 요소 주위에 나타남 */
}

display: inline

  • 인라인 요소를 지정하는 기본 display 값입니다.

width와 height

  • 인라인 요소는 width 와 height 속성을 무시 합니다. 대신, 요소의 크기는 그 내용에 따라 결정 됩니다.

박스 모델 속성

  • 인라인 요소에 padding 과 margin 을 적용할 수 있지만, 상하 패딩과 마진은 요소의 레이아웃에 영향을 미치지 않습니다.
  • border 속성은 요소 주위에 경계를 그릴 수 있지만, 상하 경계는 요소의 크기를 변경하지 않습니다.

인라인 요소와 블록 요소 비교

특성inline 요소block 요소
줄 바꿈같은 줄에 다른 요소들과 함께 배치항상 새로운 줄에서 시작
크기 속성무시 ( width height 적용 불가)적용 가능
박스 모델 속성일부 적용 가능 ( padding margin 중 좌우만)적용 가능
수직 정렬vertical-align 가능불가능
콘텐츠의 영향요소의 내용에 따라 크기 결정부모 요소의 전체 너비를 차지

활용 사례

인라인 요소는 주로 텍스트와 관련된 작업에서 유용합니다. 다음은 인라인 요고가 주로 사용되는 몇 가지 상황입니다.

텍스트 강조

  • 특정 단어나 문장을 강조 하기 위해 <strong> , <em> 과 같은 요소를 사용합니다.

링크

  • 텍스트나 이미지를 링크로 만들기 위해 <a> 요소를 사용합니다.

텍스트와 이미지 혼합

  • 텍스트와 함께 이미지를 배치할 때 <img> 요소를 사용합니다.

폼 레이블

  • 폼 요소와 관련된 텍스트를 설명 하기 위해 <label> 요소를 사용합니다.
html & css
html&css html css block inline-block inline 차이
This post is licensed under CC BY 4.0 by the author.