CSS

seumomo_TAEILKIM·2023년 5월 18일
0

총정리

목록 보기
2/8


2023/08/11

CSS

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

기본문법

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

스타일 방법

External Style Sheet

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

Embedded Style Sheet

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

Inline Style Sheet

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

선택자

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

가상 요소 선택자

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

가상 클래스 선택자

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

상속

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

우선순위

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

FONT

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

숨김 텍스트 만들기

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

  • position: absolute; !important
    => 화면에서 띄우고, !important로 다른 선언보다 우선하도록 한다
  • widthheight 값을 줄인다
  • 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값을 주어도 공간이 벌어지지 않는다
    => widthheight의 값을 줄 수 없다
    => 컨텐츠의 크기에 맞게 너비가 조절된다
  • 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
    => 자신과 가장 가까운 상위 블록에서 positionstatic이 아닌 것을 기준으로 삼아 움직인다
    => 상위 블록은 relative / 움직이고자 하는 블록은 absolute로 많이 한다
  • fixed
    => 설정한 대로 뷰포트 내에서 고정된다
    => absolute와 달리 띄운 다음 뷰포트를 기준으로 움직인다
  • sticky
    => 자신의 위치에 도달할 때까지 달라붙는다

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

float

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

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

  • display: flow-root;
  • 부모도 float 시키기
  • ::after를 만들어서 content: ""을 넣고 displayblock으로 설정하고, clear 시키기
    => clear 속성은 displayblock인 경우에만 적용이 가능하다
  • 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

flexgrid에서 요소 사이의 간격을 설정한다

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
    => countwidth를 값으로 줄 수 있다

  • 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
    => containcover 중 크기가 더 작아지는 값을 따른다

클래스 모듈

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

input 요소의 checkbox 바꾸기

  1. 기존 체크박스 보이지 않게 하기
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  1. 바꿀 체크박스가 들어갈 공간을 확보하기 위해 텍스트에 padding을 준다.
    => padding-left: 30px

Module CSS

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

profile
어제의 나보다 1% 발전하기💪

0개의 댓글