HTML web2 10일차 - 구글 개발자 도구, 지도사용법, 폰트사용법

 

구글 개발자 도구

크롬의 개발자도구를 이용하여 타사이트의 코딩내용을 쉽게 확인 해볼 수 있다. (단축키 F12 또는 CTRL+Shift+i )

 

유용한 기능

1. 우클릭 불가한 페이지 해제

해당 사이트에서 "개발자 도구 실행" → "우측 상단 톱니바퀴 모양의 설정" 클릭 → 아래쪽 Debugger 부분에서 "diasble javascript 체크"

 

2. 파비콘등 아이콘이 필요할때 직접 다운

해당 사이트에서 "개발자 도구 실행" → favicon 검색 링크부분 클릭 후 아이콘창 열리면 저장

 

3.사이트 저장 기능

원하는 사이트에서 ctrl+ S html파일 및 사용된 이미지 및 css파일 등이 폴더와함께 저장된다.

 

4.사이트 전체 스크린샷 기능

개발자 도구 실행 상태에서 ctrl + shift + P 눌러서 검색창이 나오면 capture full size screenshot 입력 후 클릭

 

5. 실시간으로 수정 및 확인 기능

개발자 도구 실행 상태에서 해당 html의 태그를 선택해서 css속성값은 변경해주고 바로 확인 할 수 있다.

수정하여 바로 확인해 볼 수 있기 때문에 확인하고 코딩프로그램으로 수정하여 주면 편리하게 사용가능

값은 위 아래 방향키를 누르면 1px씩 변경되고

shift를 누른상태에서 방향키 입력시 10px 단위로

ctrl을 누른상태에서는 100px씩 증감한다.

css속성의 왼쪽 체크박스를 체크해제하면 css속성을 비활성화 해 볼 수 도있다.

 

 

1. 지도 사용법

네이버 , 다음카카오 등에서 무료로 지도를 홈페이지에 연동하여 사용 할 수 있다.

각각 네이버 클라우드 플랫폼, 카카오개발자 사이트를 통해서 회원가입 및 API키를 발급받아 연동하면 된다.

각각의 사이트에 html 태그와 javascript 등 예시와 소스가 있으니 붙여 넣기 및 수정하여 사용하면 됩니다.

 

2. 외부 폰트 사용법

무료 폰트 다운 사이트 : 구글폰트 ,dafont,눈누 등

구글 폰트 사이트 이용 방법

사용할 폰트를 클릭 후 select this style 버튼을 모두 눌러 주면 오른쪽 사이드 메뉴에 <link> 가 생성되는데 생성된 <link>를 복사하여

<title>아래쪽에 붙여 넣어준다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;700;900&display=swap" rel="stylesheet">

 

아래쪽에 생성된 font-family 부분은 복사하여 폰트적용을 하고 싶은 태그의 css속성에 붙여 넣어준다.

font-weight없이 사용하면 h태그처럼 자체 효과가 있는 폰트에 적용시 왜곡되는 현상이 있으니 꼭 입력해준다.

p{font-family: 'Noto Sans KR', sans-serif;font-weight:100}

 

 

 

link로 이용하는 방법 외에 폰트를 다운받아서 사용하는 방법도 있다.

폰트를 다운받아서 @font-face{font-family:"b"; src:url("폰트파일명")} 으로 font-family명을 지정해주고 원하는 태그에 {font-family:"b";font-size:50px;} 와같은 방법으로 적용시켜 주면 된다.

@font-face{font-family:"b";
			src:url("GothicA1-Black.ttf")}
p{font-family:"b";font-size:50px;}