4/26 - 웹2 (6강)

4/26 -6강

삼성디자인 탑바2

[코딩 과정]

 코드에 정리되어 있음

 

[아이콘/로고 파일 관리]

1. svg파일로 아이콘 연결. svg파일로 이용하는 이유
  -  jpg는 깨짐 svg는 벡터(수학적 함수)이기 때문에 깨지지 않음
2. icon.svg 파일들을 폴더로 묶어준 후 html에 연결해준다.(파일관리에 용이)
3. 위쪽의 samsung design로고도 경로를 바꿔줘야 한다. (경로예시: svg/logo.svg = 폴더명/파일이름.svg)
4. alt부분에도 이름을 꼭 써줘야 한다. alt="돋보기 아이콘"

<div class="icon-box">

          <div class="icon">

            <img src="svg/icon1.svg" alt="돋보기 아이콘"></div>

          <div class="icon">

            <img src="svg/icon2.svg" alt="지구본 아이콘"></div>

        </div>

 

 

[심볼 넣는 법]

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:menu:FILL@0;wght@200;GRAD@0;opsz@24

1.구글 material에 들어간 후 크기 200으로 설정
2. 원하는 아이콘 선택 후 옆의 맨 첫번째 코드 복사
3. 복사한 코드 html의 head태그 안에 붙여넣기
4. 다시 웹페이지로 돌아와 밑으로 스크롤 후 span 코드 복사
5. 아이콘이 들어가야하는 코드의 위치에 붙여넣기

첫번째 코드

span 코드