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

'그린컴퓨터디자인 학원 복습 및 정리' 카테고리의 다른 글

3월 14일 복습 (0)	2025.03.14
3월 13일 복습 (0)	2025.03.13
3월 11일 복습 (1)	2025.03.11
3월 10일 복습- main > contents > banner, shortcut 그리기와 HTML, CSS 작성 (0)	2025.03.10
3월 7일 복습 (1)	2025.03.07

ABOUT ME

uniqueshine uniqueshine

'그린컴퓨터디자인 학원 복습 및 정리' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'그린컴퓨터디자인 학원 복습 및 정리' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바