관리 메뉴

키스세븐

display를 이용한 보이기, 숨기기 방법 - CSS 본문

홈피와 블로그

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

키스 키스세븐 2014. 11. 26. 08:48
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.

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

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

물론 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​는 또 다른 글에서 다루어 보기로 하겠습니다.

 

 

★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^

키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

공유하기 링크
필요하면 공유하세요 ^^
0 Comments
댓글쓰기 폼