3월 18일 복습

그린컴퓨터디자인 학원 복습 및 정리 2025. 3. 18. 20:20

<!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"></div>
            <div class="banner"></div>
            <div class="shortcut"></div>
          </div>
        </div>
      </main>

      <!-- 푸터 영역 -->
    </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;
}
.banner {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #ffcccc;
}
.shortcut {
  position: relative;
  width: 400px;
  height: 100%;
  background-color: #d3ffcc;
}

p태그 : 문장이 오면 p태그로 감싼다.

object-fit: contain; : 정비율로 줄어들 때까지 줄어든다.

object-fit: cover; : 빈 공간이 없을 때까지 줄어들거나 늘어난다.

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

B-1 contents

...

codepen.io

자바스크립트 부울(boolean), undefined 와 Null, 객체(object)

### 2.2.4 부울(boolean)

- boolean.html
- true와 false 값만 존재

### 2.2.5 undefined 와 Null

- undefined-null.html
- 변수가 값을 가지고 있지 않으면 그 값은 undefined
- 유효하지 않은 데이터 Null

### 2.2.6 객체(object)

- object.html
- 객체는 프로퍼티와 메서드로 구성
- 프로퍼티(속성)는 키와 값의 쌍
- 메서드(함수)는 기능

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>부울 boolean</title>
  </head>
  <body>
    <script>
      const x = 5 > 3; // 5는 3보다 크다는 것을 변수 x에 지정, true
      console.log(x);
      const y = 5 < 3;
      console.log(y); // 3은 5보다 크다는 것을 변수 y에 지정, false
    </script>
  </body>
</html>

boolean.html

const x; : 오류가 남, let으로 변경

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Undefined 와 Null</title>
  </head>
  <body>
    <script>
      // undefined
      let x;
      console.log(x);

      // null
      x = "";
      console.log(x); // 빈 문자열이 출력됨, 유효하지 않은 문자열
    </script>
  </body>
</html>

Undefined-null.html

변수는 선언을 함과 동시에 선언, 변수가 값을 가지지 않으면 Undefined 라는 데이터를 할당

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>객체 object</title>
  </head>
  <body>
    <script>
      //   const userName = "홍길동";
      //   const age = 30;
      //   const userId = "kdhong";

      const member = {
        userName: "홍길동",
        age: 30,
        userId: "kdhong",
      };

      document.write(member.userName + "<br>");
      document.write(member.age + "<br>");
      document.write(member.userId + "<br>");
    </script>
  </body>
</html>

object.html

객체는 자바스크립트의 핵심이다.

member에는 객체가 담겨있다. userName(키, 변수), “홍길동”(값)

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

3월 20일 복습 (0)	2025.03.20
3월 19일 복습 (0)	2025.03.19
3월 17일 복습 (0)	2025.03.17
3월 14일 복습 (0)	2025.03.14
3월 13일 복습 (0)	2025.03.13

ABOUT ME

uniqueshine uniqueshine

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

티스토리툴바

ABOUT ME

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

관련글 관련글 더보기

티스토리툴바