1. 버튼 만들기
→ class = "btn-search" 의 btn-search가 선택자 → 저 이름을 통해서 디자인(CSS 적용) 가능
* input으로 버튼 만들지 말고, <button></button> 태그를 사용해서 버튼을 생성
(input 태그로 버튼을 만들면 중간에 글자들이 꼭 들어감. = 비효율적)
![클래스 선택자를 선택할 땐 [ . ] 을 사용
. 을 사용하면 클래스명으로 찾는 것](https://image.inblog.dev?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fd477c1f0-8cae-4ba3-9261-3ce3fe51c9ad%2F1903374c-a46f-4f96-af90-dd9ca7649281%2FUntitled.png%3Ftable%3Dblock%26id%3Dbd193906-8900-4509-b2e8-ce433015da2b%26cache%3Dv2&w=1920&q=75)
[ style 코드 ]
→ 띄어쓰기로 파라미터 구분 ⇒ box-shadow는 파라미터가 5개
→ box-shadow: 3px 3px 0px 0px black;
: 수평 위치가 3px, 수직 위치가 3px, 흐림 정도가 0px, 확장 정도가 0px인 검은색 그림자 생성
2. 버튼 이미지 넣기 + svg
- 이모지는 앞에 ctrl+c/v 로 붙여넣기 가능
[ SVG = 글자 ]
3. CDN (Content Delivery Network)이란?
- 전 세계에 분산된 다수의 서버를 통해 콘텐츠를 효율적으로 전송하는 기술
- 일반적으로 웹사이트나 애플리케이션에서 정적인 콘텐츠(이미지, 동영상, 문서 등)를 사용자(클라이언트)와 가까운 곳에 위치한 서버를 통해 콘텐츠를 제공함으로서 빠르게 받아와서 사용 가능
4. CDN으로 이미지 넣기
<fontawesome CDN> 적용하는 법
1. https://fontawesome.com/ 2. https://cdnjs.com/libraries/font-awesome
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css ★ 해당 CSS Style을 아래와 같이 입력하면, 2,037개의 free 아이콘을 사용할 수 있다.
<fontawesome 사이트에서 이미지 가져오기>
<i class="fa-solid fa-magnifying-glass"></i>
띄어쓰기 → 클래스가 두 개
Share article
