반응형 웹(Responsive web)이란?
반응형 웹, 반응형 홈페이지란 하나의 홈페이지로 PC, 태블릿, 노트북, 스마트폰(mobile) 등 여러가지 디바이스에서 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하는 웹페이지 접근 기법입니다.
기존에는 PC용 사이트, Mobile용 사이트를 별개로 제작하였지만 최근의 웹사이트는 반응형으로 많이 제작하고 있습니다.
반응형웹의 장점은 PC용 url과 Mobile용 url이 동일하여 사용자 접속을 효율적으로 관리할 수있고 유지보수가 보다 편리합니다.
PC와 모바일용 사이트를 별개로 제작한다면, 사이트를 수정할 때 두개의 사이트 모두 수정을 해야했다면,
반응형을 적용한 사이트는 하나의 사이트를 수정하면 PC와 모바일 모두 동일하게 수정되어집니다.
반응형 웹 시작하기
1. 메타태그(meta tag) : viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
viewport 메타태그는 <head> 사이에 들어가게 됩니다.
viewport는 반드시 들어가야할 태그로, 만약 반응형웹을 제작 중인데 모바일화면에서 적용이 안된다. 라고 하면 meta태그의 유무를 반드시 확인하셔야 합니다
뷰포트의 설정값은 여러가지가 있지만, 위의 코드는 가장 일반적으로 사용되는 코드입니다.
아래는 뷰포트에서 설정할 수 있는 값입니다.
- width=device-width : 페이지 넓이를 기기의 스크린 넓이로 설정합니다.
- initial-scale=1.0 : 페이지 로딩시 확대/축소가 되지 않은 원래의 크기를 사용합니다. (값 : 0~10 )
- minimum-scale : 축소할 수 있는 최소 크기를 지정합니다. (값 : 0~10 )
- maximum-scale : 확대할 수 있는 최소 크기를 지정합니다. (값 : 0~10 )
- user-scalable : 사용자가 확대/축소 할 수 있는지를 정합니다 (값 : yes, no)
2. 미디어쿼리(MedaiQuery) CSS
@media (min-width:320px) and (max-width:768px){
div {color:red}
}
위의 코드는 디바이스 크기 320px ~ 768px에 해당하는 style을 지정합니다. 일반적으로 핸드폰 ~ 태블릿사이즈 입니다.
@media (min-width:320px){
div {color:red}
}위의 코드는 디바이스 크기 ~ 320px이하에 해당하는 style을 지정합니다. 일반적으로 핸드폰사이즈입니다
[미디어 유형]
|
기기명 |
설명 |
|
|
all |
모든 장치 |
|
|
|
인쇄 장치 |
|
|
screen |
컴퓨터 화면 장치 또는 스마트 기기의 화면 |
|
|
tv |
영상과 음성이 동시에 출력되는 장치 |
|
|
projection |
프로젝터 장치 |
|
|
handheld |
손에 들고 다니는 소형장치 |
|
|
speech |
음성 출력 장치 |
|
|
aural |
음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치) |
|
|
embossed |
점자 인쇄 장치(화면을 읽어 종이에 점지를 찍어내는 장치) |
|
|
tty |
디스플레이 기능이 제한된 장치 |
|
|
braille |
점자 표시 장치 |
|
미디어쿼리의 일반적인 분기점에 대해 알고싶으시다면 아래의 포스팅을 참고해주세요.
[CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트
[CSS] 반응형 웹 디바이스별 해상도 반응형 분기점 리스트
오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그
eunyoe.tistory.com
3. 반응형제작을 위한 CSS 방법
일반적으로 CSS작업을 할때 주로 사용하는 단위는 픽셀(px)입니다.
하지만 px은 고정 단위이기 때문에 반응형 웹을 사용할때에는 적합하지 않습니다.
반응형웹을 제작할때는, 유동적인 단위를 사용해주셔야 합니다.
아래는 유동적인 단위에 대해 설명이니, 참고하시고 필요한 용도에 따라 사용하세요 :)
1. %(퍼센트)
.div1{width:50%}]
.div2{width:calc(50% - 10px);}반응형 작업을 할때 가장 많이 사용되는 % 입니다.
일반적으로 width값을 지정해줄 때 많이 사용됩니다.
calc(50% - 10px)는 전체 디바이스 넓이의 50% 에서 10px 만큼을 뺀 값을 출력할 수 있습니다.
calc도 반응형 웹에서 아주 유용하게 쓰이니 꼭 기억해두세요.
2. vw / vh
vw, vh는 뷰포트를 기준으로 한 단위입니다. 보여지는 화면의 영역이라고 생각하시면 됩니다.
.div {width:100vw}
.div2 {height:100vh}- vw : 뷰포트를 기준으로 한 width(너비)의 단위입니다 . "1vw는 1%"로 계산됩니다.
- vh : 뷰포트를 기준으로 한 height(height)의 단위입니다 . "1vh는 1%"로 계산됩니다.
이 둘의 단위는 뷰포트 전체 영역을 차지하는데에 잘 사용됩니다.
width:100vw를 사용하면 뷰포트의 width:100%의 효과를,
height:100vh를 사용하면 뷰포트의 높이를 꽉 채우는 효과를 얻을 수 있습니다.
특히 100vh는 브라우저 창 높이, 디바이스의 높이를 자동으로 채워주는 값이라 많이 사용됩니다.
3. em / rem
em과 rem은 뷰포트, 즉 디바이스의 가로 구격에 맞게 글자 크기가 적용된다.
px와 같은 절대값을 사용하게 되면, 수정과 유지보수 측면에서 번거롭지만 em, rem단위를 사용한다면 기준이 되는 폰트의 크기만 수정하면 되기 때문에 사용성이 좋다.
p {font-size:1rem}
span {font-size:1.2em}- em : body(부모)에 정의된 사이즈를 기준으로 폰트 크기를 정함
- rem : html에서 지정된 font-size의 고정값에 비례햐여 크기가 계산된다.
em, rem의 사용법에 대해 알고싶으시면 아래 포스팅을 참고하세요
[CSS] 반응형 폰트 단위 em/rem 사용법과 차이점
반응형 폰트 단위 em/rem css에서 사용되는 단위는 여러 가지가 있습니다. 그중에 오늘은 폰트, 즉 글자의 크기를 결정하는 단위인 em, rem에 대해 알아보겠습니다. 일반적으로 폰트의 크기를 결정
eunyoe.tistory.com
'Web > CSS' 카테고리의 다른 글
| [CSS] 브라우저 스크롤바(scroll bar) CSS 커스텀 디자인하기 (0) | 2021.04.19 |
|---|---|
| [CSS] 반응형 폰트 단위 em/rem 사용법과 차이점 (0) | 2021.04.19 |
| [CSS] CSS 변수 사용하기 (0) | 2021.04.14 |
| [CSS] :root 가상선택자를 통한 css 변수, IE 적용방법 (0) | 2021.04.14 |
| [CSS] css로 글자수 자르기 / 문자열 자르기 (0) | 2020.02.19 |