display를 이용한 보이기, 숨기기 방법 - CSS > 홈피와 블로그

본문 바로가기
  |     |     |     |   4  |  
오늘의 추천항해 | "오늘의 항해 가이드" 코너입니다.


읽|을|거|리

설문조사

키스세븐을 어떻게 알고 방문하셨나요?

방문자 통계

오늘
47
어제
58
최대
339
전체
130,749

 

코딩 | display를 이용한 보이기, 숨기기 방법 - CSS

페이지 정보

작성일14-09-09 19:06 조회1,072회 댓글0건

본문

홈페이지는 수 많은 태그로 이루어진 코딩목록을 시각화한 것입니다. 

작성된 코딩은 필요없으면 지우면 되겠지만, 만약 눈에는 보이지 않아야 하지만 꼭 필요한 부분이라면 어떨까요? 

물론 hidden이라는 속성으로 숨길 수도 있지만 CSS에서 display를 이용해서 none이나 hidden을 주어 숨길 수도 있는데, 그 방법을 알아 보겠습니다.

 

 

 

 

 

1. display​에 대한 이해

 

display는 CSS에서 사용하는 속성입니다. "어떻게 보여질 것인가"를 결정합니다. 

div든 table이든 span이든 어디든 사용할 수 있습니다. 

적용하고 싶은 객체에 스타일 항목을 추가하여 아래와 같이 처리하면 됩니다. 

<div style="display:원하는 요소;">내용</div>

예를들어 태그를 실험하는 코드를 넣어봤으나 방문자의 눈에는 안 보이게 하고 싶거나, 나 혼자만 보고 싶은 글자가 있는 경우이거나, 모니터에는 안 보이지만 소스를 봤을 때는 볼 수 있거나, 다른 태그로 부터 어떤 값을 받아 왔지만 시각적으로는 보이지 않게 그 변수를 불러다 쓰고 싶을 경우 등 수 많은 이용 방법이 있겠습니다.

 

 

 

 

 

2. display로 감추기를 하는 방법

 

위에서 기본적인 태그를 보여 주었으니, 이번엔 다른 적용을 살펴 보겠습니다.

위에서는 div에 넣어봤으니 이번엔 span에 넣어 본 예제입니다.

 <span style="display:none;">내용</span> 

위의 내용은 객체를 안 보이게 하는 첫번째 방법인데, none을 붙이게 되면 눈에도 안 보이고 자리도 차지하지 않고 숨어있게 합니다.

 

 

 

 <span style="display:hidden;">내용</span> 

위의 내용은 객체를 안 보이게 하는 두번째 방법인데, hidden을 붙이게 되면 눈에 안 보이지만 자리는 그대로 차지하게 됩니다.  

 

 

 

 

 

3. none과 hidden의 차이 설명

 

none이나 hidden이 둘 다 눈에 안 보이게 감추는 역할을 하고 있기는 하지만, 공간이라는 차이 점이 있습니다. 

 

css에서 display​의 속성에 hidden을 주면 눈에 안 보이게 사라지지만 그 자리가 그대로 빈 공간이 됩니다. 예를 들자면 워드 작성할 때 글자를 삭제하지 않고 하얀색으로 바꿔서 모니터에 안 보이는 것과 같은 것입니다. 

 

그러나 속성에 none을 주면 눈에 안 보이게 감추어지지만 있던 공간의 크기가 0으로 처리되어 그 아래에 있던 그림이나 글자들이 위로 올라와 붙습니다. 

예를 들자면 워드에서 글자를 삭제해 버리면 아래의 문단이 올라오는 것과 같습니다. 그러나 display​의 속성이기 때문에 진짜로 사라지는 것이 아니라 크기만 0이 된 것입니다.

 

 

 

 

4. display​의 또 다른 속성들....

 

display​에는 hidden, none 외에도 ​block, inline, inline-block 등의 속성이 있습니다. 

block, inline, inline-block​는 또 다른 글에서 다루어 보기로 하겠습니다.

 

 

 

 

[ ?...! ] 저작권법 공지 : 공유, 퍼가기 가능. 단, www.kiss7.kr 주소를 반드시 표시해야 합니다.
추천 0
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

게시물 검색

 


키스세븐 - www.kiss7.krCopyright © 키스세븐 | www.kiss7.kr. All rights reserved.
키스세븐 - www.kiss7.kr  상단으로
키스세븐 - www.kiss7.kr

사이트소개 개인정보취급방침 이용자 등록 이용약관 제휴/광고 문의 이용 안내 공지사항

키스세븐은 개인정보 보호정책 및 저작권 보호정책을 준수합니다.
키스세븐은 정보공유와 소통을 목적을 하는 커뮤니티 사이트입니다.

모바일 버전으로 보기