CSS(Cascading Style Sheets) 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능이다.
선택자를 사용해서 특정한 HTML 태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용할 수 있다.
| 선택자 종류 | 선택자 형태 |
| 전체 선택자 | * |
| 태그 선택자 | 태그 |
| 아이디 선택자 | #아이디 |
| 클래스 선택자 | .클래스 |
| 후손 선택자 | 선택자 선택자 |
| 자손 선택자 | 선택자>선택자 |
| 속성 선택자 | 선택자[속성=값] |
| 선택자[속성~=값] | |
| 선택자[속성|값] | |
| 선택자[속성^=값] | |
| 선택자[속성$=값] | |
| 선택자[속성*=값] | |
| 동위 선택자 | 선택자 + 선택자 |
| 구조 선택자 | 선택자 ~ 선택자 |
| 선택자:first-child | |
| 선택자:last-child | |
| 선택자:nth-child(수열) | |
| 선택자:nth-last-child(수열) | |
| 선택자:first-of-type | |
| 선택자:last-of-type | |
| 선택자:nth-of-type(수열) | |
| 선택자:nth-last-of-type(수열) |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
/*
*{
color : darkorange
}
*/
/* p,h3 {
color : red
}
#p1{
background: black;
}
.kh{
background: yellow;
}
.test{
color : blue;
}
*/
h5[class=kh]{
color: red;
}
p[id=p1]{
color : blue;
}
</style>
<h1 class="kh test"> Test1 </h1>
<h3> Test2 </h3>
<h5 class="kh"> Test3 </h5>
<h5> Test3 copy</h5>
<p id ="p1"> Test4 </p>
<p class="kh test"> Test5 </p>
<hr><hr>
<style>
div>h1{
color: red;
}
div li{
background: pink;
}
div>ul>li{
color : darkcyan
}
</style>
<div>
<h1>테스트1</h1>
<h2>테스트2</h2>
<ul>
<li>테스트3</li>
<li>테스트4</li>
</ul>
<br><br><hr>
</div>
<style>
.div-test > h4 + h5{
color : red;
}
.div-test > h4 ~ p{
background: pink;
}
</style>
<div class = 'div-test'>
<h4>자손1</h4>
<h5>자손2</h5>
<p>자손3</p>
<p>자손4</p>
<p>자손5</p>
</div>
<hr><hr>
<style>
#active-test,#hover-test{
width: 200px;
height: 200px;
background: orange;
}
#active-test:active{
background: yellow;
}
#hover-test:hover{
background: blue;
}
</style>
<div id = "active-test"></div>
<br><br>
<div id = "hover-test"></div>
<hr><hr>
<style>
input:focus{
background: skyblue;
}
input:checked{
height: 20px;
width: 20px;
}
</style>
<fieldset>
<legend>회원 정보 입력</legend>
이름 :<input type="text"><br>
나이 :<input type="text"><br><br>
성별 :
남자<input type="radio" name ="gender">
여자<input type="radio" name ="gender">
<br><br>
취미 :
게임<input type="checkbox">
운동<input type="checkbox">
기타<input type="checkbox">
</fieldset>
<br><br>
<style>
option:enabled{
color:blue;
}
option:disabled{
background: red;
}
</style>
<fieldset>
<legend>회원가입(19세 이하 가입 불가)</legend>
id : <input type="text"><br>
pw : <input type="password"><br>
이름 : <input type="text"><br>
나이 :
<select>
<option value="10" disabled>10대
</option>
<option value="20">20대
</option>
<option value="30">30대
</option>
<option value="40">40대
</option>
<option value="50">50대
</option>
<option value="60">60대
</option>
</select>
</fieldset>
<style>
#div-test1 p:first-child{
color:rebeccapurple;
}
#div-test1 p:last-child{
color:darkcyan;
}
#div-test1 p:nth-child(2){
color:thistle;
}
#div-test1 p:nth-last-child(2){
color:antiquewhite;
}
</style>
<div id ="div-test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
</div>
<hr>
<style>
#div-test2 p:first-of-type{
color:blue;
}
#div-test2 h4:first-of-type{
color:red;
}
#div-test2 p:last-of-type{
color: firebrick;
}
#div-test2 h4:last-of-type{
color: darkviolet;
}
#div-test2 p:nth-of-type(3){
color: darkorange;
}
#div-test2 h4:nth-last-child(3){
background: red;
}
</style>
<div id = "div-test2">
<p>테스트1 입니다.</p>
<h4>테스트1입니다.</h4>
<p>테스트2 입니다.</p>
<h4>테스트2입니다.</h4>
<p>테스트3 입니다.</p>
<h4>테스트3입니다.</h4>
<p>테스트4 입니다.</p>
<h4>테스트4입니다.</h4>
<p>테스트5 입니다.</p>
<h4>테스트5입니다.</h4>
</div>
<hr>
<style>
:link{
color: red;
}
:visited{
color:green;
}
</style>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.iei.or.kr">kh</a>
<hr>
<style>
#letter-test::first-letter{
font-size:2em;
}
#letter-test::first-line{
background: yellow;
}
#letter-test::selection{
color: red;
}
</style>
<p id ="letter-test">테스트입니다<br>
잘나올까요?</p>
<br>
<style>
p:not(#not_test1){
color: blue;
}
</style>
<p id="not_test1">테스트1</p>
<p id="not_test2">테스트2</p>
<p id="not_test3">테스트3</p>
<p id="not_test4">테스트4</p>
<p id="not_test5">테스트5</p>
</body>
</html>
Test1
Test2
Test3
Test3 copy
Test4
Test5
테스트1
테스트2
- 테스트3
- 테스트4
자손1
자손2
자손3
자손4
자손5
테스트1
테스트2
테스트3
테스트4
테스트5
테스트1 입니다.
테스트1입니다.
테스트2 입니다.
테스트2입니다.
테스트3 입니다.
테스트3입니다.
테스트4 입니다.
테스트4입니다.
테스트5 입니다.
테스트5입니다.
테스트입니다
잘나올까요?
테스트1
테스트2
테스트3
테스트4
테스트5
<수업내용>
@ CSS
-> cascading style sheets의 약자
-> 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트
p {
background : red;
}
p :선택자
backgroud : style 속성
red : style 값
-> p 태그의 배경색을 red로 설정
@CSS_선택자
선택자의 종류
#전체 선택자 : *
-> <html>에 있는 모든 태그에 적용되는 스타일
#태그 선택자 : 태그명, p, h1...
-> 특정 태그에 적용되는 스타일
#아이디 / 클래스 선택자
아이디 선택자 : 태그 속성 id를 설정하고 id값을 선택자로 하는 것(#)
클래스 선택자 : 태그 속성 class를 설정하고 class값을 선택자로 하는 것(.)
#속성 선택자
-> 태그 선택자와 함께 사용하는 선택자로 선택자 뒤에 [ ]를 사용하여 속성과 속성 값을 사용
#후손 선택자 / 자손 선택자
-> 후손 내 아래 모든 것 ( ) 공백
-> 자손은 내 직속 아래 (>)
# 동위 선택자(형제관계)
-> 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
동위 선택자 a + 동위 선택자 b : a선택자 바로 뒤에 있는 한 개의 선택자만 선택
동위 선택자 a ~ 동위 선택자 b : a선택자 바로 뒤에 있는 선택자 b모두
# 반응 선택자 -> 사용자의 움직임에 따라 달라지는 선택자
선택자:active -> 사용자가 클릭한 태그
선택자:hover -> 사용자의 마우스가 올라가 있는 태그 선택
#상태 선택자 -> 입력 양식의 상태에 따라 선택되는 선택자
input 태그 : checked -> 체크가 되었다면,
input태그 : focus -> 초점이 맞추어진 input태그
option 태그:enabled -> 사용 가능한 option태그
option 태그:disabled -> 사용 불가능한 option 태그
#일반구조 선택자
-> 특정한 위치에 있는 태그를 선택(위치로 구분)
first-child ->형제관계 태그 중 첫 번째 태그
last-child ->형제 관계 태그 중 마지막 태그
nth-child(수열) ->형제 관계 태그 중 앞에서 수열 번째 태그
nth-last-child(수열) ->형제 관계 태그 중 뒤에서 수열번째 태그
#형태 구조 선택자 -> 특정한 위치에 있는 태그를 선택(태그별로 구분)
first-of-type ->형제 관계 태그 중 첫 번째 태그
last-of-type ->형제 관계 태그 중 마지막 태그
nth-of-type(수열) ->형제 관계 태그 중 앞에서 수열 번째 태그
nth-last-of-type(수열) ->형제 관계 태그 중 뒤에서 수열번째 태그
#링크 선택자
-> 링크(href)가 걸려 있는 태그를 선택하는 선택자 (Hyper text REFerence)
#문자 선택자 -> 태그 내부에서 특정 조건의 문자를 선택하는 선택자
선택자::first-letter : 첫 번째 글자
선택자::first-line : 첫 번째 줄
선택자::selection : 사용자가 드래그한 글자
#부정 선택자 -> 지금까지 선택자에 대해 반대로 적용하는 선택자
CSS 우선순위 -! important > 인라인 > id > class > 스타일태그 (! important 사용 ㄴㄴ)
@CSS 단위
상대크기
->em : 부모 요소의 크기가 기준, 2배 : 2em, 1.5배 : 1.5em
->rem: 최상위의 부모요소의 크기가 기준
->% : 기본 설정된 크기에서 상대적으로 크기 설정
절대 크기
->px : 기본 지정된 크기
->pt : 기본 지정된 크기 포인트
※ http://pxtoem.com/사이트 참조
@색상 표현
영문 색 이름 : 영문으로 색이름을 작성
->red, black, blue 등등
16진수 표현 : RGB 값을 16진수로 변환하여 작성
->#ff0000(빨간색) -> #f00
rgb/rgba : RGB 값은 0~255로 입력
->rgb(255,0,0)
rgba -> rgb와 동일한 색상 마지막 자리가 투명도(0 이면 투명, 1이면 불투명) rgba(255,0,0,0.5)
## 글꼴 속성 ##
@font-family
-> 폰트의 글꼴을 설정해주는 속성
-> 글꼴 이름 1이 없으면 글꼴 2, 글꼴 3으로 선택되어 설정
-> 글꼴이 전부 다 없는 경우 브라우저 기본 글꼴 적용 선택자{font-familiy : 글꼴 1, [글꼴 2, 글꼴 3];} https://fonts.google.com/
@font-size
->글자의 크기를 조절하는 속성 단위 : em, rem, px, pt, ex
※ ex : 현재 소문자 x의 크기 배수 선택자{font-size: 숫자 단위;}
@font-weight
-> 글자의 굵기 조절
구분 값
normal : 기본값
bold : 굵게
bolder : 더 굵게
lighter : 가늘게
100 ~ 900 : 400 normal, 700 bold
@font-variant
-> 소문자 영어를 작은 대문자로 표시해주는 속성
@font-style -> 글자를 이탤릭체로 표시하는 속성 선택자{font-style : normal or italic or oblique;}
@font
-> 글꼴 속성을 모아서 표현할 수 있는 스타일 속성
-> font-size, font-family는 반드시 적어야 함(나머지는 생략 가능 = 기본값 적용)
선택자{font : font-style font-variant font-weight font-size/line-height font-family;}
@color
-> 글자의 색을 지정하는 속성 선택자{ color : 색상;}
->색상은 영문, 16진수, rgb, rgba 모두 가능
@text-decoration
-> 글자에 밑줄을 긋거나, 취소선을 긋거나, 윗선을 긋거나, 밑줄을 표시하지 않는 속성
none : 줄 삭제
underline : 밑줄 표시
overline : 윗줄 표시
line-through : 취소선 표시
@text-transform
->영문자 표시할 때 대소문자 변환
none : 변환 없이 표시
capitalize : 시작하는 첫 번째 글자를 대문자로 변환 uppercase : 모든 글자를 대문자로 변환
lowercase : 모든글자를 소문자로 변환
@text-shadow
-> 텍스트에 그림자 효과를 주는 속성
none : 그림자 표현 안 함
가로 값, 세로 값, 번짐값, 색상값
가로값 : 그림자가 가로로 얼마나 떨어져 있는지를 지정(양수 오른쪽, 음수 왼쪽)
세로값 : 그림자가 세로로 얼마나 떨어져 있는지를 지정(양수 글자 아래, 음수 글 자위)
번짐 값 : 그림자의 번지는 정도를 지정
색상값 : 그림자 색상을 지정
@ white-space
-> 공백을 처리해 주는 속성
normal : 여러 개의 공백을 하나로 표시
nowrap : 여러 개 공백 한 개 표시, 줄 바꾸지 않고 한 줄 표시
pre : 여러 개 공백 그대로 표시, 한 줄로 표시
pre-line : 여러 개 공백 한 개 표현, 영역 넘어가면 자동 줄 바꿈
pre-wrap : 여러 개 공백 그대로 표현, 영역 넘어가면 자동 줄 바꿈
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트) (0) | 2019.09.19 |
|---|---|
| <이공계기술전문연수> 9. CSS 스타일 속성 기본(1)(크기, 색상, 가시, 박스, 테두리) (0) | 2019.09.19 |
| <이공계기술전문연수> 7. HTML textarea 태그 / select 태그 / fieldset태그 / legend 태그 / 공간 분할 태그 (0) | 2019.09.10 |
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
| <이공계전문기술연수> 5. HTML 이미지 태그 / 오디오 태그 / 비디오 태그 (0) | 2019.09.09 |
