KWEB 스터디 과제 피드백 - CSS styling 팁들

! 팁0번 - 시트 작성 순서

* css property들을 작성할 때는,

* display, overflow, float, position, z-index등을 작성 후,

* 박스 모델을 작성하고,(width, height, padding, margin, border 순)

* 그 뒤에 폰트나 색깔 등 그 외 속성들을 작성해주면

* 일관성 있고 알아보기 쉽게 코드를 짤 수 있겠습니다.(정해진건아님)

 

! 팁1번 - img 중앙정렬

* div 안에 있는 img를 중앙정렬하는 방법은 크게 두가지가 있습니다.

* 첫째, div 태그에 text-align:center;을 적용합니다.

* 둘째, img태그의 display:block;을 설정하고 margin: 0 auto;를 줍니다.

* 헤더에서는 KWEB REGISTER FORM 텍스트는 왼쪽정렬이므로 두번째 방법을 사용합니다.

* 가장 아래 서브밋 버튼에서는 첫번째 방법을 사용하겠습니다.

 

! 팁2번 - reset.css

* 각각의 브라우저들은 엘리먼트(div, h1등..)들에 대한 기본 css를 가지고 있습니다.

* 가끔은 이런 속성들이 우리의 css 코드랑 헷갈리는 경우가 있습니다.

* 그래서 주로 reset.css를 구글에 검색해보면 이 기본 css를 지워주는 css sheet들이 있습니다.

* 본 답안에서 *{}와 h1,h2,...h6 {} 은 reset css입니다.

 

! 팁3번 - inline-block의 숨겨진 여백 4px 없애기

* https://css-tricks.com/fighting-the-space-between-inline-block-elements/

* display:inline-block 속성의 경우

* inline처럼 엘리먼트가 층층히 쌓이지 않고 옆에 나열되지만,

* block처럼 엘리먼트의 padding, margin, width, height을 설정할 수 있었죠?

* 하지만 inline-block의 경우 숨겨진 여백이 있습니다. 이것을 없애는 방법을 위 링크에 설명합니다.

 

! 팁4번 - 패딩을 고려해서 항상 낭낭하게!

* 패딩을 조금씩 주는 습관을 들이시면, 예기치 못한 상황에서의 css 어긋남을 방지할 수 있습니다.