[ HTML/CSS ] CSS 쓸만한 기본 공식

1. 이미지 가운데 정렬 공식

{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

 

2. z-index
    공중에 떠있는 애들 중 누가 앞에 나올지 결정
    z-index가 높을수록 앞에 옴

 

3. width는 padding의 영향을 안받음.
    width는 content 영역만 다루기 때문.
    padding은 content 외곽 영역임.

    padding, border 포함한 width를 지정하고 싶으면

box-sizing: border-box;

    속성을 추가해주어야 함.

 

    기본값은

box-sizing: content-box;

 

4. 좀 편하게 CSS 작업하려면
    처음부터

div {
	box-sizing: border-box;
}

body {
	margin: 0px;
}

// 추가적으로 웹 브라우저간 호환성 이슈 해결 코드
// 구글에 normalize.css 검색해보면 됨
// normalize.css를 CSS 파일에 넣어도 되고 HTML의 <link> 태그로 넣어도 되고

    라고 미리 적어놓고 시작하면 편함.

20. input 태그의 name 속성은 서버에 데이터 전달시 이름을 지정해줌