a노말라이즈

우리가 앞에서 a를 노말라이즈할 때, color:black, text-ecoration:none을 주어서 노말라이즈를 했을 것이다.
하지만 우리는 이제 본래의 속성이 inherit을 뜻한다는 것을 알기 때문에 a를 노말라이즈할 때에

a{
color:inherit;
text-deciration:inherit;
}

로 노말라이즈 한다.

body노말라이즈

우리가 이렇게 태그를 사용하여 박스를 만들면 이상하게 위와 양 옆에 아주 약간의 여백이 생기게 된다. 그 이유는 body태그에 margin값이 조금 주어져있기 때문이다. body를 노말라이즈 하려면

body{
margin: 0;
}

위처럼 하면 된다.

그럼 이렇게 위와 양 옆 여백이 사라지게 된다.

둥근 모서리 메뉴 구성하기

이런 메뉴를 만들어보자.

그럼 이 코드를 우리가 전에 배웠던 class속성을 이용하여 div태그로만 사용해보자!

여기서 하지만 우리가 실무에서 모든 것에 class를 부여하게 되면 시간도 많이 소요될 뿐더러 가독성도 떨어지는 복잡한 코드가 생기게 된다. 위 코드에서는 최상위 class속성만 제외하고 나머지를 지워도 부모 자식 관계를 이용해서 코드가 정상적으로 작동한다.

---

하지만 위 코드에도 문제점은 존재한다. 모든 코드를 div나 한정된 코드로만 작성하게 된다면 나중에 방대한 양의 코드를 내 동료나 다른 유지보수하는 사람이 보았을 때 혼란스러워 할 것이다. 그래서 우리는 정해진 곳에 맞는 태그를 사용할 것이다.

h,ol,ul,li 태그

h태그

h태그는 제목이나 주제에서 사용하는데 그 중요도에 따라서 h1~h6 까지 존재한다. h1는 가장 상위단계로 폰트사이즈가 크고 순서대로 폰트사이즈가 작아진다.

그리고 기본적인 마진값도 존재하기 때문에

h1,h2,h3,h4,h5,h6{
margin:0;
font-size:1rem;
font-weight:normal;
}

이렇게 노말라이즈한다.

ol,ul,li 태그

이 태그들은 목록태그로
ul은 unordered list, ol은 ordered list태그로 ul태그은 목록들의 순서가 존재하지 않지만 ol태그는 순서가 존재한다. 이들의 직계자식 요소로는 오직 li(list)태그만 올 수 있으며 ol의 항목들은 숫자로 표시되는 반면 ul태그들의 항목은 (•)으로 표시된다.

이것을 이용하여 BTS의 앨범과 멤버를 표시해보면 이렇다.

이 태그들은 margin값과 padding값을 가지고 있고 항목들을 단순하게 표시하고 싶으면 list-style:none;을 사용하면 된다.

ul, li {
/ 앞에 점 없애기 /
list-style:none;
/ 안쪽 여백 제거 /
padding:0;
/ 바깥쪽 여백 제거 /
margin:0;
}