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

: ) Web/웹 스터디

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

miiinn 2023. 11. 19. 17:42

📌 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;
    }
}

저작자표시 (새창열림)