클리엘
CLIEL LAB
클리엘
전체 방문자
오늘
어제
  • 분류 전체보기 (515)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (302)
      • C# (85)
      • ASP.NET (67)
      • Windows API for .NET (128)
    • Server (53)
      • SQL Server (10)
      • MariaDB (18)
      • Windows Server (6)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (6)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

태그

  • 변수
  • ASP.NET
  • asp.net core
  • c#
  • jQuery
  • .NET
  • asp.net core web api
  • exception
  • MariaDB
  • Windows API
  • CSS3
  • android
  • Kotlin
  • Entity Framework
  • HTML5
  • node.js
  • NestJS
  • LINQ
  • JavaScript
  • android studio

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[HTML5&CSS3] 표시 속성
Web/HTML5 & CSS3

[HTML5&CSS3] 표시 속성

2019. 10. 18. 15:26
728x90

1. display

 

요소를 표시하는 속성 중 display는 요소를 어떤 형태로 표시할지를 지정하는 속성입니다. 이 속성에서 가장 많이 사용하는 것으로는 none, block, inline, inline-block이 있습니다. 그 외에 다른 것도 많지만 모든 브라우저마다 지원하는 내용이 달라 잘 사용되지는 않습니다.

 

먼저 none는 요소를 화면에 보이지 않게 합니다.

<style type="text/css">
    #div1 { display: none; }
</style>

block는 요소가 전체 영역을 모두 사용해 block형태로 보이도록 합니다.

<style type="text/css">
    #div1 { display: block; }
</style>

inline은 block과 달리 다른 요소와 같이 배치될 수 있도록 합니다.

<style type="text/css">
    #div1 { display: inline; }
</style>

inline-block는 inline과 비슷하지만 요소에 width와 height속성을 사용할 수 있습니다.

<style type="text/css">
    #div1 {
        display: inline-block;
        background-color: red;

        width: 100px;
        height: 50px;
    }
</style>


2. visibility

 

visibility는 요소를 보이거나 보이지 않게 하는 속성으로서 visible은 보이게, hidden는 보이지 않게합니다.

<style type="text/css">
    #div1 {
        display: block;
        
        visibility: visible;
    }
</style>

<style type="text/css">
    #div1 {
        display: block;
        
        visibility: hidden;
    }
</style>


3. opacity

 

요소의 투명도를 설정하는 속성입니다. 0.0부터 1.0까지 지정이 가능하며 1.0에 가까울수록 불투명하게 바뀌게 됩니다.

<style type="text/css">
    #div1 {
        display: block;
        background-color: red;
        
        opacity: 0.5;
    }
    #div2 {
        display: block;
        background-color: red;
        
        opacity: 1.0;
    }
</style>

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 크기와 여백  (0) 2019.10.24
[HTML5&CSS3] CSS3 크기입력  (0) 2019.10.21
[HTML5&CSS3] CSS3 색상입력  (0) 2019.10.17
[HTML5&CSS3] CSS선택자 -3  (0) 2019.10.11
[HTML5&CSS3] CSS선택자 -2  (0) 2019.10.07
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] 크기와 여백
    • [HTML5&CSS3] CSS3 크기입력
    • [HTML5&CSS3] CSS3 색상입력
    • [HTML5&CSS3] CSS선택자 -3
    클리엘
    클리엘
    누구냐 넌?

    티스토리툴바