memo

• icon은 글자 취급을 받기 때문에 color, text-align, font-size 다 적용된다.
• 라이브러리를 안 쓰고 css를 한다는 것은 조선시대 사람처럼 산다는 것과 같다...🙄

순서

1. 구글에 '폰트 어썸' 검색

- 무료 아이콘: icons > free and open-source icons
- html 복사해서 logo클래스를 가진 a태그에 넣어 준다.

1-1. 버전이 안 맞아서 아이콘이 깨질 경우

- 구글에 'cdnjs' 검색 > 검색창에 font 검색 > font-awesome 누르고 맞는 버전 복사
- html 파일에 link태그의 href에 복사한 주소 붙여 넣기

2. 코드

2-1. html 코드

<!-- 구글 폰트 불러오기 -->
<!-- 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.4.0/css/all.min.css">

<div class="top-bar flex flex-jc-sb">
  <div class="flex">
    <a href="#" class="logo flex flex-ai-c">
      <i class="fa-brands fa-apple"></i>
    </a>
  </div>
  <nav class="menu-box">
    <ul class="flex height-100p">
      <li><a class="height-100p flex flex-ai-c" href="#">item1</a></li>
      <li><a class="height-100p flex flex-ai-c" href="#">item2</a></li>
      <li><a class="height-100p flex flex-ai-c" href="#">item3</a></li>
      <li><a class="height-100p flex flex-ai-c" href="#">item4</a></li>
    </ul>
  </nav>
</div>

2-2. 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:.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;
}

/* 라이브러리 - 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;
}

/* 커스텀 */
.top-bar {
  height: 200px;
  background-color: black;
  color: white;
}

.top-bar > div > .logo {
  font-size: 5rem;
  padding-left: 50px;
}
.top-bar > .menu-box > ul > li > a {
  font-weight: bold;
  padding: 0 30px;
} 

.top-bar > .menu-box > ul > li:hover > a {
  background-color: white;
  color: black;
}

• /*커스텀*/ 위에 있는 코드는 라이브러리.

3. 결과