happy cat image

everdevel

hello world

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

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>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

위 코드의 결과

위의 이미지를 보면 불필요하게 위로 공백이 보이죠. 아래에 아무것도 없어서 그렇지 위,아래, 양 옆 그냥 다 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>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

위 코드의 결과

위의 이미지를 보니 첫번째 예제의 이미지에 비해서 여백이 없어졌죠? 브라우저에 임의로 지정되어있는 값을 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>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

위 코드의 결과

p태그에 margin속성을 사용하지 않았어도 cssReset.css 파일의 코드에 의해 여백이 없어졌네요.


    
    

강좌로 돌아가기

댓글 0개

정렬기준