CSS 특강을 들으면서 핵심적이고 몰랐던 부분 위주로 정리하였습니다.
CSS 작성 팁
css 시각적으로 태그가 차지하고 있는 공간을 인지하는 것부터 시작합니다.
box-shadow, outline, background-color등으로 주는데, box-shadow에 inset을 활용해서 어떤 영역인지 방향성을 통해 정확하게 인지할 수 있습니다.
margin 상하단 auto가 되는 경우 flex, grid, position
margin의 상, 하단 값이 auto인 경우 0으로 계산되지만, 위와 같은 경우엔 상, 하단의 값을 auto로 줄 경우 0이 아닌 값으로 계산될 수 있습니다.
인라인 요소는 베이스라인을 기준으로 상하단 패딩이 공간을 차지하지 못한다. 좌우는 공간을 차지합니다.
베이스라인이란 text컨텐츠의 underline이 생기는 부분으로, vertical-align의 기본값입니다. vertical-align에서 bottom은 컨텐츠가 차지하는 공간의 하단이며, 베이스라인과 다르다는 점을 알고갑시다.
nth-child로 지정하는 것보단 공통되는 부분과 개성적인 부분을 나눠서 별도의 css 클래스를 추가하여 관리하자!
nth-child의 경우 순서에 의존합니다. 순서가 수정될 경우가 있어 유지보수에는 좋지 않은 편입니다. 따라서 별도의 클래스를 주어 관리를 해주는 것이 좋으며, .fruits.orange처럼 공통된 css 클래스와 개별 css 클래스를 같이 적어주어 구체적이며, 명시도가 높게 하여 css의 가독성과 우선순위를 높여줍시다.
initial value
요소에 영향을 미치는 초기값이 어떻게 설정되어 있는지 알고 있으면 스타일을 적용할 때 어떤 스타일들에 의해 현재 상태가 되는지 파악하기 쉽습니다. width: auto; 등이 예시입니다.
flex-box
flex-box를 만들때 적용되는 스타일들의 initial value입니다.
-
min-width: auto; - 최소값 = 컨텐츠 크기
-
flex-basis: auto; - 컨텐츠 크기
- 둘 다 auto이며, width값이 정해져 있을 때, width값을 가져와서 basis와 min-width가 정해진다. -
flex-shrink: 1; - 1의 비율로 줄어들 것
-
flex-grow: 0; - 나머지 여백을 가져오지 않을 것
flex로 레이아웃을 만들 때
min-width: auto;의 문제점은 내부 컨텐츠 크기만큼 최소너비가 정해지기 때문에, 컨텐츠가 레이아웃보다 커지면 레이아웃도 같이 커져서 변형됩니다. 따라서 flex-basis로만 사이즈를 결정할 땐 min-width값을 0으로 주는 등 따로 정해주어서 레이아웃의 변형이 없이 내부 컨텐츠만 레이아웃보다 커져서 레이아웃을 초과하도록 설정을 해줍니다. 또한, 다른 flex-items의 영향을 받지 않기 위해서 flex-shrink를 0으로 해주어 더이상 작아지지 않도록 해줍니다.
