이번 시간에는 현대 웹 사이트라면 당연하게 고려해야할 반응형 웹과 css를 처음부터 만들 필요 없이 잘 만들어진 부트스트랩에 대해서 학습했다.
1. 반응형 웹
반응형 웹이란 간단하게 말하면 사용자의 디바이스를 고려해 제작한 웹이라고 생각하면 된다.
브라우저의 너비나 높이가 디바이스 혹은 사용자가 조정하면 변할 수 있는데, 이 너비와 높이에 따라 HTML요소들의 크기가 상황에 맞춰(디바이스의 크기) 반응한다는 뜻으로 기억했다.
CSS를 %로 설정하면 일단, 기본적으로는 반응형 웹을 만들 수는 있지만, 제약이 너무 크다.
디바이스 별로 혹은 크기별로 요소를 지정하고 싶을 수도 있지 않은가? 그래서 MediaQuery라는 것을 이용해서 원하는 대로 반응형 웹을 제작할 수 있다.
2. MediaQuery
위에서 소개한 개념인 MediaQuery를 일단 코드로 만나보면 다음과 같다.
사용법은 @media (조건식) { css 적용 } 이다.
/*
- 최소 너비가 500px인 경우 적용
→ 너비가 500px이상이면 적용
*/
@media (min-width: 500px){
body{
background-color: skyblue;
}
}
/*
- 최대 너비가 300px인 경우 적용
→ 너비가 300px이하면 적용
*/
@media (max-width: 300px){
body{
background-color: orange;
}
}
/*
- 최소 너비가 300px이며 최대 너비가 500px인 경우 적용
→ 너비가 300px ~ 500px인 경우 적용
*/
@media (min-width: 300px) and (max-width: 500px){
body{
background-color: #fff;
}
}
/*
- 최대 높이가 300px인 경우 적용
→ 높이가 300px이하면 적용
*/
@media (max-height: 300px){
p{
font-size: 30px;
font-weight: bold;
background-color: green;
}
}위 코드를 실행한 동영상을 보면 단번에 이해가 갈 것이다.
MediaQuery를 적절히 잘 사용한다면 디바이스마다 다른 너비와 높이라도 원하는 css를 보여줄 수 있다.
3. CSS 단위
6가지가 있는데, 깔끔하게 정리해보겠다.
- px: pixel
- %: percent
- em
- font-size 속성값에 비례해서 결정되는 상대적인 단위(상위 요소 크기에 비례)
- 중첩이 가능
- rem(root em)
- 최상위 요소(<html>)에 비례
- 최상위 요소(<html>)에 비례
- vw(viewport width)
- vh(viewport height)
vw, vh에 대해서 예를 들어 설명해보겠다.
만약 1200px x 900px의 브라우저 크기일 경우, 1vw와 1vh는 각각 1200 x 1%, 900 x 1%인 12px, 9px이 된다.
너비와 높이가 1000 px x 500px로 변경되는 경우에는 1vw와 1vh는 각각 1000 x 1%, 500 x 1%인 10px, 5px로 된다.
4. CSS 변수
css에 변수가 있다는 것을 처음 알았다.
사용 방법에 대해서 적어보려한다.
/*
＊CSS 변수
- 변수 이름: --로 시작
*/
:root {
/* 전역 변수 */
--color-success: rgb(49, 156, 49);
--color-error: rgb(237, 58, 58);
--color-white: rgb(255, 255, 255);
}
.btn{
/* 지역 변수 */
--size: 8px;
/* var을 통해 :root에 선언한 변수를 가져오는 모습 */
color: var(--color-white);
border: none;
border-radius: 4px;
font-weight: bold;
padding: var(--size);
width: calc(var(--size) * 25);
}
.success{
background-color: var(--color-success);
}
.error{
background-color: var(--color-error);
}
큰 특징이 3가지가 존재한다.
- 변수를 선언할 때는 '--'을 붙여서 사용한다.
- :root {...}에 선언한 변수는 전역 변수가 된다.
- 선언한 변수를 사용할 때는 var()을 사용한다.