display속성 응용

imjingu·2023년 7월 2일
CSShtml
0

개발공부

목록 보기
22/481
<!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>
        /*
        display : inline : 블록 요소를 인라인 요소로 변경 */
        li {
            border: 2px solid black; /* 테두리 스타일 */
        }
        
        .v_munu {
            list-style: none; /* 목록 항목의 스타일 기호를 없앰 */
        }

        .h_menu {
            display: inline; /* inline 속성으로 변경 */
        }
    </style>
</head>
<body>
    <!-- 속성을 변경하지 않은 세로 메뉴 -->
    <ul>
        <li class="v_munu">세로메뉴01</li>
        <li class="v_munu">세로메뉴02</li>
        <li class="v_munu">세로메뉴03</li>
        <li class="v_munu">세로메뉴04</li>
    </ul>
    <!-- inline 속성으로 변경된 가로 메뉴 -->
    <ul>
        <li class="h_menu">네이버</li>
        <li class="h_menu">다음</li>
        <li class="h_menu">쿠팡</li>
        <li class="h_menu">구글</li>
    </ul>
</body>
</html>

profile
imjingu
이전 포스트

display속성-black, inline

다음 포스트

display속성 응용-1

0개의 댓글