[css] box model | 레이아웃 | flex | grid

한지원·2021년 1월 27일

display 속성

display: block;
/*부모 영역에 한 줄로 꽉 차는 속성*/

display: inline;
/*안에 들어있는 컨텐츠의 크기 만큼만 차지, 크기 조절 불가능*/

display: inline-block;
/*inline의 속성을 가지고있으면서 박스의 속성도 가지고 있어서 크기 조절이 가능*/

display: flex;
/*요소들을 한 방향으로 정렬할 때 편리*/

display: grid;
/*요소들을 격자로 정렬할 때 편리*/

/*등등*/

css box size

box-sizing: content-box /*기본 값*/
width: 300px; height: 200px; padding: 20px; border: 5px solid black; margin: 15px;
/*박스의 크기: 양쪽 padding, border, margin이 width에 모두 합쳐진 380px이 총 차지하는 너비가 된다.*/

box-sizing: border-box
width: 300px; height: 200px; padding: 20px; border: 5px solid black; margin: 15px;
/*padding과 border는 width, height에 포함되지만 margin은 포함되지 않는다.*/

즉 border-box로 설정했을 때 contents의 width는 전체 width인 300에서 padding과 border값을 뺀 250px이 되고 margin이 포함 된 전체 박스의 사이즈는 330px이 된다.

css reset

이미 스타일이 지정된 태그의 css 스타일을 리셋시켜주는 것.
css reset

vertical-align

<div class="container">
  <section class="item item-a">
    <h1>Section a</h1>
    <p>Lorem</p>
  </section>
  <section class="item item-a">
    <h1>Section a</h1>
    <p>Lorem</p>
  </section>
</div>

vertical-align: top

vertical-align: bottom

최대 폭 고정 max-width 속성

그냥 width: 1000px 하면 브라우저 크기가 1000px보다 작아질 시 가로 스크롤이 생김.
max-width:1000px 로 하면 브라우저 크기가 1000px이상일 때 해당 요소가 1000px보다 더 커지지 않음.

박스 가운데로 정렬하기

.container{
  margin-left: auto;
  margin-right: auto;
  /*margin: 0 auto;*/
  /*상하는 마진 0, 좌우는 마진 auto*/
}

auto는 남은 여백을 자동으로 나눠갖는다는 뜻

float 사용

float: left;는 display: inline-block;과 같은 효과를 줌.

float: left를 해주면 이게 적용된 요소의 주변에 있는 요소들이 이 것을 왼쪽에 두고 돈다.
두 엘리먼트에 동시에 적용해주면 왼쪽정렬.

float를 적용시킬 엘리먼트가 더이상 없으면 그 다음 태그는 clear: left; 해줘야함. (float:left; 일 경우) 근데 그냥 clear: both;해주면 됨.

자식요소들에 float가 되어있으면 부모 엘리먼트는 자식을 안품고있는걸로 쳐서 부모 요소에 다른 컨텐츠가 없으면 자식요소에 컨텐츠가 들어있더라도 부모 요소의 박스 크기는 0이다.

해결해주려면 부모 엘리먼트 안에 float랑 상관 없는 태그를 생성해 clear를 해줘야함.
가상 엘리먼트를 생성하여 이것을 해결한다.

after라는 가상 앨리먼트 만들기

.container:after{
  content:'';
  display: block;
  clear: both;
  /*아래 두줄은 혹시 몰라서 추가하기도 함.*/
  height: 0;
  visibility: 0;
}

반응형 웹 만들기 (미디어 쿼리)

@media screen and (min-width: 700px){
/*700px 이상일 때의 css style 지정해주기*/
}

html에 meta태그 추가해주기
viewport를 추가해줘야지 모바일 디바이스에서 모바일스럽게 보임.

flex

display: flex; 정렬시키고자 하는 요소들의 부모요소에 적용시켜줌.

column layer나 row layer 즉 단방향 레이어를 만들 때 편리함.

그냥 display: flex; 만 해주면 자식요소의 width는 그 안의 컨텐츠 내용 만큼의 크기를 가짐 (inline, inline-block처럼)

flex-direction

부모요소에 적용시켜줌.
flex-direction: row; 기본값
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

정렬 방향
row: →
row-reverse: ←
column: ↓
column-reverse: ↑

flex-wrap

부모요소가 자식 요소의 크기(width)보다 작아졌을 때 어떻게 보여줄지 결정
flex-wrap: nowrap; (기본값) : 가로 스크롤 처리
flex-wrap: wrap;
flex-wrap: wrap-reverse;

flex-flow

flex-direction: row;
flex-wrap: wrap;

은

flex-flow: row wrap;

으로 축약 가능

justify-content

현재 축의 방향을 기준으로 자식요소 정렬

align-items

justify가 축의 방향이었다면 align은 축의 수직방향
align-items: stretch; (기본값)

align-content

(flex-wrap: wrap;인 상태에서 사용)
부모 요소의 크기가 작아졌을 때 축의 수직방향으로 정렬하는 법

앞에서 다룬 속성들은 부모요소에 적용시킨 속성이고 지금부터는 자식요소에 적용시키는 속성이다.

flex-grow

`flex-grow: 1;
요소들이 신축성있게 움직이는 박스로 변한다.
자식요소 각각에 flex-grow를 해주면 부모 요소의 width 여백을 나눠가지도록 늘어난다.
적용시켜주는 숫자의 값은 각 얼마만큼의 비율로 여백을 나눠가질지 결정해준다.
item이 3개일 때

.item:nth-child(1){
  flex-grow:1;
}

.item:nth-child(1){
  flex-grow:2;
}

.item:nth-child(1){
  flex-grow:1;
}

위와 같이 해주면 부모 요소의 여백을 각 1:2:1로 나눠가지도록 늘어난다.

flex-basis

flex-basis: auto;
flex-grow를 할 때 여백이 아닌 박스 크기를 1:2:1로 설정하고싶을 때
부모요소에 flex-basis: 0;을 해주면 자식요소 박스의 크기를 flex-grow로 설정해준 만큼 조절해줄 수 있다.

flex-basis: 0;은 각 자식요소들이 점유하는 공간을 0으로 맞춰주는 것이다. 따라서 부모 요소의 모든 공간을 전부 여백으로 인식하고 flex-grow를 통해 각 자식요소가 부모요소의 공간을 1:2:1로 나눠갖는 것이다.

.container{
  flex-basis: 0;
}
.item:nth-child(1){
  flex-grow:1;
}

.item:nth-child(1){
  flex-grow:2;
}

.item:nth-child(1){
  flex-grow:1;
}

flex-shrink

flex-grow는 부모요소가 자식요소보다 넓어질 때 자식요소가 차지하는 비율을 나타내 준 것이라면 flex-shrink는 부모요소가 자식요소보다 좁아질 때 자식요소가 차지하는 비율을 나타내 주는 것이다.

flex-grow: 1;
flex-shrink: 1;

위 코드는

flex: 1;

로 축약해서 사용한다.

flex

flex-grow만 사용했을 땐 부모요소에 flex-basis:0;을 해주어야 하는데 flex를 사용하면 따로 셋팅해주지 않아도 basis가 0으로 자동 셋팅된다.

flex에 적용시켜주는 숫자는 각 요소가 공간을 차지하는 비율이고
flex에 숫자를 넣어주는 것은 컨텐츠의 크기에 따라 각 요소의 width를 늘리겠다는 뜻이다.

align-self

justify-content나 align-items는 부모요소에서 자식요소에 일괄적으로 적용시켜주는 것이고 align-self는 자식요소 각각에 적용시켜주는 것이다.

.container{
  justify-content: space-between;
}
.item:nth-child(1){
   align-self: flex-start; 
}
.item:nth-child(1){
   align-self: center; 
}
.item:nth-child(1){
   align-self: flex-end; 
}

order

각 요소들의 배치 순서를 나타냄.

grid

부모요소에 display: grid해주기

gird-template-columns(rows)

grid-template-columns: 40% 60%;

위와 같이 쓸 수 있지만 grid-gap과 함께 사용시 가로 스크롤이 생기기 때문에

grid-template-columns: 4fr 6fr;
grid-gap: 1rem;

위와 같은 식으로 사용한다.

grid-template-columns: 1fr 1fr 1fr 은
grid-template-columns: repeat(3, 1fr) 로도 사용 가능하다.

2단으로 하고 첫번째 단은 고정, 두번째 단은 가변으로 만들고 싶다면
grid-template-columns: 200px 1fr 로 사용하면 된다.

grid에서는 같은 행에 있는 요소끼리 컨텐츠의 양이 달라도 높이가 가장 높은걸로 맞춰진다.

grid-auto-rows

모든 그리드의 높이를 동일하게 하고 싶을 때 사용
grid-auto-rows: 300px 과 같이 쓰면 되는데 만약 컨텐츠의 양이 지정해준 값보다 크다면 박스 밖으로 나온다. 따라서
grid-auto-rows: minmax(10em, auto)를 사용해주면 컨텐츠의 양이 넘치는 박스만 auto처리가 된다.

크기를 설정해줄 때에는 px보다 em을 사용하는 것이 좋다. 폰트가 늘어나면 박스도 같이 늘어나니까

justify-items

align-items

justify-self | align-self

자식 요소 각각에 따로 정렬을 적용해주고싶다면
justify-self: ↔
align-self: ↕

grid-column | grid-row

.item:nth-child(1){
  grid-column: 1/4; /*1*/
}

.item:nth-child(4){
  grid-row: 2/4; /*2*/
  grid-column: 3; /*3*/
}

.item:nth-child(9){
  grid-row: 3/5; /*4*/
  grid-colums: 3; /*5*/
}