KokoaTalk Clone Coding: friends screen 4(user-component)

user component html css  작성

(사진, 이름, 상태메세지로 구성된 내용을 하나로 작성해서 사이즈변경해 사용 +chat screen) 

user-component

 

이름과 상태메세지를 각각 h4 와 h6으로 작성

상태메세지를 span으로 작성했더니, inline이라 margin-top이 적용되지 않음

<div class="user-component">

    <div class="user-component__column">

        <img src="img/profile.JPG"class="user-component__avatar"/>

        <div class="user-component__text">

            <h4class="user-component__title">Jane</h4>

        </div>

    </div>

 <div class="user-component__column"></div>

</div>

 

프로필 사진과 이름을 하나로 묶고, 뒤의 메세지 표시 등 잡다한 부분을 하나로 묶음(헷갈려서 색깔로 나눔)

처음에 이렇게 작성했었는데, 프로필 이름은 항상 존재하지만 상태메세지는 없앨 수 있기 때문에

.user-component__title에 margin-bottom을 주는 것 보다,

.user-component__subtitle에 margin-bottom을 주는 것이 나을 것 같다.

 

friends-screen(xl)

 

friends-screen(sm)

 

chat-screen(default)

위의 세개 형식이 같고 크기만 다르기 때문에, 클래스 이름과 width, height만 다르게 하기

프로필 사진의 image에 클래스--xl 추가

 

width, height 변경(각 70px→각 80px)

 

각 screen마다 일정하게 padding이 들어가 있어서 그것도 추가

앞서 작성한 user-component울 <main class="friends-screen"> 태그 안으로  넣어주고,

일정한 간격의 크기는 20px, 이걸 변수로 작성해줌

friends.css에서 해당 클래스를 위아래 없이, 양쪽에 변수를 적용해주면 아래 작성될 내용에 전체적으로 padding이 적용됨