본문 바로가기
프로그래밍 공부/HTML

[HTML.CSS] display 에 따른 방향

낚시하는도토리 2022. 12. 1. 21:10
반응형

1 . display : inline;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline;        
        }

        #box1{
            background-color: red;
            text-align: center;
        }
        #box2{
            background-color: orange;
            text-align: center;
        }
        #box3{
            background-color: yellow;
            text-align: center;
        }

    </style>
    
</head>
<body>

    <div id="box1">
       <b>박스 1</b> 
    </div>
    <div id="box2">
        <b>박스 2</b>
    </div>
    <div id="box3">
        <b>박스 3</b>
    </div>
    
    
</body>
</html>

2 . display : inline - block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    
    <style>
        div{
            width: 100px;
            height: 100px;
            display: inline-block;        
        }

        #box1{
            background-color: red;
            text-align: center;
        }
        #box2{
            background-color: orange;
            text-align: center;
        }
        #box3{
            background-color: yellow;
            text-align: center;
        }

    </style>
    
</head>
<body>

    <div id="box1">
       <b>박스 1</b> 
    </div>
    <div id="box2">
        <b>박스 2</b>
    </div>
    <div id="box3">
        <b>박스 3</b>
    </div>
    
    
</body>
</html>

3 . display : block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    
    <style>
        div{
            width: 100px;
            height: 100px;
            display: block;        
        }

        #box1{
            background-color: red;
            text-align: center;
        }
        #box2{
            background-color: orange;
            text-align: center;
        }
        #box3{
            background-color: yellow;
            text-align: center;
        }

    </style>
    
</head>
<body>

    <div id="box1">
       <b>박스 1</b> 
    </div>
    <div id="box2">
        <b>박스 2</b>
    </div>
    <div id="box3">
        <b>박스 3</b>
    </div>
    
    
</body>
</html>

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

'프로그래밍 공부 > HTML' 카테고리의 다른 글

[HTML.CSS] 웹 디자인 기능사 실기 JUST쇼핑몰 만들기 1. 큰 틀 잡기  (0) 2022.12.02
[HTML.CSS] float을 이용해 좌우 배치하기  (0) 2022.12.01

'프로그래밍 공부/HTML' Related Articles

티스토리툴바