CSS입문

CSS_손쉽게 초기 디자인 reset 하기_22.04.08(Fri)

양빵빵 2022. 4. 8. 17:51

html에 기본적으로 적용되어 있는 디자인들을 리셋 시키는 기능.

주의사항 : reset 후에 style을 시작해야한다.

h1, h2, li 태그에 있는 내용들이 기본디자인들이 적용되어 실행된 모습.

 

h1,h2의 기본 디자인을 리셋시키기 위해 css를 통해 style에서 디자인기본설정을 리셋 시켰습니다.

 

ul,li도 동일하게 디자인을 리셋 시켰습니다.

모든 작업을 이런식으로 리셋 시키면서 하기가 힘들기 때문에 CSS의 리셋을 쉽게 적용시키는 방법을 알아보도록 하겠습니다.

 

구글에서 reset css cdn을 검색하세요.

 

www.jsdelivr.com으로 접속합니다.

 

접속 후 맨위에 있는 /npm/reset-css@5.0.1/reset.min.css 의 URL을 Copy 합니다.

 

<style></style> 적용하기전에 그 위칸에 link 태그를 사용하여 href에 복사한 URL을 입력해 줍니다.

 

저장 후 실행하면 하나씩 스타일 리셋을 하지 않고도 모든 디자인이 초기화 된것을 확인 할 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
     
    </style>
</head>
<body>
    <h1>안녕</h1>
    <h2>메롱</h2>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

    <ol>
        <li>라면</li>
        <li>계란</li>
        <li>파</li>
        <li>냄비</li>
        <li>물</li>
    </ol>

    <!-- 스타일링이 아예 없는 상태에서 시작을 하고 싶을때 reset 사용 -->
</body>
</html>