TIL 04.22(CSS, position, CSS 설계)

CSS(1), position, CSS 설계

마크업과 스타일링에서의 설계

다시 한번 느끼는 부분이지만, 개발에서의 모든 설계는 협업과 유지보수를 용이하게 하기 위함인 것 같다.

이 설계를 안 지킨다고 당장 문제가 발생하지는 않지만 추후 자신이 제작한 시스템, 제품이 예측 불가능한 오류를 뱉어낼 수 있다.

이것은 HTML과 CSS에서도 나타난다. 다양한 로직을 처리하는 파일이 아닌 만큼 그 영향은 조금 작지만, 그렇다고 중요하지 않다는 건 아니다.

마크업과 스타일링 또한 지속적으로 관리해야 할 대상이기 때문이다.

훌륭한 마크업과 스타일링은 프레임워크를 따로 도입할 필요가 없을 정도로 재사용성과 유지보수가 뛰어날 수도 있다.

새로 알게 된 내용

• z-index는 position static에서 적용되지 않는다.
  그리고 상위 부모의 z-index가 낮다면 자식이 아무리 높아도 우선순위가 밀린다.

• 이미지와 텍스트를 한 줄로 가지는 레이아웃
  이미지는 베이스라인 위를 기준으로 배치되기 때문에 그만큼 글상자의 높이가 높아진다. 이때 이미지에 relative를 줘서 조정하면 높아진 글상자는 여전히 그대로다.(vertical-align 등이 좋다)

• 보편적인 속성은 따로 common으로 관리하는 게 좋다.
  재사용성이 높다고 판단되는 속성들은 따로 관리하는 게 효율적이다.