📅2024. 01. 17 28일차

---

🎨 HTML, CSS

position: fixed ?

• 스크롤바를 따라 다닌다.

.fixed {
  position: fixed;
}

transition

• 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

• transition: background-color 2s

  • 배경 색이 2초에 걸쳐 변화한다.
  • 추가적인 조건을 걸어줄려면 ,로 걸어준다.
  • 넓이에 변화를 줄려면 최초 넓이를 알려줘야한다.

opacity

• opacity로 요소의 투명도를 정할 수 있다.

• 기본값 : 1

• 상속 : No

• 애니메이션 : Yes

opacity: number | initial | inherit

• number : 0.0부터 1.0까지의 수를 넣는다.
• initial : 기본값으로 설정한다.
• inherit : 부모 요소의 속성값을 상속받는다.

css 가상 요소 (pseudo-Element)

• 가상 요소는 css를 통해서 가상의 element를 추가하는 코드이다.
• 이미 작성된 HTML에 새로운 스타일을 주기 위해서 가상 요소를 추가해서 사용을 할 수 있다.

div:after {...}
div:before {...}

• :before는 HTML안 앞쪽에 추가하는 가상 요소이고
• :after는 HTML이 끝날 때 추가되는 가상 요소이다.

🧾문제) float으로 메뉴 만들기

<nav class="menu_box_1 ">
  <!--980-->
  <ul class="row">
    <!--980-->
    <li class="cell"><a href="#">BRAND</a></li>
    <li class="cell"><a href="#">VISUAL</a></li>
    <li class="cell"><a href="#">STYLE</a></li>
    <li class="cell"><a href="#">MEDIA</a></li>
    <li class="cell"><a href="#">NEWS</a></li>
    <li class="cell"><a href="#">STORE</a></li>
    <li class="cell"><a href="#">CUSTOMER</a></li>
  </ul>
</nav>

/* 노말라이즈 */
body,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}
/* 라이브러리 */
.font_size_0 {
  font-size: 0;
}
.font_size_0 > * {
  font-size: 1rem;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

.cell {
  float: left;
}

/* 커스텀 */
.menu_box_1 {
  margin-top: 50px;
  border: 10px solid red;
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.menu_box_1 > ul {
  background-color: #afafaf;
}

.menu_box_1 > ul > li {
  background-color: pink;
  width: 14.2858%;
}

.menu_box_1 > ul > li > a {
  display: block;
  padding: 5px 0;
  font-weight: bold;
  background-color: gold;
  text-align: center;
}

🧾문제) flex으로 메뉴 만들기

<!-- 유용한 링크 -->
<!-- cdnsj : https://cdnjs.com/ -->
<!-- 폰트어썸 아이콘 리스트 : https://fontawesome.com/icons?d=gallery&m=free -->

<!-- 구글 폰트 불러오기 -->
<!-- rotobo(400/700/900), notosanskr(400/600/900) -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<div class="top_bar flex flex-jc-sa">
  <a href="#" class="logo flex flex-ai-c">
    <i class="fa-brands fa-android"></i>
  </a>

  <nav class="menu_box_1 ">
    <ul class="flex height-100p ">
      <li class=" padding10"><a class="flex flex-ai-c height-100p" href="#">1차 메뉴 아이템 1</a></li>
      <li class="padding10"><a class="flex flex-ai-c height-100p" href="#">1차 메뉴 아이템 2</a></li>
      <li class="padding10"><a class="flex flex-ai-c height-100p" href="#">1차 메뉴 아이템 3</a></li>
      <li class="padding10"><a class="flex flex-ai-c height-100p" href="#">1차 메뉴 아이템 4</a></li>
    </ul>
  </nav>
</div>

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
  /* 영문이면 roboto가 적용되고, 한글이면 Noto Sans KR가 적용되도록 아래와 같은 순서로 배치 */
  font-family: "Roboto", "Noto Sans KR", sans-serif;
}

/* 노말라이즈 */
body,
ul,
li,
h1 {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

label[for] {
  cursor: pointer;
  user-select: none;
}

/* 라이브러리 */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.absolute-left {
  position: absolute;
  left: 0;
}

.absolute-right {
  position: absolute;
  right: 0;
}

.absolute-bottom {
  position: absolute;
  bottom: 0;
}

.absolute-top {
  position: absolute;
  top: 0;
}

.absolute-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.absolute-middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.absolute-middle.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.relative {
  position: relative;
}

.cell {
  float: left;
  box-sizing: border-box;
}

.cell-right {
  float: right;
  box-sizing: border-box;
}

.row::after {
  content: "";
  display: block;
  clear: both;
}

.clear-both {
  clear: both;
}

.img-box > img {
  width: 100%;
  display: block;
}

.con {
  margin-left: auto;
  margin-right: auto;
}

.margin-0-auto {
  margin-left: auto;
  margin-right: auto;
}

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.line-height-0 {
  line-height: 0;
}

.line-height-0 > * {
  line-height: normal;
}

.width-30px {
  width: 30px;
}

.width-35px {
  width: 35px;
}

.width-40px {
  width: 35px;
}

.width-45px {
  width: 35px;
}

.width-50px {
  width: 50px;
}

.width-80px {
  width: 80px;
}

.width-100px {
  width: 100px;
}

.width-100p {
  width: 100%;
}

.width-60p {
  width: 60%;
}

.width-55p {
  width: 55%;
}

.width-50p {
  width: 50%;
}

.width-45p {
  width: 45%;
}

.width-40p {
  width: 40%;
}

.width-30p {
  width: 30%;
}

.width-35p {
  width: 35%;
}

.width-100p-except-30px {
  width: calc(100% - 30px);
}

.width-100p-except-35px {
  width: calc(100% - 35px);
}

.width-100p-except-40px {
  width: calc(100% - 40px);
}

.width-100p-except-50px {
  width: calc(100% - 50px);
}

.width-100p-except-80px {
  width: calc(100% - 80px);
}

.width-100p-except-100px {
  width: calc(100% - 100px);
}

.height-100p {
  height: 100%;
}

.height-50p {
  height: 50%;
}

.border-box {
  box-sizing: border-box;
}

.font-size-dot-8rem {
  font-size: 0.8rem;
}

.table-row {
  display: table;
}

.table-row.row::after {
  display: inline;
  clear: non;
}

.table-row > .cell {
  float: none;
  display: table-cell;
}

.border-red {
  border: 10px solid red;
}

.border-green {
  border: 10px solid green;
}

.border-blue {
  border: 10px solid blue;
}

.border-gold {
  border: 10px solid gold;
}

.border-pink {
  border: 10px solid pink;
}

.padding10 {
  padding: 10px;
}

/* 라이브러리 - flex */
* > .flex {
  display: flex;
}

* > .flex-grow-1 {
  flex-grow: 1;
}

* > .flex-jc-c {
  justify-content: center;
}

* > .flex-jc-s {
  justify-content: flex-start;
}

* > .flex-jc-e {
  justify-content: flex-end;
}

* > .flex-jc-sb {
  justify-content: space-between;
}

* > .flex-jc-sa {
  justify-content: space-around;
}

* > .flex-ai-c {
  align-items: center;
}

* > .flex-ai-s {
  align-items: flex-start;
}

* > .flex-ai-e {
  align-items: flex-end;
}

* > .flex-as-s {
  align-self: stretch;
}

* > .flex-as-c {
  align-self: center;
}

* > .flex-as-s {
  align-self: flex-start;
}

* > .flex-as-e {
  align-self: flex-end;
}

* > .flex-column-nowrap {
  flex-flow: column nowrap;
}

* > .flex-column-wrap {
  flex-flow: column wrap;
}

* > .flex-row-wrap {
  flex-flow: row wrap;
}

.flex-ch-basis-0 > * {
  flex-basis: 0;
}

* > .flex-1-0-0 {
  flex: 1 0 0;
}

* > .bg-red {
  background-color: red;
}

/* 커스텀 */

.top_bar {
  background-color: black;
  color: white;
  height: 500px; /*임시*/
}

.top_bar > .logo {
  font-size: 6rem;
}