미미 공부/취미방

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/5 본문

Programming

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3/5

mionager 2022. 7. 8. 20:53

3주차.Chapter 03

 

Starbucks 예제 시작

https://flamboyant-lumiere-482a1e.netlify.app/

 

스타벅스 커피 코리아

스타벅스 커피 코리아

starbucks.co.kr

 

favicon.ico 파일

(favourite icon)

루트 폴더에 'favicon.ico'에 넣으면 자동으로 브라우저 탭에 아이콘이 등록돼서 보인다.

favicon.ico는 화질이 좋지 않아서 따로 head에 png파일로 link를 걸어줄 수 있다.

<link rel="icon" href="./favicon.png">

 

 

오픈 그래프

(The Open Graph protocol)

웹페이지가 소셜 미디어로 공유될 때 보이는 정보

(사이트 이름, 설명, 로고, 등)

기본적인 오픈 그래프 속성

  • og:type : 페이지의 유형(E.g. website, video.movie)
  • og:site_name : 사이트의  이름
  • og:title : 페이지의 이름/제목
  • og:description : 페이지에 대한 간단한 설명(길면 스팸으로 처리될 수 있음)
  • og:image : 페이지의 대표 이미지
  • og:url : 페이지 주소 URL

 

트위터 카드

(Twitter Cards)

트위터에서 만든 오픈 그래프와 유사한 방식

특정 소셜 미디어는 트위터 카드의 정보를 먼저 가져가서 사용한다.

 

 

폰트/서체

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

사이트에 들어가서 사용하고 싶은 폰트 클릭!하면 위의 페이지로 이동하는데

사용하고 싶은 굵기를 'Select this style' 버튼을 눌러서 모두 추가하고,

우측 팝업(팝업이 없으면 우측 상단 창문 모양? 아이콘 클릭)에서

<link> 방식으로 사용할 건지, @import 방식으로 사용할 건지에 따라

아래 텍스트를 복사  > VS Code에 붙여 넣기

*** 폰트 링크는 내 css 이전에 입력

*** 폰트 사용 전, 저작권 꼭! 확인

 

 

아이콘

아이콘도 구글 폰트에서 쉽게 가져와서 쓸 수 있다.

 

아이콘 사용법 링크

https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web

 

Material Icons Guide  |  Google Fonts  |  Google Developers

Material Icons Guide An overview of material icons—where to get them and how to integrate them with your projects. What are material icons? Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our de

developers.google.com

사용할 수 있는 아이콘 링크

https://fonts.google.com/icons?icon.style=Outlined&icon.set=Material+Icons

 

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

 

폰트를 가져와서 쓰는 것처럼 링크를 복사해서 여기서도 내 css 위에 붙여 넣는다.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

태그에 'material-icons'라는 클래스를 주고

태그 안에 사용할 아이콘 이름을 구글 폰트 홈페이지에서 찾아서 넣는다.

아이콘은 폰트처럼 css 스타일을 변경할 수 있다.

 

 

기본적인 <head>내용

  • custom css는 가장 아래에 위치한다.
  • 사용할 폰드 및 아이콘 link 추가
  • favicon.png 추가 (jpg는 배경색 투명이 지원되지 않음)
  • 각 브라우저의 기본 css 스타일 초기화하는 reset-css
  • meta 태그로 넣어줄 수 있는 정보들은 더 많다.
저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 5/5  (0) 2022.07.11
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 3.5 ~ 4/5  (0) 2022.07.09
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/5  (0) 2022.07.05
[패스트캠퍼스:3주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 1/5  (0) 2022.07.04
[패스트캠퍼스:2주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/4  (0) 2022.07.03
'Programming' Related Articles more
Comments