[HTML, CSS] 반응형 레이아웃 만들기 (media query 문법)

📌 media query 문법을 이용해 반응형 레이아웃을 만든다.

- break point를 설정한다.

1. ✅ 반응형 사이트 만들려면 head에 밑에 내용 복붙 필요

<meta name="viewpoint" content="width=device-width, initial-scale-1.0">

<head>
    <meta chatset="UFT-8">
    <title>Document</title>
    <link href="css/layout.css" rel="stylesheet">
    <meta name="viewpoint" 
    content="width=device-width, initial-scale-1.0">
</head>

2. ✅ media query 문법

@media screen and (최대폭 설정하기)
현재 브라우저 폭이 설정한 최대폭 이하면 밑에 코드 적용하기

class 몇 개 적든 상관없음 - 여러개 사용 가능 ➡️ 스타일 중복이 생기면 밑에있는걸 우선적으로 적용함
보통 큰사이즈→작은사이즈 순으로 작성
breakpoint 기준 px값은 다른 사람 따라하는걸 권장.
- 1200px
- 992px
- 768px
- 576px
breakpoint 너무 많이는 X

@media screen and (max-width: 576px) {
    .main-title {
        font-size: 20px;
    }
}

저작자표시

': ) Web > 웹 스터디' 카테고리의 다른 글

Bootstarp Grid 레이아웃 (row와 col) (0)	2023.12.12
[HTML, CSS 실습] 반응형 레이아웃 만들기 - 쇼핑몰 레이아웃 (0)	2023.11.19
[HTML, CSS 실습] flex-grow 속성 이용해 상단바 만들기 (0)	2023.11.19
[HTML, CSS] 레이아웃 만들기 - Flexbox (2)	2023.11.19
[HTML, CSS] 웹 폰트(커스텀폰트) 넣는 방법 / anti-aliasing (0)	2023.11.19

Hallo, Auf Wiedersehen

[HTML, CSS] 반응형 레이아웃 만들기 (media query 문법)

': ) Web > 웹 스터디' 카테고리의 다른 글

티스토리툴바

[HTML, CSS] 반응형 레이아웃 만들기 (media query 문법)

': ) Web > 웹 스터디' 카테고리의 다른 글

관련글

티스토리툴바