HTML
-퍼블리싱에서 이미지 사용법
보통 이미지는 프로젝트 폴더 안에 'img' 또는 'image'라는 이름의 폴더를 만들어 모든 이미지(동영상)들을 보관하여 관리한다. 또한 이미지의 이름은 html 파일 명명규칙과 동일하게 영문 소문자로 시작하고, 간결하고 직관적인 이름으로 지어주는 것이 좋다.
- 영문 소문자로 시작 / 공백,한글x
- 꼭 프로젝트 폴더(=최상위폴더)안에 이미지폴더
- 해상도는 72px / 스마트폰에서 바로 저장한 이미지x
<img src='이미지 경로 또는 url' alt='이미지설명'/>
- img 태그에 쓸 수 있는 속성
-
src : 소스의 약자로 이미지의 경로를 의미한다. 절대경로나 상대경로로 표현하거나 웹사이트의 url을 넣어 이미지를 출력할 수 있다. 실무에선 거의 상대경로로만 쓰인다.
-
alt : 이미지에 대한 설명을 간략하게 적는 속성이다. 설명은 직관적이고 간결하게 적으며, 시각장애인에게 화면낭독기를 통해 이미지의 설명역할을 한다. 또한 이미지 경로가 잘못되었을때도 alt에 적은 내용이 출력된다.
**절대경로와 상대경로**
-절대경로 하향경로방식
-
최상위폴더 : /(=root)
-
폴더이름 / : ~폴더안에 <- 두번째 /부터는 이 뜻
ex. <img src='/img/이미지이름.jpg' alt='이미지설명'/>-상대경로 상향경로방식
-
/ : 최상위 폴더(=root)
-
./ : 현재 파일이 있는 폴더
-
../ : 한 폴더 위로
ex. <img src="./img/fall.jpg" alt="가을" />
**- a 태그** : 링크를 연결하는 태그
<a href="링크 경로" target="페이지 연결 방식" title="링크 설명">글자나 이미지- href : 링크의 경로
- target : 페이지가 열리는 방식 / 생략가능
- self속성 : 현재 탭에서 페이지 연결 (기본값)
- blank속성 : 새 탭으로 열기
- title : target + blank 로 지정했을 경우 title 속성도 함께 넣어준다.
title은 링크위에 마우스를 올렸을 때 뜨는 말풍선으로 링크에 대한 설명을 넣을 때 사용한다.
피그마
-컴포넌트
피그마에서 자주쓰는 아이콘이나 양식등을 컴포넌트로 저장해두면 필요할 때마다 assets창에서 꺼내서 사용할 수 있다.
컴포넌트를 처음 등록한건 메인 컴포넌트로 되고, 복제한 컴포넌트들은 인스턴스 컴포넌트가 된다.
메인 컴포넌트의 옵션을 일부 변경해주면, 따로 변경하지않은 모든 인스턴스 컴포넌트들의 옵션들도 같이 변경된다.
메인 컴포넌트들은 페이지를 따로 만들어서 저장해두는것이 관리에 용이하다.
