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

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

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

명령형 코드

  • 결과를 얻기 위해 단게를 작성해야 하는 코드
1
2
3
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 SelectorUse i를 선택
  • 그리고 다운로드

HTML에 적용

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