user agent stylesheet
브라우저마다 css를 다르게 적용한다.
> 모든 브라우저에서 동일되게 보이도록 통제한다.
🔻CSS 초기화작업🔻
- 브라우저 설정을 막는다.
1. Reset CSS
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
코드 복사하기
/* 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;
}
reset.css 파일 생성하기
해당 경로에 저장
C:\class\code\client\ClientTest\src\main\webapp\asset\css\reset.css
<head>에 연결하기
<link rel="stylesheet" href="../asset/css/reset.css">
2. Normalize CSS
https://necolas.github.io/normalize.css/
Normalize.css: Make browsers render all elements more consistently.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
necolas.github.io
다운로드하기
다른 이름으로 저장하기
normalize.css 파일 생성하기
아래 경로로 저장
최소한의 스타일 적용이 되어 있다.
🔻CSS 디자인 프레임워크🔻
- 다양한 서식 작업 미리 만들어 제공하는 세트
1. Bootstrap
2. Foundation
3. Tailwind
4. Pure.css
5. Materialize
6. Skeleton
Bootstrap
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
'WEB > CSS' 카테고리의 다른 글
| [CSS] 태그의 수평 정렬 (0) | 2023.09.26 |
|---|---|
| [CSS] 요소의 위치 : position, z-index (0) | 2023.09.26 |
| [CSS] 요소의 좌우위치 조정 : float (0) | 2023.09.26 |
| [CSS] 요소의 출력 방식 제어 : display(***) (0) | 2023.09.26 |
| [CSS] overflow , visibility 속성 (0) | 2023.09.25 |
