선언형 코드와 명령형 코드, SVG 파일을 HTML에서 다루기

‘명령형(imperative) 코드’와 ‘선언형 (declarative) 코드’

명령형 코드

• 결과를 얻기 위해 단게를 작성해야 하는 코드

function abc(a, b) {
    return a + b;
}

선언형 코드

• CSS같은 것
• 결과를 얻기 위해 단계가 필요하지 않고 바로 결과를 입력하는 것
• background-color: red
• text.replaceAll(" ", "a");

SVG을 다루는 방법

이미지 태그

• img태그의 src로 불러오기

백그라운드 이미지 삽입

• 백그라운드 이미지로 삽입

SVG 태그 사용

• <svg>태그를 사용해서 넣을 수 있음
• 배경 색을 바꾸기 위해서 fill="currentColor" 이 부분을 currentColor를 사용하면 div의 색깔을 상속 받을 수 있음.
• (폰트처럼 사용할 수 있음)
• html에서 불러올 때는 icon-font를 만들어서 사용할 수 있음.

아이콘 폰트 만들기

사이트 접속부터 다운로드까지

• icoMoon이라는 사이트에서 간단하게 만들 수 있음.
• 여기에서 import Icon 한 다음에 아이콘 선택
• 하단에 Generate Font를 누르면
• 아이콘 이름 설정 화면이 나옴
• 다운로드 누르기 전에 옆에 세팅 버튼을 눌러서 이름, Class를 설정할 수 있음.
• 설정에서 CSS Selector는 Use i를 선택
• 그리고 다운로드

HTML에 적용

• 다운받은 파일 압축을 풀고 font파일 이동시킨 후
• style.css 파일을 참고하여 스타일 적용