[2-4] 웹 명함 구축하기 (2) - 웹폰트, 변수 지정, sass 기능

웹 폰트 불러오기
- 로컬 폴더

woff, woff2로 돼있는 파일 확장자 2개를
폴더로 옮겨주기
- font 라는 폴더 따로 생성해서 관리해주면 수월

// 2-4) 폰트 연결해주기 - @font-face 사용
@font-face {
  // 불러올 폰트파일의 이름 지정
  font-family: "KoddiUD OnGothic";
  // 폰트 파일의 위치 지정. 폰트 파일에 넣었던 폰트들 넣어주면 된다.
  // 폰트 확장자가 여러개 있는 경우, 
  // 브라우저마다 호환되는 폰트파일이 다를 수 있음. 
  // 반점(,)을 쓰고 아래에 다른 포맷도 불러와줌.
  src: url("/font/KoddiUDOnGothic-Regular.woff2") format(woff2),
    url("/font/KoddiUDOnGothic-Regular.woff") format(woff);
}

pointer-events: none;

pointer-events: none;
// <<아예 포인터 이벤트가 작동하지 않도록 막아줌.>>

sass 기능 - @extend

다른 셀렉터에 있는 스타일 요소들을 상속해서 가져오는 속성

.ruler {
  // 2-4) sass 기능 extend 사용
  // = 다른 셀렉터에 있는 스타일 요소들을 상속해서 가져오는 속성
  @extend .background;
  }
    // .background 에 있는 
    // position:fixed, pointer-events, top, left 속성을 
    // 그대로 상속해온다는 의미.

css 파일에서 확인 가능

.background, .ruler {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
}

코드 안에 svg 복사해서 html 파일 안에 넣어주기

xml 태그나 id 떼서 사용해주면 좋음.

<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105.8 218"><path d="M49.09,2.42H0V214.52H33.33v-79.69h15.76c33.33,0,49.69-18.48,49.69-52.42v-27.57C98.78,20.91,82.42,2.42,49.09,2.42Zm0,30.3c10.61,0,16.36,4.85,16.36,20v31.82c0,15.15-5.76,20-16.36,20h-15.76V32.72h15.76Z"/></svg>

이거에서 xml 파일 , id 떼고

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 105.8 218"
preserveAspectRatio="none"
>
<path
d="M49.09,2.42H0V214.52H33.33v-79.69h15.76c33.33,0,49.69-18.48,49.69-52.42v-27.57C98.78,20.91,82.42,2.42,49.09,2.42Zm0,30.3c10.61,0,16.36,4.85,16.36,20v31.82c0,15.15-5.76,20-16.36,20h-15.76V32.72h15.76Z"
/>
</svg>

이렇게 불러와주면 된다.

Ctrl + shift + L

해당되는 줄 뿐만 아니라
동일한 내용 작성된 거 모두 선택 가능