Web/CSS

[WEB] CSS 요소 배치(2)

hh_lin 2018. 11. 18. 00:16

float 속성

기존의 배치에서 예외적으로 떠있게 한다. 

float 속성이 없다면 blue, green, red div가 각각 위에서 아래로 순서대로 보여야 한다.

하지만 float 속성에 의해 green div가 배치와 관계없이 화면에 띄워지게 되므로 red div가 blue div 바로 아래에 배치된다. 


1
2
3
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
cs

1
2
3
4
5
6
7
8
9
10
11
.blue {  
    background-color: blue;
}
.green {
    float: left;
    background-color: green;
    margin-left: 30px;
}
.red {
    background-color: red;
}
cs




Box-model

하나의 block 요소는 box형태이다. 

block 요소의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.





요소의 크기

block 요소의 크기는 기본적으로 부모의 크기만큼을 가진다.




box-sizing과 padding

padding 속성을 늘리면 요소의 크기가 달라질 수 있는데,

box-sizing 속성을 border-box로 설정하면 요소의 크기를 고정하면서 padding 값만을 늘릴 수 있다.

하지만, padding 값이 너무 큰 경우에는 요소의 크기가 커질 수도 있는데, 콘텐츠를 표현할 수 있는 범위 내에서는 크기를 유지한다.

box-sizing 속성의 default값은 content-box이다.

1
2
3
4
5
6
<div class="box-content">
    box-content<br>(100px보다커짐)
</div>
<div class="box-border">
    box-border<br>(100px유지)
</div>
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  padding: 50px;
  font-size: 0.8em;
}
.box-content {
  box-sizing: content-box;
}
.box-border {
  box-sizing: border-box;
}
cs




layout 구현방법

  • 전체 layout은 float 속성을 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근에는 css-grid나 flex 속성 등 layout을 위한 속성을 사용하기 시작했으며, 브라우저 지원 범위를 확인해서 사용하도록 한다.
  • 특별한 위치에 배치하기 위해서는 position: absolute;를 사용하고, 기준점을 relative로 설정한다.
  • nav와 같은 요소는 block 요소를 inline-block으로 변경해서 가로로 배치하기도 한다.
  • 요소 안의 텍스트의 간격과, 다른 요소와의 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.










참고자료

https://www.edwith.org/

https://www.w3schools.com/css/css_boxmodel.asp