이미지 넣기

yuzu sim

Jan 16, 2024

1. 이모지로 삽입하기

: 바로 붙여 넣기

이모지가 없으면 이미지를 검색해서 이모지로 변경해서 붙여넣기 해도 됨

2. SVG 로 삽입하기

SVG : 글자로 그림을 만드는 것

1) 사이트에 들어가기

Google 아이콘, 로고, 기호 – PNG, SVG 무료 다운로드

50여 가지 UI 디자인 스타일의 무료 Google 아이콘, 로고, 심볼. 일반 또는 애니메이션 Google 벡터 아이콘과 로고를 PNG, SVG, GIF 형식으로 무료 다운로드

https://icons8.kr/icons/set/google

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) 무료 아이콘이 모여있는 곳으로 들어가 아이콘 찾기

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

https://fontawesome.com/

2) 복사하기

3) 라이브러리를 복사하기

최신 버전 확인하기

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.

https://cdnjs.com/libraries/font-awesome

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은 정상

W3Schools Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/

1.0 버전 - get, post

1.1 버전 - 삭제, 수정 가능 / 반이중 - 아직까지 대세

2.0 버전 - 전이중 / 인터렉션이 좋아짐 - 상호작용이 많이 일어남

내 글에 댓글을 쓰면 그냥 서버가 알려주는 알림 서비스

3.0 버전 - 블록체인 / 개인이 데이터를 관리함

개인 컴퓨터에 블록체인 브라우저를 사용해서 데이터 독점을 막음

대기업과 w3schools의 싸움

See more posts

이미지 넣기

1. 이모지로 삽입하기

2. SVG 로 삽입하기

3. Font Awesome 이용하기

CDN(Content Deilivery Network)

More articles

Display - Grid

Position

버튼과 서치박스 만들기 실습 + 색상 뽑는 방법

단방향 통신 (소켓 통신)