20. Friends 화면 만들기 (html,css - component 1)

1) 기본 component 만들기

현재 만들고 있는 페이지에서는 프로필 사진을 만들어야 하지만,

밑의 사진처럼 한 페이지에서만 사용되는 것이 아님.

다른 페이지에서의 화면

심지어 크기도 조금씩 다르기에

중간 사이즈를 기본으로 하여 만든 뒤에

조금씩 수정하여 사용하기로 함.

 

 

두 개의 영역

보면 column이 두개인 것을 볼 수 있음.

 

 

작성한 모습

그렇기에 두개의 column을 만들어줌.

 

 

작성한 모습

첫 번째 column 안에

<div class="user-component__column"> 를 하여

박스 안에 user-component__column 라는 이름을 가진 박스를 만듬.

 

그 안에

<img src="https://avatars.githubusercontent.com/u/98861355"
class="user-component__avatar"
/> 를 하여

원하는 이미지를 넣어주고 user-component__avatar 라는 이름을 주고

<div class="user-component__text"> 를 하고

 

그 안에

<h4 class="user-component__title">Jjye_2lrwi</h4> 를 하여

user-component__title 을 만들어줌.

 

 

 

적용된 모습

이미지와 글자가 뜸.

 

 

 

2) component.css 파일 만들기

생성된 파일

component.css 파일을 만들어서

적용함

적용시킴.

 

 

 

3) flex하기

작성한 모습

user-component 만 flex하면

<div class="user-component__column"> 끼리만 적용되므로

user-component__column:first-child 에도 flex를 해줌.

 

 

 

적용된 모습

이미지와 글자가 나란히 위치함.

 

 

 

4) 이미지 스타일 하기

다른 페이지에서의 화면

위의 사진에서 프로필의 사진이 좀 더 크므로 채팅화면에 있는 크기를 기준으로 하겠음.

 

 

스타일한 모습

높이와 너비를 주고

모서리를 둥글게 해줌.

 

 

적용된 모습

사진의 크기가 줄고 모서리가 둥글게 됨.