[코코아톡 클론] 6.12~6.17 필기

Border Box

박스크기를 200을 주고 padding left를 50을 주면 박스는 200px 크기를 유지한채 오른쪽으로 이동하잖아
근데 ㄴㄴ 박스크기 200이고 padding left50이면 박스크기 150로 하고 패딩 50이렇게 하자. 박스크기 늘리자말고 ㅇㅋ?
이게 바로 box-sizing: border-box;

Navigation Bar part Three

채팅 아이콘에 채팅 1개 왔다고 표시하기

friends.html

          <a class="nav__link" href="#">
            <span class="nav__notification">1</span>
            <i class="far fa-comment fa-2x"></i>
          </a>

nav-bar.css

.nav__link {
/*position 추가*/
  position: relative;
  color: #2e363e;
}

.nav__notification {
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 600;
  position: absolute;
  left: 15px;
  bottom: 15px;
}

span은 width, height값을 줄 수 없음
줄려면 display:felx 하도록

position: absolute는 가장 가까운 relative를 가진 부모 기준으로 움직이는거임

결과

---

Screen Header

이것봐.

이부분이 다 똑같지?
이제 저 부분 만들거야

screen-header.css 생성

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
}

.screen-header__title {
  font-size: 32px;
  font-weight: 600;
}

.screen-header__icons span {
  margin-left: 25px;
}

friends.html

    <header class="screen-header">
      <h1 class="scscreen-header__icons">Friends</h1>
      <div class="screen-header__icons">
        <span><i class="fas fa-search fa-lg"></i></span>
        <span><i class="fas fa-music fa-lg"></i></span>
        <span><i class="fas fa-cog fa-lg"></i></span>
      </div>
    </header>

css에 import 해주는거 잊지말고!

결과

---

Friends Screen part One

우린 이제 저 빨간네모 부분처럼 만들거야

friends.html

<h1 class="scscreen-header__icons">Friends</h1> 이 부분을

<h1 class="screen-header__title">Friends</h1> 이렇게 class이름 바꿔줘. title이라고 했어야하는데 저거 잘못 이름 준거야😂

++

    <a id="friends-display-link">
      <i class="fas fa-info-circle"></i> Friends' Names Display
      <i class="fas fa-chevron-right fa-xs"></i>
    </a>

style2.css

자세히보면 모든 글자 색들이 검정색이 아니라 검정색에 가까운 회색임

body {
  color: #2e363e;

이렇게 해주고

ㅇㅇㅇㅇ

friends.css 파일 새로 생성

#friends-display-link {
  text-align: center;
  display: block;
  background-color: #fafafa;
  padding: 15px 0px;
  font-size: 16px;
}

#friends-display-link i {
  color: rgba(0, 0, 0, 0.3);
}

---

User Component part One

저 부분 다양하게 쓰이지?
그래서 user-componet.css를 만들어서 공통 스타일을 줄거야.

    <div class="user-component">
      <div class="user-component__column">
        <img
          src="https://avatars3.githubusercontent.com/u/3612017"
          class="user-component__avatar"
        />
        <div class="user-component__text">
          <h4 class="user-component__title">Nicolas</h4>
          <h6 class="user-component__subtitle">this text whatever</h6>
        </div>
      </div>
      <div class="user-component__column"></div>
    </div>

저렇게 두 section으로 나눠지도록 html코딩 저렇게 짜

user-compoenet.css 파일 생성

.user-component,
.user-component__column:first-child {
  display: flex;
  align-items: center;
}

.user-component__avatar {
  width: 70px;
  height: 70px;
  border-radius: 27px;
  margin-right: 20px;
}

.user-component__title {
  font-weight: 600;
  font-size: 22px;
}

.user-component__subtitle {
  margin-top: 8px;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.5);
}

나는 이미지랑 text를 바꿔봤어

---

User Component part Two

friends.html

class="user-componentavatar **user-componentavatar--xl"**

저렇게 추가하는데 이건 변형(modifier)이야. xl(x-large사이즈)

user-component.css

.user-component__avatar--xl {
  width: 80px;
  height: 80px;
}

이렇게 하면 프사 사진 크기 키워져

전

후

그리고

저렇게 간격이 있어. 다른창에도 똑같이 적용할거야
이제 이 부분에 대한 걸 variable.css에 작성할거임

:root {
  --yellow: #fae100;
  --horizontal-space: 25px;
}

screen-header.css

padding: 25px; -> padding: var(--horizontal-space);

그럼 이제 friends에 margin이 아니라 padding이 적용됨 좌우에.

그 다음 이제

저렇게 하나의 박스로 만들거야

1. 하나의 박스로 묶기
2. 채널 추가하기

    <!-- user component -->
    <main class="friends-screen">
      <div class="user-component">
        <div class="user-component__column">
          <img
            src="https://image.dongascience.com/Photo/2020/03/5bddba7b6574b95d37b6079c199d7101.jpg"
            class="user-component__avatar user-component__avatar--xl"
          />
          <div class="user-component__text">
            <h4 class="user-component__title">최예진</h4>
            <h6 class="user-component__subtitle">
              지속적 밤샘으로 예민해진 상태
            </h6>
          </div>
        </div>
        <div class="user-component__column"></div>
      </div>
      <!--channel 추가-->
      <div class="friends-screen__channel">
        <div class="friends-screen__channel-header">
          <span>Channel</span>
          <i class="fas fa-chevron-up fa-xs"></i>
        </div>
        <div class="user-component">
          <div class="user-component__column">
            <img
              src="https://image.ajunews.com/content/image/2019/12/25/20191225170826943516.jpg"
              class="user-component__avatar user-component__avatar--sm"
            />
            <div class="user-component__text">
              <h4 class="user-component__title">인절미</h4>
            </div>
          </div>
          <div class="user-component__column">
            <span>2</span>
            <i class="fas fa-chevron-right fa-xs"></i>
          </div>
        </div>
      </div>
    </main>

결과