CSS 레이아웃
Float
Box Sizing : border-box
box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할 지를 정하는 속성이다.
box-sizing: content-box | border-box | initial | inherit-
content-box: content 영역을 기준으로 크기를 정한다.
Final element width = right border + right padding + width + left padding + left border -
border-box: 테두리를 기준으로 크기를 정한다.
Final element width =right border+right padding+ width +left padding+left border -
initial: 기본값으로 설정한다. -
inherit: 부모 요소의 속성값을 상속받는다.
(참고 사이트 : https://www.codingfactory.net/10630)
- content-box
.box{
background-color: gray;
display: inline-block;
width: 100px;
height: 100px;
padding: 10px;
border: 5px black solid;
}- border box
.box:last-child{
box-sizing: border-box;
}- global reset
* {
/* border-top: 10px solid #1098ad; */
margin: 0;
padding: 0;
box-sizing: border-box;
}Flexbox
Flexbox는 1차원 레이아웃을 구축하기 위한 관련 CSS 속성 집합이다.
- flexbox의 기본 아이디어는 컨테이너 요소 내부의 빈 공간을 자식 요소로 자동 분할할 수 있다는 것이다.
- flexbox를 사용하면 상위 컨테이너 내에서 수평 및 수직으로 항목을 서로 자동으로 쉽게 정렬할 수 있어, float를 대체하기 완벽하고 더 깔끔하다.
<style>
.el--1 {
background-color: blueviolet;
}
.el--2 {
background-color: orangered;
}
.el--3 {
background-color: green;
height: 150px;
}
.el--4 {
background-color: goldenrod;
}
.el--5 {
background-color: palevioletred;
}
.el--6 {
background-color: steelblue;
}
.el--7 {
background-color: yellow;
}
.el--8 {
background-color: crimson;
}
.container {
/* STARTER */
font-family: sans-serif;
background-color: #ddd;
font-size: 40px;
margin: 40px;
/* FLEXBOX */
display: flex;
}
</style>
...
<div class="container"> <!-- flex container-->
<!-- flex items-->
<div class="el el--1">HTML</div>
<div class="el el--2">and</div>
<div class="el el--3">CSS</div>
<div class="el el--4">are</div>
<div class="el el--5">amazing</div>
<div class="el el--6">languages</div>
<div class="el el--7">to</div>
<div class="el el--8">learn</div>
</div>- 용어 정리
- flex container : flex item들을 포함한 상위 요소
- flex item : flex 컨테이너의 하위 요소. 기본적으로 가로로는 각 요소가 텍스트 콘텐츠를 위해 필요한 공간을 정확히 차지한다. 세로로는 item들 중 가장 큰 요소만큼 높다.
- main axis
- cross axis
display: flex;aligning & spacing
- order 를 사용하면, html 소스 코드를 변경하지 않고 요소 간 위치 순서를 바꿀 수 있다.
.el--1 { /* HTML */
background-color: blueviolet;
align-self: flex-start;
order: 2;
}
.el--2 {
background-color: orangered;
}
.el--3 {
background-color: green;
height: 150px;
}
.el--4 {
background-color: goldenrod;
}
.el--5 { /* amazing */
background-color: palevioletred;
align-self: stretch;
order: 1;
}
.el--6 { /* languages */
background-color: steelblue;
order: -1;
}
.el--7 {
background-color: yellow;
}
.el--8 {
background-color: crimson;
}- 지금까지는 요소 사이에 공간을 줄 때, 같은 class명을 가진 요소들에 margin을 넣고 마지막 항목에는 margin을 없애줬다. 요소 간 공간은 원하지만 마지막 요소의 끝에 공간을 넣는 건 원치 않기 때문이다. → 이제는 gap으로 해결 가능하다.
gap
margin을 사용했을 때 (마지막 항목에도 margin이 존재한다.)
.el { /* 각 요소의 공통된 class */ margin-right: 30px; }
gap을 사용했을 때
.container{ /* 부모 요소 */ /* STARTER */ ... /* FLEXBOX */ ... gap: 30px; }
flex property
- Default
💡 .el {
flex-grow: 0; → 안 커짐
flex-shrink: 1; → 줄어듦
flex-basis: auto;
}flex-basis
flex 아이템의 초기 크기를 지정한다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경한다.
.el {
flex-basis: 100px;
}→ 요소의 콘텐츠가 100px보다 작으면 100px로 만들어주고 크면 요소들이 확장된다.
flex-shrink
flex 아이템의 크기가 flex 컨테이너보다 클 때 사용하는 속성이다. 0이면 no, 디폴트 값인 1이면 yes로 이에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 유지되거나 축소된다.
.el {
flex-basis: 200px;
flex-shrink: 0;
}
flex-grow
flex 아이템의 크기가 flex 컨테이너 내부에서 할당 가능한 공간의 정도를 선언한다.
숫자가 커질수록 차지할 수 있는 공간이 커진다.
.el{
flex-grow: 1;
}
.el--1 {
background-color: blueviolet;
flex-grow: 2;
}
.el--2 {
background-color: orangered;
flex-grow: 1;
}
flex
shorthand로 순서는 다음과 같다 : -grow | - shrink | -basis
(flex 관련 도움 받은 사이트:
https://choar816.tistory.com/119
https://blogpack.tistory.com/863)
