[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

 

 

display 속성 (inline, block, none 차이), visibility 속성(visible, hidden, collapse 차이)

 

 

오늘 알아 볼 속성은, 어떤 요소를 화면에 보이거나 숨길 때 사용하는 display와 visibilty 속성입니다.

 

 

*display와 visibilty 차이*

 

둘의 차이는 영어의 뜻을 보면 좀 더 쉬울 것 같아요

 

display: 표시, 나타냄

visibilty : 볼 수 있음

 

즉 display 속성은 요소를 어떻게 표시할지를 선택하고

 

visibility 속성은 요소를 보일지 말지 결정하는 속성입니다.

 

밑에서 더 자세히 다뤄볼게요

 

 

*들어가기 전에 알아둘 점*

 

 

[html/css] span, div 태그 차이

 

 

 display 속성 사용법

 

display는  요소의 종류를 선택하는 속성입니다.

 

원래 inline 요소를 block 요소로 보이게 만들 수도 있고,

원래 block 요소를 inline 처럼 보이게 만들 수도 있습니다.

 

상속 여부 : 상속 안 됨.

 

 

 

display: inline  기본값으로, 요소를 inline 요소처럼 표시합니다.

                    따라서 앞뒤로 줄바꿈 되지 않습니다.

 

display: block  요소를 block 요소처럼 표시합니다.

                    따라서 요소 앞 뒤로 줄바꿈 됩니다

 

display: none 박스가 생성되지 않습니다.

                   따라서 공간을 차지하지도 않습니다.

 

display: inline-block 요소는 inline인데 내부는 block 처럼 표시함.

                                  즉, 박스 모양이 inline 처럼 옆으로 늘어섬.

 

 

사용 예:

div{
display:inline;

}

 

그럼 div로 된 3개의 박스를 만들어 보고 display 속성이 아무것도 적용되지 않는

div(block 요소) 가 어떻게 표시되는지부터 보겠습니다.

 

[html 작성]

 

실행 화면입니다. 아래 그림처럼 div 한 개당 가로화면 전체를 차지하고 있고, 줄바꿈되어 있습니다.

 

 

 

1. display: inline

위의 html 문서에서 display: inline을 적용해 보겠습니다.

 

div{
width:100px;
height: 100px;

display: inline;
}

 

 

그림이 아래처럼 바뀌며 문자열이 모두 붙어있습니다.

 

 

 

 

 

2. display: none

display: none  을 적용하면

 

div{
width:100px;
height: 100px;

display: none;
}

 

개나리반 개구리반 채송화반이 차지하고 있던 공간이 사라지며 아래 텍스트만 표시됩니다.

 

 

3. display: block

이번엔 <span>이 적용된 문자열을 block 요소처럼 만들어 보겠습니다

 

[html 작성] displayblock.htm

 

display: block 실행화면입니다

원래 span으로 범위를 지정한 문자열은 줄바꿈되지 않지만 이 속성값을 적용함으로써

모두 줄바꿈 되어 있습니다..

 

 

3. display: inline-block

 

맨 위에 html 문서에 아래 display: inline-block;만 넣어보겠습니다.

 

display inline-block.htm

div{
width:100px;
height: 100px;
display: inline-block;
}

실행 화면입니다. 박스 모양이 마치 float 속성을 적용한 것처럼 옆으로 늘어서 있습니다.

 

 

 

 

 visibility 속성 사용법

 

visibility 속성은, 어떤 요소를 보이게 할지 숨길지를 결정합니다.

 

상속 여부 :  상속 됨

 

visibility: visible  기본값으로 요소가 그대로 보입니다.
visibility: hidden  요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.

visibility: collapse <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨깁니다.

 

하지만 여전히 투명하게 공간을 차지 합니다.

<table> 이외에서 사용하면 hidden 상태처럼 만듭니다.

(collapse는 IE, Firefox에서만 작동)                           

 

사용 예:

div#b{

visibility: hidden;

}

 

 

 

[html 작성] visibility hidden.htm

 

 

 

아래 왼쪽 그림은 세 div가 모두 나올 때이며

오른쪽 그림은 '개구리반'만 visibility: hidden 적용한 화면입니다.

공간이 그대로 남아 있는 게 보이시죠.. ? 

 

                                

 

 

[display: none 과 visibility: hidden 차이]

 

왼쪽이 display:none 공간이 사라짐

오른쪽이 visibility: hidden 공간이 그대로임

 

 

 

 

[html/css] text-align 속성으로 정렬하기 (left, right, center, justify)

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

 z-index 속성으로 배치 순서 결정하기

 

 position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

DIV 태그를 이용하여 레이아웃 만들기

 

 

 

 

지구별에
css 2014.04.05 09:00

댓글을 달아 주세요

  1. TF_JW 2016.08.07 17:42  수정/삭제  댓글쓰기

    감사합니다. 설명이 되게 눈에 잘 들어오네요

  2. 신원석 2016.12.23 00:51  수정/삭제  댓글쓰기

    포트폴리오 이미지 정렬을 가운데로 옮기는데 하루 종일 방법을 찾았는데 드디어 알려주신 팁을 적용해 해결했습니다. 정말 정말 고맙습니다~!!

  3. odd_duck 2017.09.06 23:11 신고  수정/삭제  댓글쓰기

    많은 도움되었습니다!
    블로그에 display 종류에 대해 적혀있는 부분을 그대로 제 티스토리 블로그에 공부 목적으로 글을써도 될까요?
    상업적 이용은 하지 않겠습니다.

  4. soo 2017.10.08 08:55  수정/삭제  댓글쓰기

    봐도 봐도 헷갈리는데 넘 논리정연한 설명 감사합니다 :)

  5. 그룹원 2018.11.26 14:22  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.
    display 값을 none에서 inline으로 바꿨을 때 숨겨둔정보가 공개되는 경우도 있나요?

  6. 우산 2019.06.17 01:23  수정/삭제  댓글쓰기

    도움이 많이 되었습니다. 알기도 쉽게 설명해주셔서 이해가 빨리 되었습니다. 감사합니다.

Powerd by Tistory, designed by criuce