02-2 디스플레이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>


    <style>
        /*
        박스 관련속성
        width, height은 블록에만 줄 수 있습니다.


        */
        .abox div {
            display: inline; /*배치구도를 - 인라인*/
            /* width: 100px ; 박스관련속성은 inline에서 사용 불가 */
        }
        .bbox span, 
        .bbox strong,
        .bbox b {
            display : block; /*배치구도를 -블럭 */
            /* height : 100px; */
        }

        .cbox {
            display:none; /*안보이게*/
        }

        .dbox a{
            display : inline-block ; /*인라인(가로)배치를 하되 , 블럭속성을 받게함*/
            width:200px;
            height: 100px;

            text-align : center;
            vertical-align: center;
            line-height: 100px;
            border : 1px solid #777;
            color:black;
            text-decoration: none;
         }
    </style>
</head>
<body>
    
    <div class = "abox">
        <div>블럭</div>
        <div>블럭</div>
        <div>블럭</div>
        <div>블럭</div>
        <div>블럭</div>
    </div>

    <div class = "bbox">
        <span>인라인</span>
        <strong>인라인</strong>
        <b>인라인</b>
    </div>

    <div class = "cbox">
        디스플레이 
    </div>

    <div class = "dbox">
        <a href="#">인라인</a>
        <a href="#">인라인</a>
        <a href="#">인라인</a>
    </div>
</body>
</html>

블럭은 원래 박스속성이고, (세로 배치)

인라인의 크기는 컨텐츠의 크기인데 (가로배치)

display : 로 블럭속성, 인라인 속성을 강제로 줄 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {padding:0; margin:0;}
        ul , li {list-style: none;}

        .gnb { 
            text-align : center;
            /* gnb안 박스도 센터로 갔다
                글자도 가운데로 갔다(a태그) */
                background-color: black;
            
        }
        .gnb > li {display : inline-block;}

        .gnb > li > a {
            display : block ; /*박스 크기를 위해 a를 blcok으로*/
            width : 100px;
            height : 100px;
            line-height: 100px;
            text-decoration: none;
            color:#fff;
           
        }
        .gnb>li>a:hover{
            background-color: #333;
        }

        .gnb2 > li > a:hover {
            background-color: #333;
        }
        .gnb2 > li > a {
            display : block ;
            width : 100px;
            height : 100px;
            line-height : 100px;
            text-decoration: none;
            color:#fff;
            text-align: center;
        }
        .gnb2 > li {
            display : inline-block ; 
          
        }
        .gnb2 {
            text-align: right;
            background-color: black;
        }
        header {
            background-color: black;
            text-align: center;
        }
        
        
    </style>
</head>
<body>

    
    <!-- <header>
        <nav class = "nav">
            <ul class = "gnb">
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
            </ul
        </nav>

    </header> -->

      <header>
        <img src = "img/생선만 골라먹는 아기 고양이.jpg" alt="고양이">
        <nav class = "nav2">
            <ul class = "gnb2">
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
            </ul>
        </nav>

    </header>
</body>
</html>

<li> 태그는 블록속성이지만 메뉴 가로배치를 위해 inline 또는 inline-block 속성을 주면

우리가 평소에보는 메뉴 속성이 뜬다

'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글

패딩과 마진 (1)	2024.01.26
03백그라운드 (0)	2024.01.26
02-1 폰트,오버플로우 (0)	2024.01.26
01. 선택자 (1)	2024.01.24
블럭-인라인 ,스타일시트 (1)	2024.01.24