천진난만 코딩 스토리
12. Friends 화면 만들기 (html-상태바, navigation bar) 본문
1) 기본 화면 불러오기
index.html 파일에서
기본적으로 필요한 코드를 불러오겠음.
기본 설정과 상태바 코드를 불러옴.
원래 있던 header와 from은 제외하고 불러옴.
상태바가 만들어진 상태가 됨.
2) avigation bar 생성하기
위의 코드를 작성할 것인데 쉽게 작성하는 법이 있음.
html 파일에
nav>ul>li*4>a 를 작성하면
위의 사진처럼 뜨는 것을 볼 수 있음.
작성 후 엔터를 치면
위의 사진처럼 작성이 되는 모습을 볼 수 있음.
이제 내용을 채워주어야 하는데
이 때에도 쉽게 작성하는 팁이 있음.
작성하고 엔터를 누르고 나면 위에 사진처럼 되어 있을 것인데
이 때 아무 키도 누르지 말고
1번 자리에 #을 작성 후 Tab키를 누르면
2번 자리로 이동될 것임.
똑같이 내용을 작성 후 다시 Tab키를 누르면
3번 자리로 이동됨.
이런 식으로 Tab키를 눌러가며 작성하면 편함.
다 작성하면 이렇게 됨.
작성한대로 link가 만들어진 모습.
3) title 변경하기
title을 화면과 어울리게 바꾸어 줌.
저장하고 확인하면
title이 변경된 모습을 볼 수 있음.
4) 아이콘 입력하기
Friends란 주소를 누르면 friends.html 파일로 이동되게 만듬.
fontawesome에서 원하는 아이콘을 검색하여
위에서 적었던 글자대신 아니콘 코드를 붙여넣기하여
아이콘을 만듬.
(이때 아이콘은 크게 만들기 위해 fa-lg를 하여 크게 만들어줌)
아이콘을 모두 찾아서 붙여넣은 모습임.
글자였던 link들이 아이콘으로 변경된 것을 볼 수 있음.
5) class 작성하기
스타일을 줄 때를 위해 class를 작성해야함.
id로 해도 되지만 그보다 편하게 하기 위해 class로 함.
다 작성한 모습임
이 때 같은 class를 입력할 때에는
원하는 곳을 클릭하고
(맥 기준으로) option키를 누른 상태에서
원하는 또 다른 곳을 클릭하여 선택한 후
작성하면 한 번에 작성할 수 있음.
'노마드코더 > 코코아톡 클론코딩' 카테고리의 다른 글
14. Friends 화면 만들기 (css-navigation bar 2, border box사용) (0) | 2022.11.11 |
---|---|
13. Friends 화면 만들기 (css-navigation bar 1) (0) | 2022.11.11 |
11. Log in 화면 만들기 (css- 파일분할, date 보내기) (0) | 2022.11.10 |
10. Log in 화면 만들기 (css- login-form 2) (0) | 2022.11.10 |
9. Log in 화면 만들기 (css- log in form 1) (0) | 2022.11.10 |