22. Friends 화면 만들기 (html,css - component 3)

1) 기본 component 수정해서 사용하기

작성해둔 코드

작성했던 코드는 현재 페이지에서 사용할 코드와 조금 다름.

지금은 subtitle이 필요없기에

주석처리하여 숨겨둠.

 

 

추가한 모습

현재 페이지에서 사용할 avatar의 크기는 좀 더 크므로

user-component__avatar--xl 을 추가로 작성하고

 

 

스타일한 모습

user-component__avatar--xl 을 불러와서

크기를 더 키워줌.

 

 

크기 비교

기존 크기보다 이미지가 커진 것을 볼 수 있음.

 

 

 

2) padding 맞추기

header와 이미지의 padding을 맞춰보도록 하겠음.

물론 맞추지 않고 개별로 따로따로 padding이나 margin을 주어도 됨.

 

 

 

작성한 모습

screen-header에 원래 작성되어있던 padding의 값인 25px를

variables.css 파일의 root에

--horizontal-space: 25px 를 하여줌.

 

 

변경한 모습

원래 있던 padding 값에 

--horizontal-space 를 적어줌.

 

 

Friends.html 파일

html 파일에 main 태그를 입력하여

friends-screen 이라는 class를 줌.

 

 

friends.html 파일

main 태그 사이에 comopnent 코드를 넣어줌.

 

 

screen-header. css 화면

friends-screen에

--horizontal-space인 padding을 넣어주면 됨.

 

 

변경된 모습

header의 Friends 와 이미지의 앞 padding이 일치하는 것을 볼 수 있음.

 

 

 

3) friends display 와 component 간격 넓히기

작성한 모습

friends display 와 component 의 사이를 넓혀주기 위해

friends-display-link 의 밑에 margin을 줌.

 

 

비교한 모습

component가 아래로 내려간 것을 볼 수 있음.