A유형 원본
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A유형</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
</div>
<div class="hero"></div>
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer">
<div class="logo"></div>
<div class="company"></div>
</div>
</div>
</body>
</html>* {margin: 0;padding: 0;}
.wrap {width: 1200px; margin: 0 auto; border: 1px solid #000;}
.header {width: 1200px; height: 100px; display: flex; justify-content: space-between;}
.header .logo {width: 200px; height: 100px; background: blue;}
.header .nav {width: 800px; height: 100px; background: blue; display: flex;}
.header .nav .menu {width: 200px; height: 100px; background: green; border: 1px solid #fff;}
.hero {width: 1200px; height: 300px; background: #eee;}
.section {width: 1200px; height: 200px; background: #ccc; display: flex;}
.section .box {width: 400px; height: 200px; background: chocolate; border: 1px solid #fff;}
.footer {width: 1200px; height: 100px; display: flex; justify-content: space-between;}
.footer .logo {width: 200px; height: 100px; background: red;}
.footer .company {width: 800px; height: 100px; background: blue;}
A유형 - 반응형 웹 만들기 1
width :1200px → max-width :1200px
@media screen and (max-width:1050px) {
.header .nav .menu {background: red; }
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A유형</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
</div>
<div class="hero"></div>
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer">
<div class="logo"></div>
<div class="company"></div>
</div>
</div>
</body>
</html>* {margin: 0;padding: 0;}
.wrap {max-width: 1200px; margin: 0 auto; border: 1px solid #000;}
.header {max-width: 1200px; display: flex; justify-content: space-between;}
.header .logo {width: 200px; height: 100px; background: blue;}
.header .nav {width: 800px; height: 100px; display: flex;}
.header .nav .menu {width: 200px; height: 100px; background: green; border: 1px solid #fff;}
.hero {max-width: 1200px; height: 300px; background: #eee;}
.section {max-width: 1200px; background: #ccc; display: flex;}
.section .box {width: 400px; height: 200px; background: chocolate; border: 1px solid #fff;}
.footer {max-width: 1200px; display: flex; justify-content: space-between;}
.footer .logo {width: 200px; height: 100px; background: red;}
.footer .company {width: 800px; height: 100px; background: blue;}
@media screen and (max-width:1050px) {
.header {flex-direction: column; align-items: center;}
.header .nav {width: 100%;}
.section {flex-direction: column; align-items: center;}
.section .box {width: 100%;}
.footer {flex-direction: column; align-items: center;}
.footer .company {width: 100%;}
}⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
A유형 - 반응형 웹 만들기 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A유형</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
</div>
<div class="hero"></div>
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer">
<div class="logo"></div>
<div class="company"></div>
</div>
</div>
</body>
</html>* {margin: 0;padding: 0;}
.wrap {max-width: 1200px; margin: 0 auto; border: 1px solid #000;}
.header {max-width: 1200px; display: flex; justify-content: space-between;}
.header .logo {width: 200px; height: 100px; background: blue;}
.header .nav {width: 800px; height: 100px; display: flex;}
.header .nav .menu {width: 200px; height: 100px; background: green; border: 1px solid #fff;}
.hero {max-width: 1200px; height: 300px; background: #eee;}
.section {max-width: 1200px; background: #ccc; display: flex;}
.section .box {width: 400px; height: 200px; background: chocolate; border: 1px solid #fff;}
.footer {max-width: 1200px; display: flex; justify-content: space-between;}
.footer .logo {width: 200px; height: 100px; background: red;}
.footer .company {width: 800px; height: 100px; background: blue;}
@media screen and (max-width:1050px) {
.header {flex-direction: column; align-items: center;}
.header .nav {width: 100%;}
.section {flex-direction: column; align-items: center;}
.section .box {width: 100%;}
.footer {flex-direction: column; align-items: center;}
.footer .company {width: 100%;}
}
@media screen and (max-width:640px) {
.header .nav {display: none;}
}⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
A유형 - 햄버거 버튼 만들기
pc와 탭화면에서는 안보이지만 모바일은 보이는 햄버거버튼 (누르면 X자로 변화하는 것까지)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A유형</title>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
<div class="menu"></div>
</div>
<div class="hamburger mo">
<span></span>
</div>
</div>
<div class="hero"></div>
<div class="section">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="footer">
<div class="logo"></div>
<div class="company"></div>
</div>
</div>
</body>
</html>* {margin: 0;padding: 0;}
.wrap {max-width: 1200px; margin: 0 auto; border: 1px solid #000;}
.header {max-width: 1200px; display: flex; justify-content: space-between;}
.header .logo {width: 200px; height: 100px; background: blue;}
.header .nav {width: 800px; height: 100px; display: flex;}
.header .nav .menu {width: 200px; height: 100px; background: green; border: 1px solid #fff;}
.hero {max-width: 1200px; height: 300px; background: #eee;}
.section {max-width: 1200px; background: #ccc; display: flex;}
.section .box {width: 400px; height: 200px; background: chocolate; border: 1px solid #fff;}
.footer {max-width: 1200px; display: flex; justify-content: space-between;}
.footer .logo {width: 200px; height: 100px; background: red;}
.footer .company {width: 800px; height: 100px; background: blue;}
.hamburger {width: 40px; height: 40px; position: absolute; top: 40px; left: 38px; display: none;}
.hamburger span {position: absolute; width: 25px; height: 2px; background: red; left: 50%; top: 50%; transform: translate (-50%,-50%);}
.hamburger span::before,
.hamburger span::after {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255,0,0,1); transition: 0.3s;}
.hamburger span::before {top: -8px;}
.hamburger span::after {top: 8px;}
.hamburger:hover span {background: rgba(255,0,0,0);} → opacity와 다른 점은 opacity는 자식까지 rgba는 본인만
.hamburger:hover span::before {transform: rotate(45deg); top: 0;}
.hamburger:hover span::after{transform: rotate(-45deg); top: 0;}
@media screen and (max-width:1050px) {
.header {flex-direction: column; align-items: center;}
.header .nav {width: 100%;}
.section {flex-direction: column; align-items: center;}
.section .box {width: 100%;}
.footer {flex-direction: column; align-items: center;}
.footer .company {width: 100%;}
}
@media screen and (max-width:640px) {
.hamburger {display: block;}
.header .nav {display: none;}
}
javascript - script 사용하기
<script>
// 대상.뭐할때 실행하시오
// h1을 빨강색으로 바꾸기
document.querySelector('.hamburger') → 이게 대상을 지정한 것
.addEventListener ('click', function() {document.querySelector('.logo') .style.background ='red'})
→ 햄버거 버튼을 클릭하면, 로고가 빨간색으로 바뀌도록 해주세요
</script>자주 쓰는건 변수로 저장 가능 (피그마의 컴포넌트와 비슷한 기능)
ex) --bgColor1이 변수임.
그래서 ai 한테 코드 시킬때 border-radius, 메인컬러, 서브컬러 등 자주 쓰는건 변수로 따로 만들어서 내가 수정하기 쉽도록 해줘라고 하면 좋음.
:root {
--bgColor1 : blue;
--mxW1200 : 1200px;
}
.wrap {max-width: 1200px; margin: 0 auto; border: 1px solid #000;}
↓
.wrap {max-width: var(--mxW1200); margin: 0 auto; border: 1px solid #000;}<script>
// 대상.뭐할때 실행하시오
// h1을 빨강색으로 바꾸기
var(요즘은 let사용) hamburger = document.querySelector('.hamburger') → 등호 하나는 넣는다는 뜻
hamburger == document.querySelector('.hamburger') → 등호 두개는 같다는 뜻
var(요즘은 let사용) logo = document.querySelector('.logo')
★ hamburger.addEventListener ('click', function(){logo.style.background ='red'}) ★
→ 햄버거 버튼을 클릭하면, 로고가 빨간색으로 바뀌도록 해주세요
</script>
'web design' 카테고리의 다른 글
| 04.23 - holo (팀플) (0) | 2026.05.30 |
|---|---|
| 04.23 - javascript 연습하기 (0) | 2026.05.30 |
| 04.22 - holo (팀플) (0) | 2026.05.29 |
| 04.21 - html 애니메이션 (0) | 2026.05.29 |
| 04.21 - holo (팀플) (0) | 2026.05.29 |