[수업노트](20.11.05~06)D+20,21 상품리스트 페이지 만들기/box-sizing/음수마진

1. 라이브러리 : 커스텀이 아닌 많은 요소들이 공유하는 속성값들을 노멀라이즈 다음으로 코드업해주는 것

 

- .con : 페이지 내 컨텐츠들의 너비가 무한정으로 늘어나는것을 방지해주고 일정의 값을 지정해주는것

/*라이브러리*/
.con {
margin:0 10px;
width:auto;
}
/*커스텀*/
.con {
max-width:1000px;
}

- .img-box > img : 이미지를 삽입할때 img(display기본값-inline)에 여백이 생기는 것을 방지하고 부모 요소 너비 만큼 값을 지정하여 여백을 없애주는것

.img-box > img {
display:block;
width:100%;
}

- .cell : 모든 셀요소의 정렬을 한줄정렬(float:left) 하고, 박스 사이즈 크기를 고정시켜주는 것

.cell {
float:left;
box-sizing:border-box;
}

- .row::after : (block요소는 float요소를 무시한다) 자식을 인지하지 못하고 높이가 0으로 되는것을 방지해주는것

.row::after {
content:"";
display:block;
clear:both;
}

---

2. 폰트 지정

- 반드시 CSS 첫줄에 코드업 한다

- noto sans kr 주로 쓰이는 한글용 폰트

@import url (~~~)

html {
font-family:~~~;
}

---

3. width:calc(100%/X) : 한정된 너비에서 일정한 너비값으로 나눌때 사용

---

4. box-sizing:border-box : 박스사이즈 크기를 고정시켜주는 것

- padding값으로 한정된 공간에 여백을주면 공간보다 부피가 커진다. 그럴때 box-sizing:border-box를 지정해주면  지정너비를 유지하며 박스내로 여백이 생겨 결과적으로 여백도 정렬도 깔끔하게 맞춰진다.

---

5. 음수마진 : 부모의 너비값이 지정된 경우, 음수값으로 자식을 부분 유령화 시켜 부모의 범위보다 크게 만들어줄수있다(겹쳐진다)

- 겹친부위를 overflow:hidden;으로 숨길 수 있다.

- 음수마진 버그로 인한 스크롤 바는 overflow-x:hidden;으로 숨길 수 있다.

(대부분의 반응형 웹은 가로 스크롤바가 없기때문에 html,body: overflow-x:hidden;으로 마크업 한다)