CSS 기초 - 웹 스타일링의 핵심
CSS 색상 적용 방법
1. 인라인 스타일 (Inline Style)
HTML 태그에 직접 스타일 속성으로 색깔 지정
1
| <h1 style="color: red">hello</h1>
|
2. 내부 스타일 (Internal Style)
head 태그 안의 style 태그에 색깔 지정
1
2
3
4
5
6
7
| <head>
<style>
h2 {
color: blue;
}
</style>
</head>
|
3. 외부 스타일 (External Style)
CSS 파일을 따로 만들어서 link 설정하여 태그별로 연결
1
| <link rel="stylesheet" href="./mystyle.css">
|
우선순위: 태그가 같더라도 #id로 지정해주면 id가 우선
CSS 선택자
Class 선택자
1
2
| <!-- HTML -->
<p class="hello">하나</p>
|
1
2
3
4
| /* class 선택자 */
.hello {
color: purple;
}
|
ID 선택자
1
2
3
4
5
| /* id 선택자 */
#here {
color: gold;
background-image: url('./assets/image/background.jpg');
}
|
태그의 Class 선택자
1
| <p class="center">three</p>
|
1
2
3
4
| /* p의 class 선택자 */
p.center {
text-align: center;
}
|
태그의 ID 선택자
1
| <p class="center" id="size">one</p>
|
1
2
3
4
| /* p의 id 선택자 */
p#size {
font-size: 50px;
}
|
하위 선택자 (Descendant Selector)
1
2
3
4
5
| <ul class="english">
<li>python</li>
<li>HTML</li>
<li>CSS</li>
</ul>
|
1
2
3
4
| /* ul의 class 선택자의 li 모두 */
ul.english > li {
color: royalblue;
}
|
Border (테두리)
개별 속성
1
2
3
| border-width: 2px;
border-style: dashed;
border-color: bisque;
|
축약 속성
1
| border: 2px dashed bisque; /* 위 세개를 한 번에 축약 가능 */
|
사용 예시
1
2
3
4
5
6
7
| .korean {
/* border-width: 2px;
border-style: dashed;
border-color: bisque; */
border: 2px dashed bisque;
border-radius: 5px;
}
|
Border Radius
1
| border-radius: 5px; /* 모서리를 둥글게 */
|
Margin (여백)
개별 속성
축약 속성
1
| margin: 25px 50px 75px 100px; /* top right bottom left */
|
사용 예시
1
2
3
4
| .english {
/* margin-top: 50px; */
margin: 25px 50px 75px 100px;
}
|
Font (폰트)
Google Fonts 활용
Google Fonts에서 다양한 폰트를 무료로 사용할 수 있습니다.
폰트 적용 방법
1
2
| <!-- Google Fonts 링크 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
|
1
2
3
4
| /* CSS에서 폰트 적용 */
body {
font-family: 'Roboto', sans-serif;
}
|
CSS 우선순위
- 인라인 스타일 (가장 높음)
- ID 선택자
- Class 선택자
- 태그 선택자 (가장 낮음)
우선순위 예시
1
| <p class="text" id="special" style="color: red;">텍스트</p>
|
1
2
3
4
| p { color: black; } /* 우선순위: 1 */
.text { color: blue; } /* 우선순위: 10 */
#special { color: green; } /* 우선순위: 100 */
/* 인라인 스타일이 가장 높은 우선순위 */
|
실무 팁
1. CSS 파일 구조화
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| /* Reset/Normalize */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Typography */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Components */
.button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
|
2. 반응형 디자인
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /* 모바일 우선 접근법 */
.container {
width: 100%;
padding: 10px;
}
/* 태블릿 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 데스크톱 */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
|
3. CSS 변수 활용
1
2
3
4
5
6
7
8
9
10
| :root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size-base);
}
|