Html/Css. a&body&ul,li 노말라이즈

kimkim·2025년 1월 24일
0

노말라이즈

  • 일반화
  • 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;
}

0개의 댓글