CSS 기본(BOX) : Overflow (Scroll, Hidden, Display), Visibility (Hidden, Visible)

BOX형은 중요하다고 말씀 드렸습니다. 전체 HTML상에서 각자의 영역을 지정하고 그 영역안에서 움직인다고 보면 되는데 이러한 구획정리의 개념이 BOX형으로 이루어 진다고 보면됩니다. 

 

---

 

▒ Overflow

 

다음과 같이 하나의 이미지 또는 내용이 있다고 가정합니다. contents, padding, border, margin을 이해하기 위해서 손으로 한번 그려보는 것을 권장합니다.

 

예에서 보면 각각의 크기가 다음과 같을 경우

 

Contents (blue): 가로 (300px), 세로 (200px) 

Padding (green): 좌 우 위 아래 각 10px

Border (yellow): 좌 우 위 아래 각 2px

Margin (orange): 좌 우 각 20px, 위 아래 각 10px

 

전체 이미지의 크기는 가로 364px이고 높이가 244px입니다. 그런데 만일 브라우저의 크기(빨간색 점선)가 가로 300px, 높이 200px인 경우 다음과 같이 이미지를 예측해 볼 수 있습니다. 

 

 

이런 현상을 Overflow라고 합니다. 이럴 경우 CSS에서는 간단한 속성값으로 이미지를 보여지게 만듭니다. 다음과 같이 속성값을 주면 흔히 브라우저에서 내용이 스크롤 되는 동작을 만들어 줍니다. 

 

 

참고로 Overflow되는 내용을 보이지 않게 하고 싶다면 scroll대신 hidden이라는 속성값을 사용합니다. 

 

 

---

 

▒ Visibility (가시성)

 

CSS문법을 사용하여 어떤 항목을 보여지거나 숨기고자 하는 경우 Visibility 속성을 사용합니다. 한국말로 가시성이라고 했는데 아무래도 안어울리는 것 같습니다. 영어의 Visibility의 의미 그대로 이해하는게 좋을 듯 합니다. 

 

예를 들어 다음 HTML 내용 중 서울의 새가 '까치'라고 표시되어 있는데 서울의 상징새를 지금은 사용할 필요가 없고 향후 확정이 되면 반영한다고 가정한경우 해당 항목의 자리를 배정은 하나 지금은 보여질 필요가 없을때 사용한다고 이해하면 됩니다. 

 

 

상기 예에서 '새'의 리스트 항목에 class명을 "bird"로 설정 하였습니다. 이 class를 CSS에서 visibility 속성을 사용하여 숨김을 해 보겠습니다. 

 

 

그러면 다음과 같이 브라우저에는 공간만 배정이 되고 '새'에 대한 내용은 숨겨지게 됩니다. 

 

 

참고로 해당 class명을 보이게 하는 속성값은 visibility: visible; 입니다. 

 

---

지금까지 CSS의 BOX형에 대해 기본을 다 확인해 보았습니다. CSS에서 BOX의 개념은 아주 중요하고 가장 기본이 됩니다. 집안에서 안방, 작은방, 거실, 부엌, 드레스룸 등 다양한 공간을 설계한다는 개념으로 보시면 이해가 쉬울 것으로 보여집니다. 

 

다시한번 BOX의 중요 속성을 정리해보면 

 

Width, Height, Padding, Border, Margin, Overflow정도로 보시면 충분합니다. 다음 시간에는 BOX형의 응용에 대해 공부해 볼 생각입니다. 맨 위에서 설명 드렸듯이 박스는 내용, 패딩, 테두리가 합쳐진 길이가 반영이 됩니다. 그래서 원하는 BOX크기를 정확히 지정하기 어려운 경우도 있고 시간이 지나고 코딩이 길어짐에 따라 웹페이지의 모든 내용을 관리하고 배치하기 어려울 경우도 생기는데 이런 부분들을 해결하는 테크닉을 공부해 보겠습니다.