2021.07.12 CSS 실습(2)
📒 미디어 쿼리를 적용하는 3가지 방법
📌 1. CSS파일에 코드입력하기
@media (min-width: 540px) and (max-width: 720px) {
.container {
width: 720px;
}
.column:nth-child(4) {
margin-bottom: 10px;
}
}📌 2. mobile버전 파일 생성하기
html버전, css버전 생성했던 방법대로
mobile.css파일 생성해서
@media (min-width: 540px) and (max-width: 720px) 바로 입력해주기!📌 3. html버전에서 style 태그 이용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
👉 <style media="(min-width: 300px and (max-width: 700px)">
body {
background-color: red;
}
</style>
</head>
<body>
</body>오늘은 저번시간에 배운 미디어쿼리응용부분에서 조금 더 나아가 실습해보는 시간을 가졌다.
pc버전일때는 x축 정렬, 모바일버전일때는 y축으로 정렬되는 메뉴버튼 과 출력물이 겹쳤을때 해결하는 방법 등을 적용해 보았다.
✔ 먼저나오는 형제가 3차원, 그다음에 나오는 형제의 공간이 2차원 먼저나오는 형제의 뒤쪽으로 들어가서 출력되는데, main태그공간이 header밑에 main 이 있었는데 지금은 header와 maind 이 header만큼 겹치게 됐음
이럴때는 css에서
main {
width: 100%;
height: 2000px;
background-color: gold;
겹치는 현상 해결법 : 80px를 이용해서 main 과 첫번재 나오는 h1 태그사이에 80px 공백을 만들어서 컨텐츠를 밑으로 내리기
padding-top: 80px;
}
👉 header와 main 은 dispaly block요소를 갖고있어서 y축정렬이 일어남
