반응형 웹 기초 02

calc()

css 상에서 사용할 수 있는 함수로, 간단한 계산이 가능함

<style>
	.box {
    	width: calc(100% - 100px);
    }
</style>

---

calc() 외, 자주 사용하는 CSS 함수

종류	설명	예시
clamp()	최소값, 최적값, 최대값 설정	font-size: clamp(1rem, 2.5vw, 2rem);
min()	여러 값 중 가장 작은 값 선택	width: min(50vw, 500px);
max()	여러 값 중 가장 큰 값 선택	height: max(100px, 10vh);

---

미디어 타입

orientation portrait 또는 landscape 감지

color 기기의 색상당 비트 수

color-index 출력 기기의 색상 테이블 수

aspect-ratio 디스플레이 영역의 너비와 높이의 비율

---

미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 장치 (기능)

 

@media 미디어타입 and (조건) {...}

<style>
@media screen and (min-width: 800px) {
	img {
    	width: 400px;
        height: 240px;
    }
}
</style>

 

위 예시는 현재 출력되는 브라우저 너비가 800px 이상일 때 img 의 크기가 400*240 로 설정되는 미디어 쿼리

미디어 쿼리는 다중 설정이 가능함