[scss] 나만의 구조 규칙 만들기

1. reset.css 가져와서 맨위에 import하기

@import url(./reset.css);

2. html, body 기본 세팅

*{
	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: 폰트 사이즈;
    }
}

프로젝트마다 다르지만 기본적인 세팅을 해준다.

3. inner 세팅

.inner{
position: relative;
width: calc(100% - 280px);
max-width: 1640px;
height: 100%;
padding: 100px 0;
margin: 0 auto;
}

기본적인 레이아웃 틀을 잡기 위해 항상 inner를 쓴다.

padding으로 위 아래 여백을 지정해주고, width 값에 calc(100% - 좌우 여백 간격)을 지정해줘 창을 줄여도 컨텐츠가 엇나가지 않게 해준다.

4. margin-top으로 통일

컨텐츠간의 위아래 간격은 margin-top으로 통일시켜준다.
(마진겹침현상 방지, 편한 수정을 위해)

5. 카드 레이아웃엔 flex-wrap

카드 레이아웃의 경우, 감싸고 있는 card-wrapper의 높이는 auto 혹은 100%로 주고 카드 height를 지정해줘서 자동으로 높이가 측정되게 한다.

flex-wrap: wrap; 

을 이용하여 창을 줄이면 자연스레 카드가 아래로 탈락되게 한다.

카드의 margin-top여백과 card-wrapper의 margin-top이 겹칠경우, 카드에는

margin-top:calc(카드래퍼의 마진탑 - 카드 마진탑);

값을 주면 겹치지않는다.