220916(금)

🪴 성장일지 2.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0) 최대한 간단하게 정리, 추후에 보면서 스스로 설명 🍉 경험 위주로 (2.0) 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성하자

CSS 반응형(feat. media query)

하나의 css 템플릿 내에서 media query를 통해 특정 조건(기기의 종류, 화면 크기 등등)에 맞는 스타일을 적용하는 방법

사용 방법

• (1) html link에서 조건을 주고 그 조건에 맞는 css 파일을 적용하기

<link rel="stylesheet" media="screen and (max-width: 768px)" href="jaystyle.css" />
<!-- 가로폭이 768px이 최대 즉, 768px 이하이고 media type이 screen인 경우 jaystyle.css를 적용한다는 의미 -->

• (2) css의 media query 자체를 이용하기

/* 이곳에는 desktop을 위한 style 작성 */

/* (1) media rule */
@media screen and (max-width: 768px) {
  /* 가로폭 768px이하, media type이 screen -> 보통 모바일 전용 style에 해당
  여기에 일반적인 style 문법 작성하면 된다. */
}

/* (2) import rule */
/* media type이 screen이고 가로폭이 768px이하일 때 `style.css`를 import하여 적용한다는 의미*/
@import url (style.css) screen and (max-width: 768px);

CSS flex - grow와 shrink

flex-basis

얼핏보면 width와 유사하다.

• flex-direction에 따라서 주축에 해당하는 부분의 길이를 결정한다.
• 부모 태그 아래에 자식 태그가 있을 때, 자식 태그의 크기를 width, height으로 지정한 경우 부모 태그를 강제적으로 넘어간다.
• 그러나 flex-basis를 사용 시, 부모 태그의 크기를 고려해서 넘어가지 않는 선에서 최대의 크기를 갖게 된다.
• flex-basis와 width를 동시 적용 시, flex-basis가 더 우선권을 갖는다.
• flex-grow와 flex-shrink를 통해 크기를 줄이거나 늘리기 전의 기본 크기를 결정

flex-wrap

기본적으로 nowrap이 적용되어있다.

• flex-wrap: nowrap - 부모 태그의 크기보다 자식 태그들의 크기 합이 더 클 때, 알아서 부모 태그의 크기에 맞게 자식 태그를 줄여서 한 줄에 넣게 된다.(일반적인 flex)
• flex-wrap: wrap - 부모 태그의 크기를 자식 태그들이 넘어갈 때, 넘어가는 자식 태그들을 자동으로 다음 줄로 옮겨준다.

flex-grow

부모 태그가 자식 태그들보다 클 때, 부모 태그의 크기에 대해서 자식 태그들이 남긴 공간을 채우기 위한 속성
자식 태그마다 늘어나서 남은 공간을 채울 비율을 할당해줄 수 있다.
부모 태그의 크기를 x, 자식 태그들의 크기 합을 y라고 할 때 (x - y)값을 아래 정한 비율만큼 나눠갖고 크기를 키운다.

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

.child:nth-child(2) {
  display: flex;
  flex-grow: 2

flex-shrink

grow의 반대 개념으로 부모 태그가 자식 태그들보다 작을 때, 부모 태그의 크기에 대해서 자식 태그들이 넘어간 공간을 줄이기 위한 속성
자식 태그마다 넘어가는 공간에 대해 줄어들게 할 비율을 할당해줄 수 있다.
부모 태그의 크기를 x, 자식 태그들의 크기 합을 y라고 할 때 (y - x)값을 아래 정한 비율만큼 나눠갖고 크기를 키운다.
즉, 아래에서 2번째 자식 태그는 1번째 자식 태그보다 2배 더 줄어드는 것이다.

.child:nth-child(1) {
  display: flex;
  flex-shrink: 1
}

.child:nth-child(2) {
  display: flex;
  flex-shrink: 2

추가: flex-flow

• flex-flow: row wrap; -> flex-direction과 flex-wrap을 한 줄에 표현하게 해준다.