안녕하세요! 오늘은 CSS 초기화에 대한 내용을 정리해 보려 합니다.
웹페이지를 만들며 자주 사용하는 태그가 있으신가요? 기본적으로 사용하는 태그들을 나열하여 페이지를
하나 만들어 보겠습니다!
<body>
<a>링크예제 입니다.</a>
<ul>
<li>li 첫번째 example</li>
<li>li 두번째 example</li>
<li>li 세번째 example</li>
<li>li 네번째 example</li>
</ul>
<div>
div 영역
<strong>strong 태그</strong>
<address>address 태그</address>
</div>
<h1>h1 태그 예제</h1>
<h2>h2 태그 예제</h2>
<h3>h3 태그 예제</h3>
</body>
대표적으로 사용하는 생각나는 태그들을 사용하여 html 파일을 작성 하였습니다.
결과 화면도 확인해 볼까요?
우리가 예상하는 일반적인 결과 화면 입니다. 하지만 위 내용을 개발자 도구창을 열고 조금 자세히
살펴 보겠습니다.
자세히 보시면 margin, padding, color, font와 같은 속성이 기본 속성으로 설정 되어있는 것을 확인 하실 수 있습니다. 또한 <li> 태그의 맨 앞에 동그라미 이미지, <a> 태그의 파란색상에 밑줄과 같은 기본 속성을
태그가 가지고 있는 것을 확인 하실 수 있습니다.
브라우저가 가지는 기본 속성이 문제가 되나요?
퍼블리싱을 시작하게 되면 이런 기본 속성들은 내가 원하는 페이지를 만드는데 걸림돌이 됩니다.
마진과 패딩이 일정한 깔끔한 영역에 원하는 스타일로 태그들을 만들어 가고 싶은데 기본적으로 가지고 있는 속성이 오히려 작업하기 힘든 방해요소가 됩니다.
여기에 더하여 브라우저마다 가지고 있는 기본 속성이 각자 다르기 까지 합니다 ㅠㅠ
이럴 경우 동일한 태그를 사용하여 작업하더라도 브라우저 별로 화면이 조금씩 다르게 나타나게 되죠.
브라우저를 가리지 않고 동일한 화면을 나타내는 크로스 브라우징 개념이 중요한 만큼 위의 문제사항은
해결이 필요해 보입니다.
그렇기 때문에 필요한 CSS 초기화 (Reset CSS)
위의 문제점을 해결하기 위해서 reset.css 파일을 만들어 태그의 기본 속성들을 모두 초기화 시켜준 후 퍼블리싱 작업을 시작합니다. 아래의 코드를 살펴 볼까요?
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{text-decoration: none;color: #000;}
위화 같이 reset.css 파일을 생성하고 html 파일에 import 한 후 결과 화면을 보겠습니다.
모든 기본 속성이 초기화된 결과 화면이 보이시나요?
이제 편집자의 기호에 맞게 각자 태그에 속성을 주며 페이지를 만들어 가시면 됩니다!
CSS 초기화는 정형화된 한가지 방법만 존재 하나요?
초기화 코드는 작업자에 따라 유동적으로 변할 수 있습니다. 작업자에 따라 없애지 않는게 더 편한
속성이 존재할 수도 있고 꼭 표시하고 싶은 속성의 경우 추가하는 경우도 있습니다.
아래는 대표적으로 많이 사용하는 reset 방법에 대한 참고 url입니다.
Eric Meyer's Reset CSS
https://meyerweb.com/eric/tools/css/reset/index.html
Richard Clark HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
여러 reset.css 코드를 살펴보고 사용하기 가장 편한 자신의 reset.css 코드를 만들어
적용해 보시길 바랍니다!
그럼 다음에 더 좋은 내용으로 찾아 오겠습니다!
한해 마무리 잘하시고 새해 좋은 일 가득 하시길 바랍니다 :)
'css' 카테고리의 다른 글
| CSS 세로 가운데 정렬 방법 정리 (0) | 2022.12.29 |
|---|---|
| CSS box-shadow 속성 사용방법 정리 (0) | 2022.12.28 |
| CSS margin 속성 사용법 정리 (0) | 2022.12.27 |
| CSS box-sizing 속성 (영역, 기준 정리) (0) | 2022.12.21 |
| CSS float 해제 방법 정리 (0) | 2022.12.13 |
댓글