6월 3주차 정리

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

Box Model

border-radius

• 단축속성
• 모서리를 설정하며 설정값이 높을수록 둥글어짐

background

• color: 배경 색상 설정
• image: 배경 이미지 설정
• repeat: 배경 이미지 반복 여부 및 방식 설정
• position: 배경 위치 설정
• size: 배경 이미지 사이즈 설정
• attachment: 고정 설정
• clip: 요소의 배경이 어디까지 차지할지 지정
• origin: 배경 위치 시작점 설정

box-shadow

• 그림자 효과 추가
• offset-x offset-y blur-radius spread-radius color

opacity

• 0 ~ 1 사이의 숫자로 불투명도 설정

display

• 박스의 유형을 지정하여 다른 박스들과 어떻게 배치될 지 레이아웃 설정

• 주의: CSS 속성으로 시각적인 부분이 바뀌었을 뿐 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님

• block

• inline

• inline-block

• flex

• grid

• none

reset.css

• 각 브라우저마다 기본적으로 제공하는 스타일이 있으며 조금씩 다름
• 크로스 브라우징을 대비하여 CSS를 리셋시키는 것

크로스 브라우징

• 어느 한 쪽 브라우저에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
• 다른 브라우저로 접속해도 거의 비슷한 사용자 경험을 할 수 있게 함

Position

• static(기본값)
• relative
• absolute
• fixed
• sticky

flex

flex-container

• flex가 적용된 부모요소를 flex-container, 자식요소를 flex-item이라고 부름
• 1차원적 레이아웃을 위해 주로 사용 됨

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향 지정

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정 가능

align-items

• 교차 축을 기준으로 정렬

align-content

• 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용 가능(flex-wrap: wrap) 상태에서만 사용 가능

flex-basis

• flex-item의 초기 크기를 설정(축마다 달라지며 내부 콘텐츠에 따라 유연한 크기를 가짐)

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도 지정
• 0을 줄 경우 늘어나지 않으며 2 이상의 수를 줄 경우 다른 자식요소보다 2배 이상의 여백 공간을 할당 받음

grid

• 웹 페이지를 위한 2차원 레이아웃

grid-container 속성

grid-template-columns

• 열 방향 그리드 트랙의 사이즈를 설정

grid-template-rows

• 행 방향 그리드 트랙의 사이즈를 설정

fr?

• fraction(분수)의 약자
• 컨테이너 분할
• 트랙의 비율을 지정해주는 유연한 길이 단위
• 1fr 1fr 1fr은 1:1:1의 비율 의미

함수

1. repeat()

• grid-track의 사이즈를 더 간단한 형태로 표현하도록 도와줌
• repeat(반복 횟수, 반복할 값)으로 사용

2. minmax()

• 그리드에서 최소와 최대 사이의 범위를 설정하는 함수이며 최소값과 최대값을 의미하는 두 가지 인자를 가짐

align-content

• 그리드 콘텐츠의 수직 정렬
• 아이템의 세로 높이가 컨테이너 안에서 움직일 공간이 있어야 함

justify-content

• 그리드 콘텐츠의 수평 정렬
• 아이템의 가로 높이가 컨테이너 안에서 움직일 공간이 있어야 함.

align-items

• 직계 자식에 대한 수직 정렬을 동일하게 해줌

justify-items

• 직계 자식에 대한 수평 정렬을 모두 동일하게 해줌

grid-item 속성

grid-area

grid-column-start, grid-column-end / grid-row-start, grid-row-end

• 그리드 열방향 시작, 끝 / 그리드 행방향 시작, 끝

align-self

• 아이템 개별로 수직 (열) 정렬을 지정

justify-self

• 아이템 개별로 수평(행) 정렬을 지정

place-self

• align-self, justify-self 를 함께 적는 단축 속성

order

• (flex와 마찬가지로) 아이템의 배치 순서를 지정

transform

• 요소에 다양한 변형을 줄 수 있음

scale

• 요소의 크기 조절
• 자신의 가운데를 중심으로 크기 변경
• transform-origin을 통해 기준점 변경 가능
• scale(1.5) => 1.5배 커짐

rotate

• 요소 회전
• transform: rotate(180deg) / transform: rotate(0.5turn) 으로 사용
• 자신의 가운데를 중심으로 회전
• transform-origin을 통해 기준점 변경 가능

translate

• 자신의 위치에서 x, y축 이동
• 기준점: 왼쪽 상단
• 음수값 지정 가능

skew

• 요소 왜곡
• 각도 단위 사용

transition

• CSS 속성값이 변할 때 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것
• 단축 속성
  - property: 전환 효과 속성 설정
  • duration: 완료까지 걸리는 시간
  • timing-function: 진행 속도 설정

animation

• 스타일 전환
• 구성요소: CSS 스타일과 키프레임들

transition VS animation

• transition: 요소의 상태가 변경되어야 가능
• animation: 요소의 상태 변화 관계 X

@keyframes

• 두 개 이상의 애니메이션 중간 상태 설정
• 0%, from: 시작시점 / 100%, to: 종료시점

animation 속성

name

@keyframes **animation-name** {}

• animation-name의 시작에는 영문 소문자,문자열, 언더바(_), 하이픈(-)을 사용
• 사용할 수 없는 것: 영문 대문자, 숫자, 특수문자
• 여러 개의 animation-name을 동시에 나열할 경우: 쉼표(,)를 통해 구분

duration

• 애니메이션 한 사이클 완료 시간
• 음수값이면 실행 X

timing-function

• 애니메이션 진행 방식 설정
• ease(기본값)
• linear
• steps(n)

delay

• 애니메이션이 언제 시작할지 설정
• 음수값이면 도중에 시작

iteration-count

• 재생 횟수 설정
• infinite: 무한 반복
• 1: 한 사이클 재생

direction

• 앞으로 뒤로 또는 앞뒤로 번갈아 재생 여부 설정
• normal(기본값)
• reverse
• alternate
• alternate-reverse