TIL - 21.06.30 👨‍💻 - CSS

성훈·2021년 6월 30일

CSS Flexbox TIL

TIL

목록 보기

16/59

TIL - 21.06.30 👨‍💻

CSS 선택자

tag[attribute]

CSS 선택자로 사용할 수 있는 것 중에 어떤 태그가 어떤 속성 또는 속성 값을 가지고 있을때 특정하는 방법이다.

input[placeholder='userID'] {
  display: none;
}

<input type='text' placeholder='userID' /> <!-- 이것만 출력되지 않는다. -->
<input type='text' placeholder='type content' />

위 코드에서 input[placeholder='userID'] 대신 input[placeholder] 가 들어갔다면 둘 다 출력되지 않았을 것이다.

tag:nth-child() vs tag:nth-of-type()

:nth-child() 구조 선택자는 형제 엘리먼트 중 가장 첫번째 엘리먼트를 선택하는 선택자이다.
주의해야할 점은 모든 구조 선택자는 태그가 다르더라도 형제 엘리먼트라면 상관하지 않고 세서 해당하는 엘리먼트를 반환한다는 점이다.

이에 반해 :nth-of-type() 형태 구조 선택자 같은 경우에는 똑같은 태그를 가진 형제 엘리먼트중에서 첫번째 엘리먼트를 반환한다.

div:nth-child(3) {
  color: red;
}
div:nth-of-type(3) {
  color: blue;
}

<body>
  <div>Division 1</div>
  <span>Span 1</span>
  <div>Division 2</div>  <!--글자색이 빨간색으로 변한다.-->
  <span>Span 2</span>
  <div>Division 3</div>  <!--글자색이 파란색으로 변한다.-->
</body>

다만 이 구조 선택자와 형태 구조 선택자를 사용할때 주의할 점이 있다.

예를 들어 div:first-child를 했을때 그 div 엘리먼트의 후손 엘리먼트가 있다면 모든 후손 엘리먼트에 div:first-child로 설정한 스타일이 적용된다.

div:first-child {
  color: red;
}

<body>
  <div>
    <div>Check 1 <!--글자색이 빨간색으로 변한다.-->
      <p>Content 1</p> <!--글자색이 빨간색으로 변한다.-->
      <div>Content 2</div> <!--글자색이 빨간색으로 변한다.-->
    </div>
  </div>
  <div>Division 2</div>  
  <div>Division 3</div> 
</body>

부정 선택자, :not()

인자 자리에 속성, 속성과 값, class, ID, 구조 선택자 등등을 넣어 해당 속성을 가진 엘리먼트는 제외하고 선택할 수 있게 도와주는 선택자이다.

li:not(:nth-child(2n)) {
  background-color: red;
}

<ul>
  <li>list 1</li> <!--배경색이 빨간색으로 변한다.-->
  <li>list 2</li>
  <li>list 3</li> <!--배경색이 빨간색으로 변한다.-->
  <li>list 4</li>
</ul>

이처럼 부정 선택자의 연산자에 구조 선택자도 들어갈 수 있으며 사용법은 무궁무진하다.

CSS 레이아웃

레이아웃을 구성할때, HTML 구성은 크게 수직분할과 수평분할로 분류 할 수 있다.

수직분할은 화면을 수직으로 구분하여 컨텐츠를 가로로 배치하는 것이고, (행, row)

수평분할은 분할된 요소를 수평으로 구분하여 내부 컨텐츠를 세로로 배치한다. (열, column)

수직분할? 수직으로 분할하는데 왜 행이고 왜 가로배치야? 라고 생각할 수 있는데, ~~내가 그랬다~~
쉽게 생각해서 정사각형이 있다고 가정하자.

이 정사각형을 수직으로 두번 자르면(수직분할) 정사각형은 결국 가로로 세개의 직사각형이 나올 것 이다.
역시 이 정사각형을 수평으로 두번 자르면(수평분할) 정사각형은 세로로 세개의 직사각형이 나올 것 이다.

이래도 이해가 어렵다면 그냥 머리에 박자.
수직분할 - 행 - row
수평분할 - 열 - column

Flexbox

Flexbox는 모던 웹을 위한 비교적 최신의 레이아웃 방식이며, 웹이 담고 있는 컨텐츠 요소의 사이즈가 불명확하더라도 유동적으로 조정해 유연하게 레이아웃을 구성할 수 있다.
게다가 비교적 간편한 방식으로 레이아웃을 구성할 수 있다는 장점도 가지고 있다.

Flexbox는 부모요소와 자식요소가 종속이 되어 있는게 큰 특징인데, 레이아웃을 배치할때 배치가 될 자식을 선택해 설정하는게 아닌 부모를 선택해 설정하고 자식 간의 크기 조절만을 자식를 선택해 설정하게 된다.

#outer {
  display: flex;
  flex-direction: row; /* 후술하겠지만 flex-direction 속성의 기본 값이 row이기에 안써도 된다. */
}
.box {
  box-sizing: border-box;
  height: 25px;
  width: 25px;
  margin: 0.2rem;
  background-color: lightblue;
}

<ul id='outer'>
  <li class='box'>box</li>
  <li class='box'>box</li>
  <li class='box'>box</li>
  <li class='box'>box</li>
</ul>

원래라면 세로로 하나씩 있을 박스가 display: flex를 적용하고 나니 가로로 정렬된 것을 볼 수 있을 것이다.

다만 flex는 부모에 적용한다 하더라도 자식의 자식, 즉 자식을 제외한 후손까지는 적용되지 않으니 자식의 자식을 가로 정렬 시켜야할때는 자식에게 display: flex 속성을 부여한다.

flex-diretion

flex-direction 속성 같은 경우는 부모에 적용시키는 속성으로, 자식을 가로로 줄세울지 세로로 줄세울지 정하는 속성이다.

row는 기본 값으로 flexbox에서 flex-direction 속성을 부여하지 않으면 자식들은 가로로 정렬된다.
column는 세로 정렬으로 자식에게 부여하는 flex 속성으로 레이아웃을 잡고 싶을때 사용한다.

여기서 새롭게 등장하는 flexbox의 개념이 axis(축)이다.
axis는 main axis(기준축)과 cross axis(교차축)으로 나뉘는데 flex-direction속성이 지정하는 것이 바로 이 axis이다.

flex-directon: row; 속성 값을 사용하게 되면 기준축이 row(행)방향, 교차축이 column(열)방향으로 바뀌고 컨텐츠(자식요소)는 기준축에 따라 정렬 되는 것이다.

이와 반대로 flex-direction: column; 속성 값을 사용하게 되면 기준축이 column(열)방향, 교차축이 row(행)방향이 되는 것이고 기준축인 열방향(세로)을 따라 컨텐츠가 정렬되는 원리인 것.

이 축에는 시작점과 끝점도 존재하는데,
통상적으로 부모요소의 좌측이 시작점, 우측이 끝점이거나 위가 시작점 아래가 끝점이다.

다만 row와 column 앞에 reverse-를 붙이면 이 시작점과 끝점이 반전되고 자식요소의 정렬 역시 역순으로 정렬된다.

후술하겠지만 이 축 방향을 따라 자식을 정렬시키는 속성도 존재한다.

flex

앞에 소개했던 display: flex;, flex-direction: column; 등의 속성은 부모에 부여하는 속성이었지만 이 flex 속성은 자식에게 부여하는 속성이다.
문법은 다음과 같다.
flex: grow shrink basis;
grow는 아이템들의 basis를 제외한 여백 부븐을 grow에 지정된 숫자의 비율로 나누어 가진다.
즉, 얼마나 늘릴 것인가를 정의한다.
shrink는 쉽게 grow의 반대인데, basis 값에서 얼마나 줄일 것인지를 정의하고,
basis는 자식요소의 기본 크기라고 할 수 있다.

차례대로 살펴보자.

flex-grow

부모 밑 자식이 n개 있을때 각 자식이 가진 grow 값의 총합이 n이라면 grow 속성을 1로 지정하는 것은 가로(기준축 row일때) 또는 세로(기준축 column일때)를 1/n으로 지정한다는 뜻이 된다.

#outer {
  display: flex;
  flex-direction: row;
}
.box {
  box-sizing: border-box;
  height: 25px;
  margin: 0.2rem;
  background-color: lightblue;
  flex: 1 0 0;
}
.box:nth-child(2n) {
  flex: 2 0 0;
}

<ul id='outer'>
  <li class='box'>1</li>
  <li class='box'>2</li> 
  <li class='box'>3</li>
  <li class='box'>4</li>
</ul>

이런 코드가 있을때 2번과 4번 박스의 가로 길이는 1번과 3번 박스의 가로 길이의 두배가 된다는 뜻이다.

flex-shrink

shrink는 grow와 반대로 얼마나 줄어들지 정하는 속성으로 설정한 비율만큼 박스가 줄어든다.

고로 grow와 shrink를 같이 쓰는 것은 권장되지 않으며, 비율로 레이아웃을 정할 경우에는
flex-grow 속성을 이용하거나 flex: grow 1 auto;를 이용해 grow 속성 만을 변경하는 편이 좋은데,
이는 shrink는 basis 속성에 따른 비율이기에 결과 값 예측이 어렵기 때문이다.

flex의 기본 값이 flex: 0 1 auto; 이므로 grow 값을 수정할 때 shrink 값이 1로 있어도 무방하다.

flex-basis

basis 속성은 grow 속성이나 shrink 속성으로 지지고 볶기 전 기본 자식요소의 박스 크기이다.
flex-grow 속성 값을 0으로 지정했을때 basis 값을 지정하면 basis 값의 크기로 유지된다.

자식요소에 width 속성이 사용될때가 있는데 이때는 basis 속성이 먼저 적용된다.
자식 내 컨텐츠 량이 너무 많아 컨텐츠가 넘칠때 width로 지정했다면 크기가 변할 수 있으니 그때는 width-max를 이용하는 편이 좋다. 물론 이때는 flex-basis 속성이 부여되지 않아야 한다!

Flexbox의 컨텐츠 정렬

여기서 드디어 상술했었던 축 방향에 따른 컨텐츠 정렬 방법이 나온다.
바로 justify-content 속성과 align-items 속성이다.

justify-content

justify-content 속성 같은 경우에는 main axis(기준축)을 기준으로 정렬시키는 속성이다.

자주 사용하는 값으로는
flex-start: 디폴트 값으로 기준축의 시작점부터 자식들을 딱 붙여 정렬시킨다.
flex-end: 기준축의 끝점부터 자식들을 딱 붙여 정렬시킨다.
center: 기준축의 시작점과 끝점사이 중간에 자식들을 딱 붙여 정렬시킨다.
space-between: 시작점부터 끝점까지 정렬시키되, 자식들 사이 모든 간격을 똑같이 둔다.
space-around: 시작점부터 끝점까지 정렬시키되, 자식들이 똑같은 margin 값을 가지게 정렬시킨다.

등이 있다.

align-items

align-items 속성 같은 경우에는 cross axis(교차축)을 기준으로 정렬시키는 속성이다.

자주 사용하는 값으로는
stretch: 디폴트 값으로 교차축의 시작점부터 끝점까지 자식의 height를 늘린다.
flex-start: 교차축의 시작점에 자식들을 딱 붙여 정렬시킨다.
flex-end: 교차축의 끝점에 자식들을 딱 붙여 정렬시킨다.
center: 교차축의 시작점과 끝점 사이에 자식들을 딱 붙여 정렬시킨다.
baseline: 자식의 문자열 컨텐츠 밑줄에 맞춰 정렬시킨다.

등이 있다.

GOOD 😉

CSS와 HTML을 이용해 레이아웃 짜는데 보다 능숙해졌다.
flexbox의 사용법을 익혔다.~~숙련해야함~~

BAD 😥

CSS에 너무 소홀했었다는걸 느꼈다.
그래서 그걸 집중해서 본다고 오늘 다른 공부를 하나도 못했다.
배열의 thisArg 보긴 했는데 정리를 못했다.

TO DO 🔥

객체 공부
배열 공부
Node.js
고차함수
React
DOM
내일 아침엔 스코프와 클로저 미리 읽어보기

Retrospect 🧐

아 오늘은 너무 피곤한 하루였다.
CSS에 너무 미흡한 나머지 공부할게 너무 많았다.

그래도 전부터 생각하던 flexbox 이용법을 익혀서 기분이 좋다.
float 방식은 사용해봤었는데 그 방식보다 이게 더 직관적이며 쉬운 것 같다.

어제도 블로깅하고 뭐 딴짓한다고 늦게 잤다가 아침 운동 못갔는데 오늘은 바로 기절하고 아침운동 꼭 가야지

Reference 🙇

히로피 테크님, flexbox - https://heropy.blog/
https://www.w3schools.com/
https://developer.mozilla.org/

성훈

어떻게 이걸 풀어낼 수 있을까

이전 포스트

TIL - 21.06.29 👨‍💻 - JS

다음 포스트