1. CSS란?
- html 태그를 디자인하기 위해서 사용하는 언어이다.
📌세 가지 언어의 역할:
html: 웹페이지의 기본 틀 (뼈대)를 구성하는 역할
css: 웹페이지를 꾸며주는 역할
Javascript (JS): 동작들을 표현
1.1 문법
2. CSS 사용 위치
2.1 사용법
- 사용법은 크게 3가지로 css의 위치에 따라 Inline css, Internal css, External css으로 구분한다.
(1) Inline css
<!DOCTYPE html>
<html>
<body>
<h1 style="color;yellow;text-align:center;">인라인스타일</h1>
<p style="color:blue;">속성 옆에 css를 기술한다.</p>
</body>
</html>(2) Internal css
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
}
h1 {
color: blue;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>내부스타일</h1>
<p>같은 파일 style 태그안에 기술한다.</p>
</body>
</html>(3) External css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>외부 스타일 시트</h1>
<p>외부 .css파일에 기술해서 사용한다.</p>
</body>
</html>3. FONT관련 CSS
- 기본적으로 윈도우즈에서 지원하는 폰트는 등록없이 바로 사용할 수 있지만 지원하지 않는 폰트는 따로 설정해야한다.
구글을 이용하여 폰트를 등록해보자
https://fonts.google.com/
해당 링크를 head태그에 기술하고 적용할 style태그에 클래스를 나누어 적용한다.
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
.h1 {
font-family: 'Anton', sans-serif;
font-size:50px;
}
.p1 {
font-family: 'Anton', sans-serif;
font-size:20px;
}
.p2 {
font-family: 'Anton', sans-serif;
font-size:30px;
}
.p3 {
font-family: 'Anton', sans-serif;
font-size:40px;
}
</style>
</head>
<body>
<h class="h1">TEST</h1>
<p class="p1">sans-serif test1</p>
<p class="p2">sans-serif test2</p>
<p class="p3">sans-serif test3</p>
</body>
</html>
4. TEXT관련 CSS
background-color : 배경색을 변경한다.
color : 문자의 색상을 변경한다.
body {
background-color: Yellow;
color: rgb(0,255,255,0.5);
}
p {
background-color: blue;
color: #0000ff;
}text-decoration : 문자에 라인을 그음.
text-align : 문자 정렬위치 설정.
5. 기본 선택자
CSS 선택자를 확인해보자
| 선택자 | 형식 | 설명 |
|---|---|---|
| 전체 선택자 | ⁕ | 모든 태그에 스타일을 적용한다. |
| 태그 선택자 | 태그 | 기술한 태그에 스타일을 적용한다. |
| 아이디 선택자 | #아이디 | 특정 아이디가 적용된 태그에 스타일을 적용한다. |
| 클래스 선택자 | .클래스 | 특정 클래스가 적용된 태그에 클래스를 적용한다. .class1{} |
| 태그중클래스 | 태그,클래스 | 선택된 태그 중 해당 클래스를 가지고 있는 태그만선택 |
| 다중 태그 | 태그,태그 | 여러 다른 태그에 스타일을 적용하고 싶을 때 사용 p,h1 {} |
전체 선택자 *은 모든 태그가 선택되어 적용된다.
*{ color:red}
<h1>선택</h1>
<p>선택<span>선택</span></p>태그 선택자는 기술한 태그에만 스타일이 적용된다.
p{ color:red}
67
<h1>선택안됨</h1>
<p>선택<span>선택되지 않으나 p태그에 영향을 받음</span></p>
<h2>선택안됨</h2>
<h5>선택안됨</h5>
아이디 선택자는 유일한 하나의 태그를 식별하여 사용한다.
#id1{ color:red}
#id2{ color:blue}
<h1 id= ‘id1’>red선택됨</h1>
<p>선택안됨<span>선택안됨</span></p>
<h2>선택안됨</h2>
<h5 id= ‘id2’>blue선택됨</h5>클래스 선택자는 여러 개의 요소를 대상으로 정할 수 있습니다.
.class1{ color:red}
.class2{ color:blue}
<h1 class= ‘class1’>red선택됨</h1>
<p>선택안됨<span class= ‘class1’>red선택됨</span></p>
<h2>선택안됨</h2>
<h5 class= ‘class2’>blue선택됨</h5>헷갈릴 때 w3schools을 참고하자.......
