λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
  • μž₯원읡 κΈ°μˆ λΈ”λ‘œκ·Έ
πŸ“Ί Front End/- HTML,css,Javascript

[CSS] CSS μž‘μ—…μ‹œμ— κΌ­ κ±°μ³μ•Όν•˜λŠ” ν•„μˆ˜ κ³Όμ • :: CSS Reset, HTML μš”μ†Œ μ΄ˆκΈ°ν™”, 리셋 css

by Wonit 2020. 10. 6.

μ˜€λŠ˜μ€ μ›Ή κ°œλ°œμ—μ„œ CSS 파트λ₯Ό μž‘μ—…ν•  λ•Œ κ±°μ³μ•Όν•˜λŠ” ν•„μˆ˜ 과정인 *Reset Css *에 λŒ€ν•΄μ„œ μ•Œμ•„λ³΄λ € ν•œλ‹€.

CSS Reset

css reset은 HTML Element의 Default 값듀을 μ—†μ• μ£ΌλŠ” μž‘μ—…μ΄λ‹€.

 

일반적으둜 margin, font, padding, line, sizeλ“±λ“±κ³Ό 같은 μ†μ„±μ˜ 값듀을 0 λ˜λŠ” none으둜 λ§Œλ“€μ–΄μ•Ό ν•œλ‹€.

Stackoverflow

μœ„μ—μ„œ 보이닀 싢이 Firefox3와 IE7이 λ³΄μ—¬μ§€λŠ” 방식이 달라 κ°œλ°œμžκ°€ μ˜λ„ν•œ λŒ€λ‘œ 웹이 보여지지 μ•Šμ„ λ•Œκ°€ μžˆλ‹€.

 

이 경우 μœ„μ—μ„œ λ§ν•œ 듯이 λͺ¨λ“  Element의 속성 값듀을 μ—†μ• μ•Ό ν•œλ‹€.

μ™œ?

μ›Ή ν‘œμ€€μ„ 지킀며 μž‘μ—…ν•΄μ•Ό ν•˜λŠ” ν˜„λŒ€ 개발 ν™˜κ²½μ—μ„œ IEκ°€ μ•„λ‹Œ λ‹€λ₯Έ μ—¬λŸ¬ λΈŒλΌμš°μ €μ—μ„œ κ°œλ°œμžκ°€ μ˜λ„ν•œ λŒ€λ‘œ 보여져야 ν•œλ‹€λŠ” μš”κ΅¬μ‚¬ν•­μ€ 선택 사항이 μ•„λ‹Œ ν•„μˆ˜ 사항이 λ˜μ—ˆλ‹€.

 

예λ₯Ό λ“€μ–΄ λˆ„κ΅°κ°€λŠ” Chromeμ—μ„œ 웹을 λ³΄κ±°λ‚˜ Android, IOS 와 같은 λͺ¨λ°”일 ν™˜κ²½μ— λ…μžμ μΈ μ›Ή λΈŒλΌμš°μ €, ν˜Ήμ€ Firefoxλ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžλ“€μ΄ λŠ˜μ–΄λ‚¨μ— 따라 κ°œλ°œμžλ“€μ΄ λͺ¨λ“  ν™˜κ²½μ„ λ™μΌμ‹œ ν•˜κΈ° μœ„ν•œ μž‘μ—…μ„ ν–ˆμ—ˆλŠ”λ°, 이λ₯Ό ν•˜λ‚˜μ˜ μ½”λ“œλ‘œ νŽΈλ¦¬ν•˜κ²Œ ν•  수 μžˆλŠ” μ½”λ“œκ°€ μ›Ή 상에 λ‚˜μ™€μžˆλ‹€.

μ–΄λ–»κ²Œ?

CSS Reset을 μ‹œν‚€λŠ” 방법은 κ°„λ‹¨ν•˜λ‹€.
μœ„μ—μ„œ 이야기 ν–ˆλ“― κ΄€λ ¨λœ λͺ¨λ“  μš”μ†Œμ˜ 값듀을 none λ˜λŠ” 0으둜 λ§Œλ“€λ©΄ λœλ‹€.

말 κ·ΈλŒ€λ‘œ μ΄ˆκΈ°ν™” 과정이닀.

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;
}
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;
}

μœ„μ™€ 같은 μ½”λ“œλ₯Ό reset.cssλΌλŠ” 파일둜 볡사 λΆ™μ—¬λ„£κΈ°λ₯Ό ν•˜κ³  reset을 μ›ν•˜λŠ” main css νŒŒμΌμ— @import ν•΄μ£Όλ©΄ λœλ‹€.

 

λŒ“κΈ€