🎨 [UIUX] 1129 CSS Coding, 코딩 기초 3

✏️ 2024. 11월 29일 / CSS 언어, 코딩 기초 3

☁️ 미리보기

✨ CSS 언어 기초 - float 속성
✖️
오늘은 박스를 배치할 때 사용하는 아주 중요한 float에 대해 알려드리려 합니다.
📁 float : 배치 속성
float은 사전적인 의미로 '둥둥 떠다니다'라는 뜻이 있습니다.
박스를 왼쪽이나 오른쪽으로 배치할 때 사용하는 속성입니다.
📌 [기본형]
- float : left;
: 박스를 왼쪽으로 배치합니다.
- float : right;
: 박스를 오른쪽으로 배치합니다.
- float : none;
: 박스를 배치하지 않습니다.
clear : float을 해제하는 속성
clear 속성을 사용하면 해당 박스에 적용된 float 속성을 해제할 수 있습니다.
📌[기본형]
- clear : none;
: float을 해제하지 않고 유지합니다.
기본값으로 clear 속성을 쓰지 않은 것과 같습니다.
- clear : left;
: 왼쪽에 적용된 float을 해제합니다.
- clear : right;
: 오른쪽에 적용된 float을 해제합니다.
⭐ 중요 / - clear : both;
: float을 양쪽으로 전부 해제합니다.



float 속성을 잘 이용하면, 다양한 구성을 해볼 수 있으니 꼭 기억하세요!

🌏 box-sizing 속성
✖️
⭐ 중요 / box-sizing : 컨텐츠 영역을 유지합니다.
박스의 크기를 정할 때 width, height를 이용하여 영역의 넓이와 높이를 잡습니다.
이렇게 정해진 width, height 영역을 '컨텐츠 영역'이라고 합니다.
이 컨텐츠 영역에 여유 공간을 주고 싶을 때에는 padding을 이용하고
테두리를 주고 싶을 때 border 속성을 이용합ㄴ니다.
여기에 적용된 padding, border에 따라 box의 크기는 늘어납니다.
이때 컨텐츠 영역을 유지한 상태에서 안쪽으로 padding과 border를 적용하고 싶다면 box-sizing 속성을 이용합니다.
[기본형]
box-sizing: content-box;
: css box model의 기본으로 width, height 바깥쪽에 padding과 border가 생깁니다.
즉, 총 넓이값이 변하며 기본값입니다.
- box-sizing: border-box;
: paddiing,border영역을 width,height안쪽으로 포함시킵니다.
width,height의 크기가 유지됩니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)