[패스트캠퍼스] K-디지털 기초역량훈련 - React & Redux로 시작하는 웹 프로그래밍 학습일지 2주차(react 강의)

JIHYE·2022년 5월 9일
0
post-thumbnail

1. CSS 속성

1.1 크기 계산(box-sizing)

1.1.1 box-sizing

  • content-box : 요소의 내용(content)으로 크기 계산
  • border-box : 요소의 내용 + padding + border로 크기 계산

1.2 넘침 제어(Overflow)

1.2.1 overflow

  • overflow-x
  • overflow-y

1.3 출력 특성(Display)

1.4 투명도

  • opacity : 1은 불투명, 0 ~ 1의 값

1.5 글꼴

1.5.1 font-weight(글자의 두께, 가중치)

  • 기본(normal) : 400
  • 두껍게(bold) : 700
  • 100 ~ 900까지, 100단위 범위

1.5.2 line-height(한줄의 높이)

  • 숫자 : 글꼴 크기의 배수로 지정
  • 단위 : px, em, rem 등 사용

1.5.3 text-decoration

  • underline : 밑줄
  • line-through : 통과

1.6 배경

1.6.1 background-color

  • transparent(기본값) : 투명함

1.6.2 background-repeat

  • repeat : 이미지를 수직, 수평 반복
  • repeat-x : 이미지를 수평 반복
  • repeat-y : 이미지를 수직 반복
  • no-repeat : 반복 없음

1.6.3 background-position

  • 방향 : top, bottome, left, right, center
  • 단위 : px, em, rem 등 단위로 지정
  • 0% 0% : 맨위쪽 왼쪽

1.6.4 background-size

  • auto(기본값) : 실제 크기
  • 단위 : px, em, rem
  • cover : 비율을 유지, 요소의 더 넓은 너비에 맞춤
  • contain : 비율을 유지, 요소의 더 짧은 너비에 맞춤

1.6.5 background-attachment(배경 이미지 스크롤 특성)

  • scroll : 이미지가 요소를 따라서 같이 스크롤
  • fixed : 이미지가 뷰포트에 고정, 스크롤 X

1.7 배치

1.7.1 position

  • 요소의 위치 지정 기준
  • 기준을 먼저 잡고 위치를 정함.
    - top, bottom, left, right, z-index
    • ex) left:10px; right:10px;

  • static : 기준 없음
  • relative : 요소 자신을 기준, 사용 거의 안함
  • absolute : 위치 상 부모 요소를 기준
  • fixed : 뷰포트(브라우저) 기준
  • sticky : 스크롤 영역 기준

1.7.2 요소 쌓임 순서

  • 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
    -> 한글에서 그림 앞으로와 비슷한 느낌?
  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
  2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
  3. 1번과 2번 조건까지 같은 경우, HTML의 나중에 생긴 요소일 수록 위에 쌓임
  • z-index란? : 요소의 쌓임 정도를 지정
    - auto : 부모 요소와 동일한 쌓임 정도
    - 숫자 : 숫자가 높을 수록 위에 쌓임
  • position 속성 값으로 absolute, fixed가 지정된 요소는 display 속성block으로 변경됨

1.7.3 flex

  • 1차원으로 정렬?
  • Flex Container : display:flex 한 곳
    - 속성 : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
  • Flex Items : Flex Container의 자식 요소
    - 속성 : order, flex, flex-grow, flex-shrink, flex-basis, align-self

1.7.3.1 Flex Container 속성들

  • display : Flex Container의 화면 출력(보여짐) 특성
    - flex : 블록 요소와 같이 Flex Container 정의

    - inline-flex : 인라인 요소와 같이 Flex Container 정의

  • flex-direction : 주 축을 설정
    - row : 행 축 (좌 -> 우)
    - row-reverse : 행 축 (우 -> 좌)
    - column : 열 축 (위 -> 아래)
    - column-reverse : 열 축 (아래 -> 위)

    - flex-direction : column의 경우 Main-axis는 y축

  • flex-wrap : Flex Items 묶음(줄 바꿈) 여부
    - nowrap(기본값) : 줄바꿈 없음
    - wrap : 여러 줄로 묶음

  • justify-content : 주 축의 정렬 방법
    - flex-start(기본값)
    - flex-end : 아이템의 순서는 바뀌지 않음...! ( flex-direction:row-reverse와 다른점)
    - center

  • align-content : 교차 축의 여러 줄 정렬 방법
    - stretch(기본값) : Flex Items를 시작점으로 정렬
    - flex-start, flex-end, center

    • 높이가 지정되어 있지 않은 경우, flex-container를 비율로 잘라 flex-items 들의 높이 조정
    • flex-wrap이 존재해야 하며, 정렬이 가능한 여백이 있을 경우, 줄이 2줄 이상일 경우만 동작
  • align-items : 교차 축의 한 줄 정렬 방법
    - stretch(기본값), flex-start, flex-end, end
    - items가 한 줄일 때 사용, 여러줄일때는 align-content 사용

1.7.3.2 Flex Items 속성들

  • order : Flex Item의 순서
    - 0(기본값) : 순서 없음
    - 숫자 : 숫자가 작을 수록 먼저
  • flex-grow : Flex Item의 증가 너비 비율, flex-grow가 없는 item들의 width를 빼고 나머지 공간을 비율로 나눠갖음
    - 0(기본값) : 증가 비율 없음
    - 숫자 : 증가 비율
  • flex-shrink : Flex Item의 감소 너비 비율
    - 1(기본값) : Flex Container 너비에 따라 감소 비율 적용
    - 숫자 : 감소 비율, 0이면 감소하지 않음
  • flex-basis : Flex Item의 공간 배분 전 기본 너비
    - auto(기본값) : 요소의 Content 너비
    - 단위 : px, em, rem 등 단위로 지정

1.8 전환

1.8.1 transition

  • 요소의 전환(시작관 끝) 효과를 지정하는 단축 속성
    - transition-property : 속성명
    - transition-duration : 지속시간(필수)
    - transition-timing-function : 타이밍 함수
    - transition-delay : 대기시간
    • ex) trasition : width 1s,
      background-color .5s ;

1.8.1.1 transition-timing-function

  • ease(기본값) : 느리게 - 빠르게 - 느리게 = cubic-bezier(0.25, 0.1, 0.25, 0.1)
  • linear : 일정하게 = cubic-bezier(0, 0, 1, 1)
  • ease-in : 느리게 - 빠르게 = cubic-bezier(0.42, 0, 1, 1)
  • ease-out : 빠르게 - 느리게 = cubic-bezier(0, 0, 0.58, 1)
  • ease-in-out : 느리게-빠르게-느리게 = cubic-bezier(0.42, 0, 0.58, 1)

1.8.2 transform

  • 요소의 변환 효과

1.8.2.1 2D 변환 함수

1.8.2.2 3D 변환 함수

1.8.3 perspective(속성)

1.8.4 backface-visibility

  • 3D 변환으로 회전된 요소의 뒷면 숨김 여부
  • visible(기본값), hidden




CSS 속성이 너무 많고 어렵다...🥲
밑에 링크를 통해 공부하니 그나마 좀 감이 잡히긴 하지만 여전히 어렵다...
https://flexboxfroggy.com/#ko

0개의 댓글