HTML 블록(block) , 인라인(inline), 인라인 블록(inline-block)

블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.tistory.com/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.

블록 요소 (Block Element)

사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨
- {width: 100%; height: auto;} 와 같은 css 속성을 default로 가진다고 생각하면 됨
width, height로 크기를 지정할 수 있음
padding, margin으로 상하좌우 여백을 지정할 수 있음
여러개의 블록 요소들이 있을때, 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치할 수 있음)
위와 같은 특징으로 블록요소는 보통 레이아웃을 잡을때 자주 사용한다
블록 요소의 종류: div, h1, p

예시 1. div 태그

width 값을 따로 설정하지 않아도, 블록요소는 기본적으로 최대 너비로 설정된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .block1 {
            background-color: tomato;
        }
        .block2 {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="block1">이것은</div>
    <div class="block2">블록 요소입니다</div>
</body>
</html>

예시 2. 블록 요소에 크기 지정

블록 요소는 width나 height 속성으로 임의의 크기로 지정이 가능하다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .block1 {
            width: 300px;
            background-color: tomato;
        }
        .block2 {
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div class="block1">너비 300px</div>
    <div class="block2">높이 200px</div>
</body>
</html>

블록요소는 너비를 아무리 작게 설정해도 가로 영역을 모두 차지하기 때문에 다른 요소가 옆으로 올 수 없다.

예시 3. 블록요소에 padding, margin 값 지정

블록요소는 padding값과 margin 값을 지정하여, 상하좌우에 여백을 넣을 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .block1 {
            padding: 10px;
            background-color: tomato;
        }
        .block2 {
            margin: 20px;
            background-color: yellowgreen;
        }
        .block3 {
            padding: 20px 10px;
            margin: 5px 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="block1">padding</div>
    <div class="block2">margin</div>
    <div class="block3">padding & margin</div>
</body>
</html>

인라인 요소 (Inline element)

너비와 높이를 내부 컨텐츠 크기만큼 설정됨
- {width: auto; height: auto;}와 같은 css 속성을 default로 가진다고 생각하면 됨
width, height로 크기를 지정할 수 없음
padding, margin으로 좌우에만 여백을 지정할 수 있음 (위, 아래는 안됨)
여러개의 인라인 요소가 있을때, 수평으로 쌓임
위와 같은 특징으로 인라인 요소는 보통 Text를 작성할 때 사용한다
인라인 요소의 종류: span, img

예시1. span 태그

인라인 요소인 span 태그로 확인해보면 내용만큼 너비와 높이를 가지게 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .span1 {
            background-color: tomato;
        }
        .span2 {
            background-color: yellowgreen;
        }
        .span3 {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <span class="span1" >이것은</span>
    <span class="span2">인라인 요소</span>
    <span class="span3">입니다.</span>
    <span class="span1" >이것은</span>
    <span class="span2">인라인 요소</span>
    <span class="span3">입니다.</span>
</body>
</html>

예시 2. 인라인 요소에 크기 지정

인라인 요소는 크기를 지정할 수 없기 때문에, width, height로 어떤 값을 주더라도 크기에 영향을 주지 않는다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .span1 {
            width: 100px;
            background-color: tomato;
        }
        .span2 {
            height: 500px;
            background-color: yellowgreen;
        }
        .span3 {
            width: 1000px;
            height: 1200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <span class="span1" >이것은</span>
    <span class="span2">인라인 요소</span>
    <span class="span3">입니다.</span>
    <span class="span1" >이것은</span>
    <span class="span2">인라인 요소</span>
    <span class="span3">입니다.</span>
</body>
</html>

예시 3. 인라인요소에 padding, margin 지정

margin을 지정해보면 위, 아래에는 적용이 안되고, 좌, 우에만 적용이 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .span1 {
            margin: 20px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <span class="span1">margin</span>
    <div>test</div>
</body>
</html>

이번엔 padding 값을 지정해보면 상하좌우에 패딩 값이 들어가게되긴하는데, 위, 아래의 경우는 padding으로 늘어난 부분이 공간을 차지하지 않는다. 따라서, 위, 아래는 의도하는대로 동작하지 않고, 좌, 우에만 padding 값이 제대로 적용이 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .span1 {
            padding: 50px;
            background-color: tomato;
        }
        .span2 {
            background-color: yellowgreen;
        }
        .span3 {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <span class="span1">padding</span>
    <div>인라인 요소에서 padding 값으로 위, 아래 값을 늘려도 공간을 차지하지 않음</div>
</body>
</html>

인라인 블록 요소(Inline-Block Element)

인라인 요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정 된다
블록 요소처럼 width와 height로 너비와 높이를 설정할 수 있음
블록 요소처럼 padding과 margin으로 상하좌우 여백을 지정할 수 있음
인라인 요소처럼 여러개의 인라인블록 요소가 있을때, 수평으로 쌓인다
인라인블록 요소를 생성하려면, css의 {display: "inline-block";}으로 스타일을 적용해야 함

예시 1. 인라인 블록 요소 생성

display 속성에 inline-block 을 추가하여 인라인블록 요소를 생성할 수 있다.

인라인 블록 요소는 인라인 요소처럼 너비와 높이를 컨텐츠 크기만큼 가진다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .inline-block {
            display: inline-block;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="inline-block">인라인 블록</div>
</body>
</html>

예시 2. 인라인 블록 요소에 width와 height 적용

인라인 블록 요소는 width와 height로 너비와 높이를 지정할 수 있음

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .inline-block {
            display: inline-block;
            width: 300px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="inline-block">인라인 블록에 너비, 높이 지정</div>
</body>
</html>

예시 3. 인라인 블록 요소에 margin과 padding 적용

인라인 블록 요소는 margin과 padding 값을 지정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>block, inline, inline-block</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .inline-block {
            display: inline-block;
            margin: 30px;
            padding: 50px 60px;
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div class="inline-block">인라인 블록에 margin, padding 지정</div>
</body>
</html>

저작자표시 비영리 변경금지

'Frontend > HTML, CSS, JS' 카테고리의 다른 글

HTML 문서에 javascript 추가시 주의할 점 (브라우저 구문분석 순서) (0)	2021.12.28
HTML의 기본 문법(속성, 값, 부모/자식 요소, 빈 태그) (0)	2021.12.21
html 문법과 태그의 종류 (0)	2021.12.16
날짜/시간 라이브러리 moment.js 버그? (0)	2021.12.16
웹(Web)에서 HTML, CSS, JS의 역할 (0)	2021.10.27