Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

기초공사 (html,css,javascript)

display:none과 visiblity의 차이 본문

html css

display:none과 visiblity의 차이

에스프레소라떼 2023. 7. 21. 10:56

기본적이지만 중요한 것.

//

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display:none과 visiblity차이</title>
    <style>
        .parent{
            width:100px;
            border : 1px solid grey;
        }
        .child_a {
            background-color:lightblue;
        }
         .child_b {
            background-color:lightgreen;
            visibility: hidden;

            /* display:none */
        }
         .child_c {
            background-color:lightpink;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child_a">A</div>
        <div class="child_b">B</div>
        <div class="child_c">C</div>
    </div>
</body>
</html>

 

 

 

 

//

 

저작자표시

'html css' 카테고리의 다른 글

text-align / margin:0 auto  (0) 2022.08.15
'html css' Related Articles more