CSS 활용 팁

각종 CSS 활용 팁 정리

---

태그 박스 사이즈 관련 팁

태그에 각종 css의 옵션을 넣다 보면 태그 박스의 바깥쪽에 요소들이 붙어 디자인이 깨지는 현상이 발생한다.

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할 지를 정하는 속성인데, border-box는 테그 박스의 테두리를 기준으로 박스의 크기를 정하기 때문에 이런 문제를 해결할 수 있다.

.container {
  width: 100;
  height: 100;
  box-sizing: border-box;
  border: solid royalblue 10px;
  padding: 5px;
}

전환 효과

transition 속성을 사용하면 hover와 같이 특정 상황에서만 변화가 있는 스타일을 사용하거나 반응형 웹페이지에서 스타일이 변화할 때, 스타일이 변화하는 액션이 자연스러워지는 전환 효과를 사용할 수 있다.

.container .item {
  width: 100;
  height: 100;
  transition: 1s;
  background-color: royalblue;
}

.container .item:hover {
  width: 200;
  background-color: orange;
}

태그 레이어 순서 설정

다양한 내용을 한 페이지에 담다보면 그림 등 컨텐츠가 겹쳐서 원하는 내용이 가려지는 문제가 발생한다.

웹 페이지의 태그들의 레이어 순서를 정하기 위해 사용하는 속성인 z-index을 사용하면 이런 문제를 해결할 수 있다.

Tip

모든 태그의 기본 z-index는 0으로 설정되어 있으며, 숫자가 클수록 앞에서 보임