반응형
Aug 6, 2024
»
FE
반응형
상대단위 font-size
요소 따라 달라지는 단위
- em rem: 크기 조정 상대 단위
- em: 부모 요소 글꼴 크기
- rem: 루트 요소 글꼴 크기 기본값 1rem=16px
- padding margin 에선 em이 자기 영역 폰트 사이즈를 따라감
뷰포트 따라 달라지는 단위
- vw: 뷰포트 너비 1/100 백분율
- vh: 뷰포트 높이 1/100
- vmin: 작은 쪽 1/100
- vmax: 큰 쪽 1/100
가변 레이아웃
px 대신 % 사용(font-size, height, width, margin, paddings)
CSS 함수
함수명(인수) - 결과값 속성에 적용
calc()
계산식의 결과 속성값에 지정
ex. calc(100%-100px) : 100px 빼고 나머지
미디어쿼리
미디어타입
쿼리
@media 미디어타입(screen) and (조건-속성) {
/* 미디어타입과 조건 모두 만족 시 덮어쒸울 css 스타일 선언문*/ }
조건 중복 확인하기
가변 이미지
img{
width:
max-width:
}
<picture> /*사진 바꿀 때*/
<source srcset=”url” media=”속성”>
컴포넌트-모듈화된 디자인
https://cheery-jalebi-4a1fc0.netlify.app/