-
😵💫 4월 20일
프로젝트 준비
https://github.com/ParkYoungWoong/starbucks-vanilla-app
위 링크에서 이미지들을 준비
아이콘을 따로 설정하지 않았지만 아이콘이 나오는 이유는
favicon.ico사용하면 자동으로 브라우저가 찾아서 아이콘으로 사용한다고 한다. 잘 찾을 수 있게 root 경로에 두도록 하자-
reset-css를 이용해 기본 css 제거 후 main.css 연결
빈 태그는 꼭 슬래시 넣어서 닫는 습관 들이기
오픈 그래프
웹 페이지가 소셜 미디어 등으로 공유될 때 우선적으로 활용되는 정보를 지정
링크를 전송했을 때 카카오톡에서 보여지는 메타 정보 (로고, 사이트 이름, 정보) -
오픈 그래프 속성
- `og:type` : 페이지 유형 - `og:site_name` : 속한 사이트 이름 - `og:title` : 페이지 제목 - `og:description` : 페이지 간단 설명 - `og:image` : 페이지 대표 이미지 주소 - `og:url` : 페이지 주소트위터 카드
트위터에 공유될 때 사용되는 오픈 그래프
-
트위터 카드 속성
- `twitter:card`: 페이지의 유형 - `twitter:site`: 속한 사이트의 이름 - `twitter:title`: 페이지의 이름 - `twitter:description`: 페이지의 간단한 설명 - `twitter:image`: 페이지의 대표 이미지 주소 - `twitter:url`: 페이지 주소 오픈 그래프와 비슷하게 사용됨.SEO (검색 엔진 최적화) : 웹 사이트/ 페이지 노출할 수 있도록 정보를 최적화하는 작업으로 오픈 그래프, 트위터 카드로 제공될 이미지를 최적화
-
Google Fonts
브라우저 별로 기본 폰트가 다르기 때문에 폰트의 지정을 해줌으로 크로스 브라우징을 제공해야 한다.
원하는 폰트 선택 후 link로 html의 head에 저장 후 css에 font-family 적용
font-family: 'Nanum Gothic', sans-serif;
라이센스 확인 후 상업적 이용이 가능한지 확인하는 습관 들이기
Google Material Icons
자주 사용하는 아이콘을 코드로 삽입할 수 있게 제공
https://fonts.google.com/icons
icon의 사이즈는 font-size를 이용해 조절 할 수 있다.
link 걸고 <div class="material-icons">search</div> 에서 콘텐츠 부분 변경 시 icon 변경됨.
