https://fonts.google.com/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
1) 심볼 넣기, 글자 커스텀하기
*link는 항상 html 안에
- inline이기 때문에 여백이 생김
- 해결하려면 flex-item으로 만들어라
- 글자와 아이콘의 line-height가 달라 정렬이 다름
- align-items 활용하여 해결해라
- 그래도 해결안되는 묘하게 안맞는 위치는 margin 값으로 해결
ㄴ id선택자로 따로 빼는 이유???
항상 그룹 레이어의 사이즈를 확인해라
-넘친
-해결
- 글씨 커스텀 후 글씨와 심볼의 여백 확인까지
ㄴ 항상 꼼꼼히 보기!
2) 메뉴 아이콘 박스 이미지
- 항상 이미지 박스를 먼저 생성한 후 안에 img 태그를 사용해서 넣기
- 항상 이미지 영역에 background-color를 칠해 영역 확인
- 항상 모든 이미지 영역 박스에 색을 칠해 확인하는 과정을 거치기 때문에 css 상단 body 태그 밑에 같은 값을 적용시킨다.
- 후에 삭제하든지 주석처리하여 유지보수 편하게 하면 된다.
- 이와 같이 동일한 값을 적용하기 위해 클래스 이름을 검색할 경우 내가 필요하다고 생각하는 부분을 드래그하여 위 아래로 어떤 태그가 적용되었는지 확인한다. 꼭 확인을 꼼꼼히 마친 후 따로 빼도 상관없는 부분만을 가져와 사용하도록 주의한다.
3) la-box와 메뉴 아이콘 박스 이미지 여백값 주기
▶ G마켓
1) 라이브러리 등록
- fw, fs 우선 등록
- color 등록하기
ㄴ 모두 선택 후 우측에서 color 확인
ㄴ copy 버튼을 눌러 한 번에 복사 후 css에 붙혀넣어 등록한다.
2) 폰트 가져오기
- 눈누만 css에 등록
- 구글폰트는 html에 등록
ㄴ 링크니까 html> head에 등록
3) 이미지 가져오기