[CSS] CSS 지엽정리

1. 실무에서 relative 속성은 특정 요소의 위치를 배치하는 것보다 absolute 속성의 기준점을 설정하는 용도로 많이 사용한다.

 

2. transform의 3D속성을 이용할 때 부모 태그의 perspective 속성은 원근감을 지정하는 것이다. z축으로 얼마나 떨어져서 볼 것인가를 결정하는 속성이라고 이해하면 된다. (그래서 자식 태그의 z-index를 100px로 하고 부모 태그의 perspective를 90px로 하면 자식 태그가 보이지 않게 된다. 왜냐하면 자식태그가 존재하는 곳보다 더 안쪽으로 보는 것이기 때문에)

 

3. box-sizing 속성을 이용하면 기존 박스의 크기를 유지하면서 안쪽 여백을 지정할 수 있다. padding 속성을 추가하면 기존의 박스 크기가 지정한 너빗값과 높잇값보다 커졌었다. 이때 box-sizing: border-box 속성을 추가하면 아주 간단하게 기존 박스의 크기를 유지하면서 여백을 지정할 수 있다.

 

4. 자식 콘텐츠가 브라우저 영역에서 벗어날 때 스크롤 바가 생기지 않도록 하려면 부모 속성에 overflow: hidden을 설정하면 된다.

 

5. 부모 태그가 body 일때는 body에 position: relative 안해줘도 바로 absolute 쓸 수 있다.

 

6. 부모 태그가 absolute 일때도 자식 태그에서 absolute를 쓸 수 있다.

 

7. absolute로 배치한 이미지가 겹쳐지는 경우 css에서 나중에 정의한 이미지가 앞에온다.

 

8. padding은 padding: 0 auto; 같이 써서 가운데 정렬을 할 수 없다.