• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Display</title>
7
    <style>
8
        div {
9
            background-color: ivory;
10
            border: 2px solid black;
11
        }
12
        p.none { display: none; }
13
        p.hidden { visibility: hidden; }
14
    </style>
15
</head>
16
​
17
<body>
18
​
19
    <h1>HTML 요소의 숨기기</h1>
20
    <div>
21
        <p>이 아래의 단락은 display 속성값을 none으로 설정했습니다</p>
22
        <p class="none">이 단락은 display 속성값을 none으로 설정했습니다.</p>
23
    </div><br>
24
    <div>
25
        <p>이 아래의 단락은 visibility 속성값을 hidden으로 설정했습니다.</p>
26
        <p class="hidden">이 단락은 visibility 속성값을 hidden으로 설정했습니다.</p>
27
    </div>
28
    <p>visibility 속성값을 hidden으로 설정하면 눈에 보이지만 않을 뿐 여전히 웹 페이지 내에 존재하게 됩니다!</p>
29
​
30
</body>
31
​
32
</html>