CSS(Cascading Style Sheets)
- 웹페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
✔️ 참고
MDN
https://developer.mozilla.org/ko/
CSS문법
- HTML 문서 <head> 요소 안에 <Style> 요소를 사용하여 CSS문법을 적용
선택자 { 속성명1: 속성값1; 속성명2: 속성값2; ... }
예) p{ text-align: center; color: deepskyblue; }
- ---------- ------
선택자 속성명 속성값 - 주석문 쓰는법
/* 내용 입력 */
CSS를 적용하는 방법
1. 인라인 스타일
- HTML 요소 내부에 Style속성을 사용하여 적용하는 방법
<p style ="text-align: center; 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;">HTML 요소 내부에 Style속성을 사용하여 적용하는 방법</p>
</body>
</html>
2. 내부 스타일
- HTML 문서의 <head> ~ </head> 사이에 <style> ~ </style> 요소를 사용하여 적용하는 방법
<style>
h2 { text-align: center; font-size: 50px; color: palevioletred;}
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; }
ul { list-style: none;}
li { display: inline-block; margin-right: 50px; font-weight: bold; color: palevioletred;}
</style>
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>
3. 외부 스타일
- 웹사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법
<link rel="stylesheet" href="css파일 경로">
예제코드
저장된 파일 -> # css.css
h2 { font-size: 50px; } /* h2 요소의 사이즈를 50px로 설정 */
ul { list-style: none;}
li { display: inline-block; margin-right: 50px; font-weight: bold; color: palevioletred;}>외부에 스타일 정해두기!
<!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>
<link rel="stylesheet" href="./CSS/css.css">
</head>
<body>
<h2>CSS를 적용하는 방법</h2>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
</html>> 외부에서 스타일 받아와서 적용하기!
✔️ rel
현재 문서와 링크된 문서 사이의 연관 관계를 명시
'KDT 수업 > HTML | CSS' 카테고리의 다른 글
| [CSS]선택자의 종류2 (0) | 2023.03.30 |
|---|---|
| [CSS]선택자의 종류1 (0) | 2023.03.30 |
| [HTML] day2: 하이퍼링크/책갈피 (0) | 2023.03.24 |
| [HTML] day1 (+ 추가) 파일 경로 작성방법 (0) | 2023.03.24 |
| [HTML] day1: HTML 태그 (2) | 2023.03.23 |