코드 작성 후 분명히 margin과 padding 어느하나 넣지 않았음에도 불구,
ul태그에 padding이 적용되어 여백이 들어가있는 것을 발견했다.
알고보니 브라우저 자체적으로 적용되는 css가 있었다.
CSS가 없이 HTML만 있던 시절 기본적인 태그에는 적당한 서식이 붙어 있었습니다. 이후 CSS가 생기면서 이 서식은 CSS의 기본 default서식이 되었습니다. 우리는 이 스타일을 User-Agent StyleSheet라고 부릅니다.
안타깝게도 이 기본 서식들은 각 브라우저만의 개성이자 표준이 없던 관계로 브라우저마다 서로 다른 서식을 가지게 됩니다. 특히 IE가 주류이던 그 시절은 더 심했습니다.
우리는 작업한 결과물이 어떠한 브라우저에서던 같은 모양을 보여주길 원했고 이러한 작업을 크로스 브라우징(Cross Browsing)이라고 불렀습니다.
그리고 그러기 위해서는 우선 저마다 다른 브라우저의 스타일을 하나로 통일해야 하는 선행작업이 필요했습니다.
이것이 여러분들이 CSS를 공부했다면 한번쯤 들어봤을 CSS Reset과 Normalize 와 같은 것입니다.출처 : https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0
구글링으로 css reset을 검색하면 코드가 나오는데 이걸 복붙하면 기본적으로 적용되는 모든 css가 싹 사라진다(여백 뿐만 아니라 h1~6태그의 폰트크기까지 전부)
추가로 css작업 중 알게 된 사실
컨텐츠양에 따라 div태그의 길이가 자동으로 조절되게 하고 싶어
overflow : hidden;
height : auto;를 적용하였는데 코드가 먹히질 않았다.
원인은 이 div태그에 justify-content속성을 부여한 것 때문이었다.
justify-content : center는 부모요소의 높이를 따라간다
위의 코드 대신 아래의 코드로 해결했다.
align-items: flex-start;