티스토리 뷰
안녕하세요:) 손누누입니다. 오늘은 반응형 웹 사이트를 만들기 위한 핵심적인 4가지 내용을 여러분과 나누어
보고자 합니다.
현 시대에 우리는 웹 사이트를 컴퓨터로도 접속하고, 노트북으로도 접속합니다. 또는 타블릿이나 모바일(휴대폰)으로도 접속하여 웹 사이트를 살펴볼 수 있습니다. 그만큼 기기에 종류가 다양해지고,
우리들의 눈에 보이는 화면에 크기도 다양해졌다는 것을 경험할 수 있습니다.
이에 따라 각 크기 화면에 구애받지 않고 사용자가 경험을 할 수 있는 웹사이트가 요구되었고 그에 반응형
웹사이트가 만들어지게 됩니다.
반응형 웹 사이트 제작 시 핵심적인 4가지 기술 이 있습니다.
첫번째는 % 단위를 쓰는 가변크기 적용입니다.
웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 픽셀(px) 대신
퍼센트(%)단위로 제작하는 것입니다.
px 단위를 사용할 경우 그 값에 고정되어 화면을 줄였을 때, 그 값에 맞춰서 크기가 변하지 않습니다.
퍼센트(%)로 제작할 경우 가변 폭에 따라 박스 모델이나 이미지가 가변적이게 늘었다 줄어들었다 할 수 있습니다.
가변적으로 크기는 조절이 가능하나 기기나 환경에 따라 구조를 바꾸기는 % 단위로는 한계가 존재합니다.
이에 화면을 제어할 '뷰포트(Viewport)' 와 화면의 크기나 환경을 감지하여 구조를 바꿔줄 '미디어 쿼리'가 필요합니다.
두 번째는 '미디어 쿼리'입니다.
컴퓨터나 기기의 환경 또는 종류를 감지하여 그 기기에 맞게 웹사이트의 구조를 바꿀 수 있도록 도와주는 기술입니다.
미디어 쿼리의 기본 문법은 @media [only 또는 not] [미디어 유형] [and 또는 , 콤마] (조건문) {실행문} 으로 작성됩니다.
@media all and (min-width:320px){
}
( 현재 작성된 미디어 쿼리 내용은 320px 모바일 화면 기준으로 작성된 내역입니다.)
세번째 '뷰포트(Viewport)'입니다.
PC화면은 사용자가 지정한 해상도에 따라 보이는 영역이 결정되지만, 다른 기기에서는 기본 설정값이 자동으로
보이는 영역으로 설정되기 때문에 미디어 쿼리를 사용해도 스마트 기기에서 하면의 크기를 정확하게 감지하지
못합니다.
다른 기기의 보이는 영역을 실제 화면 크기로 변경하여 미디어 쿼리가 기기의 화면 크기를 정확하게 감지할 수
있도록 만들어진 기술이 '뷰포트(Viewport)'입니다.
뷰포트(Viewport) 를 작성할 때는 HTML 안에 <head> </head> 사이에 작성해줍니다.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum
-scale=1, user-scalable=no">
</head>
네번째 display: flex 또는 display: grid를 이용한 레이아웃 배치입니다.
기존의 css (position) 속성으로는 박스의 배치 순서를 변경하거나 자유롭게 바꾸는 것이 쉽지 않았습니다.
또한 반응형으로 웹사이트를 제작할 시 화면 크기에 따라 레이아웃 배치들이 깨지는 경우가 종종 발생하게 됩니다.
이에 display: flex와 display:grid는 박스 요소들을 다양하고 자유롭게 바꾸는 것이 가능하면, 특정 속성값을 중앙으로
설정하면 박스들을 중앙으로 배치할 수 있습니다. 여러 개의 박스를 배열할 때 높이를 확장할 수 있으면 margin, padding값을 입력하지 않아도 간격을 조정할 수 있습니다.
오늘은 반응형 웹 사이트를 만들기 위한 핵심적인 4가지에 대해 전반적으로 정리해보았습니다.
다양한 화면에 기기가 등장함에 따라서 그에 맞는 기술들이 나타나고 있습니다.
상황에 따라 어떠한 용도에 따라 반응형 웹 사이트를 제작하는 방식도 제 각각 다릅니다.
반응형 웹사이트를 제작할 때 모바일, 타블릿, pc화면으로 각 크기에 맞춰서 HTML 파일을 각각 작성하여
작업하기도 합니다.
( 대체로 모바일, PC화면만 따로 하여 HTML 파일을 두 개 작성합니다. / 네이버는 PC화면 사이트와
모바일 화면 사이트를 각각 구축하였습니다. )
아니면 오늘 포스팅한 내용처럼 핵심적인 4가지 기술을 이용하여 HTML 파일 하나에 작성할
수 있습니다. 이는 상황과 용도에 따라 구분하여 사용하는 방식적으로 차이가 있다고 봅니다.
오늘도 긴 글을 읽어주셔서 감사합니다 :)
다음에는 display: flex에 대한 내용으로 찾아뵙겠습니다 :)
출처: "Do it! 반응형 웹 만들기_ 김운아 지음" 책에서 인용한 내용들이 곳곳에 존재합니다.
반응형 웹 만들기와 관련하여 자세하게 공부하고 싶다면 이 책을 읽어보실 것 추천드립니다 :)
'We think about IT' 카테고리의 다른 글
| [Front] 서버로부터 받은 토큰 어디에 저장할까? (3) | 2020.10.06 |
|---|---|
| [데이터베이스] Windows 10 오라클 다운로드 (11g version) (4) | 2020.10.02 |
| [Typescript] 타입 스크립트 프로젝트에 ESLint와 Prettier 적용하기 (3) | 2020.09.28 |
| [크롤링] 크롤링의 법적 문제 (8) | 2020.09.26 |
| [기획] 웹사이트와 모바일 앱 제작 기획에 대한 전반적인 이야기 (8) | 2020.09.22 |