홈페이지는 수 많은 태그로 이루어진 코딩목록을 시각화한 것입니다.
작성된 코딩은 필요없으면 지우면 되겠지만, 만약 눈에는 보이지 않아야 하지만 꼭 필요한 부분이라면 어떨까요?
물론 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는 또 다른 글에서 다루어 보기로 하겠습니다.
★ 이 정보가 도움이 된다면 아래의 공감을 부탁드립니다! ^^
