이제 스타벅스 예제를 만들어 볼 시간!!! >_<
우선 github 사이트에서 필요한 파일들을 다운받고, starbucks 폴더 생성 후 VSCode에서 열어준다. 그리고 브라우저에서 열어 봤더니
따로 입력한 적이 없는데 스타벅스 아이콘이 타이틀과 함께 출력된다. 이는 프로젝트의 루트 경로에 favicon.ico 파일이 있으면 자동으로 해당 탭의 아이콘으로 사용하기 때문이다. 만약 starbucks.ico 와 같이 이름을 변경하면 출력되지 않음! 조금 더 고해상도로 출력하고 싶으면 <link rel="icon" href="./favicon.png"> 와 같이 png파일을 icon으로 링크 태그에 넣어주면 된다.
다음으로 브라우저의 기본적인 스타일을 초기화하기 위해 reset.css cdn 을 구글링 후 HTML 코드를 붙여넣기 하고, 우리가 만들 main.css 파일을 생성 후 링크로 넣어준다. 그러면 기본적인 준비 끝!
오픈그래프란 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 의미한다. 대표적으로 카톡에 웹 사이트의 주소를 전송하면 아래에 웹 페이지가 카드 형식으로 나타나는 것을 의미한다. 아래와 같이 코드 추가 완료!
참고로 이미지 파일에 보면 SEO가 붙어있다. SEO(검색 엔진 최적화, Search Engine Optimization)란 구글이나 네이버 등에 자신의 웹 사이트/페이지를 노출할 수 있도록 정보를 최적화하는 작업을 말한다.
구글에 google fonts 라고 검색해서 들어가면 여러 폰트들을 확인할 수 있다. 여기서 nanum 을 검색해서 나눔 고딕체를 선택한다. (폰트는 생각보다 용량이 크므로 하나의 페이지에서 폰트를 너무 남발하지 않는게 중요하다. 사용할 폰트만 명시해서 사용하도록 하자!) 여기서 400과 700 두께를 select하고 link 태그를 복사해서 index 파일에 붙여넣기 해준다. 이 때 main.css 삽입 링크보다 위에 넣어주도록 하자. 여기서 끝!이 아니라! 링크 태그 아래쪽에 있던 font-family 를 복사해서 css파일의 body 태그 안에 넣어줘야 완성이다. 그리고 폰트의 경우 저작권과 관련 있으므로 오픈 라이센스를 잘 확인하도록 하자..
몇 가지 자주 사용하는 아이콘의 경우 구글에서 제공하는 Material Icons를 이용해 손쉽게 코드를 통해 삽입해줄 수 있다. 구글에서 google material icons 검색 후 material.io 링크의 사이트에 접속한다. web -> Getting started 접속 후 CDN 아래에 link 태그 하나만 보이는 부분을 mian.css 링크 위에 붙여넣기 해준다. (main.css 파일이 가장 아래쪽에 오도록 해주자)
그런다음 icons 메뉴로 돌아가서 arrow 라고 검색해보면 화살표와 관련된 아이콘들이 검색된다. 필요한 아이콘을 선택 후 아래쪽에 뜨는 태그를 body 태그 안에 넣어주면 아이콘이 출력되는 것을 확인할 수 있다.
body 태그에 입력했던 색상이 적용되어있다. 기본 크기는 24px로 되어있으며, 크기를 키울 때는 가로 세로 사이즈가 아니라 font-size 속성을 이용해 변경해주어야 한다. 즉 아이콘도 하나의 글씨처럼 취급된다!!
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| Java & SpringBoot로 시작하는 웹프로그래밍 : 자바 인강 - Ch.3 (0) | 2021.11.30 |
|---|---|
| 패스트캠퍼스 챌린지 29일차 - Part1. Ch10 (0) | 2021.11.29 |
| 패스트캠퍼스 챌린지 27일차 - Part1. Ch9 (0) | 2021.11.27 |
| 패스트캠퍼스 챌린지 26일차 - Part1. Ch9 (0) | 2021.11.26 |
| 패스트캠퍼스 챌린지 25일차 - Part1. Ch9 (0) | 2021.11.25 |