[css] 미디어쿼리로 반응형웹 제작하기

coding/html + css 냐울 · 2021. 7. 13. 09:30

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/main.css">
    <title>Document</title>
</head>
<body>
    
    <div class="reactive">
        반응형
    </div>

</body>
</html>

① html

- 일단은 간단하게 html을 작성해봤어요.

- 예시로 사용할 거라 간단하게 <div> 하나만 만들었습니다.

- [! + Tab]을 누르면 html 기본 구조를 간단하게 불러올 수 있습니다. 자세한 사항은 아래에 링크로 달아둘게요.

2. pc 사이즈 css

*{ margin:0; padding:0; }

.reactive{ 
    width:100%; height:300px; 
    background:lightcoral; 
    text-align: center; line-height: 300px; font-size: 24px; color:white; }

① 기본 css

- pc 사이즈는 그냥 평소대로 코딩을 해줍니다.

- 저는 보기 좋게 간단하게 배경색과 사이즈 정도만 정해주었어요.

- 일단은 반응형은 생각하지말고 작업해주세요.

② pc 화면

- 실제로 어떻게 나오는지 궁금해하실것같아서 화면도 캡처해봤어요.

- 색이 마음에 드네요.

320x100

3. tablet 사이즈 css

@media screen and (max-width:1000px) {
    .reactive{ background: yellowgreen; }
}

① 미디어 쿼리

- 미디어 쿼리는 다양한 미디어 환경에 맞춰 제작하기 위한 것인데요 일단 넘어가고 반응형 제작에 사용하는 기능입니다.

- [@media screen and (max-width:1000px){ }] 이라고 적어주신 뒤 안쪽에 css를 코딩해주시면 됩니다.

- max-width 값으로는 기준이 되는 사이즈를 적어주세요. 이쯤에서 변경되면 좋겠다 싶은 사이즈를 적어주시면 됩니다.

② tablet 화면

- 브라우저 사이즈를 조절해보면 1000px에서 배경색이 바뀌는 것을 알 수 있어요.

- 이런 식으로 하나씩 사이즈별로 코딩을 해서 반응형 웹을 만듭니다.

4. mobile 화면 css

@media screen and (max-width:600px) {
    .reactive{ background: darkorange; }
}

① 모바일 화면

- 그럼 모바일 화면은 어떻게 만드느냐 미디어 쿼리를 한 번 더 사용해주시면 됩니다.

- 이번에는 기준을 600px로 잡아서 해볼게요.

- 예시라 배경색만 바뀌게 만들었지만 다양한 스타일을 넣어서 꾸며보세요~

① 모바일

- 이번에도 역시 배경색만 바꿔보았습니다.

- 모바일은 브라우저를 줄여서 확인해도 괜찮기는 하지만 모바일 기기로 확인해보는 것이 정확합니다.

간단하게 만들어서 미디어쿼리를 2번만 사용했지만

실제로 반응형 웹 제작 시에는

pc와 태블릿 사이, 태블릿과 모바일 사이에 추가적으로 필요한 경우도 있으니

융통성 있게 사용해주세요.

contact

:: www.instagram.com/draw_wool/

:: www.pinterest.co.kr/draw_wool/_created/

:: notefolio.net/draw_wool

:: www.behance.net/draw_wool

:: grafolio.naver.com/draw_wool

[같이 보면 좋은 글]

[coding/editor] - [vs code] 비주얼 스튜디오 코드 html 자동완성 해보자

[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자

안녕하세요. 개자이너 씸플레이입니다. html 기본 구조를 자동완성으로 불러와보겠습니다. 1. 새 index.html 파일 여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼

ssimplay.tistory.com

[coding/html + css] - [css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정

[css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정

이제 마무리된 디자인에서 여백, 색 등을 조금씩 다듬어보겠습니다. 1. 내비게이션 바 메인 메뉴 ① 문제점 확인 내비게이션 바의 메뉴가 위쪽으로 딱 붙어서 답답한 느낌이 듭니다. 세로 기준으

ssimplay.tistory.com

그럼 이만.

총총.

저작자표시 비영리 변경금지 (새창열림)

'coding > html + css' 카테고리의 다른 글

[sass/scss] 변수 사용법 (2)	2021.09.02
[css] 미디어쿼리 max-width 사용시 주의점 (4)	2021.07.19
[css] 홈페이지 코딩 내비게이션 바 07 - 간격 조정 (12)	2021.03.15
[css] 홈페이지 코딩 내비게이션 바 06 - 색을 넣어보자 (12)	2021.03.08
[css] 내비게이션(gnb) 만들기 05 - 가운데 정렬 (6)	2021.03.04