웹2
4/26 - 웹2 (6강)
rkdmsrla
2024. 4. 29. 18:33
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>
[심볼 넣는 법]
1.구글 material에 들어간 후 크기 200으로 설정
2. 원하는 아이콘 선택 후 옆의 맨 첫번째 코드 복사
3. 복사한 코드 html의 head태그 안에 붙여넣기
4. 다시 웹페이지로 돌아와 밑으로 스크롤 후 span 코드 복사
5. 아이콘이 들어가야하는 코드의 위치에 붙여넣기
