반응형
CSS로 문서 스타일을 초기화하는 법과 CSS 파일을 연결하는 법 정리.
문서 스타일 초기화가 필요한 이유
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS초기화</title>
<style>
div {border:1px solid black;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="http://www.naver.com">링크A</a></li>
<li><a href="http://www.google.com">링크B</a></li>
<li><a href="http://www.tistory.com">링크C</a></li>
</ul>
</div>
</body>
</html>
div가 명확히 보이도록 스타일 값을 추가한 상태.
엄밀히 말하면 기본 태그들은 입력한 그대로 나오는 것이 아니고, 약간씩 간격이나 여백이 존재한다. 추후 정확한 값으로 정밀하게 디자인을 구현하기 위해선 CSS를 활용해 '문서 스타일 초기화' 라는 작업이 필요하다.
문서 스타일 초기화
<style>
* {margin:0px; padding:0px;} /* 1 */
ul,ol,li {list-style:none;} /* 2 */
a {text-decoration:none; outline:0;} /* 3 */
div {border:1px solid black;}
</style>
CSS로 문서의 스타일을 초기화 한 모습. div의 내부/외부 여백이 사라지고, 링크의 밑줄 효과도 없어졌으며, list의 뷸렛이 깔끔하게 빠진 모습이다.
주석 번호에 따라 위에서부터 하나씩 기록해본다.
- * 전체선택자(Asterisk) - 모든 요소를 선택하는 선택자. 이 경우 모든 태그에서 마진과 패딩을 제거한다.
margin : 해당 태그의 바깥쪽 여백 / padding : 해당 태그의 안쪽 여백 - list-style - ul, ol, li 등의 list 태그에서 앞에 붙는 꾸밈요소의 속성을 바꾼다. none;은 아예 꾸밈요소를 없앤다.
- text-decoration - a 태그로 하이퍼링크를 걸 시 변하는 텍스트 효과를 제어한다. none;은 기본으로 붙는 밑줄 효과를 없앤다. 링크 시 미세하기 걸리는 테두리 제거를 위해 outline값도 0으로 설정한다. (웹표준 코딩 시 살려두어야 할 수도 있으나, 일반적인 경우 0으로 놓고 작업)
CSS 파일 연결
문서 스타일 초기화 CSS는 모든 문서에 공통적으로 들어가는 부분이기에, 따로 빼서 관리하는 게 좋다.
HTML에서 <style> 태그로 입력했던 부분을 style.css로 옮기는 법 정리.
@charset 'utf-8';
/* reset */
* {margin:0px; padding:0px;}
ul,ol,li {list-style:none;}
a {text-decoration:none; outline:0;}- index.html이 있는 디렉토리 내에 style.css라는 이름의 파일을 생성한다.
혹은 css라는 폴더를 따로 만들고 넣어도 상관없다. - html 문서의 <style>과 </style> 사이에 입력했던 CSS 구문을 그대로 떼어다 style.css로 옮겨둔다.
- 스타일 문서 최상단에 html처럼 언어코드를 지정한다. (utf-8)
- 추후 다른 CSS 코드가 추가될 수 있으므로 주석 등으로 리셋CSS를 구분 해주면 좋다.
문서에 따라 reset 구문은 다를 수 있으며, 위의 reset 구문은 가장 보편적으로 쓰이는 것들이다. 너무 길거나 자주 쓰이는 경우 아예 리셋용 CSS 파일을 따로 빼서 관리하기도 한다.
이 외에도 소소한 버그나 오류들이 있어서 그럴 때는 특정 값을 초기화하고 다시 사용해야 하는 경우가 있다고 한다. 사이트를 정확하게 구현하기 위해서 반드시 필요한 구문이니, 잘 숙지해두고 쓰는 법에 익숙해져야겠다.
반응형
