CSS3
CSS3 (Cascading Style Sheets)
원2
2021. 5. 4. 14:50
728x90
반응형
l CSS의 사용 위치
:: 여기서 코드의 p는 선택자.
외부 CSS 코드
@charset "EUC-KR";
p3{
color: green;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<!-- 외부 스타일 스티 적용 방법 -->
<link type="text/css" rel="stylesheet" href="01_cssstyle_external.css"><link/>
<style>
p2{
color: blue;
}
</style>
<meta charset="EUC-KR">
<title>스타일 시트 사용위치 확인하기</title>
</head>
<body>
<!-- 인라인 스타일 시트 적용 방법 -->
<p1 style="color: red;">인라인 스타일 시트 적용</p1><br>
<p2>내부 스타일 시트 적용</p2><br>
<p3>외부 스타일 시트 적용</p3><br>
</body>
</html>
- 하나의 요소에 인라인 스타일 시트가 중복 정의되면 제일 마지막에 설정된 값이 적용
- CSS 적용 우선순위와 상관없이 속성을 강제로 적용할 때는 (!important) 표시 사용
l
l CSS의 우선순위
:: 제일 마지막 값이 적용된다.
:: 강제로 적용할 때는 (!important) 사용
외부 CSS 코드
@charset "EUC-KR";
P{
color: green;
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<!-- 외부 스타일 시트를 정의하는 위치가 중요 -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
<style>
p {
color: blue;
}
p{
color: yellow;
}
p{
color: red;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>l CSS의 우선순위-2-
@charset "EUC-KR";
P{
color: green;
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
p {
color: yellow;
}
P {
color: red;
}
</style>
<!-- 외부 스타일 시트를 정의하는 위치가 중요(최종 적용) -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>l CSS의 우선순위-3-
@charset "EUC-KR";
P{
color: green;
background-color: yellow;
}<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue!important;
}
p {
color: yellow;
}
p {
color: red;
}
</style>
<!-- 외부 스타일 스트를 정의하는 위치가 중요(최종 적용) -->
<link type="text/css" rel="stylesheet" href="02_css_override.css"></link>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<p>CSS가 중복 정의된 경우 어떤 것이 적용될까?</p>
</body>
</html>
기본 선택자
전체 선택자 ㅣㅣ *{속성선언;}
타입 선택자 ㅣㅣ 태그 {속성선언;}
클래스 선택자 ㅣㅣ 태그 .클래스 이름 {속성선언;}는 n번 사용
아이디 선택자 ㅣㅣ #아이디 {속성선언;} 는 1번 사용
속성 선택자 ㅣㅣ [속성] {속성선언;} /// [속성 = 값] {속성선언;}
전체 선택자
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red;
background-color: yellow;
font-size: 13px;
}
</style>
<meta charset="EUC-KR">
<title>전체 선택자 사용하기</title>
</head>
<body>
<h1>Universal Selector</h1>
<h2>전체적으로 동시에 스타일 적용</h2>
<p>모든 데이터에 적용</p>
</body>
</html>
태그 선택자
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: yellow;
}
h2 {
background-color: green;
}
h3 {
background-color: pink;
}
p {
color: red;
}
</style>
<meta charset="EUC-KR">
<title>타입 선택자 사용하기</title>
</head>
<body>
<h1>Type Selector</h1>
<h2>Type Selector</h2>
<h3>Type Selector</h3>
<p>각 요소에 다르게 적용</p>
</body>
</html>
클래스 선택자 사용하기
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
color: blue;
background-color: yellow;
}
.class2 {
color: red;
background-color: green;
}
h3.class1 {
color: navy;
background-color: pink;
}
</style>
<meta charset="EUC-KR">
<title>클래스 선택자 사용하기</title>
</head>
<body>
<h1 class="class1">Class1 입니다.</h1>
<p class="class1">Class1 입니다.</p>
<h1 class="class2">Class2 입니다.</h1>
<p class="class2">Class2 입니다</p>
<h3 class="class1">Element+Class Selector</h3>
</body>
</html>ID 선택자
<!DOCTYPE html>
<html>
<head>
<style>
#id1 {
color: blue;
background-color: pink;
}
#id2 {
color: blue;
background-color: yellow;
}
h2#id1 {
color: red;
background-color: green;
}
</style>
<meta charset="EUC-KR">
<title>ID 선택자 사용하기</title>
</head>
<body>
<h1 id="id1">ID1 선택자</h1>
<p id="id1">ID1 선택자</p>
<h1 id="id2">ID2 선택자</h1>
<p id="id2">ID2 선택자</p>
<h2 id="id1">Element+ID Selector</h2>
</body>
</html>
속성선택자
여기서 text:attr1 , 2 는 의미없음.
<!DOCTYPE html>
<html>
<head>
<style>
h1[text] {
color: red;
background-color: gray;
}
p[text] {
color: blue;
background-color: yellow;
}
h1[text="attr3"] {
color: green;
background-color: pink;
}
</style>
<meta charset="EUC-KR">
<title>속성 선택자 사용</title>
</head>
<body>
<h1 text="attr1">text 속성 이름 선택자</h1>
<h1 text="attr2">text 속성 이름 선택자</h1>
<p text="attr3">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<p>속성 선택 없음</p>
</body>
</html>
속성 선택자 사용 형식
<!DOCTYPE html>
<html>
<head>
<style>
p[text] {
color: red;
}
p[text="red"] {
color: yellow;
background-color: purple;
}
p[text~="bb"] {
color: yellow;
background-color: green;
}
p[text|="a1"] {
color: yellow;
background-color: blue;
}
p[text^="img"] {
color: yellow;
background-color: red;
}
p[text$=".png"] {
color: yellow;
background-color: gray;
}
p[text*="ong"] {
color: yellow;
background-color: pink;
}
</style>
<meta charset="EUC-KR">
<title>속성 성택자 사용 형식</title>
</head>
<body>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="Gildong Hong">텍스트 패턴 매칭 속성</p>
</body>
</html>
가상선택자
l 가상 선택자
- 웹 문서에는 보이지 않지만 동작에 영향을 주는 속성을 가상 선택자로 이용
l 이벤트 가상 클래스 선택자
- 사용자가 마우스 이벤트 행위를 어떻게 하는지에 따라서 스타일 시트 다르게 적용
<!DOCTYPE html>
<html>
<head>
<style>
/* 가상 클래스 */
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
}
a:hover {
text-decoration: overline;
}
a:active {
background-color: yellow;
}
div.d1 {
border: 1px dashed red;
width: 400px;
padding: 5px;
}
div.d1:hover {
background-color: yellow;
}
div.d2 {
border: 1px dashed red;
width: 400px;
padding: 5px;
}
div.d2:hover {
background-color: green;
}
</style>
<meta charset="EUC-KR">
<title>이벤트 가상 클래스 선택자</title>
</head>
<body>
<h2>Pseudo Class</h2>
<p><a href="http://www.w3.org" target="_blink">W3C 방문</a> : 마우스 이벤트에 따른 링크의 변화를 잘 보세요.</p>
<div class="d1">
<h3>가상 클래스 1 영역</h3>
마우스 위치에따른 박스의 스타일 변화를 보세요.
</div>
<div class="d2">
<h3>가상 클래스 2 영역</h3>
마우스 위치에 따른 박스의 스타일 변화를 보세요.
</div>
</body>
</html>이벤트 가상선택자 -2-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
color: blue;
background-color: green;
opacity: 0.9;
}
/* 가상 클래스 */
div:hover {
width: 400px;
height: 50px;
color: red;
background-color: yellow;
opacity: 0.5;
transition: all 1.5s linear 0.5s;
}
</style>
<meta charset="EUC-KR">
<title>이벤트 가상 선택자 2</title>
</head>
<body>
<h2>가상 선택자</h2>
<div>
가상 클래스를 이용한 애니메이션 효과<br>
마우스가 위에 있으면 박스가 늘어나요.
</div>
</body>
</html>
ㅣ 구조적 가상 클래스 선택자
<!DOCTYPE html>
<html>
<head>
<style>
h4:first-child { /* 첫 번째 태그의 텍스트 색상*/
color: blue;
font-size: 20px;
}
h4:last-child { /* 마지막 태그의 텍스트 색상 */
color: red;
font-size: 20px;
}
h4:nth-child(2n + 1) { /* 홀수 태그 */
background-color: green;
}
h4:nth-last-child(2n) { /* 짝수 태그 */
background-color: yellow;
}
</style>
<meta charset="EUC-KR">
<title>구조걱 가상 클래스 선택자</title>
</head>
<body>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
<h4>웹 프로그래밍</h4>
</body>
</html>
l UI 요소 상태 가상 클래스 선택자
- 입력 폼의 상태를 선택할 때 사용
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
}
h2:first-letter {
font-size: 30px;
color: red;
text-transform: uppercase;
}
h3:first-line {
color: blue;
}
input:focus {
background-color: blue;
}
input:checked + div.d1 {
background-color: gray;
}
input:checked + div.d2{
background-color: black;
}
</style>
<meta charset="EUC-KR">
<title>UI 요소 상태 가상 클래스 선택자</title>
</head>
<body>
<h2>states pseudo-classes</h2>
<h3>문제) 대한민국의 수도는?</h3>
<p>정답 작성 : <input type="text"></p>
<h2>answer</h2>
힌트 보기 : <input type="checkbox">
<div class="d1">
남대문이 있는 곳이죠.
</div>
정답 보기 : <input type="checkbox">
<div class="d2">
서울
</div>
</body>
</html>l 조합 선택자
- 기존의 여러 선택자를 복합적으로 조합하는 방법을 제공
728x90
반응형