- 완성하기
- 페이지끼리 연결하기
→ index.html 파일 내의 footer영역에 구독 신청하기에 subscribe.html로 이동하는 링크를 걸어보자.
img 태그와 동일하게 a태그를 사용하여 링크를 클릭했을 때 이동하는 파일의 경로를 설정해주고
확인해보면 해당 부분을 클릭하면 원하는 파일로 이동하는 것을 확인할 수 있고,
style을 주어 하얀색으로 보이게 설정해준다.- 오픈 그래프로 소셜 공유 미리보기 만들기Open Graph Protocol
Facebook Obeject Debugger
→ 소셜 공유 미리보기라는 것을 만들어보자.
→ 소셜 공유 미리보기는 사이트 주소를 SNS에 붙여넣기 하면 미리보기가 뜨는데 이것을 소셜 공유
미리보기라고 한다.
→ HTML파일 안의 head 태그 안에 meta태그를 사용하여 소셜 공유 미리보기를 할 수 있는데
구글이나 페이스북, 트위터(X)와 같은 대형 서비스에서는 각자 요구하는 meta태그가 따로 있다.
이 태그를 잘 활용하면 우리 사이트를 내가 원하는대로 예쁘게 보여줄 수 있다.
→ 가장 많이 쓰는 것이 페이스북의 오픈그래프라는 것인데 오픈이라는 말에서 알 수 있듯이
구글, 페이스북, 카카오톡 등 다양한 서비스에서 미리 보기를 만들 때 참고하는 정보
→ <meta property="og:title" content="Weekly Codeit">라고 작성할 수 있는데 오픈 그래프를
사용할 때에는 og:이라고 쓰며, content 속성에는 오픈 그래프 항목에 맞는 내용을 적어준다.
og:title 말고도 다양한 오픈 그래프 프로퍼티가 있는데
url, type, image, description 이런 프로퍼티들이 있다.
→ 이렇게 facebook debugger에 들어가서 보면 내가 설정한 이미지와 description등 설정한 내용이
잘 보인다.- 구글 애널리틱스로 방문자 수 확인하기
→ 내 사이트에 방문하는 사람의 숫자를 알고 싶을 때에는 구글 애널리틱스를 사용한다.
→ 구글 애널리틱스는 구글에서 만든 방문자 분석 도구로 사이트에 설치하면 관리자 도구로 방문자의
숫자나 통계 같은 것들을 볼 수 있다.
→ 여기서 속성이라는 것은 하나의 애널리틱스 계정 안에서 여러 개를 측정할 수가 있다.
→ 홈페이지나 모바일 앱 두 가지가 있는 경우에 하나의 계정에서 사이트 하나, 모바일 하나 이렇게
두 개의 속성을 측정하는 것
→ 쿠기를 가지고 방문자 통계를 내기 때문에 GDPR에서 쿠기를 사용하기 전에 사용자 동의를 받는
창이 나타난다.
→ 우리 사이트에서 방문자 데이터를 구글로 보내기 때문에 데이터 스트림, 데이터 흐름이라는 표현을
쓴다.
→ 측정되는 데이터를 확인해보면 페이지 조회, 스크롤, 이탈 클릭 같은 것들이 있다.
→ 태그하기에 대한 안내에서는 새로운 홈페이지에 태그 추가가 있는데
자바스크립트라는 프로그래밍 언어를 사용할 때 쓰는 script 태그가 있다.
→ 해당 코드를 복사해서 head태그 안에 붙여 넣는다.
→ 해당 코드를 head태그 안에 붙여넣고 재배포를 해준 후 애널리틱스 사이트로 돌아가 왼쪽의
차트가 그려진 아이콘을 눌러서 실시간으로 들어가본다.- 도메인 설정하기
→ 앞에서 Netlify로 사이트를 인터넷에 올려보았는데,
https://<사이트 이름>.netlify.app 이런 주소로 접속할 수 있었다.
그렇다면 https://google.com 이나 https://wikipedia.org 같은 주소는 어떻게 만드는 걸까?
→ google.com 이나 wikipedia.org 같은 걸 "도메인"이라고 부른다
→ 도메인을 갖고 싶으면 보통 업체를 통해서 도메인을 등록하고 사용
→ 무료는 아니고 대부분 유료인데 보통 1년 단위로 등록
1단계: 도메인 등록하기
→ 우선 가장 먼저 도메인을 등록한다. 보통 대행 서비스를 통해서 비용을 지불한다.
→ 대표적으로 아마존 웹 서비스(AWS Route53)이나, 구글 도메인즈 같은 서비스들이 있다.
→ 구글에서 "도메인 등록 업체(Domain Registrar)"를 검색하면 다양한 업체들이 나오는데
마음에 드는 업체를 찾아보고 도메인을 구매한다
2단계: Netlify에서 도메인 추가하기
→ Netlify 사이트에 접속한 다음, 내 프로젝트로 들어가서 Site setting > Domain management
메뉴로 들어가서 도메인을 추가한다.
→ Site Setting > Add custom domain 메뉴로 들어 간 모습
→ Add custom domain 버튼을 클릭해서 들어간 모습,
여기서 내가 등록한 도메인을 입력
3단계: 도메인 관리 사이트에서 설정하기
→ 도메인 업체 쪽에서 Netlify로 연결해 주도록 설정해보자.
→ 내가 도메인을 등록한 사이트에서 DNS(도메인 네임 서비스) 관리 메뉴로 들어가 설정
A 레코드 설정
→ 레코드를 추가한다는 건 쉽게 말해서 도메인 서비스에 규칙을 추가하는 것
→ 일단 Host라고 하는 값에는 @를 추가하고, Value라는 값에는 75.2.60.5로 설정
→ 여기서 @는 루트 도메인(이 경우에는 my-petit-domain.io)에 규칙을 추가한다는 뜻
→ 75.2.60.5라는 값은 Netlify에서 운영하는 서버 주소인데, Netlify 공식 문서에서 알려 준 값
→ 정리하자면, 이 레코드는 "내 도메인으로 들어왔을 때 Netlify 서버에 물어봐 주세요!"라는 뜻이다.
→ 다양한 방법이 있지만 DNSChecker라는 사이트에서 확인해보면
사이트의 A 레코드를 확인해 보면 아래처럼 우리가 설정한 값이 잘 보여야 한다.
- 꿀팁
- 개발자 도구 사용하기
→ 어떤 사이트든지 HTML과 CSS를 확인할 수 있는 개발자 도구를 자주 사용하자
→ Select an element 메뉴를 사용하면 검사할 항목을 선택할 수 있는 기능
→ 개발자 도구에서 설정 값을 다양하게 수정해볼 수 있고 그게 바로 적용되어 보여지기도 하는데
이 수정과정은 영구적인 것은 아니고 일시적으로 수정했을 떄 어떻게 보이는지 보여주는 정도이므로
저장되지는 않는다.
- HTML/CSS를 공부하는 법
→ whatwg.org 라는 사이트를 찾아보면 HTML 표준 문서를 확인할 수 있다.
→ MDN 사이트에서 HTML과 관련된 내용을 확인할 수 있다.