본문 바로가기
programming study/Clone coding

[노마드코더]코코아톡 클론코딩 (6)(2021.1.7 ~ 8)

greedysiru 2021. 1. 8. 00:33

본 내용은 해당 강의 토대로 작성

Cloning time

friends.html

Friends

  • Friends 페이지를 Cloning한다.

VSC 단축키

nav>ul>li>*4>a

위 단축키를 입력하면, 아래의 html 코드가 생성

<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

html 코드 작성

  • Navigation bar의 기본 html 코드를 작성한다.
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__btn">
                <a class="nav__link" href="friends.html"><i class="fas fa-user fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="far fa-comment fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="fas fa-search fa-lg"></i></a>
            </li>
            <li class="nav__btn">
                <a class="nav__link" href="#"><i class="fas fa-ellipsis-h fa-lg"></i></a>
            </li>
        </ul>
    </nav>
  • BEM 작명법을 사용한다.

CSS 코드 작성

  • componetns 폴더 아래에 nav-bar.css를 생성하고 CSS 코드를 입력한다.
  • styles.css에 꼭 @import 한다.
.nav {
  background-color: #f9f9fa;
  padding: 20px 50px;
  border-top: 1px solid rgba(121, 121, 121, 0.3);
}

.nav__list {
  display: flex;
  justify-content: space-between;
}

.nav__link {
  color: #2e363e;
}

a 태그 reset

  • reset.css에서 a태그를 초기화 한다.
a {
  color: inherit;
  text-decoration: none;
}

status bar, navigation bar 고정 하기

  • status bar
.status-bar {
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  padding: 5px 3px;
  width: 100%;
}

  • position: fixed와 width: 100%, top: 0을 추가한다.

  • navigation bar

.nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f9f9fa;
  padding: 20px 50px;
  box-sizing: border-box;
  border-top: 1px solid rgba(121, 121, 121, 0.3);
}
  • position: fixed, bottom: 0, box-sizing: border-box를 추가한다.

Border Box

  • CSS에 box에 padding을 추가하면, 그 만큼 box의 크기를 늘린다.
    • 200px의 box에 padding 50px을 추가하면, box크기는 총 250px이 된다.
  • box-sizing : border-box를 입력하면, padding을 입력해도 box사이즈를 유지할 수 있다.

대화 알림 버튼 만들기

  • 카카오톡의 대화 알림 버튼을 구현한다.
  • friends.html의 대화창 navigation 아이콘 부분에 span태그를 추가
    • class는 nav__notification으로 한다.
<a class="nav__link" href="#">
  <span class="nav__notification">1</span>
  <i class="far fa-comment fa-2x"></i>
</a>
  • nav-bar.css에서 nav__notification을 설정한다.
.nav__link {
  color: #2e363e;
  position: relative;
}

.nav__notification {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: tomato;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: whitesmoke;
  font-weight: 600;
  position: absolute;
  left: 15px;
  bottom: 15px;
}
  • span태그는 inline이므로 display:block 속성을 부여한다.
  • 숫자 1이 정렬되도록 display:flex
  • 부모요소를 기준으로 설정하기 위해, 부모요소에는 position:relative
  • 자식요소에는 position: absolute

Screen header

  • Screen header는 대부분의 페이지에서 공통적으로 구현된다.

html 코드 작성

  • friends.html에 header 코드를 작성한다.
    <header class="screen-header">
        <h1 class="screen-header__title">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 코드 작성

  • componets/screen-header.css에 코드를 작성한다.
  • styles.css에 @import 한다.
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
}
.screen-header__title {
  font-size: 32px;
  font-weight: 600;
}
.screen-header__icons span {
  margin-left: 25px;
}

Friend 문구 만들기

  • Header 아래에 friend문구를 만든다.
    <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>
  • css/screens/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);
  margin-right: 5px;
}
  • styles.css에 @import한다.

User Component 1

  • 사진과 닉네임이 나오는 부분을 만든다.

VSC 단축키

.user-component*2
  • 입력하면 해당 class를 가진 div 2개가 만들어진다.

html 코드 작성

    <div class="user-component">
        <div class="user-component__column">
            <img src="https://tistory3.daumcdn.net/tistory/4367973/attach/059c57a4a960451fad4115308781a782" class="user-component__avatar" />
            <div class="user-component__text">
                <h4 class="user-component__title">Jaemin</h4>
                <h6 class="user-component__subtitle">My nickname is greedysiru</h6>
            </div>
        </div>
        <div class="user-component__column"></div>
    </div>

CSS 코드 작성

  • css/components/user-component.css에 코드를 작성한다.
  • styles.css에 @import하기
.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: 5px;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.5);
}
  • flexbox를 적용할 때, 부모 자식 요소를 잘 파악하고 적용하도록 한다.

User Component 2

  • 프로필 사진 아래에 채널 목록을 만든다.

html 코드 작성

    <main class="friends-screen">
    <div class="user-component">
        <div class="user-component__column">
            <img src="https://tistory3.daumcdn.net/tistory/4367973/attach/059c57a4a960451fad4115308781a782" class="user-component__avatar--xl" />
            <div class="user-component__text">
                <h4 class="user-component__title">Jaemin</h4>
            <!--    <h6 class="user-component__subtitle">My nickname is greedysiru</h6> -->
            </div>
        </div>
        <div class="user-component__column"></div>
    </div>
    <div class="friedns-screen__channel">
        <div class="friedns-screen__channel-header">
             <span>Channel</span>
        </div>
             <i class="fas fa-chevron-up fa-xs"></i> 
             <div class="user-component">
                <div class="user-component__column">
                    <img src="https://tistory3.daumcdn.net/tistory/4367973/attach/059c57a4a960451fad4115308781a782" class="user-component__avatar--sm" />
                    <div class="user-component__text">
                        <h4 class="user-component__title">Channel</h4>
                    </div>
                </div>
                <div class="user-component__column">
                    <span>2</span>
                    <i class="fas fa-chevron-right fa-xs"></i>
                </div>
            </div>
        </div>
    </main>
  • div태그들을 main 태그 안에 넣는다.

변수 선언

  • margin 이나 padding을 바꿀 때, 일정한 값을 매번 입력하기 위해 변수를 선언한다.
  --horizontal-space: 40px;

CSS 코드 작성

  • user avatar 가 제일 큰 경우의 CSS를 설정한다.
.user-component__avatar--xl {
  width: 80px;
  height: 80px;
  border-radius: 30px;
  margin-right: 20px;
}

Finishing Friends Screen

  • 채널의 타이틀은 굵지 않으므로 class명을 새로 만들어준다.
<h4 class="user-component__title user-component__title--not-bold">
  Channel
</h4>
  • 채널 사진의 크기와 타이틀, 글자 색상을 user-component.css에서 설정한다.
.user-component__avatar--sm {
  width: 60px;
  height: 60px;
  border-radius: 25px;
  margin-right: 20px;
}

.user-component__title--not-bold {
  font-weight: 400;
}

.user-component__column:last-child {
  color: rgba(0, 0, 0, 0.5);
}
  • friends.css에서 경계선과 헤더의 설정을 한다.
.friends-screen__channel {
  margin-top: 25px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 15px;
}

.friends-screen__channel-header {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.5);
}

완성된 페이지

스크린샷 2021-01-08 오전 12.19.26

느낀점

니꼬쌤과 똑같이 했는데도 종종 간격이 문제가 생기는 경우가 있었다. 그럴때는 직접 margin값이나 padding값을 조절해서 내가 원하는데로 깔끔하게 만들어내니 꽤 재밌었다. friends.html에서 몇 번 부모 자식 요소 설정 문제로 막혔지만 당황하지 않고 침착하게 들어가면 안될 요소들을 빼거나 추가해서 해결할 수 있었다! 코드가 길어지면 길어질 수록 BEM은 조금 헷갈려지는 것 같다.

Source Code

https://github.com/greedysiru/kokoa-clone-2021


'programming study > Clone coding' 카테고리의 다른 글

[노마드코더]코코아톡 클론코딩 (8)(2021.1.8 ~ 9)  (0) 2021.01.09
[노마드코더]코코아톡 클론코딩 (7)(2021.1.8)  (0) 2021.01.08
[노마드코더]코코아톡 클론코딩 (5)(2021.1.7)  (0) 2021.01.07
[노마드코더]코코아톡 클론코딩 (4)(2021.1.6)  (0) 2021.01.06
[노마드코더]코코아톡 클론코딩 (3)(2021.1.5)  (0) 2021.01.05

'programming study/Clone coding' Related Articles

티스토리툴바