element 배치하기(CSS layout) - 2
float
일반적으로 배치가 될 때 순서대로 쌓이게 된다. 하지만 float은 기존의 배치에서 벗어난 형태로 특별히 배치된다. 일반적인 배치들이 평면상에 배치된다면 float은 그 위를 둥둥 떠다니는 형태로 배치가 된다는 의미이다.
예를들어 아래 그림과 같이 green class를 float으로 해 주면 red class가 표현이 안 된 것을 확인할 수 있다.
red를 확인하기 위해 relative로 해 준 후 left를 통해 옆으로 살짝 옮겨 보면 red가 없는것이 아니라 가려진 것이었음을 알 수 있다.
추가적으로 float을 다른 엘리먼트가 인식하기 위해서는 clear 속성을 이용하면 된다. 예를 들어 clear:left를 해 주면 이전 엘리먼트 중 float 속성을 가진 엘리먼트의 left 속성을 인식해서 올라가지 못하게 해 줄 수 있다.
또한 자식이 float인 경우 자식으로 인식되지 않는데, 부모 노드에 overflow 속성을 추가해 주면 float인 자식을 인식할 수 있게 되어서 여러 속성들을 상속할 수 있게 된다.
Box-model
일반적으로 HTML의 요소는 BOX 모양으로 구성되며, 이것을 Box model이라 부른다.
패딩(padding), 테두리(border), 마진(margin), 내용(content)로 구성된다.
content
텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
padding
content와 border 사이의 간격으로 눈에 보이지 않음
border
padding과 content를 둘러싸고 있는 테두리
margin
이웃하는 엘리먼트와 본인 간의 간격
예제
(출처:https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel)
위 그림에서 border가 의미하는 것은 녹색 테두리 이다.
그리고 padding은 '위 우 아래 좌' 로 시계방향으로 값을 부여해 줄 수 있는데, 그림과 같이 '위아래' '좌우'를 묶어서 단축하여 값을 부여해 줄 수 있다. padding 값을 20px과 0px로 해 준 결과 content와 border 사이의 위아래 간격이 띄어져 있고, 좌우 간격이 붙어있는 것을 볼 수 있다.
margin 역시 시계방향으로 값을 부여해 줄 수 있고, 단축 표기 할 수 있다. 마찬가지로 20px, 0px를 부여해 주면 이전 엘리먼트인 p태그와의 간격이 띄어져 있고, 왼쪽 벽과는 붙어있는 것을 확인할 수 있다.
엘리먼트의 크기
엘리먼트의 크기는 부모의 크기를 기본값으로 갖는다. 예를 들어 width:100% 는 부모의 크기를 다 갖는 것과 같다.
box-sizing
padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다. 엘리먼트의 크기를 고정시키기 위해 box-sizing 속성을 이용할 수 있다. box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 최대한 고정하면서 padding 값만 늘릴 수 있다.
다음과 같이 box-sizing 속성을 각각 content-box와 border-box로 해 주었다. 그리고나서 padding을 늘려주면 아래와 같은 결과를 얻는다.
즉 box-sizing 속성을 통해 padding 값에 따른 엘리먼트의 크기를 조절할 수 있다.
출처:부스트코스 웹 프로그래밍(풀스택)
https://www.boostcourse.org/web316/lecture/254264
