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키를 누른 상태에서

원하는 또 다른 곳을 클릭하여 선택한 후

작성하면 한 번에 작성할 수 있음.