CSS) [CSS-Hack] 컨테이너에 속한 3개의 박스를 일정한 너비로 설정하기 ... space-between 오류

 

fCSS-Hack에 관한 코드다.

 

정석적인 방법은 아니라, 사용자들이 브라우저의 오류를 해결하기 위해 연구해서 공유된 내용임을 미리 알린다.

 

실제 예시 코드를 이용하여 알아본다.

 

하나의 컨테이너에 3개의 칼럼이 있는 상황. 

 

원래는 컨테이너에 justify-content: space-between 을 부여하여 배치하려 하는데,

가운데 요소가 화면의 정중앙에서 약간 벗어나는 상황이다.

 

그래서 아래와 같은 css 코드를 사용한다.

참고로 SCSS를 사용했다.

 

CSS로 사용하려면 상위 태그로부터 따로 분리해내어 독립적으로 선언하고,

 

&의 뜻은 해당 태그라는 뜻이다. 예를 들면, div{  &:hover { ~ } } 는  div:hover{ ~ } 와 같은 뜻이다.

 

위 코드를 실행하면, 처음에 의도한 space-between 의 모양을 갖출 수 있다.

각 칼럼의 내부 요소들도 균일하게 배치된다.

 

---

참고)

 

https://nomadcoders.co/kokoa-clone/lectures/1779