3월 20일 복습

유니크샤인 2025. 3. 20. 20:26

https://www.figma.com/design/sPzjQPTsjBC0hBjOJW9WEw/UI%2FUX-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%26-%EC%BD%94%EB%94%A9?node-id=71-3&t=GooAEGRZBN4jllwB-1

Figma

Created with Figma

www.figma.com

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B-1 유형 레이아웃</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/script.js"></script>
  </head>
  <body>
    <div class="wrap">
      <!-- 헤더 영역 -->
      <header class="header">
        <div class="inner">
          <a href="#" class="logo">
            <span>대한은행</span>
          </a>
          <nav class="menu">
            <div class="submenu-bg"></div>
            <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>
                </ul>
              </li>
              <li>
                <a href="#">카드</a>
                <ul class="submenu">
                  <li><a href="#">카드정보</a></li>
                  <li><a href="#">카드신청</a></li>
                  <li><a href="#">이용내역조회</a></li>
                </ul>
              </li>
            </ul>
          </nav>
        </div>
      </header>

      <!-- 메인 영역 -->
      <main class="main">
        <div class="inner">
          <div class="img-slide">
            <ul class="slide-list">
              <li>
                <a href="#">
                  <img src="images/img-1.png" alt="첫 번째 이미지" />
                  <div class="text-box">
                    <h2>첫 번째 이미지입니다.</h2>
                    <p>첫 번째 이미지에 대한 홍보 및 설명 글입니다.</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="images/img-2.png" alt="두 번째 이미지" />
                  <div class="text-box">
                    <h2>두 번째 이미지입니다.</h2>
                    <p>세 번째 이미지에 대한 홍보 및 설명 글입니다.</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="images/img-3.png" alt="세 번째 이미지" />
                  <div class="text-box">
                    <h2>세 번째 이미지입니다.</h2>
                    <p>세 번째 이미지에 대한 홍보 및 설명 글입니다.</p>
                  </div>
                </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. 19</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          Lorem ipsum dolor sit amet.
                          <span>2025. 03. 19</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          Lorem ipsum dolor sit amet.
                          <span>2025. 03. 19</span>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          Lorem ipsum dolor sit amet.
                          <span>2025. 03. 19</span>
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a href="#">갤러리</a>
                  <div class="gallery">
                    <ul>
                      <li>
                        <a href="#">
                          <img
                            src="images/gallery-1.png"
                            alt="첫 번째 갤러리 이미지"
                          />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <img
                            src="images/gallery-2.png"
                            alt="두 번째 갤러리 이미지"
                          />
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <img
                            src="images/gallery-3.png"
                            alt="세 번째 갤러리 이미지"
                          />
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
            <div class="banner">
              <img src="images/banner-img.png" alt="배너 이미지" />
              <div class="text-box">
                <h2>배너 이미지입니다.</h2>
                <p>배너에 대한 홍보 및 설명 글입니다.</p>
              </div>
            </div>
            <div class="shortcut">
              <img src="images/shortcut-img.png" alt="바로가기 이미지" />
              <div class="text-box">
                <h2>바로가기 이미지입니다.</h2>
                <p>바로가기에 대한 홍보 및 설명 글입니다.</p>
              </div>
            </div>
          </div>
        </div>
      </main>

      <!-- 푸터 영역 -->
      <footer class="footer">
        <div class="inner">
          <a href="#" class="logo">
            <span>대한은행</span>
          </a>
          <div class="text-box">
            <div class="footer-menu">
              <a href="#">하단메뉴-1</a>
              <a href="#">하단메뉴-2</a>
              <a href="#">하단메뉴-3</a>
            </div>
            <div class="copy">
              Copyright 2025. Web Design all right reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>

/* 기본 스타일 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}
a {
  display: block;
  text-decoration: none;
  color: #333;
}
ul,
li {
  list-style: none;
}
img {
  border: 0;
  vertical-align: middle;
}

.wrap {
  width: 100%;
  height: 700px;
}
.inner {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}

.header {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #eee;
}
.header .inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: stretch;
}
.logo {
  position: relative;
  background-color: #b9c4d5;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo span {
  display: block;
  width: 200px;
  /* height: 40px; */
  background-color: #0066ff;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}
.menu {
  position: relative;
  background-color: #bcd7ff;
  flex: 4;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
}
.submenu-bg {
  position: absolute;
  top: 70px;
  right: 30px;
  width: 600px;
  /* height: 200px; */
  height: 0;
  background-color: #d2d2d2;
  z-index: 1;
  transition: height 0.5s;
}
.navi {
  position: relative;
  display: flex;
  z-index: 2;
}
.navi > li {
  position: relative;
}
.navi > li > a {
  width: 150px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background-color: #fff;
}
.navi > li:hover > a {
  background-color: #636363;
  color: #fff;
}
.submenu {
  position: absolute;
  top: 40px;
  left: 0;
  /* height: 200px; */
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}
.submenu li {
}
.submenu li a {
  width: 150px;
  line-height: 40px;
  color: #666;
  font-size: 18px;
  text-align: center;
}
.submenu li a:hover {
  background-color: #636363;
  color: #fff;
}

/* 메인 영역 */
.main {
}
.main .inner {
}
.img-slide {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.slide-list {
  position: relative;
  width: 300%;
  height: 100%;
  display: flex;
  /* margin-left: -100%; */
}
.slide-list li {
  position: relative;
}
.slide-list li a {
}
.slide-list li a img {
  width: 1200px;
  height: 300px;
  object-fit: cover;
}
.slide-list li a .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(51, 51, 51, 0.7);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 30px;
}
.slide-list li a .text-box h2 {
  font-size: 24px;
  color: #fff;
}
.slide-list li a .text-box p {
  font-size: 16px;
  color: #d9d9d9;
}
.contents {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
}
.tabmenu {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #9f9f9f;
}
.tabmenu > ul {
  position: relative;
}
.tabmenu > ul > li {
  position: absolute;
  left: 0;
  top: 0;
}
.tabmenu > ul > li > a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  line-height: 40px;
  text-align: center;
  background-color: #c6c6c6;
}
.tabmenu > ul > li:last-child > a {
  left: 100px;
}
.tabmenu > ul > li > div {
  position: absolute;
  left: 0;
  top: 40px;
  width: 400px;
  height: 160px;
  background-color: #fff;
  display: none;
}
.tabmenu > ul > li.active > div {
  display: block;
}
.tabmenu > ul > li > a:hover {
  background-color: #bcd7ff;
}
.tabmenu > ul > li.active > a {
  background-color: #636363;
  color: #fff;
  font-weight: bold;
}

.notice {
}
.notice ul {
}
.notice ul li {
}
.notice ul li a {
  width: 100%;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.notice ul li:nth-child(odd) a {
  background-color: #636363;
}
.notice ul li a span {
}

.gallery {
}
.gallery ul {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #636363;
}
.gallery ul li {
}
.gallery ul li a {
}
.gallery ul li a img {
}

.banner {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #ffcccc;
}
.banner img {
  width: 400px;
  height: 200px;
  object-fit: cover;
}
.banner .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(51, 51, 51, 0.7);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 30px;
}
.banner .text-box h2 {
  font-size: 24px;
  color: #fff;
}
.banner .text-box p {
  font-size: 16px;
  color: #d9d9d9;
}
.shortcut {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #d3ffcc;
}
.shortcut img {
  width: 400px;
  height: 200px;
  object-fit: cover;
}
.shortcut .text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(51, 51, 51, 0.7);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 30px;
}
.shortcut .text-box h2 {
  font-size: 24px;
  color: #fff;
}
.shortcut .text-box p {
  font-size: 16px;
  color: #d9d9d9;
}

.footer {
  position: relative;
  width: 100%;
  height: 100px;
}
.footer .inner {
  height: 100%;
  display: flex;
}
.footer .logo {
  flex: 1;
  filter: grayscale();
}
.footer .text-box {
  position: relative;
  flex: 4;
}
.footer-menu {
  position: relative;
  display: flex;
  background-color: #eee;
  height: 50%;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.copy {
  position: relative;
  background-color: #ccc;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

https://codepen.io/qikddukq-the-flexboxer/pen/JojLxqX

B-1

...

codepen.io