<html lang="ko">
...
</html>
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
참고 - & gt; 의 경우 ">" 를 가리킨다.
https://dev.w3.org/html5/html-author/charref
<head>
...
<title>전기히터 > 캠핑/가정용 400W 미니멀 전기히터 VO-HT015 (안전장치기능탑재) | 내일의 집 </title>
</head>
구글 폰트에서 원하는 폰트, weight 가져옴. //아는 사항이라 생략
raster image vs vector image
-raster는 픽셀기반 이미지로 계단현상때문에 깨질수 있다, vector는 선분과 면으로 이뤄져있어 깨짐현상no
raster이미지 확장자로는 jpg, png가 있다.
구글에서 만든 새로운 확장자로 png보다 용량을 작고 jpg보다 이미지 손상이 적은 파일 포맷이다.
하지만 아직 널리 사용되지 않았고 구형 브라우저에서 지원하고 있지 않음.
vector img의 특성을 살리기 위해서는 SVG로 export해야만 한다.
scalable vector graphics 의 약자
// vector graphics : 수학적인 방정식을 통해서 컴퓨터가 그래픽을 연산으로 표현해주는 그래픽 방식.
웬만한 아이콘들은 SVG로 export해야하지만
만약 ie 6, 7, 8 를 대응해야한다면 SVG는 사용 불가능하다. png를 사용해야한다.
로고와 같은 중요한 이미지의 경우 SVG를 사용해야한다.
이런 같은 동류의 이미지들은 드래그로 다같이 선택 후 Ctrl + R
이름 지정 후 번호를 순서대로 지정 가능함.
<img src="#" alt="아이콘" />
<div style="color: red;">
<svg width="130" height="38" viewBox="0 0 130 38" fill="currentColor" aria-label="아이콘">
...
</svg>
</div>
더나아가 아래와 같이 hover 활용가능
<div>
<svg width="130" height="38" viewBox="0 0 130 38" fill="currentColor" aria-label="아이콘">
...
</svg>
</div>
<style>
.div {
color: blue;
transition: color 300ms ease-in;
}
.div:hover {
color: aqua;
}
</style>
하지만 SVG 코드를 html에 넣기에는 너무 길기 때문에 비추한다.
icon font 를 추천한다.
- icon font 생성 사이트
https://icomoon.io/app/#/select
변환하고자 하는 SVG파일을 import icons로 업로드 후 generate font 누르기.
html에서 사용 고려하여 대문자에서 소문자로 고쳐주기.
//BookmarkFilled도 bookmark-filled로 변경
다운로드 버튼 옆 설정 버튼 눌러 아래와 같이 설정 후 다운로드.
다운로드 받은 파일의 fonts들을 프로젝트의 asset > fonts 파일로 옮겨 주고
다운 받은 파일에 있는 style.css의 내용을 복사 > 작업 중인 프로젝트에서 "_fonts.scss" 파일을 생성 후 붙여 넣기 해준다.
scss-lint 때문에 생기는 경고줄은 아래 사항을 파일 첫줄에 적용.
//scss-lint:disable all
font-face에서 font 경로 지정시 주의점!
scss파일을 css로 변형하기때문에
문서위치의 기준점은 css파일이 되어야한다 !
→ css 파일에 맞게 경로 변경해주기 !!
_fonts.scss가 style.css로 변경되려면 main.scss가 _fonts.scss를 인식해야한다.
왜냐면 package.json을 보면 main.scss를 style.css로 변경한다 했기 때문에 main.scss가 _fonts.scss를 인식해야함.
따라서 main.scss의 맨 윗줄에 _font.scss를 import 시켜줘야 한다.
@import './base/fonts';
<i class="ic-menu" aria-lable="메뉴"></i>
모든 요소들을 전부 다 초기화시킨다.
브라우저 별로 적용된 기본 스타일이 다르기 때문에 생기는 이슈들이 있다.
nomalize.css는 마치 하나의 브라우저인 것처럼 모든 브라우저가 동일한 기본 스타일을 적용할수 있게 해준다.
nomalize.scss파일을 만들어 nomalize.css 코드를 넣어준다.
그외의 reset 스타일을 지정해주는 방식을 추천한다.
//_reset.scss
<style>
* {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
box-sizing: border-box;
}
html {
font-family: 'Noto Sans KR', sans-serif;
}
body {
font-family: 'Noto Sans KR', sans-serif;
}
h1 {
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
background-color: transparent;
border: 0;
&:focus {
outline: none;
box-shadow: none;
}
}
a,
button {
cursor: pointer;
}
ul,
ol {
padding-left: 0;
list-style: none;
}
</style>
⭐ SCSS Tip
**//Before**
<style>
button,
input,
select,
textarea {
background-color: transparent;
border: 0;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
box-shadow: none;
}
</style>
위와같이 반복되는 선택자의 경우 &을 사용해 중복되는 선언을 줄여줄수 있다.
**//After**
<style>
button,
input,
select,
textarea {
background-color: transparent;
border: 0;
&:focus {
outline: none;
box-shadow: none;
}
}
</style>
개발자 도구를 통해 보면 모든 style값의 css 위치를 알려주는데 사실상 무슨 SCSS파일의 무슨 위치인지가 더 중요하다.
package.json에 --source-map을 추가해주어 알아내줄수 있다.
추가시 boolean값(true)을 적어주어야 한다.
위에 처럼 해당 SCSS파일 경로가 나오게 된다.