레이아웃이 뭡니까..?
: block 레벨 요소들을 원하는 위치에 배열하는 것.
layout에 사용되는 용어들
- Header & Navigation Bar
- section ( 콘텐츠 영역 ) & Aside (
- Footer
반응형 레이아웃은 뭡니까?
-> 우리는 사용자가 어떤 디바이스로 웹 사이트를 방문할 지 알 방법이 없습니다 . ex 데스크탑, 태블릿, 모바일 등등...
그래서
`viewport meta tag`
일반적으로 `viewport meta tag`는 모바일 디바이스 에서만 적용됨.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
`@media` 반응형 웹디자인에 사용되는 핵심 기술
를 사용하여 미디어 별로 style 을 지정하는 것을 `Media Query` 라고 합니다.
@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}
Mobile first 라는 말은 어플리케이션에서 가장 중요한 사이즈가 모바일이라는 얘기이다.
Mobile first는 보통 `min-width` 값을 지정
non-Mobile first는 보통 `max-width` 값을 지정
크로스 브라우징을 위한 방법
- `<!DOCTYPE html>` 로 HTML5 사용을 확실히 명시하는 것
- `Reset CSS` 로 브라우저마다 기본 제공하는 기본값을 초기화
- `반응형 웹사이트` 만들기
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`로 모바일 브라우저의 뷰포트 크기 조정
- `<meta charset="utf-8">` 문자열 인코딩 하는 방식을 선언하여 문자 깨짐 현상 방지
'프로그래밍 언어 > 퍼블리싱 ( HTML, CSS )' 카테고리의 다른 글
| [CSS] Flexbox: display와 정렬 속성 기록 및 정리 (1) | 2025.05.05 |
|---|---|
| 개발자가 꼭 알아야 할 이슈 트래커와 협업 도구 총정리 (0) | 2025.03.28 |
| [HTML / CSS] 개념 다지기 2. (0) | 2025.03.06 |
| [HTML / CSS] 개념 다지기 1. (0) | 2025.03.05 |
| [html] 자주 사용하는 태그의 종류들,, (0) | 2025.01.24 |