HTML - CSS, 인라인-블록

Jan 15, 2024

Contents

배경 색, 글자 크기 인라인(inline) , 인블록-블록(inline-block)

CSS 는 Cascading Style Sheets 로 문서를 디자인할 때 사용한다.

CSS 가 없다면 흰 배경에 검은 글자만 있는 형태로 출력이 된다. 따라서 CSS를 잘 활용해야 멋진 웹사이트를 만들 수 있다.

배경 색, 글자 크기


<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>가</div>
</body>

</html>

<body> 에 <div> 태그를 설정했다. <div> 는 블록으로 좌우 전체 칸을 차지한다.

<div> 태그는 <head> 의 <style> 태그를 통해 값을 설정할 수 있다.

background-color 는 블록의 배경색, font-size 는 글자 크기를 설정할 수 있다.

블록의 크기를 확인해보면, 세로 길이는 지정한 값이지만 가로값은 설정할 수 없다.

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

웹사이트 디자인에서 중요한 것은 원하는 사이즈 크기에 내용을 넣는 것이다. 그렇게 하지 않으면 모니터 크기에 따라 웹사이트 디스플레이가 달라지기 때문이다.


<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: red;
            font-size: 20px;
            display: inline;
        }
    </style>
</head>

<body>
    <div>가나다라</div>
    <div>가나다라</div>
    <div>가나다라</div>
    <div>가나다라</div>

</body>

<head> 의 <style> 에 display: inline 를 추가하였다. 이렇게 되면 <div> 는 블록이지만 인라인처럼 사용할 수 있다. 하지만 가로 세로 길이가 50px 임에도 내용물의 크기 만큼 표시된다.

이때 inline-block 을 사용하면 된다.


div {
            width: 50px;
            height: 50px;
            background-color: red;
            font-size: 20px;
            display: inline-block;
        }
    </style>