PinkCoding

CLASS web

CSS

css 리셋

CSS 리셋하기

CSS리셋을 하는 방법에 대해 알아볼게요.
CSS리셋은 특정 태그에 특정 CSS속성의 값을 정해놓고 작업을 하는것을 의미합니다.
무슨말인가 싶죠.
예를 들어서 CSS 속성의 값이 각 브라우저마다 기본값이 다르답니다.
그래서 웹페이지를 만들었는데 이 웹브라우저에서는 이렇게 나오고 저 웹브라우저에서는 저렇게 나오고 하는 현상이 발생할 수 있어서
이 서로 다른 값들을 직접 값을 적용해서 통일시키는거에요.
우리 앞에서 나중에 하기로 한거 하나 있었죠?

폰트 사이즈 조정하기

위의 게시물에서 마지막 부분에 알수없게도 여백이 많은걸 볼 수 있었어요.
그 예제를 다시 실행해 볼게요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 사이즈 조정</title>
<style>
p{font-size:50px}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위 코드의 결과

위의 이미지를 보면 불필요하게 위로 공백이 보이죠. 아래에 아무것도 없어서 그렇지 위,아래, 양 옆 그냥 다 margin값이 설정되어있어요.
그래서 이러한 값들을 0으로 맞춰줘야 합니다.
p태그의 margin값을 0으로 해볼게요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 사이즈 조정</title>
<style>
p{margin:0;font-size:50px}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위 코드의 결과

위의 이미지를 보니 첫번째 예제의 이미지에 비해서 여백이 없어졌죠? 브라우저에 임의로 지정되어있는 값을 0으로 변경했어요.
이렇게 해서 여러 태그에 있는 margin, padding값등을 0으로 해야합니다.

@charset "UTF-8";
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,table,textarea{font-size:12px;font-family:Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif}
button,input{border-radius:0}
fieldset,img{border:0}
ol,ul{list-style:none}
address,em{font-style:normal}
a{text-decoration:none}
a:hover{text-decoration:underline}
iframe{overflow:hidden;margin:0;padding:0;border:0}

위의 코드는 네이버의 메인페이지에서 가져온 CSS 리셋 코드에요.
네이버는 저러한 코드를 사용하네요 여러 태그에 margin:0;padding:0 적용도하고, 폰트도 적용하고 그랬네요. 리스트 태그에는 앞에 붙는 기호가 없도록 list-style:none를 사용했어요.
저 코드를 하나의 css 파일로 만들어 저장하고 link태그를 사용해 해당 파일을 불러와서 사용할게요. 앞으로요.

파일명은 cssReset.css 로 저장할게요.

css 파일을 불러오려면 다음과 같은 코드를 사용하겠죠? 이 부분 앞에서 학습했죠?

외부문서로 저장하여 연결하기 (Linked Style)

<link rel="stylesheet" type="text/css" href="스타일시트 경로" />

자 그럼 해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트 사이즈 조정</title>
<link rel="stylesheet" href="./cssReset.css">
<style>
p{font-size:50px}
</style>
</head>
<body>
    <p> hello world </p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위 코드의 결과