BOX
-
CSS 기본(BOX 응용) : Content-Box, Border-Box,컴퓨터 알아가기/HTML CSS 2021. 3. 25. 19:30
CSS의 속성들중에는 기본값이 적용되어 있습니다. 이러한 기본값에는 스타일시트에 명시적으로 설정할 필요가 없습니다. 예를 들어 텍스트의 기본글꼴에 적용되는 가중치는 기결정되어 있지만 이 속성이나 값을 일부러 다시 지정해줄 필요가 없습니다. BOX모델도 기본속성이 적용이 됩니다. ▒ Box Model : Content-Box 이제까지 봐온 기본 BOX의 개념입니다. 즉, 우리는 Content에 들어가는 내용을 기준으로 Padding과 Border를 설정해 왔습니다. 이 3가지 값이 합쳐져 브라우저에 렌더링됩니다. 다음 예는 실제 웹페이지에 렌더링되는 넓이가 200px입니다. ▒ Box Model : Border-Box 웹페이지에 Box모델을 적용할 때 Contents값 및 Padding값과 Border값을..
-
CSS 기본(BOX) : Overflow (Scroll, Hidden, Display), Visibility (Hidden, Visible)컴퓨터 알아가기/HTML CSS 2021. 3. 24. 19:30
BOX형은 중요하다고 말씀 드렸습니다. 전체 HTML상에서 각자의 영역을 지정하고 그 영역안에서 움직인다고 보면 되는데 이러한 구획정리의 개념이 BOX형으로 이루어 진다고 보면됩니다. ▒ Overflow 다음과 같이 하나의 이미지 또는 내용이 있다고 가정합니다. contents, padding, border, margin을 이해하기 위해서 손으로 한번 그려보는 것을 권장합니다. 예에서 보면 각각의 크기가 다음과 같을 경우 Contents (blue): 가로 (300px), 세로 (200px) Padding (green): 좌 우 위 아래 각 10px Border (yellow): 좌 우 위 아래 각 2px Margin (orange): 좌 우 각 20px, 위 아래 각 10px 전체 이미지의 크기는 가로..
-
CSS 기본(BOX) : Padding, Margins, Margin - Auto, Vertical Margin, Horizontal Margin, Minimum and Maximum Height and Width컴퓨터 알아가기/HTML CSS 2021. 3. 22. 19:30
지난 시간에 이어 CSS의 주요개념인 BOX에 대해 좀 더 진도를 나가 보겠습니다. 물론 여러가지 디자인적 감각이 필요되는 분야이긴 하지만 최초 말씀 드렸듯이 구조에 대한 이해만 확실히 해두면 향후 필요시 응용할 수 있는 부분이 너무도 많습니다. 따라서 직접 외워서 코딩을 하는 개념이 아니라 어떤 구조인지를 먼저 알수 있도록 합시다. ▒ Padding 패딩(Padding)은 지난 시간에 언급했듯이 내용(Contents)과 Box가 형성되는 Border(테두리)사이의 공간입니다. 쉽게 생각하면 겨울에 내 몸(Contents)과 외부추위 (Border)를 막기위해 패딩점퍼를 입는다고 보면됩니다. 패딩속성은 내용(Contents)의 비좁은 느낌을 없애고 공간을 활용하여 잘 정리된 모습을 만들때 사용합니다. 다..
-
CSS 기본 (BOX) : BOX 기본구조, Width와 Height, Border, Border-Radius컴퓨터 알아가기/HTML CSS 2021. 3. 18. 19:30
이제는 CSS를 이해하는데 중요한 BOX 모델에 대해 이야기 해 볼려고 합니다. 네이버에서 개발자코드(F12)로 한번 들어가 보죠. 네이버 검색창은 BOX모양으로 되어 있으며 개발자코드에 다음과 같은 그림으로 확인이 가능합니다. 그럼 이러한 구조가 어떻게 되어 있고 어떤 명칭으로 사용되는지 알아보도록 하겠습니다. ▒ BOX 모델의 기본 구조 BOX모델은 다음과 같이 구분되어 있습니다. ▶ Width와 Height 내용(Contents)를 담는 박스형태로 구분된 사이즈는 넓이와 높이를 지정할 수 있습니다. ▶ Padding Padding은 내용영역과 테두리(Border)를 나타내는 영역사이의 공간을 말합니다. ▶ Border Border(테두리)는 내용영역과 Padding을 둘러싼 영역을 말하며 테두리의 ..