[scss] 내가 보려고 저장한 웹사이트 제작 기본셋팅

쓰지마세요 ㅎㅎ 구식 코드이니 참고만 해주시기 바랍니다.

 

 

default.scss

//default.scss

//----------------------------------------------//

//             목차

//----------------------------------------------//

// 1. 색상 선택

// 2. 헬퍼

// 3. 공통

// 4. 페이지별 커스텀

// 5. 반응형

//----------------------------------------------//

//             1. 색상 선택

//----------------------------------------------//

 

$text-primary : red;

$text-secondary : red;

$text-danger : red;

 

//----------------------------------------------//

//             2. 헬퍼

//----------------------------------------------//

//----------------------------------------------//

//             3. 공통

//----------------------------------------------//

 

//폰트 가져오기

@import url('font.css');

 

//폰트 적용하기

body { font-family: -apple-system, NotoSansKR, Jost, Lato, sans-serif; font-weight: 400; font-size: 16px; }

.font-face-notosanskr { font-family: 'NotoSansKR' !important; }

.font-face-jost { font-family: 'Jost' !important; }

.font-face-lato { font-family: 'Lato' !important; }

 

//----------------------------------------------//

//             3. 페이지별 커스텀

//----------------------------------------------//

 

/* (1) 메인페이지 */

.page-login {

 

}

 

//----------------------------------------------//

//             4. 반응형

//----------------------------------------------//

@media only screen and (max-width:1199px) {

 

}

 

@media only screen and (max-width:991px) {

 

}

 

@media only screen and (max-width:767px) {

 

}

 

@media only screen and (max-width:499px) {

 

}

 

 

 

 

 

 

font.css

/*노토산스 (1/3, 총 6개)*/

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Thin.otf'); font-weight: 100; font-style: normal; }

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Light.otf'); font-weight: 300; font-style: normal; }

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Regular.otf'); font-weight: 400; font-style: normal; }

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Medium.otf'); font-weight: 500; font-style: normal; }

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Bold.otf'); font-weight: 700; font-style: normal; }

@font-face { font-family: 'NotoSansKR'; src: url('../fonts/notosanskr/NotoSansKR-Black.otf'); font-weight: 900; font-style: normal; }

 

/*라토(2/3, 총 10개)*/

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Thin.ttf'); font-weight: 100; font-style: normal; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-ThinItalic.ttf'); font-weight: 100; font-style: italic; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Light.ttf'); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-LightItalic.ttf'); font-weight: 300; font-style: italic; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Regular.ttf'); font-weight: 400; font-style: normal; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Italic.ttf'); font-weight: 400; font-style: italic; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Bold.ttf'); font-weight: 700; font-style: normal; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-BoldItalic.ttf'); font-weight: 700; font-style: italic; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-Black.ttf'); font-weight: 900; font-style: normal; }

@font-face { font-family: 'Lato'; src: url('../fonts/lato/Lato-BlackItalic.ttf'); font-weight: 900; font-style: italic; }

 

/*조스트(3/3, 총 18개)*/

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Thin.ttf'); font-weight: 100; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-ThinItalic.ttf'); font-weight: 100; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-ExtraLight.ttf'); font-weight: 200; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-ExtraLightItalic.ttf'); font-weight: 200; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Light.ttf'); font-weight: 300; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-LightItalic.ttf'); font-weight: 300; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Regular.ttf'); font-weight: 400; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Italic.ttf'); font-weight: 400; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Medium.ttf'); font-weight: 500; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-MediumItalic.ttf'); font-weight: 500; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-SemiBold.ttf'); font-weight: 600; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-SemiBoldItalic.ttf'); font-weight: 600; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Bold.ttf'); font-weight: 700; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-BoldItalic.ttf'); font-weight: 700; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-ExtraBold.ttf'); font-weight: 800; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-ExtraBoldItalic.ttf'); font-weight: 800; font-style: italic; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Black.ttf'); font-weight: 900; font-style: normal; }

@font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-BlackItalic.ttf'); font-weight: 900; font-style: italic; }