구조 : .#선택자 {속성: 값}
1. SYNTAX
External css
HTML 외부에 css 파일을 따로 만들어서 정의
ex.html
<head>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>abc</h1>
</body>
/ style.css
@charset "UTF-8";
h1 {color:green;}
inline css
HTML 태그 안에 있는 내용물에 적용
<body>
<div style="color:red; text-align: center;">구디아카데미</div>
</body>internal css
head 태그 안에 style 태그를 정의
<head>
<style>
/* internal 방식 */
p {
color : blue;
}
span {
color : yellow;
}
</style>
</head>
스타일 적용 중복시 우선순위
inline css > internal css
2. SELECTORS
css selector
- 태그 이름 : div, p, .....
- id : 특정 하나의 태그에만 적용이되고, 한 HTML에서 하나만 부여할 수 있다. 스타일 태그에서 #으로 받는다.
<style>
#a {
color : blue;
}
</style>
<div id="a">one</div>
- class : 스타일 태그에서 .으로 받으며, 여러 class를 부여할 수 있고, 한 HTML에서 여러 class 식별자를 붙일 수 있다.
<style>
.a {
color : blue;
}
.b {
text-align : center;
}
</style>
<div class="a b">one</div>
<div class="a">two</div>
3. Css 초기화 ( Reset Style )
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;
}리셋 코드는 bootstrap 에 포함되어있다.
4. bootstrap
HTMl 헤드에 링크를 달면 사용 할 수 있다. (아래는 css style 만 )
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">https://www.w3schools.com/bootstrap5/bootstrap_get_started.php
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
모든 어플리케이션에 동일하게 적용되려면 container 클래스나, container-fluid 클래스를 사용한다.
- The .container class provides a responsive fixed width container
- The .container-fluid class provides a full width container, spanning the entire width of the viewport
부트스트랩에서 기본 8가지 색상만 제공한다.
- https://www.w3schools.com/bootstrap5/bootstrap_colors.php
※ 투명도 설정 없을 때 : #ff6347
투명도 설정 있을 때 : rgba(r, g, b, 투명도)
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.back-green {
background-color: #00FF00;
}
.back-blue-5 {
background-color: rgba(0,0,255,0.2);
}
</style>
</head>
<body>
<p class="back-green">green test</p>
<p class="back-blue-5">blue test</p>
</body>
</html>
5. Margin / Border / Padding / Content
- Padding - 안쪽 여백
- Border - 테두리
- Margin - 바깥 여백
6. grid 속성 : https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php
- 행 열을 몇대 몇으로 나눌수있다.
행을 위아래로 2:12로 나누고 싶으면,
<div class="row">
<div class="col-sm-2">
내용 1
</div>
<div class="col-sm-12">
내용 2
</div>
</div>나눈 div안에서 grid 속성으로 또 나눌수있다.
7. flex 속성 : https://www.w3schools.com/bootstrap5/bootstrap_flex.php
'HTML, CSS, JS' 카테고리의 다른 글
| 팝업창 해상도 상관없이 컨텐츠 너비/높이 (0) | 2025.02.10 |
|---|---|
| [JQuery] checkBox type인 input 활용 (0) | 2024.11.26 |
| JQuery (0) | 2024.11.01 |