index.html 생성

style.css 생성

assets 생성

html의 title 변경

Web font 가져오기, fontWeight이 몇몇이 적용 되어있는지

BootStrap Grid System만 적용 grid.min.css

grid.min.css

BootStrap의 커스텀 사이즈 변경 (ex) maximum container 사이즈를 960px로 변경

@media and screen (min-width : 1200px){
.container {
		max-width : 960px;  !important
	}
}

Reset CSS

*{
    box-sizing: border-box;
    margin : 0;
    padding : 0;
}

body {
    font-family: 'DM Sans', sans-serif;
}

/* Reset CSS */

a {
    color : inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font-family: 'DM Sans', sans-serif;
    font-size : 16px;
}

button:focus,
button:active,
input:focus,
input:active,
textarea:focus,
textarea:active{
    box-shadow : none;
    outline : none;
}

ul,
ol,
li{
    list-style: none;
    padding-left : 0;
    margin-left : 0;
}

p{
		/* 본문 폰트 미리 적용해 놓기 */
    font-size : 16px;
    line-height: 1.5;
    color : #2b292d;
    letter-spacing: -0.01em;
}

모바일에서는 16px

데스크탑에서는 22px

@media and screen (min-width : 768px){
	/* Reset CSS */
	p {
		font-size : 22px;
		line-height : 1.363636363636;
	}
}

Reset CSS를 직접 하면서

디자인 시안을 보면서 어떤 작업을 할건지 미리 생각해보자.