September 16, 2022

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을 한 줄에 표현하게 해준다.

undefined

220916(금)

🪴 성장일지 2.0

CSS 반응형(feat. media query)

CSS flex - grow와 shrink