반응형 웹 VS 적응형 웹
차이가 뭘까?
• 반응형 : 동일한 페이지를 보여주나 디바이스 크기에 따라 레이아웃을 다르게 보여줌. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임
• 적응형 : 사용자가 모바일 환경인지, PC 환경인지에 따라 다른 페이지를 보여줌
반응형 웹 디자인은 다양한 스크린 사이즈를 지닌 디바이스에 유연하게 적용될 수 있는 중요한 기술이므로 오늘은 반응형 웹을 구현하는 법을 알아볼 것이다!
미디어 쿼리
미디어 쿼리란, 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술이다.
@media 미디어유형 and (크기 규칙)
미디어 유형 : All(전부) / Print(인쇄) / Screen(전부)
크기 규칙: min(최소 뷰포트 넓이 설정) / max(최대 뷰포트 넓이 설정)
예를 들어,
@media screen and (max-width: 480px) {
body {background-color: black;}
}-> 화면 넓이가 480px 이하인 경우 body 배경 검정색 화면에 적용
@media print and (min-width: 481px) {
p {color:red;}
}-> 화면 넓이가 481px 이상인 경우 p태그 빨간색으로 인쇄시 적용
breakpoint
미디어 쿼리가 적용될 지점을 breakpoint라고 한다.
사용자 지정 CSS 속성
추가로, CSS에서 사용자 지정 속성을 사용하는 법이 있다.
서로 다른 수백 곳에서 같은 색상을 사용할 때 편리하게 추가, 수정할 수 있다.
:root {
--color-main: #ffaa00;
--nav-height-lg: 60px;
}먼저, 알아보기 쉬운 이름으로 된 변수를 선언해준다.
.header {
background-color: var(--color-main);
height: var(--nav-height-lg);
}사용할 때는 var() 함수를 사용하고 매개변수 자리에 미리 선언한 변수 이름을 넣으면 된다!!
Sejong Univ.