웹퍼블리싱 시작하기
1. HTML 시작하기
[사이트에 이름 붙이기(1)]
- head : 보이지 않는 부분
- body : 보이는 부분
[한글이 깨져요!(3)]
<meta charset="utf-8"> : 한글이 보이는 인코딩
[꺾쇠 기호 넣는 법(10)]
<html> => <html>
[HTML 코드를 편하게 입력하는법(19)]
- 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
:<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 모바일 기기에서 보여줄 비율을 조정하는 코드
:<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. CSS 시작하기
[웹폰트(구글폰트)(7)]
방법1) head 안에 link태그로 외부데이터를 가져와서 적용
방법2) 태그에 style 속성 사용
[여백(15)]
- margin : 바깥 여백 (auto는 가로만 가능 width가 있어야함)
- padding : 안쪽 여백 (auto 사용불가)
- 값이 4개 : 위-오른쪽-아래-왼쪽
- 값이 2개 : 위아래-오른쪽왼쪽
- 값이 1개 : 다 적용
[CSS문법정리(18)]
여러 개 사용시 ;(세미콜론)으로 구분
- width : 너비
- height : 높이
- background-color : 배경색 (색상이름, #로 색상코드, 명도채도표시 등 다양하게 표현 가능)
- color : 글자색
- font-size : 글자 크기
- font-weight : 글자 굵기 (100에서부터 900까지, 100 단위로 올라가고, 중간이 되는 값은 400)
- font-family : 글꼴 (띄어쓰기가 있는 경우엔 따옴표로 감싸줌)
- text-align : 정렬
3. 완성하기
[페이지끼리 연결하기(1)]
<a href="경로">
[오픈그래프로 소셜 공유 미리보기 만들기(3)]
오픈그래프(og) 프로토콜 : 모든 웹 페이지가 소셜 그래프의 풍부한 개체가 될 수 있음
<meta property="og:메타데이터" content="설명">
- 기본 메타데이터
- og:title- 그래프 내에 표시되어야 하는 개체의 제목입니다(예: "The Rock").
- og:type- 개체 유형 (예: "video.movie"). 지정하는 유형에 따라 다른 속성이 필요할 수도 있습니다.
- og:image- 그래프 내에서 개체를 나타내야 하는 이미지 URL입니다.
- og:url- 그래프에서 영구 ID로 사용될 개체의 표준 URL입니다.
- 선택적 메타데이터
- og:audio- 이 개체와 함께 제공되는 오디오 파일의 URL입니다.
- og:description- 개체에 대한 1~2문장 설명입니다.
- og:determiner- 문장에서 이 개체의 제목 앞에 나타나는 단어입니다. (a, an, the, "", auto)의 열거 형입니다
.을 선택한 경우 auto데이터 소비자는 "a" 또는 "an" 중에서 선택해야 합니다. 기본값은""(공백)입니다. - og:locale- 이러한 태그가 마크업된 로케일입니다. 형식은 language_TERRITORY. 기본값은 입니다 en_US.
- og:locale:alternate- 이 페이지를 사용할 수 있는 다른 언어의 배열 입니다.
- og:site_name- 개체가 더 큰 웹 사이트의 일부인 경우 전체 사이트에 표시되어야 하는 이름입니다. 예: "IMDb".
- og:video- 이 개체를 보완하는 비디오 파일의 URL입니다.
[구글 애널리틱스로 방문자 수 확인하기(4)]
애널리틱스 : 방문자 분석 도구
1) 측정시작 - 계정이름, 속성이름
2) 플랫폼선택 - 웹(사이트와 스트림이름)
3) 태그하기에 대한 안내 - head태그안에 코드 붙여넣기
4) Netlify에서 사이트 배포하기
5) 애널리틱스에서 방문자 실시간 확인하기
[도메인 설정하기(5)]
도메인 : 인터넷 상의 주소를 숫자대신 알기 쉬운 영문으로 표기한 것
1) 도메인 등록 - 대행 서비스를 통해 구매
2) Netlify에서 도메인 추가 - Site setting > Domain management 메뉴로 들어가서 도메인을 추가
3) 도메인 관리 사이트에서 설정 - 메인 업체 쪽에서 Netlify로 연결 > DNS(도메인 네임 서비스) 관리 메뉴
4) A 레코드 설정 - Host값에는 @(루트도메인)를 추가하고, Value값에는 75.2.60.5(Netlify서버주소)로 설정
5) 확인 - DNSchecker에서 확인
