티스토리 뷰

Programming/HTML&CSS

[HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility

Lkt_Programmer 2019. 3. 29. 12:08
반응형

안녕하세요. 저번 포스팅을 마지막으로 CCS 선택자에 대해 공부를 했습니다. 사실 제가 포스팅한 내용 말고도 다른 선택자들이 더 많습니다만 사용 빈도가 높지 않다고 판단하여 따로 포스팅을 하지 않을 생각입니다. 이번 포스팅부터는 CSS 속성에 관해 포스팅을 이어 나갈 생각입니다.



오늘 다룰 내용은 CSS 속성 중 display / opacity / visibility 속성이 되겠습니다. 하나씩 알아보도록 하죠.


  1. display 속성


display 속성은 태그가 화면에 어떤 식으로 보이는지를 지정하는 속성입니다. 앞서 div 태그와 span 태그의 차이를 다루는 포스팅에서 언급한 적이 있는 내용인데요. display 에 사용되는 속성값은 여러개가 있지만 중요한 속성 3개 값만 살펴 보겠습니다.


속성값 

설명 

 block

 태그를 block Box 형태로 지정. 자동 줄 바꿈과 크기 조정 가능

inline 

 태그를 InLine 형태로 지정. 자동 줄 바꿈과 크기 조정 안돔

 inline-block

inline과 block 속성을 섞은 형태로. 자동 줄 바꿈은 안되고 크기 조정은 가능 


block 속성을 default로 가지는 대표적인 태그로 <div> 태그가 있습니다. 마찬가지로 inline 속성을 default로 가지는 대표적인 태그로는 <span> 태그가 있습니다. block 속성의 경우는 흔히 아는 block 처럼 아래로 점점 쌓인다는 개념으로 이해하시면 되고 inline의 경우는 옆으로 쌓인다는 개념으로 이해하시면 됩니다. 아래 샘플 예제로 한 번 살펴 보겠습니다.


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
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>display 속성</title>
    <style>
        .block {
            background-color : red;
            margin-top : 5px;
            width : 100px;
            height : 100px;
        }
        .inline {
            background-color:blue; 
            display : inline;
            width : 100px;
            height : 100px;
        }
        .inline-block {
            background-color : green;
            display : inline-block;
            width : 100px;
            height : 100px;
        }
    </style>
</head>
<body>
    <div class = "block"> Block 영역 1</div>
    <div class = "block"> Block 영역 2</div>
    <div class = "block"> Block 영역 3</div>     <div class = "inline">InLine 영역 1</div>
    <div class = "inline-block"> InLine-Block 영역 1</div>
    <div class = "inline">InLine 영역 2<



▼ 각 display 속성값 별로 특징을 살펴보기 위해 body 영역 안에 <div> 태그만 작성하고 CSS 속성으로 display 속성값을 변경하여 보았습니다. 아래 웹 페이지에서 나오는 형태를 한 번 살펴 보겠습니다.


▼ block 속성값을 가지는 붉은 색 영역의 경우 block 형태로 아래로 쌓이듯이 자리를 잡고 있습니다. 게다가 width와 height로 인한 사이즈 변경이 적용이 된 것을 확인 할 수 있습니다. 파랑색 영역과 초록색 영역의 경우 각각 inline 속성과 inline-block 속성값을 가지는 div 태그로서 옆으로 쌓이고 있습니다. 한 가지 차이점으로는 inline 속성값을 가지는 파랑색 영역의 경우 CSS 사이즈 속성을 부여했음에도 불구하고 사이즈 변경이 되지 않는 것을 확인 할 수 있습니다. 반면 inline-block 속성값을 가지는 초록색 영역의 경우는 사이즈 변경이 적용 된 것을 확인 할 수 있습니다.




  2. Opacitry 속성


opacity 속성은 투명도를 조정하는 속성입니다. 간단한 속성이니 바로 샘플 예제를 살펴보죠. 


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
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>opacity 속성</title>
    <style>
        .block {
            background-color : red;
            margin-top : 5px;
            width : 100px;
            height : 100px;
        }
        
        body :nth-child(1){
            opacity : 1.0;
        }        
        body :nth-child(2){
            opacity : 0.8;
        }        
        body :nth-child(3){
            opacity : 0.5;
        }
    </style>
</head>
<body>
    <div class = "block"> Block 영역 1</div>
    <div class = "block"> Block 영역 2</div>
    <div class = "block"> Block 영역 3</div>
</body>
</html>
cs


▼ div 태그를 사용하여 opacity 속성값을 각각 다르게 적용 하였습니다. 투명도는 기본이 1.0의 값을 가지면 0에 수렴 할 수록 점점 투명해집니다. 아래는 웹 페이지에서 보이는 형태입니다.


  3. Visibility 속성


특정 태그를 보일지 말지를 설정하는 속성값입니다. 비슷한 개념으로 앞에서 배운 display 속성값으로 none을 주는 방식도 있는데 두 가지 경우는 차이가 있습니다.


visibility : hidden의 경우는 요소를 안 보이게 하지만 그 요소가 차지하고 있는 영역은 그대로 둡니다. 반면에 display : none의 경우는 요소를 안 보이게 하는건 같지만 그 요소가 차지하고 있던 영역마저도 사라지게 합니다. 아래 샘플예제를 살펴 보겠습니다.


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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>visibility 속성</title>
    <style>
        .block {
            background-color : red;
            margin-top : 5px;
            width : 100px;
            height : 100px;
        }
        
        body :nth-child(2){
            opacity : 1.0;
            visibility : hidden;
        }     </style>
</head>
<body>
    <div class = "block"> Block 영역 1</div>
    <div class = "block"> Block 영역 2</div>
    <div class = "block"> Block 영역 3</div>
</body>
</html>
cs


▼ 두 번째 <div>태그의 visibulity 속성값을 hidden을 주어 요소를 감춥니다. 아래 웹 페이지에서 나오는 형태를 살펴 보겠습니다.

▼ 요소는 안 보이지만 해당 요소가 차지하고 있던 영역은 그대로 차지하고 있습니다. 반면에 visibility : hidden을 지우고 그 자리에 display : none을 지정하고 웹 페이지에서 보이는 형태를 살펴 보겠습니다.


▼ 요소가 안 보이는건 동일합니다. 다만 해당 요소가 차지하고 있던 영역마저 같이 사라진 것을 확인 할 수 있습니다.

반응형
저작자표시 비영리

'Programming > HTML&CSS' 카테고리의 다른 글

[HTML5/CSS3] CSS 속성 #3 - box-sizing 이해  (0) 2019.04.02
[HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이  (0) 2019.03.31
[HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자  (0) 2019.03.28
[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자  (0) 2019.03.27
[HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자  (0) 2019.03.26