@import url(./reset.css);
*{
box-sizing: border-box;
}
html{
font-size: 62.5%;
word-wrap: break-word;
word-break: keep-all;
text-align: center;
}
body{
position: relative;
font:{
family: 사용 폰트;
size: 폰트 사이즈;
}
}
프로젝트마다 다르지만 기본적인 세팅을 해준다.
.inner{
position: relative;
width: calc(100% - 280px);
max-width: 1640px;
height: 100%;
padding: 100px 0;
margin: 0 auto;
}
기본적인 레이아웃 틀을 잡기 위해 항상 inner를 쓴다.
컨텐츠간의 위아래 간격은 margin-top으로 통일시켜준다.
(마진겹침현상 방지, 편한 수정을 위해)
카드 레이아웃의 경우, 감싸고 있는 card-wrapper의 높이는 auto 혹은 100%로 주고 카드 height를 지정해줘서 자동으로 높이가 측정되게 한다.
flex-wrap: wrap;
을 이용하여 창을 줄이면 자연스레 카드가 아래로 탈락되게 한다.
카드의 margin-top여백과 card-wrapper의 margin-top이 겹칠경우, 카드에는
margin-top:calc(카드래퍼의 마진탑 - 카드 마진탑);
값을 주면 겹치지않는다.