Notice
Recent Posts
Recent Comments
Link
공부하는 안씨의 기록
chapter 07. HTML (OG tag, 레이아웃, Github pages 배포) 본문
웹 프로그래밍/테킷 프론트엔드 온보딩 트랙(230710~230819)
chapter 07. HTML (OG tag, 레이아웃, Github pages 배포)
an씨 2023. 7. 26. 17:45목차
1. OG Tag
2. Layout(레이아웃)
3. Github Pages 배포
1. OG Tag
공유한 링크로부터 웹 페이지의 정보를 미리 보여줄 수 없을까?
→ Open Graph Protocol : 웹페이지의 미리보기 데이터를 볼 수 있음
- 썸네일 이미지, 타이틀, 디스크립션(설명)
- head 태그 안에 meta 태그를 사용해서 만들 수 있음.
- property: meta 데이터의 종류 작성
- content: 실제 들어갈 텍스트 내용이나 리소스의 위치 작성
<head>
...
<meta property="og:title" content="안씨의 컴공생활!">
<meta property="og:description" content="컴공생활 공부 및 개발 블로그입니다.">
<meta property="og:image" content="./tistory.png">
...
</head>→ 이런 정보가 잘 적용되었는지 확인하려면 로컬 저장소에서만은 확인할 수 없다. 웹에 html 파일이 공개가 되어야 확인이 가능해진다! (아래의 3. Github Pages 배포 챕터에서 깃허브를 사용해 확인해보자.)
./ ← 내가 위치한 곳의 폴더 안에 있는 thumbnail.png를 불러와 og:image로 활용할 것이다.
2. Layout(레이아웃)
: 웹 페이지에서 보이는 규칙적인 구조
이와 같은 용도별 태그는 영역 분할 뿐만 아니라 기계의 웹 페이지 해석을 돕는다.
<header> (머릿말. 서비스를 대표하는 헤드라인)
<nav> (네비게이션바)
<section>(내용)
<footer> (저작권 표시, 연락처, 사이트 링크 등)(=semantic : 의미가 잘 전달되는)
3. Github Pages 배포
- step 1. gitub pages 원격 저장소 만들기
- step 2. html 파일 만들기
- step 3. Git 저장소 초기화 및 Github 반영
- index.html vscode
- vscode terminal→ git bash open, 명령어 입력
- 명령어(아래의 이미지 참조)
-> 그 후 원격 저장소에 업로드
- step 4. 배포된 페이지 확인
- step1에서 만든 저장소 링크를 직접 확인해본다. 이때 웹페이지 링크가 작동할 때 1분에서 5분, 최대 몇시간까지도 소요될 수 있다고 한다.
'웹 프로그래밍 > 테킷 프론트엔드 온보딩 트랙(230710~230819)' 카테고리의 다른 글
| chapter. 08 CSS Beginner (2) (BOX model, BOX sizing, CSS 단위) (0) | 2023.09.06 |
|---|---|
| chapter 08. CSS Beginner (1) (css 적용, 구성-구조, 선택자, 주석-, 특성) (1) | 2023.09.06 |
| chapter 06. HTML 기초 (구성, 요소 및 실) (0) | 2023.07.26 |
| chapter 05. Git & Github (2) 원격 저장소(remote repository), 협업, 병합 충돌,GUI (0) | 2023.07.20 |
| chapter 05. Git & Github (1) 터미널 사용법, 로컬 git 저장소 생성 (0) | 2023.07.18 |
'웹 프로그래밍/테킷 프론트엔드 온보딩 트랙(230710~230819)' Related Articles
more
