[CSS] Reset CSS - 브라우저에 따라 다르게 보이는 차이

웹 브라우저에는 많은 종류가 있으며 각 브라우저에 기본으로 적용된 독자적인 CSS가 존재합니다. 그렇기 때문에 브라우저 마다 다르게 표시되는 것이며 이를 방지하기 위해 CSS를 초기화하면 브라우저에 기본적으로 적용된 CSS를 취소해 다른 브라우저에서도 웹 페이지가 동일하게 보이는 효과를 가져옵니다. 초기화 방법 직접 CSS를 초기화해도 되지만 공개된 CSS를 사용하면 더 편하게 초기화 할 수 있다. destyle.css https://github.com/nicolas-cusan/destyle.css GitHub - nicolas-cusan/destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html. ..

• format_list_bulleted Web
• · 2022. 12. 9.
• textsms

[CSS] Box Model과 Box Sizing

위에 보이는 CSS 프로퍼티들을 많이 보셨겠지만, 위 프로퍼티들이 어떤 요소에 영향을 주는지 또 사용하면서 원하던 크기대로 잡히지 않는 경우가 발생하기도 하는데 왜 그런지 살펴보도록 하겠습니다. 이 부분을 이해하기 위해선 먼저 박스 모델(box model)이라는 개념을 알아야 합니다. 박스 모델(Box Model)이란? HTML의 모든 요소들은 BOX 모양으로 구성되어 있는데, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 안쪽부터 content, padding, border, margin으로 구분합니다. content 텍스트, 이미지, Input, div 요소 등 모든 콘텐츠 가로는 width, 세로는 height로 표현 padding - content를 둘러싼 공간(border와 ..

• format_list_bulleted Web
• · 2022. 10. 17.
• textsms