🍁CSS 초기화 작업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
background-color: gold;
}
p {
background-color: yellowgreen;
}
div {
background-color: pink;
}
</style>
</head>
<body>
문자열입니다.
<h1>제목입니다.</h1>
문자열입니다.
<p>문단입니다.</p>
문자열입니다.
<div>영역입니다.</div>
문자열입니다.
</body>
</html>
<h1>, <p>, <div> 태그 셋 다 padding은 없다.
그런데 <h1> 태그와 <p> 태그에는 우리가 주지 않은 margin이 있다.
이처럼 기본적으로 모든 태그들은 서식을 가지고 있다.
이러한 브라우저의 기본 설정을 없애는 작업을 해보도록 하자.
user agent stylesheet
user agent stylesheet는 브라우저가 준 서식이다.
즉, 이 서식은 다른 브라우저에서 보면 값이 바뀌어서 다르게 화면이 보일 수 있음을 의미한다.
개발자 입장에서는 어떤 브라우저에서 보던 똑같은 화면이면 좋겠지만, 브라우저마다 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;
}
C:\Class\code\client\ClientTest\src\main\webapp\asset\css
이 코드를 복사하여 asset 폴더 아래에 'CSS' 폴더를 만들고, 'reset.css' 파일을 만들어 붙여넣기 한다.
<link rel="stylesheet" href="../asset/css/reset.css">
<link> 코드를 <style> 위에 추가한다.
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
링크를 마우스 오른쪽 클릭하여 '다른 이름으로 링크 저장'을 한다.
마찬가지로 asset > css 폴더에 저장한다.
<link rel="stylesheet" href="../asset/css/normalize.css">
<link> 코드를 <style> 위에 추가한다.
Nomalize는 CSS의 모든 서식을 초기화하진 않으므로 Reset보다 적당하게 사용하기에 좋다.
🍁CSS 디자인 프레임워크
디자인 프레임워크는 초기화를 넘어서 선작업을 해 둔 것이다.
일종의 라이브러리라고 보면 되며, 다양한 디자인 프레임워크가 존재한다.
1. Bootstrap
2. Foundation
3. Tailwind
4. Pure.css
5. Materialize
6. Skeleton
7. Semantic UI
프레임워크마다 조금씩 차이가 있으며, 어떤 것 하나가 시장을 점유하고 있지 않다.
디자인과 관련된 것이기 때문에 호불호가 갈리는 편이다.
Bootstrap
https://getbootstrap.com/docs/5.3/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
Bootstrap은 트위터 개발자가 만들었기 때문에 예전의 트위터 느낌이 난다.
예로 들어 Buttons를 살펴보면 어떻게 디자인을 해야 하는지에 대한 서식을 제공하며, 사용할 때에는 Document를 붙여넣기하여 사용하면 된다.
만약 회사에 디자이너가 없는데 디자인을 해야 하는 경우에 프레임워크를 쓰는 게 답이 될 수 있다.
