안녕하세요!
2025년 6월 16일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 15 일차 내용을 정리해보았습니다.
오늘은 @media 개념과 flex 반응형 메뉴 정리를 배웠습니다.
---
15차 학습내용
33강
## @media
: 디바이스(기기)의 조건에 따라 CSS스타일을 다르게 적용할 수 있게 해주는 기능
: 보통 CSS 파일 제일 아래에 둔다.
: 순서대로 적용되니까, 나중에 나올수록 우선순위가 높아진다.
예를 들어
- 화면이 작은 스마트폰이면 글자 크기 작게
- 화면이 큰 데스크탑이면 넓은 레이아웃 사용
이런 식으로 조건을 설정할 수 있다.
/* 기본 문법 */
@media (조건) {
/* 조건을 만족할 때 적용할 CSS */
}
---
#예제1
- 화면이 600px 이하일 때 배경색 바꾸기
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}: 화면 너비가 600px보다 작으면 → 배경이 회색
: 그 외엔 → 흰색
---
#예제2
- 반응형 레이아웃
.box {
width: 100%;
background: skyblue;
}
@media (min-width: 768px) {
.box {
width: 50%;
background: coral;
}
}: 모바일에서는 .box가 100% 너비 (가득 채움)
: 태블릿 이상에서는 50% 너비로 줄어들고 색도 바뀐다.
---
# 자주 쓰는 조건들
| 조건 | 의미 |
| max-width | 최대 너비 (작은 기기용) |
| min-width | 최소 너비 (큰 기기용) |
34강
## flex 반응형 메뉴 정리
# flex로 애플 메뉴 만들기
34강 문제
- 사진과 같이 flex를 활용하여 애플 메뉴를 만드시오
문제 풀이
- V1
<!-- html -->
<h1 style="display:none;">to2.kr/btK</h1>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<div class="top-bar flex flex-jc-sb">
<a href="#" class="logo flex flex-ai-c">
<i class="fab fa-apple"></i>
</a>
<nav class="menu-box-1">
<ul class="flex height-100p">
<li><a class="height-100p flex flex-ai-c" href="#">Home</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">About</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">Products</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">Contact</a></li>
</ul>
</nav>
</div>/* CSS */
/* 노말 */
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* lib */
.border-red {
border:4px solid red;
}
.border-pink {
border:4px solid pink;
}
.border-blue {
border:4px solid blue;
}
.border-green {
border:4px solid green;
}
.border-black {
border:4px solid black;
}
.border-gold {
border:4px solid gold;
}
.flex {
display:flex;
}
.flex-jc-e {
justify-content:flex-end;
}
.flex-jc-s {
justify-content:flex-start;
}
.flex-jc-c {
justify-content:center;
}
.flex-jc-sb {
justify-content:space-between;
}
.flex-ai-c {
align-items:center;
}
.height-100p {
height:100%;
}
.block {
display:block;
}
/* cos */
.top-bar {
background-color:black;
color:white;
height:150px;
padding-left:100px;
padding-right:100px;
}
.top-bar > .logo {
font-size:3rem;
}
.top-bar > .menu-box-1 > ul > li > a {
font-weight:bold;
padding:0 30px;
}
.top-bar > .menu-box-1 > ul > li:hover > a {
background-color:white;
color:black;
}
- V2
<!-- html -->
<h1 style="display:none;">to2.kr/btK</h1>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<div class="top-bar">
<div class="con height-100p flex flex-jc-sb">
<a href="#" class="logo flex flex-ai-c">
<i class="fab fa-apple"></i>
</a>
<nav class="menu-box-1">
<ul class="flex height-100p">
<li><a class="height-100p flex flex-ai-c" href="#">Home</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">About</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">Products</a></li>
<li><a class="height-100p flex flex-ai-c" href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>/* css */
/* 노말 */
body, ul, li {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* lib */
.border-red {
border:4px solid red;
}
.border-pink {
border:4px solid pink;
}
.border-blue {
border:4px solid blue;
}
.border-green {
border:4px solid green;
}
.border-black {
border:4px solid black;
}
.border-gold {
border:4px solid gold;
}
.flex {
display:flex;
}
.flex-jc-e {
justify-content:flex-end;
}
.flex-jc-s {
justify-content:flex-start;
}
.flex-jc-c {
justify-content:center;
}
.flex-jc-sb {
justify-content:space-between;
}
.flex-ai-c {
align-items:center;
}
.height-100p {
height:100%;
}
.block {
display:block;
}
.con {
margin-left:auto;
margin-right:auto;
}
/* cos */
.con {
max-width:800px;
}
.top-bar {
background-color:black;
color:white;
height:150px;
padding-left:100px;
padding-right:100px;
}
.top-bar > .con > .logo {
font-size:3rem;
}
.top-bar > .con > .menu-box-1 > ul > li > a {
font-weight:bold;
padding:0 30px;
}
.top-bar > .con > .menu-box-1 > ul > li:hover > a {
background-color:white;
color:black;
}
---
마무리
오늘은 @media 개념과 flex 반응형 메뉴 정리해봤습니다.
코드가 점점 길어지고, 늘어나니 중간 중간에 코드 확인이 매우 중요한 것 같다고 느꼈습니다.
그리고 flex를 활용한 문제를 더 많이 풀어봐야겠다는 생각이 들었슴닷.
복습 완료! 끝-
728x90