26. Find 화면 만들기 (html,css -기본설정,header,main 1)

1) find.html 만들기

find.html 화면

chats.html 파일에서 전체 코드를 복사하여

find.html 파일에 붙여넣기 해줌.

 

 

title 변경

title을 변경해주고

 

chats 아이콘

chats 아이콘을 빈 아이콘으로 변경해줌.

변경한 모습

돋보기 아이콘은 진한 아이콘이 없으므로

추후에 스타일 해주겠음.

 

 

 

2) header 변경하기

변경한 모습

title 변경해주고

필요없는 아이콘을 삭제함.

 

 

변경된 모습

title이 변경되고 필요없는 아이콘이 사라짐.

 

 

작성한 모습

톱니바퀴 아이콘이 있는 span 태그의 아이콘 위에

point div 박스를 만들어줌.

 

 

스타일한 모습

전에 navigation bar에서 noti 만들었던 것처럼 스타일함.

위치는 봐가면서 조정함.

 

 

추가된 모습

아이콘 위에 빨간 점인 배지가 생김.

 

 

 

3) main 파트 만들기 (html)

빈 main 태그 안

먼저 복사해왔던 main 태그 안에 있던 내용들을 다 지워줌.

 

새로 만들것임.

 

 

아이콘 넣을 박스 생성

find-icons인 dv 박스 내에

find-icons__icon인 박스와 그 내에 span 태그를 작성하여

4개를 똑같이 만들어줌.

span 태그에 내용 작성

span 태그 내에 원하는 내용을 작성함.

 

 

적용된 모습

적은 내용이 나타나는 것을 볼 수 있음.

 

 

아이콘 입력한 모습

각 작성한 내용에 맞는 아이콘의 코드를 붙여넣기함.

 

 

적용된 모습

아이콘이 적용된 것을 볼 수 있음.

 

4) main 파트 스타일 하기 (css)

find.css 화면

find.css 파일을 만들어줌.

 

 

styles.css 화면

당연히 import 해주어야 함.

 

 

스타일한 모습

아이콘들을 가로로 정렬함.

 

 

변경된 모습

아이콘이 가로로 일정하게 정렬된 것을 볼 수 있음.

 

 

스타일한 모습

아이콘과 아이콘 이름이 세로로 위치하게 하고

서로 가운데에 정렬되도록 함.

 

 

변경된 모습

아이콘과 이름이 세로로 정렬되고

가운데로 정렬된 것을 볼 수 있음.

 

 

스타일한 모습

아이콘의 크기를 키우고

글자와 좀 떨어져 있도록 공간을 줌.

 

 

변경된 모습

아이콘이 커지고

아이콘과 글자 사이에 공간이 생김.