css(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS문법
- HTML 문서 <head> 요소 안에 <style> 요소를 사용하여 css문법을 적용
선택자{속성명1: 속성값; ....}
p {text-align: center;}
------ ------------ --------
선택자 속성명 속성값
css를 적용하는 방법
1. 인라인 스타일
HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<p style="text-align: center;
font-size: 50px; color: deepskyblue;">안녕</p>2. 내부 스타일 (스타일을 헤드에 넣어서 사용)
HTML 문서의 <head></head> 사이에 <style></style>요소를 사용하여 적용하는 방법
<head>
<style>
h2 {text-align: center; font-size: 50px; color: deepskyblue;"}
p {text-align: center; font-size: 20px;}
</style>
</head>3. 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경
<link href="css 파일 경로" rel"stylesheet">예시
<title>내부 스타일</title>
<style>
h2{font-size: 50px;} /*h2 요소의 사이즈를 50px로 설정*/
p{font-size: 25px;}
ul{list-style: none;}
li{color: deeppink; font-weight: bold; display: inline-block; margin-right: 30px;}
/*li 블록태그 inline 블록 면의 기능을 가짐*/
</style>
</head>
<body>
<h2>내부 스타일</h2>
<p>CSS를 적용하는 방법</p>
<ul>
<li>인라인 스타일</li>
<li>내부 스타일</li>
<li>외부 스타일</li>
</ul>
</body>
✅rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
indent-rainbow
- 들여쓰기를 컬러화시킨 익스 텐션
✅선택자✅😁😁
1. 전체 선택자
스타일을 모든 요소에 적용
*{padding:0; margin:0; } *{} 모든요소에 다 적용
✅ 개별적으로 적용한 스타일은 전체 선택자에서 적용한 스타일보다 우선시 한다.
2.요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용
<!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;}
p{color: deepskyblue;}
</style>
</head>
<body>
<h2>요소 선택자</h2>
<p>특정 요소가 쓰인 모든 요소에 스타일을 적용함</p>
<p><span>span 요소</span></p>
<p><strong>strong 요소</strong></p>
<p><ins>ins 요소</ins></p>
<p><mark>mark 요소</mark></p>
<!--p태그에 색을 넣었는데 p태그안 span strong도 색이 바뀜 상속!!-->
</body>
</html>요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용함
span 요소
strong 요소
ins 요소
mark 요소 : 형광펜 효과
상속
부모 요소의 속성값이 자식 요소에게 전달되는 것
<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>
div{
color: deeppink;
border: 3px dotted gold;
padding: 30px;
}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 속성</p>
</div>
</body>