css에서 미디어 쿼리를 이용해
반응형 웹을 제어해볼게요.
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 화면
- 실제로 어떻게 나오는지 궁금해하실것같아서 화면도 캡처해봤어요.
- 색이 마음에 드네요.
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/
:: 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 |
