브라우저마다 약간의 차이는 있지만, 브라우저에서 기본적으로 제공되는 스타일은 예쁘지 않습니다.
따라서 보통 기본 스타일은 없애고 입맛에 맞게 새로운 스타일을 입히게 됩니다.
버튼의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.
button {
border: 0; /* 테두리 없애기 */
background-color: transparent; /* 배경을 투명하게 */
}
또는
button {
cursor: pointer; /* 커서를 손 모양으로 */
background: none; /* 배경 없애기 */
border: none; /* 테두리 없애기 */
}
리스트의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.
ul,
ol {
list-style: none;
}
또는
ul,
ol {
list-style-type: none;
}list-style 속성은 list-style-type, list-style-image, list-style-position 속성을 모두 포함하는 속성입니다.
버튼이나 리스트를 사용할 때마다 위의 코드를 적용하는 것은 번거롭기 때문에
보통 'reset.css'라는 파일을 만들어 모든 파일에 공통적으로 적용할 속성들을 정의해놓고 글로벌 스타일로 적용합니다.
아래는 reset.css 파일의 예시입니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: /* main font */;
}
a {
text-decoration: none;
}
ul,
ol {
list-style: none;
}
button {
cursor: pointer;
background: none;
border: none;
}
또는 다음 링크의 템플릿 코드를 복사하여 사용할 수 있습니다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
읽어주셔서 감사합니다:)
