2023/08/11

CSS

성능 최적화를 위해 cascading을 최소화하자
=> 시맨틱보다 중요한 것은 접근성과, 사용성

기본문법

• 선택자 { 속성: 값; 속성: 값 }
• 최신 브라우저는 CSS를 대부분 지원하나,
  지원하지 않는 경우에는 속성에 브라우저별 접두사를 붙여야 한다

스타일 방법

External Style Sheet

• link태그 삽입이나 @import를 선언하여 외부 파일과 연결할 수 있다
• 내부 스타일 시트와 달리 캐싱되기 때문에 로드하는 데에 유리한 장점이 있다

Embedded Style Sheet

• HTML 문서의 head에 style태그를 삽입하여 CSS를 사용하는 방법

Inline Style Sheet

• HTML 문서에서 특정 요소에 style속성을 삽입하여 CSS를 사용하는 방법

선택자

• 동일한 스타일을 여러곳에 적용하고 싶을 때 class선택자 사용
  => 가급적 class에 스타일을 적용하는 방법을 사용하자
• a선택자 b선택자
  => a선택자의 자손 중 b선택자 호출
• a선택자 > b선택자
  => a선택자의 자식 중 b선택자 호출
• 아이디 선택자는 #으로 호출한다.
• a선택자 ~ b선택자
  => a선택자 뒤의 모든 b선택자
• .a선택자.b선택자
  => 두 클래스가 모두 지정된 요소 선택
• [속성값]
  => 속성 선택자로 호출

가상 요소 선택자

• ::로 시작하며, 선택한 요소의 일부분에만 스타일을 적용할 때 사용

가상 클래스 선택자

• :로 시작하며, 선택한 요소가 특정한 상태일 때에 스타일을 적용할 때 사용
• :root
  => 최상위 요소에 공통으로 사용될 속성들을 변수로 설정하면 여러 클래스에서 사용할 때 용이하다.

상속

• 상속되는 속성
  => 디자인에 관련된 것
• 상속되지 않는 속성
  => 공간에 관련된 것
  => 논리적으로 고민해보면 알 수 있다
• color에 inherit값을 주면 고유의 컬러값이 아닌 상속값으로 바뀐다

우선순위

• (1) 인라인 스타일, (2) id 선택자, (3) 클래스 선택자, (4) 요소 선택자
• !important는 다른 선언보다 우선해서 적용된다
  => 스타일이 겹쳐서 우선순위를 확인해볼 때만 사용하자

FONT

• 기본값은 16px
• em
  => 상속값 * em값
• rem
  => 루트값 * rem값
• line-height
  => 줄간격
  => 넘버단위로 쓰는 것이 안전하다

숨김 텍스트 만들기

시각적으로는 보이지 않지만 접근성을 고려할 때 사용한다

• position: absolute; !important
  => 화면에서 띄우고, !important로 다른 선언보다 우선하도록 한다
• width와 height 값을 줄인다
• overflow: hidden;
  => 박스보다 넘치는 내용물을 숨긴다
• clip-path: polygon(0 0, 0 0, 0 0);
  => 박스를 숨긴다
• display: none;(= hidden 논리속성) 방식으로 숨기면 screen reader로 읽히지 않는다.

BOX

box-sizing

• content-box 방식
  => padding, border의 크기가 박스의 크기에 추가된다
• border-box 방식
  => padding, border의 크기가 박스의 크기에 포함된다

box-model

• inline
  => 상, 하로는 margin, padding값을 주어도 공간이 벌어지지 않는다
  => width와 height의 값을 줄 수 없다
  => 컨텐츠의 크기에 맞게 너비가 조절된다
• inline-block
  => 인라인 박스처럼 렌더링되지만 너비와 높이를 설정할 수 있음
  => 줄바꿈이 생기지 않는다
• block
  => 기본적으로 부모 요소의 너비 전체를 채운다
  => 줄바꿈이 생긴다

  • block, inline-block 요소에서 부모 요소의 너비를 주고 자식 요소에 % 너비를 주면 기기 너비에 맞게 조절된다

overflow

• auto
  => 자식 박스가 부모 박스보다 큰 경우 스크롤이 생긴다
• visible
  => 자식 박스가 부모 박스보다 큰 경우 초과한 부분만큼 박스가 커진다
• hidden
  => 자식 박스가 부모 박스보다 큰 경우 초과한 부분을 숨긴다
  => 탭했을 때 선택되는 박스 영역이 보이지 않을 수 있다
• scroll
  => 자식 박스, 부모 박스의 크기와 상관없이 스크롤이 생긴다

여백

• inline 박스의 상하에도 margin, padding이 적용되나 넘친다
• margin, padding에서 auto
  =>display: block;인 경우에는 auto가 먹지 않는다
• 컨텐츠 요소의 크기만큼의 너비를 가지는 block요소에 padding값을 줘서 크기를 키울 수 있다

박스 그림자 삽입하기

보통 3px 부분만 수정

box-shadow: 0px 0px 3px 0px gray;

background

• background-clip
  => 배경 이미지 오려내기 영역 설정
  => 하단에 위치해야 box-sizing 속성이 적용된다
• background-origin
  => 배경 이미지 시작 위치 설정

positioning

• 모든 요소의 포지션 기본 값은 static
• relative
  => 원래 위치에서 상대적으로 이동한다
• absolute
  => 자신과 가장 가까운 상위 블록에서 position이 static이 아닌 것을 기준으로 삼아 움직인다
  => 상위 블록은 relative / 움직이고자 하는 블록은 absolute로 많이 한다
• fixed
  => 설정한 대로 뷰포트 내에서 고정된다
  => absolute와 달리 띄운 다음 뷰포트를 기준으로 움직인다
• sticky
  => 자신의 위치에 도달할 때까지 달라붙는다

  z-index
  => 겹친 요소 중 위로 올라오게 할 때 설정

float

위로 띄워서 자기 부모의 영역 안에서 왼쪽이나 오른쪽으로 배치한다

자식이 모두 float돼서 잃어버린 부모의 height를 찾을 때

• display: flow-root;
• 부모도 float 시키기
• ::after를 만들어서 content: ""을 넣고 display를 block으로 설정하고, clear 시키기
  => clear 속성은 display가 block인 경우에만 적용이 가능하다
• overflow: hidden;
  => 넘치는 요소가 사라지는 리스크가 있다

color

• currentColor
  => 글꼴의 컬러와 동일하게 적용

반응형 웹디자인

• 사용자 환경에 상관없이 최적의 사용자 환경을 제공하기 위해
  사용자 기기에 응답하는 웹사이트를 디자인하는 프로세스
• 기기에 상관 없이 모든 리소스를 다운 받아야 하기 때문에 리소스 체크를 항상 해야 한다

유연한 그리드

• 사용자 기기의 화면 크기에 따라 최적화 된다
• px이 아니고 %, em, rem 같은 상대 측정 단위가 사용된다

유연한 미디어

• 미디어 유형에 max-width 속성을 적용해야 한다

미디어 쿼리

뷰포트 메타 요소

• 미디어 쿼리의 조건이 맞지 않을 경우 뷰포트 메타 요소에 적용된 코드가 작동한다
• 너비, 초기 배율 등 기기의 화면에 최적화 할 수 있다

<meta name="viewport" content="width=device-width; initial-scale=1">

flex

레이아웃을 위한 배치기법

• 부모 요소에 display: flex;
  => item은 block의 성격으로 렌더링된다
• flex-direction
  => item이 정렬될 방향을 지정

  row | row-reverse | column | column-reverse

• justify-content
  => 주축 정렬
  => 아이템들을 정렬하는 방법

  flex-start | center | flex-end
space-between | space-around | space-evenly

• align-content(items)
  => 교차축 정렬

  align-items
  => 기본값은 stretch이며, item들을 개별적으로 배치한다
  => flex-start | center | flex-end | baseline | stretch

• flex-wrap
  => wrap 값을 주면 item들이 줄바꿈을 하게 된다
• 단축 표기법
  => flex-flow: direction wrap;

flex-item

• order값을 줘서 item의 정렬순서를 바꿀 수 있다
  => order는 몸무게처럼 숫자가 클 수록 시작점에서 먼쪽부터 정렬된다
  => 같은 무게일 땐 마크업 순서가 뒤인 것이 먼쪽으로 간다
• flex-grow
  => 값을 준 남는 영역의 비율만큼 남는 영역을 가진다
  => 기본값은 0이며, 1을 줄 경우 부모의 박스의 너비를 자식들이 동일하게 나눠 갖는다
• flex-shrink
  => 줄이는 거
  => 기본값은 1이며, 0을 줄 경우 부모 크기와 상관없이 고유의 너비를 가질 수 있다
• flex-basis
  => 아이템의 초기 크기를 지정
  => 너비의 초기값을 지정한다.
  => width와 다르게 고정값을 가진다
  => 다른 flex 속성에 따라 너비가 영향을 받는다.

  • auto;
    => 컨텐츠 크기만큼 크기를 가진다
  • 0;
    => 나머지 item을 배치하고 남은 크기를 가진다

• 단축 표기법
  => flex: grow shrink basis;

grid

grid 설정

grid를 활용하여 배열할 요소들의 부모 요소에 display의 값을 설정한다

display: grid(inline-grid)

column | row 설정

px, rem, em, %, fr 등을 사용하여 각 track의 크기를 설정한다

• gird-template-columns(rows)
  => 비율로 구역을 나눈다
  => repeat(반복할 수, 반복할 값)를 이용하여 쉽게 값을 줄 수 있다
• minmax(최소값, 최대값)
  => 최소값보다는 크고 최대값보다는 작게 설정한다
  => auto값도 가능하다

gap 설정

grid-row(column)-gap을 사용하여 행과 열 사이의 간격을 설정한다

단축 표기법
=> grid-gap: 행간격 열간격

line 기반 배치

• grid-area: 행 시작 / 열 시작 / 행 끝 / 열 끝;
  => 요소가 차지할 구역을 정한다
  => grid-area의 값을 음수로 주면 마지막 줄부터 선택할 수 있다

템플릿 영역을 사용한 배치

• grid-template-areas
  => 배열할 요소들에 grid-area 속성의 값으로 이름을 부여하고
  => 부모 요소에 grid-template-areas 속성의 값으로 "" 안에 grid-area 속성에 줬던 이름을 원하는 개수만큼 넣어서 배열을 디자인한다

  • grid-area
    => 이름을 정의할 때 숫자는 사용할 수 없다

=> 한 칸을 비우고 싶을 경우 이름 대신 .을 적는다

auto flow 설정

명시적으로 배치되지 않은 아이템들을 자동으로 배치되도록 설정한다.

• grid-auto-flow: row(기본값) | column | dense
  => dense: 배치 후 남은 공간을 밀집한 형태로 채워준다

grid-item 정렬

행(열)축 정렬
=> 부모 요소에 justify(align)-items 속성을 준다.

• justify(align)-items: start | center | end | stretch(기본값)
  => grid-item에도 grid를 주고 justify(align)-items속성을 부여하면 content의 배치를 조정할 수 있다

grid-item-track 정렬

컨테이너의 크기보다 그리드 아이템 트랙이 작을 때 사용한다.

• justify(align)-content: start | center | end | stretch | space-around( between | evenly )

grid-item 개별 정렬

grid-item에 justify(align)-self속성을 부여한다.

• justify(align)-self: start | center | end | stretch

순서 설정

flex-item의 order와 동일하게 동작한다

gap

flex와 grid에서 요소 사이의 간격을 설정한다

transform

• transform: translateX(Y)(값)
  => X축(Y축)으로 값만큼 이동한다
• transform-origin
  => 회전이 될 지점 지정

그레디언트

그라데이션 색깔 조합으로 배경 만들기

• 멀티로 배경을 지정할 때는 뒤에 배치할 배경의 코드를 밑에 위치한다

애니메이션

자바스크립트를 이용한 애니메이션에 비해 성능이 좋다

• @keyframes
  => 애니메이션이 적용될 특정 시점(백분율)과 애니메이션 정보를 지정
• animation-name(필수 속성)
  => @keyframes에서 지정한 이름 할당
• animation-duration(필수 속성)
  => 지속 시간
• animation-fill-mode
  => 실행 이전이나 이후에 효과를 표시할지 여부 지정
• animation-delay
  => 실행을 지연시킨다
• animation-play-state
  => 애니메이션을 켜고 끌 수 있게 한다( paused | running )

  이동효과를 줄 때 상대적으로 transform이 리플로우를 덜 발생시킨다

트랜지션

지정한 속성이 점진적으로 전이되는 과정을 구현

• transition-property(필수 속성)
  => 지정된 속성 값이 전이된다
• transition-duration(필수 속성)

멀티 컬럼

단을 나누는 디자인을 할 때 사용한다

• column-count
  => 지정한 값만큼 단을 나눈다
• column-width
  => 1개 단의 너비를 지정한다

  단축표기법
  columns
  => count와 width를 값으로 줄 수 있다

• column-gap
  => 단 사이의 간격을 조정한다
• column-rule
  => 단 사이의 구분선을 디자인한다
• column-span
  => 기본값은 none, all 값을 주면 단들이 병합된다
• column-fill
  => balance 값을 주면 단의 높이가 균형을 이루도록 해준다
• break-after
  => 페이지를 나눌 지점을 설정한다

함수

counter()

=> 자동으로 번호를 매길 때 사용한다

사용법

1. counter-reset
   => counter의 이름 또는 초깃값을 지정한다(초깃값의 기본값은 0)
   => counter-reset: 카운터이름 초깃값
2. counter-increment
   => counter의 증가(감소)값을 지정한다(기본값은 1)
   => counter-increment: 카운터이름 증가(감소)값
3. counter()
   => 해당하는 카운터의 값을 보여준다
   => counter(카운터이름, list-style-type)
4. counters()
   => 중첩된 카운터가 필요할 때 사용
   => counters(카운터이름, 구분할text, list-style-type)

   list-style-type은 생략 가능하며, 기본값은 십진수(decimal) 형태

clamp()

=> clamp(최솟값, 기본값, 최댓값)

텍스트

white-space

공백 문자를 처리하는 법을 지정한다.

값
=> 기본값은 normal

• nowrap
  => 연속된 공백을 무시하고, 줄바꿈이 일어나지 않으며, 부모요소를 넘칠 수 있다
  => text-overflow의 속성에 ellipsis로 값을 주면 말줄임표가 생긴다
• pre
  => 연속된 공백과 줄바꿈이 그대로 적용되고, 부모요소를 넘칠 수 있다
• pre-wrap
  => pre와 동일하나, 부모요소를 넘치지 않는다
• pre-line
  => 줄바꿈만 적용되고, 부모요소를 넘치지 않는다

object-fit

이미지나 비디오 요소의 콘텐츠 크기를 조절해 부모요소에 맞추는 방법을 정한다.

사용법

• object-fit: fill(기본값)
  => 가로/세로의 비를 무시하고 부모 요소에 가득 맞춘다
• object-fit: contain
  => 가로/세로의 비를 유지하면서 세로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다
• object-fit: cover
  => 가로/세로의 비를 유지하면서 가로가 최대한 길어질 때까지 부모 요소에 가득 맞춘다
• object-fit: scale-down
  => contain과 cover 중 크기가 더 작아지는 값을 따른다

클래스 모듈

프로젝트에서 공통적으로 사용될 수 있는 디자인 요소들은 만들어두고 갖다가 쓴다.

input 요소의 checkbox 바꾸기

1. 기존 체크박스 보이지 않게 하기

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

2. 바꿀 체크박스가 들어갈 공간을 확보하기 위해 텍스트에 padding을 준다.
   => padding-left: 30px

---

Module CSS

module.css는 class 코드를 module 객체로 받아서 사용한다.
👉 지정한 class 이름에 랜덤 값이 추가되기 다른 class와 겹치지 않는다는 장점이 있기 때문에 사용한다.