230127 ver.
1. 참고 도서 & 자료
- 반응형 웹 페이지 만들기 http://aladin.kr/p/Ayjof
Do it! 반응형 웹 페이지 만들기
서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 저자가 가장 효율적으로 반응형 웹사이트를 제작할 수 있는 방법과 노하우를 알려 준다. 헷갈리기 쉬운 반응형 웹의 기본 개념부터 플렉서블
www.aladin.co.kr
2. 용어 정리
■ 가변 그리드 레이아웃(Fluid Layout, Flexible Layout, Flexible Grid)
■ 가변
어떤 객체나 사물의 크기가 변하는 것
■ 그리드
규칙적인 선
3. 필요한 기술
■ 가변 그리드(Fluid Grid)
웹 사이트를 화면의 크기에 따라 달라질 수 있도록 퍼센트(%)로 제작하는 기술
정해진 공식에 의해 정확한 가변 크기의 박스를 만드는 기술
- 가변 마진, 가변 패딩에도 동일
(가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) × 100
= 가변 크기의 % 값
■ 미디어 쿼리(Media Queries)
반응형 웹을 만들 때 반드시 필요한 기술
미디어에게 컴퓨터나 기기가 어떤 종류의 미디어이며 화면의 크기를 질문하고 파악하여 웹사이트를 변경하는 기술
- 쿼리(query)
우리가 컴퓨터나 기기를 사용하면서 질문하는 작업을 컴퓨터 용어로는 '질의' 또는 '쿼리', '쿼리 작업'이라고 부른다.
■ 뷰포트(Viewport)
모니터나 기기의 화면을 통해 보이는 영역 / 화면에 보이는 영역을 제어하는 기술 / 미디어 쿼리로 많은 기기의 화면 크기를 감지해야 할 때 꼭 필요
<head>
<meta name="viewport"content="width=device-width, initial-scale=1,
minimum-scale=1, maximum-scale=1, user-scalable-no">
</head>
'프론트엔드 > Responsive Web(검토 후 삭제예정)' 카테고리의 다른 글
| 반응형 웹(Responsive Web)을 해야 할까? (0) | 2023.01.27 |
|---|---|
| 반응형 웹(Responsive Web)에 대하여 (0) | 2023.01.25 |
댓글