728x90
※ 본 게시물은 컴퓨터 및 프로그래밍을 공부중인 비전공자가 개인적인 공부를 위해 적어둔 것으로 내용이 정확하지 않을 수 있으며, 언제든지 추가되거나 수정될 수 있음.
CSS는 사용자 중심의 인터페이스를 좀 더 구체적이고 세련되게 제작할 수 있게 도와주는 역할을 한다. CSS에서 다룰 수 있는 페이지 레이아웃 기능은 그 중에도 가장 기본적이며 필수적인이라고 할 수 있다.
레이아웃 리셋
HTML로 제작한 문서에는 기본적으로 내장되어있는 스타일이 있다. HTML의 내장 스타일은 문서를 만들 때 일일이 스타일을 지정해줄 필요가 없다는 점에서 편리하지만, 때로는 문제를 일으키기도 한다.
- 박스의 시작을 (0,0)에서 시작하고 싶은데 <body> 태그가 가진 내장 스타일에는 여백이 있음
- width, height 계산은 내장 스타일의 여백을 포함하지 않아 설정값과 실제값이 달라짐
- 브라우저 별로 기본 내장 스타일이 다름
이 문제는 기본 스타일을 제거하는 코드를 삽입하면 간단히 해결할 수 있다.
* {
box-sizing : border-box;
}
body {
margin : 0;
padding : 0;
}
728x90
'[FrontEnd] > CSS' 카테고리의 다른 글
| Flexbox (0) | 2022.08.24 |
|---|---|
| CSS 박스 모델 (0) | 2022.08.23 |
| CSS의 셀렉터 정리 (0) | 2022.08.23 |
| CSS의 코드를 보며 기본 구조를 알아보자. (0) | 2022.08.23 |
| CSS란? (0) | 2022.08.23 |
