노마드 코더 - 코코아톡 클론코딩 연습(4)

CLONING TIME

 

19. Chats Screen part One

far = 속이 빈 아이콘

fas = 속이 찬 아이콘

ex)<i class="far fa-comment fa-2x">

 

전에 만들어 놓았던 코드들을 복붙 하고 수정해서 완성

 

 

20. Chats Screen part Two

margin-bottom: 15px; 을 하면 friends 창에서도 적용되는데,

friends는 원래대로 돌리고 싶으면 friends.css의 #friends-display-link에 margin-top: -15px; 를 추가해준다.

 

반복되는 요소는 components에 묶기!

--> 겹치는 태그들을 묶고(공통되는 것들), 나머지는 각자 css에 써준다.

 

flex의 영향을 받고싶지 않은 녀석들은 div를 하나 더 씌워서 부모-자식관계를 끊고 부모-손자 관계를 만든다.

class css설정에 last-child 조건이 붙어있는데, 해당 flex를 적용하고 싶지 않은 요소가 last-child라면,

그 요소를 "div"로 씌우면 "부모-자식 관계"가 아닌 "부모-손자 관계"이므로 => Flex의 영향권에서 벗어날 수 있다.

 

+) issue

1) component__column:last-child에 flex를 주기 전에는 block 없이는 margin이 안 생겼는데, flex 주고 나니 block 없이도 margin이 생겼다.

2) 그리고 flex를 주기 전에도 span에 margin을 주면 여백이 생겨야 하는 거 아닌가??

→

1) 그런데 부모 요소에 display:flex를 하면 자식 요소는 flex item이 된다.

이럴 경우 inline element가 아니라 flex element여서 마진이 적용이 되는 것 같다.

2) span inline element여서 margin이 적용되지 않는다. 그래서 flex를 줘서 block으로 만들어준 것이다.

 

 

21. Find Screen Part One

.class명 * n(개수)>span ⇒ n만큼 span을 가진 div class를 생성

.find-icons__icon*4>span

 

row는 옆에 오는 것, column은 다음 줄에 오는 것.

 

아이콘 이미지의 크기 또한, CSS에서 .class명 i의 font-size로 일괄 조정할 수 있다.

 

 

22. Find Screen Part Two

같은 코드가 반복된다면 변수로 만들어서 사용하여 똑같은 코드 반복을 줄인다.

:root {
  --yellow: #fae100;
  --horizontal-space: 25px;
  --main-border: 1px solid rgba(0, 0, 0, 0.2);
  --gray: rgba(0, 0, 0, 0.5);
}

 

 

23. Find Screen Part Three

HTML 코드에선 대문자를 나타내려고 해도, 우선 소문자로만 작성한다.

대문자는 디자인적인 요소이기 때문에, CSS 파일에서 작성해줘야 한다. (필수는 아님)

text-transform: uppercase; → 대문자로 만드는 코드

 

.open-post__members .devider { }라고 하면 open-post__members 안에 있는 devider에만 적용할 수 있다는 의미이다.

 

"open-post"부분 각자 div, span, h 태그 감싸는지 기준을 모르겠다. 아직 익숙하지 않아서 그런가? 나한테는 아직 명확한 기준이 보이지 않는다.ㅠㅠ 굳이 죄다 이름을 붙이는 이유는(제목을 써놓고)? -> css 할 때 편하게 하려고? 흠....

 

 

 

24. Find Screen Part Four

justify-content: space-between; 과 align-items: center; 는 항상 자주 쓰이는 조합이다.

 

사진 위에 span 올리기 등, 상대적 위치 정해주고 싶을 때는, relative-father and absolute-child!! 기억하기!

 

+) issue

position: absoulte를 줬다고 왜 open-post__heart-counter의 크기까지 작아진 이유(♥326을 감싸는 박스가 작아진 이유)

→

absolute looses the sizing if we don't specify 'width' and 'height’

='너비'와 '높이'를 지정하지 않으면 절대적으로 크기 조정이 줄어든다.

position: absolute 태그 적용하기 전에 지정된 높이값(height)과 너비 값(width)을 안 주고 padding값만 주게 되니까 absolute태그 적용 후 지정된 padding값만큼만 커진 것 같다.

absolute태그를 사용할 경우 해당 콘텐츠 크기만큼만 감싸는 것 같다.

 

 

25. More Screen part One

반복되는 부분들을 icon-row 컴포넌트 생성하여 정리한다.

find에서 만든 아이콘 배열이 more에서도 쓰이기 때문에 find.css 안에 있던 find-icon의 css를 icon-row라는 component로 만들어주고, find.html 에서 클래스 명을 바꿔준다.

이렇게 하면 두 스크린에서 컴포넌트를 이용할 수 있다.

.icon-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 25px;
}

.icon-row__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-row__icon i {
  font-size: 35px;
}

.icon-row__icon span {
  margin-top: 18px;
}

이때 한 스크린에서만 디테일한 부분을 수정하고 싶으면, more-screen이라는 class 이름을 또 붙여서, more.css에서 수정해주면 된다! → 수정할 거에 클래스를 하나 더 붙여서 그것을 지칭해 수정!!! → 매우 간단!!

 

 

26. More Screen part Two

위아래로 정렬되길 바랄 때는 flex-direction: column; 를 사용한다.

 

<div class="more-suggestions__icons">

 <div class="more-suggestions__icon">

  <div class="more-suggestions__icon-image">

   <i class="fas fa-quote-right"></i>

  </div>

  <span *class*="more-suggestions__icon-text">Kokoa Story</span>
  
 </div>

 

죄다 div 태그로 감싼 기준을 모르겠다. <div class="more-suggestions__icon-image"> 같은 경우는 span도 상관없지 않을까?

---

잘 작동하면 뿌듯한데 아직은 헷갈리는 게 너무 많다ㅜ. 첫 클론 코딩이다 보니 모르는 게 많을 수밖에 없지만 이론만 배울 때와는 확실히 다른 것 같다. 실전에서 어떻게 쓰이는지 보니까 이론 할 때보다 더 와닿는다. 점차 나아질 앞으로가 기대된다!