본문 바로가기
CSS

CSS-display, visibility, opacity 속성

by Hrin_0820 2020. 8. 13.

1. display : 요소의 성격을 바꿔주는 속성. layout 정의에 자주 사용.

속성 값 설명
block inline 요소의 성격 → block 요소로 변경 ▶ 줄바꿈 X
inline block 요소의 성격 → inline 요소로 변경 ▶ 줄바꿈 O
inline-block inline 요소의 성격 → inline-block 요소로 변경 ▶ 줄바꿈 X
block요소만 사용할 수 있는 text-align 등의 속성을 사용할 수 있다.
none 해당 요소를 화면에 표시하지 않는다. (공간도 사라짐)

 * 블록 레벨 요소 / 인라인 요소 참고 : https://hrin-0820.tistory.com/15

 

HTML5 블록 레벨 요소 / 인라인 요소

블록 레벨 요소 (Block-level) 인라인 요소(Inline) 줄 바꿈 현상 (새로운 줄에서 시작하고, 좌우 양쪽으로 너비 차지) 줄 바꿈 현상 X (새로운 줄을 만들지 않으며 필요한 너비만 차지) 텍스트(문자)와 �

hrin-0820.tistory.com

 - display 속성을 지정하지 않았을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display-inline, block</title>
    <style>
        .bbb li{list-style: none}
        .bbb li a{width: 100px; height: 35px; line-height: 35px; text-align: center; text-decoration: none; background: brown; color: #fff;}
    </style>
</head>
<body>
    <ul class="bbb">
        <li><a href="#">Company</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Community</a></li>
    </ul>
</body>
</html>
display-inline, block

 - display 속성을 지정했을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display-inline, block</title>
    <style>
        .bbb li{list-style: none}
        .bbb li{display: inline}
        .bbb li a{width: 100px; height: 35px; line-height: 35px; text-align: center; text-decoration: none; background: brown; color: #fff; display: inline-block; }
    </style>
</head>
<body>
    <ul class="bbb">
        <li><a href="#">Company</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Community</a></li>
    </ul>
</body>
</html>

출력이미지

2. visibility : 요소를 숨기거나 보이도록 해주는 속성.

속성 값 설명
visible 요소를 보이도록 함 (기본값)
hidden 요소를 숨김 (공간은 그대로 남아있음)
display: none; 과 visibility: hidden; 의 차이 = 남아있는 공간의 차이 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>visibility</title>
    <style>
        div.box{margin: 10px; padding: 10px; border: 1px solid #000}
        strong.hdd{display: none}
        strong.hdd2{visibility: hidden}
    </style>
</head>
<body>
    <div class="box">
        <p><strong>이름 :</strong>홍길동</p>
        <p><strong>연락처 :</strong>010-1234-5678</p>
    </div>
    <div class="box">
       <h3>display: none</h3>
        <p><strong class="hdd">이름 :</strong>홍길동</p>
        <p><strong class="hdd">연락처 :</strong>010-1234-5678</p>
    </div>
    <div class="box">
       <h3>visibility: hidden</h3>
        <p><strong class="hdd2">이름 :</strong>홍길동</p>
        <p><strong class="hdd2">연락처 :</strong>010-1234-5678</p>
    </div>
</body>
</html>
visibility

이름 :홍길동

연락처 :010-1234-5678

display: none

이름 :홍길동

연락처 :010-1234-5678

visibility: hidden

이름 :홍길동

연락처 :010-1234-5678

3. opacity : 요소의 투명도를 정의

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>opacity</title>
    <style>
        div.box{width: 480px; height: 120px; background: yellow; }
        .box1, .box2, .box3, .box4{width: 100px; height: 100px; float: left; margin: 10px; background: red; line-height: 100px; text-align: center;}
        .box1{opacity: 1.0}
        .box2{opacity: 0.8}
        .box3{opacity: 0.5}
        .box4{opacity: 0.2}
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">opacity: 1.0</div>
        <div class="box2">opacity: 0.8</div>
        <div class="box3">opacity: 0.5</div>
        <div class="box4">opacity: 0.2</div>
    </div>
</body>
</html>
opacity
opacity: 1.0
opacity: 0.8
opacity: 0.5
opacity: 0.2

 

저작자표시

'CSS' 카테고리의 다른 글

CSS-배경(background)2  (0) 2020.08.17
CSS-배경(background)  (0) 2020.08.16
CSS-문단(paragraph) 관련 스타일  (0) 2020.08.12
CSS-Font & Text 2  (0) 2020.08.11
CSS-Font & Text  (0) 2020.08.10

관련글

댓글

티스토리툴바