1. 이모지로 삽입하기
: 바로 붙여 넣기
이모지가 없으면 이미지를 검색해서 이모지로 변경해서 붙여넣기 해도 됨
2. SVG 로 삽입하기
SVG : 글자로 그림을 만드는 것
1) 사이트에 들어가기
2) 사용할 아이콘 찾아 다운로드
눈금 : 배경이 없음
3) 다운로드 폴더에 있는 파일을 메모장으로 열기
4) 메모장에 내용 전체 복사하기
SVG는 글자로 그림을 만드는 것이기 때문에 저 글자들이 이미지가 됨
5) body에 붙여넣기
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</script>
<style>
.btn-search {
background-color: #FF5A5F;
border: 0px;
width: 70px;
height: 45px;
font-size: 15px;
color: white;
font-weight: 700;
border-radius: 6px;
box-shadow: 3px 3px 0px 0px rgb(158, 146, 146);
}
.btn-google {
background-color: white;
width: 400px;
height: 45px;
font-size: 15px;
font-weight: 700;
border-radius: 6px;
border: 1px solid black;
}
.tf-search {
height: 40px;
width: 300px;
font-size: 20px;
border-radius: 5px;
}
.tf-search2 {
height: 40px;
width: 300px;
font-size: 20px;
border-radius: 5px;
padding: 0 0 0 30px;
}
.box-search {
position: relative;
}
.icon-search {
position: absolute;
top: 13px;
left: 10px;
}
</style>
</head>
<body>
<h1>버튼</h1>
<hr>
<input type="button" value="검색" class="btn-search">
<br><br>
<button class="btn-google">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25px" height="25px">
<path fill="#FFC107"
d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z" />
<path fill="#FF3D00"
d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z" />
<path fill="#4CAF50"
d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z" />
<path fill="#1976D2"
d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z" />
</svg>
구글 계정으로 로그인
</button>
<br>
<h1>input 태그</h1>
<hr>
<input type="text" class="tf-search" placeholder="🔎Search...">
<br><br>
<div class="box-search">
<input type="text" class="tf-search2" placeholder="Search...">
<i class="fa-solid fa-magnifying-glass icon-search"></i>
</div>
</body>
</html>
이미지 특징 : 부모 박스를 벗어남
3. Font Awesome 이용하기
1) 무료 아이콘이 모여있는 곳으로 들어가 아이콘 찾기
2) 복사하기
3) 라이브러리를 복사하기
- 최신 버전 확인하기
4) head에 link 연결하기
5) body에 붙여넣기
<i class="fa-solid fa-magnifying-glass"></i>
CDN(Content Deilivery Network)
: 내가 CSS 파일이 없어도 됨
정적 파일을 전 세계적으로 서버를 만들어서 공유하는 것
남이 만든 CSS 파일을 사용하는것
가까울 수록 빠름
다운로드 받아서 경로를 설정해야 함
서버는 HTML 파일과 CSS 파일을 들고 있다가 같이 제공해서 클라이언트가 다운 받아서 그림을 그려 사용함
CDN을 사용하면 구글 서버가 들고 있는 CSS 파일에 링크가 걸려서
HTML 파일만 다운받고 다시 CSS 파일을 다운받는 것
CSS 파일을 안들고 있어도 사용할 수 있어서 편함 CSS(디자인이 모여있는 파일)
자료요청 방법 : htt://IP 주소 : 포트 번호/자원 명
meta : 실제 내용을 보지 않고도 알 수 있고 파악할 수 있는 것
브라우저가 사용함
OS는 기본적으로 방화벽을 다 막고 있음
DMZ 방화벽 : 비무장 지대를 만듦
내용을 다운받는게 아니라 메타 데이터만 확인하고 다운받지 않음
구글은 로봇태그들 달아서 메타를 인지하고 페이지를 확인함
한번 다운받은 데이터는 캐싱된것을 제공함
모든 웹 서버의 홈페이지: 인덱스
자원명을 빼고 요청하는 경우 ) 예시-네이버 사이트
프로토콜이 있음
자원명이 없으면 인덱스라는 명을 찾아라
인덱스를 찾아서 그 파일을 읽어서 돌려줌
인덱스가 없는 경우 오류 404를 돌려줌
200은 정상
1.0 버전 - get, post
1.1 버전 - 삭제, 수정 가능 / 반이중 - 아직까지 대세
2.0 버전 - 전이중 / 인터렉션이 좋아짐 - 상호작용이 많이 일어남
내 글에 댓글을 쓰면 그냥 서버가 알려주는 알림 서비스
3.0 버전 - 블록체인 / 개인이 데이터를 관리함
개인 컴퓨터에 블록체인 브라우저를 사용해서 데이터 독점을 막음
대기업과 w3schools의 싸움
Share article