그린컴퓨터디자인 학원 복습 및 정리
3월 12일 복습
유니크샤인
2025. 3. 12. 20:43
Iconify: Figma 플러그인 중 아이콘을 쓸 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A-1 유형</title>
<link rel="stylesheet" href="css/style.css" />
<!-- <script src="javascript/script.js"></script> -->
</head>
<body>
<div class="wrap">
<!-- 헤더 영역 -->
<header class="header">
<a href="#" class="logo">JUST 쇼핑몰</a>
<nav class="menu">
<ul class="navi">
<li>
<a href="#">탑</a>
<ul class="submenu">
<li><a href="#">블라우스</a></li>
<li><a href="#">티</a></li>
<li><a href="#">셔츠</a></li>
<li><a href="#">니트</a></li>
</ul>
</li>
<li>
<a href="#">아우터</a>
<ul class="submenu">
<li><a href="#">자켓</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
<li><a href="#">머플러</a></li>
</ul>
</li>
<li>
<a href="#">팬츠</a>
<ul class="submenu">
<li><a href="#">청바지</a></li>
<li><a href="#">짧은바지</a></li>
<li><a href="#">긴바지</a></li>
<li><a href="#">레깅스</a></li>
</ul>
</li>
<li>
<a href="#">악세서리</a>
<ul class="submenu">
<li><a href="#">귀고리</a></li>
<li><a href="#">목걸이</a></li>
<li><a href="#">반지</a></li>
<li><a href="#">팔찌</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 메인 영역 -->
<main class="main">
<div class="img-slide">
<ul class="slide-list">
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=1"
alt="이미지-1"
/>
</a>
</li>
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=2"
alt="이미지-2"
/>
</a>
</li>
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=3"
alt="이미지-3"
/>
</a>
</li>
</ul>
</div>
<div class="contents">
<!-- 탭 메뉴 영역 -->
<div class="tabmenu">
<ul>
<li class="active">
<a href="#">공지사항</a>
<div class="notice">
<ul>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">갤러리</a>
<div class="gallery">
<ul>
<li>
<a href="#">
<img src="images/gallery-1.png" alt="갤러리1" />
</a>
</li>
<li>
<a href="#">
<img src="images/gallery-2.png" alt="갤러리2" />
</a>
</li>
<li>
<a href="#">
<img src="images/gallery-3.png" alt="갤러리3" />
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- 배너 영역 -->
<div class="banner">
<img src="images/banner.png" alt="배너" />
<div class="filter-bg"></div>
<span>BANNER</span>
</div>
<!-- 바로가기 영역 -->
<div class="shortcut">
<img src="images/shortcut.png" alt="바로가기" />
<div class="filter-bg"></div>
<span>SHORTCUT</span>
</div>
</div>
</main>
<!-- 푸터 영역 -->
<footer class="footer">
<a href="#" class="logo">JUST 쇼핑몰</a>
<div class="copy">Copyright 2025. UIUXDesign all right reserved.</div>
<div class="sns">
<a href="#">
<img src="images/link-1.png" alt="깃허브" />
</a>
<a href="#">
<img src="images/link-2.png" alt="트위터엑스" />
</a>
<a href="#">
<img src="images/link-3.png" alt="인스타그램" />
</a>
</div>
</footer>
</div>
</body>
</html>HTML 코드 (footer)
/* 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: middle;
border: 0;
}
.wrap {
width: 1200px;
height: 700px;
background-color: #ddd;
margin: 0 auto;
}
.header {
position: relative;
width: 100%;
height: 100px;
background-color: aqua;
display: flex;
}
.logo {
position: relative;
width: 200px;
height: 100%;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.menu {
position: relative;
width: 1000px;
height: 100%;
background-color: rgb(170, 171, 230);
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
.navi {
position: relative;
display: flex;
}
.navi > li {
position: relative;
}
.navi > li > a {
display: block;
width: 150px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
background-color: #dcadad;
}
.submenu {
position: absolute;
top: 40px;
left: 0;
z-index: 1;
/* display: none; */
}
.submenu li {
}
.submenu li a {
display: block;
width: 150px;
height: 40px;
font-size: 18px;
line-height: 40px;
text-align: center;
background-color: #cddcad;
}
.main {
position: relative;
width: 100%;
height: 500px;
background-color: bisque;
}
.img-slide {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide-list {
position: relative;
width: 100%;
height: 300%;
}
.slide-list li {
}
.slide-list li a {
}
.slide-list li a img {
}
.contents {
position: relative;
width: 100%;
height: 200px;
display: flex;
}
.tabmenu {
position: relative;
width: 400px;
height: 100%;
background-color: #bec9ff;
}
.tabmenu > ul {
position: relative;
width: 100%;
height: 100%;
}
.tabmenu > ul > li {
position: absolute;
top: 0;
left: 0;
}
.tabmenu > ul > li > div {
display: none;
}
.tabmenu > ul > li.active > div {
position: absolute;
top: 40px;
left: 0;
display: block;
width: 400px;
height: 160px;
}
.tabmenu > ul > li > a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
line-height: 40px;
text-align: center;
background-color: #eee;
}
.tabmenu > ul > li:last-child > a {
left: 100px;
}
.notice {
}
.notice ul {
position: relative;
width: 100%;
height: 100%;
}
.notice ul li {
}
.notice ul li a {
display: flex;
width: 100%;
line-height: 40px;
justify-content: space-between;
padding: 0 10px;
background-color: #eee;
}
.notice ul li:nth-child(odd) a {
background-color: #ccc;
}
.notice ul li a span {
}
.gallery {
}
.gallery ul {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
background-color: #eee;
}
.gallery ul li {
}
.gallery ul li a {
}
.gallery ul li a img {
}
.banner {
position: relative;
width: 400px;
height: 100%;
background-color: #c153ec;
}
.banner img {
}
.banner .filter-bg {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.banner span {
position: absolute;
left: 50%;
top: 50%;
padding: 12px 24px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
font-weight: bold;
transform: translate(-50%, -50%);
}
.shortcut {
position: relative;
width: 400px;
height: 100%;
background-color: #16e77f;
}
.shortcut img {
}
.shortcut .filter-bg {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.shortcut span {
position: absolute;
left: 50%;
top: 50%;
padding: 12px 24px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
font-weight: bold;
transform: translate(-50%, -50%);
}
.footer {
position: relative;
width: 100%;
height: 100px;
background-color: violet;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .logo {
filter: grayscale();
}
.copy {
position: relative;
width: 800px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
}
.sns {
position: relative;
width: 200px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}css 코드 (footer)
https://codepen.io/qikddukq-the-flexboxer/pen/XJWeGOy
footer
...
codepen.io
id 와 class 중 id의 우선순위가 높다.
id는 고유한 값이기 때문에 중복해서 사용할 수 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A-1 유형</title>
<link rel="stylesheet" href="css/style.css" />
<!-- <script src="javascript/script.js"></script> -->
</head>
<body>
<div class="wrap">
<!-- 헤더 영역 -->
<header class="header">
<a href="#" class="logo">JUST 쇼핑몰</a>
<nav class="menu">
<ul class="navi">
<li>
<a href="#">탑</a>
<ul class="submenu">
<li><a href="#">블라우스</a></li>
<li><a href="#">티</a></li>
<li><a href="#">셔츠</a></li>
<li><a href="#">니트</a></li>
</ul>
</li>
<li>
<a href="#">아우터</a>
<ul class="submenu">
<li><a href="#">자켓</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
<li><a href="#">머플러</a></li>
</ul>
</li>
<li>
<a href="#">팬츠</a>
<ul class="submenu">
<li><a href="#">청바지</a></li>
<li><a href="#">짧은바지</a></li>
<li><a href="#">긴바지</a></li>
<li><a href="#">레깅스</a></li>
</ul>
</li>
<li>
<a href="#">악세서리</a>
<ul class="submenu">
<li><a href="#">귀고리</a></li>
<li><a href="#">목걸이</a></li>
<li><a href="#">반지</a></li>
<li><a href="#">팔찌</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!-- 메인 영역 -->
<main class="main">
<div class="img-slide">
<ul class="slide-list">
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=1"
alt="이미지-1"
/>
</a>
</li>
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=2"
alt="이미지-2"
/>
</a>
</li>
<li>
<a href="#">
<img
src="https://picsum.photos/1200/300?random=3"
alt="이미지-3"
/>
</a>
</li>
</ul>
</div>
<div class="contents">
<!-- 탭 메뉴 영역 -->
<div class="tabmenu">
<ul>
<li class="active">
<a href="#">공지사항</a>
<div class="notice">
<ul>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
<li>
<a href="#">
Lorem ipsum dolor sit amet.
<span>2025. 03. 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">갤러리</a>
<div class="gallery">
<ul>
<li>
<a href="#">
<img src="images/gallery-1.png" alt="갤러리1" />
</a>
</li>
<li>
<a href="#">
<img src="images/gallery-2.png" alt="갤러리2" />
</a>
</li>
<li>
<a href="#">
<img src="images/gallery-3.png" alt="갤러리3" />
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- 배너 영역 -->
<div class="banner">
<img src="images/banner.png" alt="배너" />
<div class="filter-bg"></div>
<span>BANNER</span>
</div>
<!-- 바로가기 영역 -->
<div class="shortcut">
<img src="images/shortcut.png" alt="바로가기" />
<div class="filter-bg"></div>
<span>SHORTCUT</span>
</div>
</div>
</main>
<!-- 푸터 영역 -->
<footer class="footer">
<a href="#" class="logo">JUST 쇼핑몰</a>
<div class="copy">Copyright 2025. UIUXDesign all right reserved.</div>
<div class="sns">
<a href="#">
<img src="images/link-1.png" alt="깃허브" />
</a>
<a href="#">
<img src="images/link-2.png" alt="트위터엑스" />
</a>
<a href="#">
<img src="images/link-3.png" alt="인스타그램" />
</a>
</div>
</footer>
</div>
<!-- modal -->
<div id="modal">
<div class="modal-inner">
<div class="modal-title">TITLE</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
repudiandae quas consectetur alias assumenda, dignissimos ipsa
reiciendis voluptas suscipit officiis magnam qui architecto vitae
laboriosam quis quae, cum excepturi soluta.
</div>
<div class="modal-btn">CLOSE</div>
</div>
</div>
</body>
</html>HTML 코드 (modal)
/* 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
img {
vertical-align: middle;
border: 0;
}
.wrap {
width: 1200px;
height: 700px;
background-color: #ddd;
margin: 0 auto;
}
.header {
position: relative;
width: 100%;
height: 100px;
background-color: aqua;
display: flex;
}
.logo {
position: relative;
width: 200px;
height: 100%;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.menu {
position: relative;
width: 1000px;
height: 100%;
background-color: rgb(170, 171, 230);
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 30px;
}
.navi {
position: relative;
display: flex;
}
.navi > li {
position: relative;
}
.navi > li > a {
display: block;
width: 150px;
height: 40px;
font-size: 20px;
text-align: center;
line-height: 40px;
background-color: #dcadad;
}
.submenu {
position: absolute;
top: 40px;
left: 0;
z-index: 1;
/* display: none; */
}
.submenu li {
}
.submenu li a {
display: block;
width: 150px;
height: 40px;
font-size: 18px;
line-height: 40px;
text-align: center;
background-color: #cddcad;
}
.main {
position: relative;
width: 100%;
height: 500px;
background-color: bisque;
}
.img-slide {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slide-list {
position: relative;
width: 100%;
height: 300%;
}
.slide-list li {
}
.slide-list li a {
}
.slide-list li a img {
}
.contents {
position: relative;
width: 100%;
height: 200px;
display: flex;
}
.tabmenu {
position: relative;
width: 400px;
height: 100%;
background-color: #bec9ff;
}
.tabmenu > ul {
position: relative;
width: 100%;
height: 100%;
}
.tabmenu > ul > li {
position: absolute;
top: 0;
left: 0;
}
.tabmenu > ul > li > div {
display: none;
}
.tabmenu > ul > li.active > div {
position: absolute;
top: 40px;
left: 0;
display: block;
width: 400px;
height: 160px;
}
.tabmenu > ul > li > a {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
line-height: 40px;
text-align: center;
background-color: #eee;
}
.tabmenu > ul > li:last-child > a {
left: 100px;
}
.notice {
}
.notice ul {
position: relative;
width: 100%;
height: 100%;
}
.notice ul li {
}
.notice ul li a {
display: flex;
width: 100%;
line-height: 40px;
justify-content: space-between;
padding: 0 10px;
background-color: #eee;
}
.notice ul li:nth-child(odd) a {
background-color: #ccc;
}
.notice ul li a span {
}
.gallery {
}
.gallery ul {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
background-color: #eee;
}
.gallery ul li {
}
.gallery ul li a {
}
.gallery ul li a img {
}
.banner {
position: relative;
width: 400px;
height: 100%;
background-color: #c153ec;
}
.banner img {
}
.banner .filter-bg {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.banner span {
position: absolute;
left: 50%;
top: 50%;
padding: 12px 24px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
font-weight: bold;
transform: translate(-50%, -50%);
}
.shortcut {
position: relative;
width: 400px;
height: 100%;
background-color: #16e77f;
}
.shortcut img {
}
.shortcut .filter-bg {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.shortcut span {
position: absolute;
left: 50%;
top: 50%;
padding: 12px 24px;
background-color: rgba(0, 0, 0, 1);
color: #fff;
font-weight: bold;
transform: translate(-50%, -50%);
}
.footer {
position: relative;
width: 100%;
height: 100px;
background-color: violet;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .logo {
filter: grayscale();
}
.copy {
position: relative;
width: 800px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
}
.sns {
position: relative;
width: 200px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
#modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2;
display: none;
}
#modal.active {
display: block;
}
.modal-inner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
padding: 20px;
}
.modal-title {
}
.modal-body {
}
.modal-btn {
cursor: pointer;
}CSS 코드 (modal)
id modal에 class active를 넣어야 modal이 보인다.
https://codepen.io/qikddukq-the-flexboxer/pen/emYGxNp
modal
...
codepen.io
https://codepen.io/qikddukq-the-flexboxer/pen/NPWaJVa
modal full
...
codepen.io