2024. 08. 08 UIUX 웹 16일차

- 구글 폰트는 html에 적용해야 함

 

- 한글폰트는 영문폰트까지 지원 해주는 경우가 많다. 반대로 영문폰트는 한글폰트를 지원하지 않는다.

 ㄴ font-family: 영문, 한글, sans-serif;

 

1) 스타일 가이드 파악

ㄴ 라이브러지 

 

[피그마 이미지 저장]

ㄴctrl 누르고 이미지 선택

ㄴexport 추가 버튼 눌러서 png로 export 만들어 놓은 파일에 저장

 

 

svg 확장자

---

1. top-bar

 

---

2. 

 

ㄴ 똑같이 안 맞춰 주면 밀리는 현상 발생 

ㄴ

ㄴ 사용자 메뉴, 로고 박스 둘다 너비 같게 지정

---

3. img 태그

alt-->이미지 경로가 실패했을 때 알려주는 용도임(꼭 사용 !!!!)

ㄴ<img src=""alt"">

ㄴimg 태그 중에 간혹가다가 알 수 없는 이유로 여백이 나오지 않는다. 

 - 안나오면 안쓰면 됨 / 대부분 나옴

ㄴ미리보기 창에서 F12클릭(개발자 모드)

ㄴ 중앙 정렬(display: flex; align-items: center;)

---

---

 

[언스플래닛]

- 상업적으로 이용 가능한 무료 이미지 사이트

ㄴ 포토폴리오에서도 사용 가능

ㄴ 원본 이미지를 확인할 수 없도록 합성된 상태만 상업적으로 사용 가능하다.

- 브랜드 상표나 사람 얼굴 인식이 가능한 이미지는 저작원이 따로 되어 있기 때문에 사용하지 않는 것이 좋다.

ㄴex. 핀터레스트, 비핸스 -> 나중에 저작권에 걸림 

 

https://unsplash.com/ko

아름다운 무료 이미지 및 사진 | Unsplash

 

[img_이미지 태그]

- src=""값으로는 이미지 경로는 사용할 수 있다.

- img태그는 닫는 태그가 없다. 무엇인가를 둘 수 없다.

ㄴ이미지 경로 : 파일, 폴더 경로

ㄴ 추가 경로 : url 주소

 

---