CoCoaTalk 2 - 3 Friends user-component

자 이제 user-component부분인 이 부분을 만드는 시간이다.

크게 보면 비슷한 레이아웃이다. 다른 페이지도 비스꾸리하다. 

이미지가 들어가고 이름이나 채널명 같은게 들어가고 다른 페이지 보면 서브로 상태메세지나 설명 같은게 이름 밑에 들어간다.

다 비슷하게 만들어지니 일단 중간 크기로 만들어 보자.

 

우선 큰 섹션으로 div하나를 만들어주고 그 안에 왼쪽과 오른쪽 두개의 칼럼을 만들어 준다.

그리고 첫 번째 칼럼에 이미지와 텍스트가 들어갈 박스를 생성 해주고

텍스트 박스에는 다시 h태그 두개를 사용해서 텍스트를 집어 넣어준다.

 

이미지는 일단 폴더하나 만들어서 넣어 줬고, 사이즈 조정해주고 뭐 마진이나 이런거 다듬어 주면 끝난다.

그리고 텍스트의 정렬인데, 일단 칼럼 두개를 인라인으로 바꾸기 위해 부모인 user-component를 flex하고 cross-axis를 center로 정렬 해준다. 그리고 첫번째 칼럼도 함께 같은 flex와 center를 적용해 준다

 

그리고 이름과 상태메세지를 넣어준 h태그를 폰트 사이즈와 글씨의 모양새를 다듬어주고 간격을 조절해준다. 끝!

이렇게 마무리 되었다. 이어서~~~

 

component를 강조하길래 어떻게 저거 하나 만들고 다른 것 까지 적용시킨다는 거지? 라는 의문이었는데

너무 간단했다.. 그냥 기준을 잡고 비슷하지만 약간씩 다르게 적용되는 애들은 기준에 클래스 네임을 추가해서 변형만 해주면 되는거였다.

ex >

class="user-component__avatar user-component__avatar--xl"

이렇게 말이다. 앞에 그냥 아바타로 끝나는 클래스는 기본으로 적용될 클래스이고 더 큰 이미지로 쓸 곳은 xl을 붙여 클래스를 하나 더 만들어준 뒤 거기에 다른 css를 적용 시키면 될 일... 아 간단하다.. 근데 내가 말을 너무 조리있게 쓰질 못했다;;;

마지막으로 중간에 보더라인 채널을 나타내는 박스(screen)와 또 그 아래 채팅 인포와 사람수를 나타내는 박스(component) 로 구분해서

css를 잘 나누자 ~ 일단 이 friends페이지에만 있는 부분과 중복되는 부분을 나눈거다~ 위에 이미 설명이 되어있음

잘 봐야 하는건 역시 기준이 되는 클래스에 변형될 클래스명을 하나 더써서 css관리를 해주면 된다.

말이 왜 이리 어렵냐만은 몇 번 해보면 감이 더 쉽게 올 듯하다.

뭐 css는 거의 비슷하다. flex박스를 써야하고~ 축별로 자리 잘 잡아주고~ 폰트사이즈나 굵기 그리고 아이콘 배치 등등을 자세히 잘보자~ 

계속 연습하면 다 잘 될 것 같다~

 

한가지 발전 한 건 니코쌤이 말하기 전에 어느 정도 만들고 있다는 거다~ 자 열심히 하자!