#10 스타일 초기화를 위한 Reset.css & Normalize.css - 웹 코딩 강좌

웹 디자이너를 위한 웹 코딩 강좌 열 번째 시간입니다.
오늘은 브라우저에서 제공하는 기본 스타일을 초기화하는 방법을 알아볼게요. 내가 코드로 넣지도 않은 스타일이 있다면 답답하죠? 그러기 위해서는 스타일을 초기화하는 코드를 넣어야 합니다. 매번 작업할 때마다 직접 코드로 짜기 귀찮겠죠.
그래서 누군가 작업해둔 오픈소스를 활용할 거예요.
Reset.css 와 Normalize.css 두 가지를 알아볼 거예요.

사용법은 아주 간단합니다. 아래 링크에서 다운로드한 후에 css 폴더에 넣어 외부 스타일 시트 연결한 방법으로 해당 경로를 연결해 주면 됩니다!

Reset.css – https://meyerweb.com/eric/tools/css/reset/
Normalize.css – https://necolas.github.io/normalize.css/

*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.

핵심 요약

브라우저마다 기본적으로 제공하는 요소에 따른 스타일의 기본값(default 값)이 있는데, 약간씩 다릅니다.
Reset CSS란 설명하자면 브라우저 간의 차이를 최대한 없애는 코드를 넣어서, 브라우저 요소들의 스타일이 0인 상태에서 디자인을 만들어 나가기 위해 생겨난 것입니다.
초기화 혹은 일반적으로 바꿔주도록 누군가 만들어 놓은 좋은 소스 중에 하나입니다.
이것과 비슷한 게 하나 더 있습니다. 바로 Normalize.css입니다.
Normalize.css는 reset.css와 조금 다른데, 약간의 디자인적인 요소가 가미되어 있습니다. 요새 reset보다 normalize를 더 사용하는 것으로 알고 있습니다.

적용 방법!
우선 파일을 다운로드해서 css 경로에 넣습니다.
외부 스타일 시트 사용하는 방법 기억하시죠?!
head 영역에 link로 불러오면 끝~ 간단하죠?!

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Reset.css & Normalize.css</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="card">
        <figure>
            <div class="play-button"></div>
            <img src="img/sample.jpg" alt="" srcset="">
        </figure>
		
        <div class="text-wrap">
            <h1>웹디자인 입문</h1>
            <p>지금 웹 디자인을 배우는 건 너무 늦었나?</p>
        </div>
    </div>
</body>
</html>

CDN으로 불러올 수도 있습니다.
CDN 이란 Contents Delivary Network의 약자로 필요한 정보를 실시간으로 다운로드해 사용하는 방법입니다. 장단점이 있지만, 쉽게 적용해볼게요.

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>

https://cdnjs.com/libraries/meyer-reset

https://cdnjs.com/libraries/normalize

앞으로 업로드될 모든 강좌에 Reset.css를 적용시킵니다 : )