CSS (Cascade Style Sheet (file) )
cascade: 중첩
1. 선택자의 용도와 사용법
스타일시트 : CSS로 작성된 코드
- CSS3에서 특정 HTML 태그를 선택할 때는 선택자 사용
<head>
<title>CSS3 - Style Sheet</title>
<style>
/* CSS 블록 */
h1 {
color: red;
background-color: orange;
}
</style>
</head>
<body>
<h1>CSS3 선택자 기본</h1>
</body>주요 선택자 종류
| 종류 | 형태 | ex |
|---|---|---|
| 전체 선택자 | * | * |
| 태그 선택자 | 태그 | h1 |
| 아이디 선택자 | #아이디 | #id |
| 클래스 선택자 | .클래스 | .header |
| 후손 선택자 | 선택자 선택자 | header h1 |
| 자손 선택자 | 선택자 > 선택자 | header > h1 |
우선순위: 구체적인 것 부터
id > class
태그 > 전체
2. 기본 선택자
1) 전체 선택자
* { }
<head>
<title>CSS3 - Style Sheet</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>CSS3 선택자 Wildcard~</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>2) 태그 선택자
태그 { }
<head>
<title>CSS3 - Style Sheet</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>CSS3 선택자 Wildcard~</h1>
<p>Lorem ipsum dolor sit amet.</p>
</body>- 한번에 여러 개의 선택자 사용
→ 쉼표( , ) 사용
body, p, h1, h2 {margin:0; padding:0;}
3) 아이디 선택자
#아이디 { }
- 웹 페이지 내부에서 id 속성을 중복해선 X
- 그러나 스타일시트에서는 id 속성이 중복되어도 문제 없음
<head>
<title>CSS3 - Style Sheet</title>
<style>
#header {
width: 800px;
margin: 0 auto;
background: red;
}
#wrap {
width: 800px;
margin: 0 auto;
overflow: hidden;
}
#aside {
background: blue;
width: 200px;
float: left;
}
#content {
background: green;
width: 600px;
float: left;
}
</style>
</head>
<body>
<div id="header">
<h1>#header 태그</h1>
</div>
<div id="wrap">
<div id="aside"><h1>#aside 태그</h1></div>
<div id="content">
<h1>#content 태그</h1>
</div>
</div>
</body>4) 클래스 선택자
.클래스 { }
<head>
<title>CSS3 - Style Sheet</title>
<style>
.item {
color: red;
}
.header {
background: blue;
}
</style>
</head>
<body>
<h1 class="item header">동해물과 백두산이</h1>
</body>-
태그 선택자 + 클래스 선택자
<head>
<title>CSS3 - Style Sheet</title>
<style>
li.select {
color: red;
}
</style>
</head>
<body>
<h1 class="select">제목 글자</h1>
<ul>
<li class="select">사과</li>
<li>바나나</li>
<li>오렌지</li>
<li>감</li>
</ul>
</body>3. 속성 선택자
input 태그 - type 속성에 따라 형태가 다름
→ input 태그에서 속성 선택자를 많이 사용
선택자[속성] { }
선택자[속성=값] { }
<head>
<title>Selector Basic</title>
<style>
input[type='text'] {
background: red;
}
input[type='password'] {
background: blue;
}
</style>
</head>
<body>
<form>
<input type="text" />
<input type="password" />
</form>
</body>4. 후손 선택자와 자손 선택자
1) 후손 선택자
선택자A 선택자B { }
<!-- 후손 선택자-->
<head>
<title>Selector Basic</title>
<style>
#header h1 {
color: red;
}
#section h1 {
color: orange;
}
</style>
</head>
<body>
<div id="header">
<h1>Lorem, ipsum.</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1>Lorem, ipsum.</h1>
</div>
</body>
- header 태그의 자손 h1과 h2를 선택할 경우
#header h1, h2 { } ( X )
#header h1, #header h2 { } ( O )
2) 자손 선택자
선택자A > 선택자B { }
<head>
<title>Selector Basic</title>
<style>
#header > h1 {
color: red;
}
#section > h1 {
color: orange;
}
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem, ipsum.</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>-
table 태그의 요소 선택 시 자손 선택자 사용 비추천
· table > tr > th 적용 안됨 → 가 숨겨져 있음
<head>
<title>Selector Basic</title>
<style>
table tr > th {
color: red;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<th>지역</th>
</tr>
<tr>
<td>윤인성</td>
<td>서울 특별시 어딘가</td>
</tr>
</table>
</body>5. 반응·상태·구조 선택자
1) 반응 선택자
: 사용자 반응으로 생성되는 특정한 상태를 선택
:active- 마우스로 클릭한 태그 선택 (더 상세):hover- 마우스 커서를 올린 태그 선택
<head>
<title>Selector Basic</title>
<style>
h1:hover {
color: red;
/* transition: 애니메이션 속도 조정 */
transition: 0.4s;
font-size: 40px;
}
h1:active {
color: blue;
transition: 0.4s;
font-size: 32px;
}
</style>
</head>
<body>
<h1>반응 선택자</h1>
</body>2) 상태 선택자
: 입력 양식의 상태를 선택
:checked- 체크 상태의 checkbox, radio 선택:focus- 포커스를 맞춘 input 태그 선택, 웹페이지 하나당 input 태그 하나에만 포커스 둘 수 있음:enabled- input 태그에 값을 입력할 수 있는 상태:disabled- input 태그에 값을 입력할 수 없는 상태- enabled / disabled : input 태그에 속성을 입력해야 함
<input disabled="disabled">
- enabled / disabled : input 태그에 속성을 입력해야 함
<head>
<title>Selector Basic</title>
<style>
input:enabled {
background-color: aquamarine;
}
input:disabled {
background-color: blueviolet;
}
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<h1>사용 가능</h1>
<input />
<h1>사용 불가능</h1>
<input disabled="disabled" />
</body>3) 구조 선택자
: 특정 위치에 있는 태그 선택
-
:first-child- 형제 관계에서 첫 번째로 등장하는 태그 선택 -
:last-child- 형제 관계에서 마지막으로 등장하는 태그 선택 -
:nth-child(수열)- 형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택 -
:nth-last-child(수열)- 형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택
-
:not(XYZ)- XYZ가 아닌 요소 선택 -
::before- 요소의 앞에 내용 삽입 -
::after- 요소의 뒤에 내용 삽입
<head>
<title>Selector Basic</title>
<style>
ul {
overflow: hidden;
}
li {
/* 리스트 항목의 기본 스타일을 제거 */
list-style: none;
float: left;
padding: 15px;
}
/* border-radius: 테두리 둥글게 */
li:first-child {
border-radius: 10px 0 0 10px;
}
li:last-child {
border-radius: 0 10px 10px 0;
}
/* 짝수 번째 -> 노란색 */
li:nth-child(2n) {
background-color: yellow;
}
/* 홀수 번째 -> 빨간색 */
li:nth-child(2n + 1) {
background-color: red;
}
/* 커서 올렸을 때 배경색 변경 */
li:hover {
background-color: aliceblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>first-child주의사항
<head>
<title>Selector Basic</title>
<style>
li > a:first-child {
color: red;
}
</style>
</head>
<body>
<li><a href="#">주의 사항</a></li>
<li><a href="#">주의 사항</a></li>
<li><a href="#">주의 사항</a></li>
<li><a href="#">주의 사항</a></li>
<li><a href="#">주의 사항</a></li>
</body>
: li 태그의 첫번째 자손에 하당하는 a 태그 선택 → a 태그 5개가 보두 조건 만족
li:first-child > a { }
6. CSS3 단위
- 단위를 생략하면 작동 X
- 0은 단위 생략 가능
1) 키워드 단위
- 키워드: W3C에서 미리 정의한 단어
2) 크기 단위
- 크기: CSS3에서 가장 많이 사용하는 단위
% (백분율)em (배수)px (픽셀)
3) 색상 단위
-
키워드 지정
ex) red, orange, blue.. -
rgb( ) 함수 지정
-
RGB 색상
: R / G / B 조합 - 0~255 숫자
ex) rgb(255, 255, 255);
-
RGBA 색상
: RGB 색상에 알파 값 추가 [알파: 투명도 (0.0~1.0)]
ex) rbga{255, 255, 255, 0.5); -
HEX 코드
: RGB 색상 조합을 16진수로 입력, 앞 2글자가 알파값
ex) h1 {background-color: #0096FF;}
-
4) URL 단위
: 이미지나 글꼴 파일을 불러올 때 사용
<head>
<title>CSS3 Unit</title>
<style>
body {
background-image: url('https://buly.kr/DaMXffm');
/* cover: 사진의 가장 긴 사이즈 기준으로 채우기 */
background-size: cover;
/* 반복X cover로 못 채운 부분 흰색 */
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, libero.
</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi iusto
excepturi ipsum et ipsa eveniet officia, voluptatum error molestiae?
Porro.
</p>
</body>