노말라이즈
- 일반화
- a와 body 등 태그들에는 기본속성을 가지고 있다.
이런 기본속성이 화면을 구현할때 일관성을 해치고는 한다.
- 또한 브라우저마다 태그들의 스타일 차이가 있기도한다.
- 그래서 스타일을 일관되게 유지할 수 있도록 하기위해서 노말라이즈를 설정한다.
- 모든 작업의 최상단에는 노말라이즈가 들어가야 한다.
a의 노말라이즈
- 기본적으로 underLine에 글자 파란색이 들어가있다.
- color : black;으로 하면 글자색이 검정으로 바꾸지만 다른 속성의 경우 body의 색상이 지정되면 따라가게 되어있다.
- 그래서 color : black;은 노말라이즈가 아니며 부모의 속성을 따라가게 만들어야한다.
a {
color:inherit;
text-decoration:none;
}
body의 노말라이즈
- 기본적으로 marign 속성이 들어가 있다.
- 그래서 유격을 없앨려면 marign에 0을 줘서 유격을 없애준다.
body {
margin : 0;
}
ul,li & ol,li 노말라이즈
- ul,li > 순서가 없는 목록 태그 > padding과 ·이 나타난다.
- ol,li > 순서가 있는 목록 태그 > padding과 숫자(1. 2. 3.)가 나타난다.
- 메뉴는 리스트로 취급되고 리스트는 주로 ul,li로 만든다.
- ul에는 margin과 padding 기본 속성이 들어가 있고
- li에는 list-style ·이 들어가 있다.
- 그래서 각각의 속성을 css로 없애줘서 노말라이즈 해준다.
ul {
margin : 0;
padding : 0;
}
li{
list-style : none;
}
모든 노말라이즈 합치기
- 이 이외에 노말라이즈를 줄 수 있지만 노말라이즈의 기본은 a&body&ul,li 이다.
- 그래서 스타일 css를 시작할 때 맨 상단에 노말라이즈를 입력하고 시작하는 것이 좋다.
body, ul, li {
margin : 0;
padding : 0;
list-style : none;
}
a {
color:inherit;
text-decoration:none;
}