21. Friends 화면 만들기 (html,css - component 2)

5) 글자 위치 변경하기

스타일한 모습

user-component와

user-component__column:first-child에

flex하고 가로로 중앙에 위치하도록 해줌.

 

 

변경된 모습

가로로 중앙에 위치하는 것을 볼 수 있음.

 

 

 

6) 사이에 공간주기

작성한 모습

user-component__avatar의 오른쪽에 

margin을 주어

이미지와 떨어지도록 함.

 

 

변경된 모습

이미지와 글자 사이가 떨어진 것을 볼 수 있음.

 

 

 

7) 글자 크키와 두께 변경하기

스타일한 모습

글자 크기를 더 키우고 두껍게 함.

 

 

적용된 모습

글자가 더 커지고 두꺼워짐.

 

 

 

8) subtitle 만들기

만들고 있는 기준 사이즈

위의 사진을 보면 연하게 subtitle이 있는 것을 볼 수 있음.

 

그걸 만들어보도록 하자.

 

 

작성한 모습

title 밑에 subtitle을 만들어줌.

 

 

스타일한 모습

margin을 주어 위의 title과 조금 떨어지게 하고

글자 사이즈를 키우고

투명도를 연하게 함.

 

 

변경된 모습

연한 subtitle이 만들어짐.