스타일을 적용할때 가장 먼저할 초기화
하고 안하고는 차이가 크다
하나씩 설명을 해보겠다
1.
* { margin: 0;padding: 0;}
*는 모든것을 선택한다는 의미
margin은 바깥쪽여백 padding은 안쪽 여백인데 이걸 둘다 0으로 안 줄 경우와 줬을경우의 사진으로 비교해보겠다
이런식으로 기본 여백이 사라져 내가 원하는만큼 칸을 띄우거나 할때 용이하고
보기에 더 깔끔해진다 (기본 배경색도 여기에 background-color를 넣어주면된다)
2.
body,html{width: 100%; font-family: 'Noto Sans KR', sans-serif; overflow-x: hidden;}
body,html 내 를 적용하는것
(html내에 body가 있는데 왜 이거 두개를 다쓰는지는 나도 잘 모른다 배울때 그냥 이렇게 넣으라고 배웠다)
width: 100% 기본 넓이를 100%로 적용
font-family 보여질 폰트를 설정하는것인데
나는 Noto Sans KR로 해놨다 이것이 없을경우 sans-serif로 대체한다는뜻
기본 글꼴에는 serif , sans-serif , monospace , cursive , fantasy 이것들이 있는데
font-family에는 여러 값을 쓸 수 있으므로 대체적으로 마지막에는 이 것을써놓는다
내가 사용하려는 영문폰트에 한글폰트가 포함이 안되어있다면
아래 보이는것과 같이 설정해놓으면
font-family : '영문폰트(한글은없음)' , '모든폰트(한영다있음)' , 기본글꼴 ;
영문은 첫번째 영문폰트대로 나오고 한글은 첫번째에 값이없어서 두번째 폰트를 갖고와서 사용하게된다
overflow-x:hidden을 처리하는것은 x축 즉 가로가 넘어갔을때 처리하는 방식을 말하는것인데
요즘은 가로 스크롤바를 잘 쓰지않아 가로축이 넘어갔을때 hidden(숨김) 처리를한다
3.
ul{ list-style: none;}
여기에서 앞에 ●(불릿)이 붙는것을 미리 없애놓은것이다
4.
a {text-decoration: none;}
a태그 (링크거는 태그) 에 기본값을 정해주는것
a태그에는 기본적으로 밑줄이 그어지기 때문에 이것을 해놓으면 밑줄이 사라진다
text-decoration에 걸수있는 값은
none , underline :밑줄 , line-through : 중간줄 , overline : 윗줄 , inherit : 부모의값을 상속받는다
만일 다른값에서 상속을 받아 기본값으로 하고싶을경우 initial 하면 기본값으로 돌아간다
text-decoration 에 들어오는값은 중복되게 할수있다
예 : text-decoration: underline line-through overline; 이렇게하면 줄이 세개가 생긴다
5.
img {border: none;}
이미지(사진)에는 기본적으로 테두리가 그려지기때문에
테두리를 없애는 값 none을 적어놓는다
