CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
HTML 문서요소 안에요소를 사용하여 적용하는 방법
<head> <style> p { text-align: center; color: blue;} </style> </head>
- 외부 스타일
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법✔rel
현재 문서와 링크된 문서 사이의 연관관계를 명시<head> <link rel='stylesheet' href=' css 파일 경로'> </head>
선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용하여 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 부하를 줄 수 있음
- 개졀적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음
* {속성명: 속성값; 속성명2: 속성값;..}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택자</title>
<style>
* {color: deepskyblue; }
h2 {color: deeppink; font-size: 50px; }
</style>
</head>
<body>
<h2>전체 선택자</h2>
<ol>
<li>스타일을 모든 요소에 적용</li>
<li>* 기호를 사용하여 표현</li>
<li>너무 많은 요소가 있는 HTML 문서에 사용할 경우 부하를 줄 수 있음</li>
</ol>
</body>
</html>
2. 요소 선택자
* 특정 요소가 쓰인 모든 요소에 스타일을 적용<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
</body>
</html>
✔ 상속
부모 요소의 속성값이 자식 요소에게 전달되는 것
<p>
<span>
span 요소
</span>
</p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상속</title>
<style>
div {
color: deeppink; /* 상속됨 */
border: 3px dotted blue; /* 상속 안됨 */
}
</style>
</head>
<body>
<h2>상속</h2>
<div>
div 영역
<h3>상속이란</h3>
<p>부모 요소의 속성값이 자식 요소에게 전달되는 것</p>
</div>
</body>
</html>
3. id 선택자
- 웹문서안의 특정 부분 스타일을 적용
- # 기호를 사용하여 id 속성을 가진 요소에 스타일을 적용
[HTML]
<h2 id='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
[CSS]
h2 {font-size: 30px; } /* "안녕하세요", "반갑습니다" 모두 글자 크기를 30px로 적용 */
h2#hello {font-size: 20px; } /* "안녕하세요" 글자 크기를 20px 로 적용 */
#hello {color: pink; } /* "안녕하세요" 글자 색상 pink로 적용 */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id 선택자</title>
<style>
#container {
background-color: gold;
padding: 20px;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
}
#header {
background-color: deepskyblue;
width: 200px;
height: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<h2>id 선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html>
4. class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- .기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
[HTML]
<h2 calss='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
<p class='hello'>Hello!</p>
<p>또 만났군요</p>
[CSS]
h2 { font-size: 20px; } /* "안녕하세요", "반갑습니다" 글자 크기를 20px 적용*/
.hello { color: deeppink; } /* "안녕하세요", "Hello!" 글자 색상을 deeppink로 적용 */
h2.hello { font-weight: bold; } /* "안녕하세요" 글자 두께를 blod로 적용*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class 선택자</title>
<style>
#bigText { font-size: 50px; }
.smallText { font-size: 14px; }
.redText { color: red; }
.blueText { color: blue; }
</style>
</head>
<body>
<h2 id="bigText">class 선택자</h2>
<p><span class="smallText redText">특정 집단의 요소를 한번에 스타일을 적용</span></p>
<p><span class="smallText blueText">.기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용</span></p>
</body>
</html>
5. 그룹 선택자
- 여러개의 선택자를 나열하여 스타일을 적용
- ,(콤마)로 구분
h2, p { text-align: center; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그룹 선택자</title>
<style>
* { text-align: center; }
h2 { font-size: 50px; }
h3 { font-size: 30px; }
p, li { font-size: 20px; }
li { display: inline-block; margin-right: 40px; font-weight: bold; color: deeppink; }
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 선택자를 나열하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체 선택자</li>
<li>요소 선택자</li>
<li>아이디 선택자</li>
<li>클래스 선택자</li>
<li>그룹 선택자</li>
</ul>
</body>
</html>
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다!!!</p>
<p>자식/자손 선택자 예제
</body>
</html>html 의 자식은 head,body 이고
head 와 body는 형제 관계 이다.
head 의 자식은 title,
body 의 자식은 h2, p 이다.
h2의 자식은 HTML의 구조,
p태그의 자식은 HTML의, , 입니다!!!
b태그의 자식은 구조 이다.
6. 자식 선택자
- 부모의 요소 하위의 자식 요소의 스타일을 적용
body > p { color: deepskyblue; } /* body 바로 밑의 p태그 에만 적용 */
7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p { color: deepskyblue; } /* body 밑의 모든 자식을 포함 p태그에 적용*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 자손 선택자</title>
<style>
ul > a { font-size: 30px; }
ul a { color: deeppink;}
</style>
</head>
<body>
<h2>자식 자손 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li><a href="https://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="https://www.nate.com">네이트</a></li>
</ul>
</body>
</html>
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식의 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2 + p { color: deepskyblue; }
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p { color: deeppink; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>형제 선택자</title>
<style>
h3 + p { background-color: deeppink;}
h3 ~ p { color: green;}
p + span { background-color: aqua;}
h3 ~ span { color: gray;}
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
</html>
10. 속성 선택자
- HTML 요소에서 src, href, style, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
[HTML] <img src='apple.png' alt='사과 이미지'> <img src='banana.png' alt='바나나 이미지'> [CSS] [src] { border: 3px solid red; } [src='banana.png'] { border: 3px solid red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
[href] { text-decoration: none; color: deeppink;}
[title] { text-align: center; font-size: 50px;}
.attr { background-color: gold;}
[class='attr'] { font-size: 30px;}
</style>
</head>
<body>
<h2 title="h2 요소의 title 속성">속성 선택자</h2>
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>
11. 가상 선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
[HTML] <ul> <li>김사과</li> <li>반하나</li> <li>오렌지</li> <li>이메론</li> </ul> [CSS] ul > li:first-child /* ul 자식 중 li 요소 중에서 첫번째 해당하는 li 요소의 스타일을 적용 */ ul > li:nth-child(n) /* ul 자식 중 li 요소 중에서 n번째 해당하는 li 요소의 스타일을 적용 */ ul > li:ntn-child(even) /* ul 자식 중 li 요소 중에서 짝수번째 해당하는 li 요소의 스타일을 적용 */ ul > li:ntn-child(odd) /* ul 자식 중 li 요소 중에서 홀수번째 해당하는 li 요소의 스타일을 적용 */ ul > li:last-child /* ul 자식 중 li 요소 중에서 마지막에 해당하는 li 요소의 스타일을 적용 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상 선택자</title>
<style>
.list > li:first-child {
color: deeppink;
}
.list > li:nth-child(2) {
color: gold;
}
.list > li:nth-child(odd) {
background-color: greenyellow;
}
.list > li:nth-child(even) {
background-color: black;
}
.list > li:last-child {
color: white;
}
</style>
</head>
<body>
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
✔ 스타일링 링크
a:link
하이퍼링크가 연결되었을 때 선택
a:visited
특정 하이퍼링크를 방문한적이 있을 때 선택
a:hover
특정 요소에 마우스를 올렸을 때 선택
a:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일링 링크</title>
<style>
a:link {
text-decoration: none; color: greenyellow;
}
a:visited {
text-decoration: none;
color: deepskyblue;
}
a:hover { text-decoration: underline; }
a:active {
text-decoration: underline;
color: red
}
</style>
</head>
<body>
<h2>스타일링 링크</h2>
<p><a href="https://python.org">파이썬 공식 사이트</a></p>
</body>
</html>
