나만의 개발노트

[JS프로젝트] 4. Navbar 만들기 본문

[실습]/[실습] 프론트엔드

[JS프로젝트] 4. Navbar 만들기

노트포미 2023. 5. 12. 23:26

<새로 알게 된 사실>

- html의 <head>안에, 

<!-- font-awesome -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>

을 입력하면

<i class="fab fa-github"></i>

처럼 i 태그와 class 이름으로 원하는 로고를 띄울 수 있다.

 

*로고 사이트

https://fontawesome.com/icons

 

ex)

- index.html 코드

<head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    />
</head>
<body>
	<i class="fab fa-github"></i>
<body>

-> 화면

 

+ a태그 내부에 i태그를 하면, 아이콘을 링크가 연결된 버튼처럼 사용할 수 있음

<a href="https://itnote-for-me.tistory.com/">
<i class="fab fa-github></i>
</a>

-> 화면

 

프로젝트 참고

https://www.freecodecamp.org/news/javascript-projects-for-beginners/

'[실습] > [실습] 프론트엔드' 카테고리의 다른 글

[JS프로젝트] 7. QnA 게시판 만들기  (0) 2023.05.17
[JS프로젝트] 5. Sidebar 만들기  (0) 2023.05.15
[JS프로젝트] 2. 버튼으로 숫자 카운트  (0) 2023.05.03
[JS프로젝트] 1. 배경색상 랜덤하게 만들기 _ 230419(수)  (0) 2023.04.19
'[실습]/[실습] 프론트엔드' Related Articles more