728x90
반응형
✔ CSS
CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을
정의하는 언어
CSS 문법
HTML 문서 <head> 요소 안에 <style> 요소를 사용하여 CSS 문법을 적용
선택자 {속성명1 : 속성값;....}
p{text=align: center; }
----- ----------- -------
선택자 속성명 속성값
주석문
/* ~ */ 사이에 내용을 입력
✔ CSS 기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
h2{ text-align: center; font-size : 50px; color : deepskyblue }
p{text-align: center; font-size : 20px}
</style>
</head>
<body>
<h2>CSS</h2>
<p>웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을
정의하는 언어</p>
</body>
</html>
✔ CSS 기본 결과
✔ CSS 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<p style= "text-align: center;font-size: 50px; color : deepskyblue;">안녕</p>
✔ 인라인 스타일 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스타일</title>
</head>
<body>
<h2 style="text-align: center; font-size : 50px; color : deepskyblue">인라인 스타일</h2>
<p style = "text-align: center; font-size : 20px">웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을
정의하는 언어</p>
</body>
</html>
✔ 인라인 스타일 결과
✔ 내부스타일
2. 내부 스타일
HTML 문서의 <head> ~ </head> 사이에 <style> ~ </style> 요소를 사용하여 적용하는 방법
<style>
h2{ text-align: center; font-size : 50px; color : deepskyblue }
p{text-align: center; font-size : 20px}
</style>
✔ 내부스타일 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스타일</title>
<style>
h2{font-size: 50px;} /* h2 요소의 사이즈를 50px로 설정*/
p{font-size: 25;}
ul{list-style: none;}
li{color: deeppink; font-weight: bold; display: inline-block; margin-right: 30px;}
</style>
</head>
<body>
<h2>내부 스타일</h2>
<p>CSS를 사용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
✔ 내부스타일 결과
✔ 외부 스타일
3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<link href="css 파일 경로" rel="stylesheet">
✔ rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
✔ 외부 스타일 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스타일</title>
</head>
<body>
<h2>외부 스타일</h2>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<p>CSS를 사용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
✔ 외부 스타일 결과
반응형
'Frontend > CSS' 카테고리의 다른 글
| CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0) | 2022.10.31 |
|---|---|
| CSS 배경 종류 (0) | 2022.10.31 |
| CSS 텍스트 종류 (0) | 2022.10.27 |
| CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상) (0) | 2022.10.27 |
| CSS (상속, 전체/ id /class 선택자) (0) | 2022.10.26 |