알아야 할 내용
소개
오늘날에는 웹에 접근할 수 있는 기기의 종류가 굉장히 많다.
데스크톱 컴퓨터, 태블릿, 모바일 등으로 종류도 많고, 크기도 제각각이다.
리스폰시브 웹 디자인 (responsive web design, 반응형 웹 디자인) 이라는 컨셉은
이러한 여러가지 종류의 기기에 알맞게 웹 콘텐츠를 디자인하기 위한 것이다.
이러한 여러가지 다른 점을 수용할 수 있도록, 웹페이지의 구조와 CSS 룰에 대해 고심해야 한다.
일반적으로는 우리가 타게팅하는 유저가 사용할만한 기기를 바탕으로 CSS 를 짜는 것이 맞다.
대부분의 유저가 모바일 기기를 사용할 것이라고 생각된다면, '모바일 퍼스트 (mobile-first)' 컨셉으로 시작하는 것이 좋을 것이다. 그리고 나서 더 큰 스크린 사이즈를 고려하여 CSS 를 더 조정하면 될 것이다.
대부분의 유저가 데스크톱 유저라고 판단된다면, 데스크톱 사이즈의 컨셉으로 시작하고 더 작은 사이즈의 CSS 룰을 추가하면 될 것이다.
CSS 에는 여러가지 룰을 적용하여, 여러 종류의 스크린 사이즈에 맞게 웹페이지의 구조가 바뀌도록 설정할 수 있다.
목록
- 미디어 쿼리 만들어 보기 - Create a Media Query
- 이미지를 반응형으로 만들어 보기 - Make an Image Responsive
- 고해상도 화면에 레티나 이미지 사용하기 - Retina Image for Higher Resolution Displays
- 반응형 타이포그래피 만들기 - Make Typography Responsive
- Responsive Web Design Principles 를 마치며...
Create a Media Query
미디어 쿼리 만들어 보기
설명
미디어 쿼리 (Media Queries) 는 CSS3 에서 새로 소개된 기술이다.
미디어 쿼리는 뷰포트(viewport) 사이즈에 따라
콘텐츠를 보여주는 방식을 변화시킬 수 있다.
뷰포트는 유저가 볼 수 있는 웹페이지 화면의 크기라고 생각하면 된다.
그래서 기기마다 화면 크기가 다르기 때문에,
뷰포트 사이즈도 다르다고 생각하면 된다.
미디어 쿼리에는 미디어 타입을 설정할 수 있는데,
설정한 미디어 타입과 유저가 사용하는 기기의 타입이 매칭된다면,
이 특정 미디어 타입으로 설정한 CSS 룰이 적용된다.
예를 들어,
데스크톱 미디어 타입, 태블릿 미디어 타입, 모바일폰 미디어 타입으로 구분하여 CSS 룰을 만들었다면,
유저가 어떤 화면 크기를 사용하느냐에 따라
완전히 다른 CSS 룰을 적용시킬 수 있다는 얘기이다.
아래 예시는 화면 크기의 가로 길이가
최대 100px 이하일 때 적용되는 미디어 쿼리이다.
@media (max-width: 100px) {
p {
font-size: 10px;
}
}
아래 예시는 화면 크기의 세로 길이가
최소 350px 이상일 때 적용되는 미디어 쿼리이다.
@media (min-height: 100px) {
p {
font-size: 10px;
}
}문제
1. 미디어 쿼리를 적용해보자.
2. 화면크기의 세로길이 (height) 가 최대 800px 이하일 때, <p></p> 태그의 폰트사이즈가 10px 이 되도록 설정해보자.
답변
@media (max-height: 800px){
p {
font-size: 10px;
}
}Make an Image Responsive
이미지를 반응형으로 만들어 보기
설명
사진과 같은 이미지를 반응형으로 만드는 것은 간단하다.
아래 예시와 같은 CSS 를 적용해주기만 하면 된다.
img {
max-width: 100%;
height: auto;
}
여기서 맥스위드쓰 (max-width, 최대 가로길이) 100% 라는 것은
이미지가 삽입된 위치 상의 컨테이너 박스 안에 가로길이로 꽉 찬다는 의미이다.
하이트 (height, 세로길이) 는 오토(auto, 자동) 로 설정되어 있는데,
이렇게 하면 가로길이에 따라 기존 비율과 같은 세로길이가 자동으로 설정된다.
문제
1. .responsive-img 클래스에 CSS 룰을 적용해보자.
2. 이미지가 속한 컨테이너에 꽉 차게 만들어보자.
3. 세로길이는 이에 따라 기존 비율에 맞게 설정되어야 한다.
4. 설정 후에, 화면 크기를 변경하면서 이미지가 어떻게 변하는지 관찰해보자.
답변
.responsive-img {
max-width: 100%;
height: auto;
}Use a Retina Image for Higher Resolution Displays
고해상도 화면에 레티나 이미지 사용하기
설명
지금은 인터넷에 연결된 기기가 엄청나게 많은 시대이다.
그리고 이 속도는 계속 증가하고 있다.
게다가 연결된 기기마다 각각 서로 다른 특징을 지니고 있다.
사이즈, 화면 크기 등으로 말이다.
픽셀 덴시티 (pixel density, 픽셀 밀도) 또한 기기마다 다를 수 있는 특징 중 하나이다.
여기서 덴시티는 보통 PPI (Pixel Per Inch) 혹은 DPI (Dots Per Inch) 라고도 한다.
우리가 일반적으로 알고 있는 레티나 디스플레이 (Retina Display) 또한
이러한 여러 종류의 디스플레이 중 하나라고 보면 된다.
레티나와 레티나가 아닌 디스플레이는 픽셀 덴시티가 서로 다르다.
이러한 고해상도 디스플레이에 대해 고려하지 않았을 경우,
이미지가 깔끔해 보이지 않고,
작은 네모로 구성되어 보여지는 경우를 볼 수도 있다.
이미지를 레티나 디스플레이오 같은 고해상도 화면에서도
깔끔하게 보일 수 있게 하는 방법 중 가장 손쉬운 방법은
위드쓰(width, 가로길이) 와 하이트 (height, 세로길이) 를 반 사이즈로 만드는 것이다.
<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">문제
1. 이미지의 가로길이와 세로길이를 반 사이즈로 줄여보자.
2. 원래 길이는 200px 이다.
답변
<style>
img {
height: 100px;
width: 100px;
}
</style>Make Typography Responsive
반응형 타이포그래피 만들기
설명
em 혹은 px 은 사이즈를 정할 때 사용하는 단위이다.
하지만 뷰포트(viewport) 단위로는
반응형 타이포그래피(typography) 를 사용할 수 있다.
뷰포트 유닛은 퍼센티지(%) 와 같은 상대적인 단위인데,
뷰포트 유닛은 기기의 뷰포트 사이즈 (가로, 세로길이)를 기준으로 하는 반면,
퍼센티지는 상위 엘레먼트를 기준으로 한다.
| 뷰포트 유닛 | 설명 |
| vw (viewport width) | 10vw 는 뷰포트 가로길이의 10% |
| vh (viewport height) | 3vh 는 뷰포트 세로길이의 3% |
| vmin (viewport minimum) | 70vmin 은 세팅된 최소 뷰포트의 70% |
| vmax (viewport maximum) | 100vmax 는 세팅된 최대 뷰포트의 100% |
문제
1. <h2></h2> 의 뷰포트 유닛을 가로길이에 대해 80vw 로 세팅해보자.
2. <p></p> 의 뷰포트 유닛을 가로길이에 대해 75vmin 으로 세팅해보자.
답변
<style>
h2 {
width: 80vw;
}
p {
width: 75vmin;
}
</style>Responsive Web Design Principles 를 마치며...
기본적인 원칙만 살펴본 장이라서 그런지
아주 짧았다.
이제부터 진정한 반응형 웹디자인에 대해서
살펴볼 듯 하다.
'freeCodeCamp 프리코드캠프 > 1 반응형 웹 디자인' 카테고리의 다른 글
| 1-7 CSS 그리드 - CSS Grid (0) | 2020.09.16 |
|---|---|
| 1-6 CSS 플렉스 박스 - CSS Flexbox (0) | 2020.08.17 |
| 1-4 접근성 - Applied Accessibility (0) | 2020.07.21 |
| 1-3 시각 디자인 - Applied Visual Design (0) | 2020.07.01 |
| 1-2 CSS (0) | 2020.05.09 |
