1. 배경 이미지 관련 속성
| 종류 | 설명 |
| background-color | 배경색 지정 |
| background-clip | 배경색이나 이미지 적용 범위 지정 |
| background-image | 배경 이미지 지정 |
| background-repeat | 배경 이미지 반복 방법 지정 |
| background-position | 배경 이미지 위치 지정 |
| background-origin | 배경 이미지를 배치할 기준 지정 |
| background-attachment | 배경 이미지를 문서에 고정 |
| background | 하나의 속성으로 배경 스타일을 한꺼번에 지정 |
| background-size | 배경 이미지 크기 조절 |
2. 선형 그라데이션 관련 속성
| 종류 | 설명 |
| 방향 | 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용. 사용할 수 있는 예약어는 left와 right, top과 bottom |
| 각도 | 그라데이션이 끝나는 각도 지정. 값은 deg로 표기 |
| 색상 중지점 | 쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정 |
3. 원형 그라데이션 관련 속성
| 종류 | 설명 | |
| 모양 | ellipse | 타원형의 그라데이션 나타내며 기본값임 |
| circle | 원형의 그라데이션을 나타냄 | |
| 크기 | closest-side | 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 함 |
| closest-corner | 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게 함 | |
| farthest-side | 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 함 | |
| 위치 | at을 앞에 붙인 후 키워드나 백분율을 사용 | |
| 색상 중지점 | 쉼표(,)로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정 | |
4. 연결 선택자
| 종류 | 형식 | 설명 |
| 하위 선택자 | 상위요소 하위요소 | 상위 요소에 포함된 모든 하위 요소를 선택 |
| 자식 선택자 | 부모요소 > 자식요소 | 부모요소에 포함된 자식요소만 선택 |
| 인접 형제 선택자 | 요소1 + 요소2 | 요소1 이후 맨 먼저 오는 형제 요소 선택 |
| 형제 선택자 | 요소1 ~ 요소2 | 요소1과 형제인 모든 요소를 선택 |
5. 속성 선택자
| 종류 | 선택요소 | 예시 |
| [속성] | 해당 속성이 있는 요소 | [required] |
| [속성 = 값] | 지정한 속성값이 있는 요소 | [target = _blank] |
| [속성 ~=값] | 지정한 속성값이 포함된 요소(단어별) | [class ~= button] |
| [속성 |=값] | 지정한 속성값이 포함된 요소(하이픈 포함, 단어별) | [title |= us] |
| [속성 ^=값] | 지정한 속성값으로 시작하는 요소 | [title ^= eng] |
| [속성 $=값] | 지정한 속성값으로 끝나는 요소 | [href $= xls] |
| [속성 *=값] | 지정한 속성값의 일부가 일치하는 요소 | [href *= w3] |
6. 가상 클래스
| 종류 | 설명 |
| : link | 방문하지 않은 링크에 스타일 적용 |
| : visited | 방문했던 링크에 스타일 적용 |
| : hover | 지정한 요소에 마우스 포인터 올려놓을때 스타일 적용 |
| : active | 지정한 요소를 활성화했을때 스타일 적용 |
| : focus | 지정한 요소에 초점이 맞춰졌을 때 스타일 적용 |
| : target | 앵커 대상에 스타일을 적용 |
| : enabled | 지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용 |
| : discbled | 지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용 |
| : checked | 선택한 요소의 스타일을 적용 |
| : not | 지정한 요소가 아닐때 선택해서 스타일 적용 |
7. 구조 가상 클래스
| 선택자 | 설명 |
| : only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택 |
| A : only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택 |
| : first-child | 부모 안에 있는 모든 요소 중에서 첫번째 자식 요소 선택 |
| : last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 선택 |
| A : first-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소를 선택 |
| : nth-child(n) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택 |
| : nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식요소 선택 |
| A : nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n번째 요소를 선택 |
| A : nth-last-of-type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택 |
8. 가상 요소
| 선택자 | 설명 |
| ::first-line | 첫번째 줄을 선택 |
| ::first-letter | 줄에서 첫번째 글자를 선택 |
| ::before | 특정 요소의 앞에 내용이나 스타일을 추가 |
| ::after | 특정 요소의 뒤에 내용이나 스타일을 추가 |
예제1) 배경화면 채우기
- background: url('이미지경로') repeat-x left bottom fixed;
-> 배경 이미지 넣고, 가로 방향으로 아래에서 반복하고, 고정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
h1 {
margin-top:50px;
font-size: 20px;
}
p {
font-size: 16px;
line-height: 25px;
}
body{
color:white;
background: url('images/bg1.jpg') repeat-x left bottom fixed;
background-color: gray;
}
</style>
</head>
<body>
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</body>
</html>예제2.) 배경색 변경
- boackground: black (배경 지정 - 색)
- color : #ccc (글자색 지정)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UFT-8">
<title>연습문제 2</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
background: black;
color: #ccc;
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>예제3.) 배경색과 이미지 넣기
- body { background : #02233b; } : 문서 전체 배경색 지정
- #container { background : url('images/mic.png') no-repeat right bottom white; }
: div 컨테이너 배경이미지 반복없이 오른쪽 아래에 설정, 배경색 흰색 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
#container{
margin:0 auto;
width:600px;
height:700px;
border:1px dotted gray;
padding:20px;
background: url('images/mic.png') no-repeat right bottom white;
}
img {
margin:30px 10px 30px 180px;
}
h1 {
text-align:center;
padding:20px;
}
h2 {
text-align:center;
font-style:italic;
margin-bottom:50px;
}
h3 {
color:#cf3b00;
}
ul{
margin:20px;
list-style-type:none;
}
li {
line-height:30px;
}
body{
background: #02233b;
}
</style>
</head>
<body>
<div id="container">
<h1>대학언론사 수습기자 모집</h1>
<h2>신입생 여러분을 기다립니다</h2>
<article>
<h3>모집분야</h3>
<ul>
<li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
<li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
<li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
</ul>
<h3>혜택</h3>
<ul>
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ul>
</article>
</div>
</body>
</html>