2020년 11월 27일
업데이트:
CSS란?
Cascading Style Sheets의 약자로 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다.
선택자
특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을 적용할 수 있다.
전체 선택자(모든 요소 선택자)
html에 있는 모든 태그에 적용되는 스타일
전체 태그는 body 태그에 있는 요소 뿐만 아니라 html, head에도 적용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* html */
/* 모든 요소 선택자 */
/* 사용 방법 : * {} */
* { /* HTML 문서 내에 있는 모든 요소의 글자색을 red로 지정*/
color: rgb(69, 68, 71);
}
</style>
태그 선택자
특정 태그에 적용되는 스타일
* 여러 개 태그 선택시에는 ‘,’(쉼표)로 구별하여 작성한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 태그 선택자 */
/* 사용 방법 : 태그명 {설정내용;} */
p { color : red; }
</style>
아이디 선택자
태그 속성 id를 설정하고 id 값을 선택자로 하는 방법이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 아이디 선택자 */
/* 사용 방법 : #id {설정내용;} */
#id2 { color : yellowgreen;}
#id3 { color : white;}
#id2, #id3 { background-color: black;}
/* 여러 아이디를 사용할 때 콤마로 구분! */
#id6 {color : hotpink;}
</style>
<body>
<ol>
<li id="id1">아이디 선택자 테스트 1</li>
<li id="id2">아이디 선택자 테스트 2</li>
<li id="id3">아이디 선택자 테스트 3</li>
<li id="id4">아이디 선택자 테스트 4</li>
<li id="id5">아이디 선택자 테스트 5</li>
</ol>
</body>
클래스 선택자
태그 속성을 class로 설정하고 class 값을 선택자로하는 방법이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 클래스 선택자 */
/* 사용 방법 : .클래스명 {설정내용;} */
.class1{
background-color : yellowgreen;
}
.class2{
color : coral;
}
</style>
<body>
<ul>
<li class="class1">클래스 선택자 테스트1</li>
<li class="class2">클래스 선택자 테스트2</li>
<li class="class1">클래스 선택자 테스트3</li>
<li class="class2">클래스 선택자 테스트4</li>
<li class="class1">클래스 선택자 테스트5</li>
</ul>
</body>
클래스 선택자는 중복이 허용되나 id 선택자는 중복 불가
클래스는 중복을 허용하기 때문에 영역을 정확하게 하기 위해 태그 선택자와 같이 쓰이는 경우도 있음.
기본 속성 선택자
선택자 뒤에 [속성명=속성값] 형태로 작성하여 원하는 속성을 지닌 태그를 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 기본 속성 선택자 */
/* 사용 방법 : 선택자[속성]{설정내용;}
선택자[속성=속성값]{설정내용;}*/
div[name=name2] {
background-color: orangered;
}
label[for=test] { color : red; }
</style>
<body>
<pre>선택자[속성명=속성값] { color : red; }</pre>
<div name = "name1"> div 1</div>
<div name = "name2"> div 2</div>
<label for="test">테스트</label>
</body>
자식 선택자 / 후손 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 자식 선택자 */
/* 사용 방법 : 선택자 > 자식선택자{설정내용;} */
#test1 > h4 { /* id가 test1인 태그의 자식 중 h4 태그들 선택 */
background-color: gold;
}
#test1 > ul > li {
background-color: aqua;
}
/* 후손 선택자 */
/* 사용 방법 : 선택자 후손선택자{설정내용;} */
#test1 ul { /* id가 test1인 태그의 후손 중 ul 태그 모두 선택 */
background-color: yellow;
}
#test1 li { color : red; }
</style>
<body>
<div id="test1">
<h4>자식입니다.</h4>
<h4>나도 자식입니다.</h4>
<ul id="testul"> 리스트
<li>ul 태그의 자식이자 div 태그의 후손입니다.</li>
</ul>
</div>
</body>
동위 선택자
동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 동위 선택자 */
/* 사용 방법 : 선택자 > 자식선택자{설정내용;} */
#div-test2 + div { /* id가 div-test2인 요소 바로 뒤에 오는 div 태그 선택 */
background-color: yellow;
}
/*#div-test3 ~ div { /* id가 div-test3인 요소 뒤에 오는 모든 div 태그 선택
color : white;
background-color: orangered;
}*/
</style>
<body>
<div id="test1">
<h4>자식입니다.</h4>
<h4>나도 자식입니다.</h4>
<ul id="testul"> 리스트
<li>ul 태그의 자식이자 div 태그의 후손입니다.</li>
</ul>
</div>
</body>
반응 선택자
사용자의 움직임에 따라 스타일이 달라지는 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 반응 선택자 */
.reaction-test {
width : 200px; /* 가로 폭 200px */
height: 200px; /* 세로 높이 200px */
background-color: yellow;
margin-bottom: 10px;
/* 요소간의 간격(아랫부분)을 10px 띄워줌 */
}
#active-test:active {
/* id가 active-test인 요소가 클릭되었을 때 */
background-color: black;
color : yellow;
}
#hover-test:hover {
/*id가 hover-test인 요소에 마우스가 올라갔을때 */
width : 300px;
height : 300px;
}
</style>
<body>
<div class="reaction-test" id="active-test">active 테스트</div>
<div class="reaction-test" id="hover-test">hover 테스트</div>
</body>
상태 선택자
입력 양식의 상태에 따라 선택되는 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_CSS 선택자 1</title>
<style>
/* 상태 선택자 */
input[name="fruits"]:checked {
/* input 태그 중에서 name 속성값이 fruits인 요소가 체크되었을 때 */
width : 30px;
height : 30px;
}
.focus-test:focus{
/* 클래스가 focus-test인 요소에 포커스가 맞추어졌을 때*/
background-color: lightblue;
}
option:disabled{
/* option 태그 중 비활성화된 태그 */
background-color : gray;
color : white;
}
option:enabled{
/* option 태그 중 활성화된 태그 */
background-color : lime;
}
</style>
<body>
<h4>당신의 연령대는?</h4>
<select>
<option disabled>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option disabled>60</option>
</select>
</body>
문자열 속성 선택자
특정 문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03_CSS 선택자 3</title>
<style>
/* 문자열 속성 선택자 */
/*
~=
띄어쓰기로 구분된 여러 속성값이 작성된 속성 중
속성값이 특정값을 단어로 포함하는 태그 선택
*/
div[name ~= "aaa"]{
background-color: greenyellow;
}
/*
|=
속성값이 특정값과 같은 속성 또는
여러 속성값 중 맨앞 이면서,
"-" 기호가 포함된 속성값에 "-"기준 앞쪽 문자열이 특정값과 같은 경우
*/
div[class |= str] {
color : red;
}
/*
^=
속성값이 특정 값으로 시작하는 태그 선택
* : 모든, ^ : 시작, & : 끝
*/
div[class ^= "class"] {
background-color : skyblue;
}
/*
$=
속성값이 특정 값으로 끝나는 태그 선택
*/
div[class $= "class2"] {
background-color: royalblue;
}
/*
*=
속성값이 특정 값을 포함하는 태그 선택
*/
div[class *= "str"] {
font-size : 40px;
}
</style>
</head>
<body>
<h3>문자열 속성 선택자</h3>
<p>특정 문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용</p>
<pre>
선택자[속성~=특정값]{설정내용}
- 띄어쓰기로 구분된 여러 속성값이 작성된 속성 중
속성값이 특정값을 단어로 포함하는 태그 선택
선택자[속성|=특정값]{설정내용}
- 속성값이 특정 값을 단어로 포함하는 태그 선택
- "-"으로 구분, - 앞의 내용의 값이 동일해야 함.
선택자[속성^=특정값]{설정내용}
- 속성값이 특정 값으로 시작하는 태그 선택
선택자[속성$=특정값]{설정내용}
- 속성값이 특정 값으로 끝나는 태그 선택
선택자[속성*=특정값]{설정내용}
- 속성값이 특정 값으로 포함하는 태그 선택
</pre>
<div name='aaa bbb str-1' class='str-class'>div1</div>
<div name='str-2 aaa' class='str-class'>div2</div>
<div name='str' class='class-str'>div3</div>
<div name='aaa str-3 ' class='str-class2'>div4</div>
<hr>
</body>
</html>
일반 구조 선택자
특정한 위치에 있는 태그를 선택(위치로 구분)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_CSS 선택자 4</title>
<!-- link로 css 파일과 연결 -->
<link rel="stylesheet" href="04_CSS 선택자4.css" type="text/css">
</head>
<body>
<h2>일반 구조 선택자</h2>
<p>특정한 위치에 있는 태그 선택(위치로 구분)</p>
<div id="test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6(pre)</pre>
</div>
</body>
</html>
/* 일반 구조 선택자 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test1 p:first-child {
background-color : red;
color : white;
}
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test1 p:last-child {
/* #test1 자식 중 마지막 태그가 p태그일 경우 */
background-color : orange;
color : white;
}
/* 형제 관계 태그 중 앞에서부터 지정된 수열번째 태그 선택 */
#test1 p:nth-child(2n){
/* #test1의 후손 중 짝수번 째 p 태그 선택 */
background-color: greenyellow;
}
/* 형제 관계 태그 중 뒤에서부터 지정된 수열번째 태그 선택 */
#test1 p:nth-last-child(3){
/* #test1의 후손 중 짝수번 째 p 태그 선택 */
background-color: blue;
color:white;
}
형태 구조 선택자
특정한 위치에 있는 태그 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_CSS 선택자 4</title>
<link rel="stylesheet" href="04_CSS 선택자4.css" type="text/css">
</head>
<body>
<h2>형태 구조 선택자(태그 별로 구분)</h2>
<p>특정한 위치에 있는 태그 선택</p>
<div id="test2">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6(pre)</pre>
</div>
</body>
</html>
/* 형태 구조 선택자 */
/* 형제 관계 태그 중 첫 번째 태그 선택 */
#test2 p:first-of-type{
background-color : red;
color : white;
}
/* 형제 관계 태그 중 마지막 태그 선택 */
#test2 p:last-of-type{
background-color : orange;
color : white;
}
/* 형제 관계 태그 중 앞에서부터 수열번째 태그 선택 */
#test2 p:nth-of-type(2n){
background-color : greenyellow;
}
/* 형제 관계 태그 중 뒤에서부터 수열번째 태그 선택 */
#test2 p:nth-last-of-type(3){
background-color: blue;
color : white;
}
문자 선택자
특정 문자 또는 문자열을 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_CSS 선택자 4</title>
<link rel="stylesheet" href="04_CSS 선택자4.css" type="text/css">
</head>
<body>
<h2>문자 선택자</h2>
<p>특정 문자 또는 문자열을 선택</p>
<div id="test3">
<p>
Cascading Style Sheets의 약자로<br>
마크업 언어가 실제 표시되는 방법을 기술하는 언어.<br>
(웹 페이지 스타일 지정에 사용되는 언어의 표준 (W3C에서 표준으로 지정))
</p>
<p>
Cascading Style Sheets의 약자로<br>
마크업 언어가 실제 표시되는 방법을 기술하는 언어.<br>
(웹 페이지 스타일 지정에 사용되는 언어의 표준 (W3C에서 표준으로 지정))
</p>
</div>
</body>
</html>
/* 첫 번째 글자 선택 */
#test3 > p:first-letter {
font-size : 28px;
}
/* 첫 번째 줄 선택 */
#test3 > p:first-line{
background-color : aqua;
}
/* 태그 요소 마지막에 부분 공간을 선택 */
#test3 > p:after {
content : "@@@@@@@@@@@@@@@@@@@@@@@@@@@@@";
} /* 웹 상에서 골뱅이는 드래그, 선택 불가! */
/* 태그별로 숫자를 부여하는 속성 */
#test3 > p{
counter-increment : rint;
}
#test3 > p:before{
content : counter(rint) ">>" ;
}
/* 사용자가 드래그한 글자 선택 */
#test3 p::selection{
background-color: pink;
}
부정 선택자
선택된 요수를 제외하여 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04_CSS 선택자 4</title>
<link rel="stylesheet" href="04_CSS 선택자4.css" type="text/css">
</head>
<body>
<h2>부정 선택자</h2>
<p>선택된 요소를 제외하여 선택</p>
<div id="test4">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6(pre)</pre>
</div>
</body>
</html>
/* 부정 선택자 */
#test4 p:not(:nth-of-type(2n-1)) {
background-color : lightgray;
}
선택자 우선순위
기본적으로 CSS 속성은 위에서부터 아래로 차례대로 적용되지만,
같은 태그에 여러 CSS 속성이 설정된 경우에는 선택자 우선 순위에 따라 스타일이 적용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05_선택자 우선 순위</title>
<style>
/* 태그 선택자 */
div {
width : 300px;
/* 최우선순위 선택자 !important */
height : 300px !important;
background-color : rgb(109, 120, 184);
}
/* 클래스 선택자 */
.class1{
background-color: gold;
color : white;
}
/* 아이디 선택자 */
#test1{
height : 100px;
color : red;
font-size : 5px;
}
</style>
</head>
<body>
<h1>선택자 우선순위</h1>
<pre>
1순위 : !important 키워드가 붙은 CSS 속성.
2순위 : inline style 속성.(태그에 직접 작성하는 CSS 속성)
3순위 : id 선택자로 부여된 속성
4순위 : class 선택자
5순위 : tag 선택자
</pre>
<div id="test1" class="class1" style=font-size:28px> 우선순위 테스트</div>
</body>
</html>
글꼴 관련 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_글꼴관련스타일</title>
<link rel="stylesheet" href="06_글꼴관련스타일.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dokdo&display=swap" rel="stylesheet">
</head>
<body>
<h3>font-family 속성 : 텍스트의 글꼴 지정 속성</h3>
<pre> 선택자 { font-family : "글꼴 이름"} </pre>
<p id="ff1">ADBC abdc 가나라다 1234 !@#$</p>
<p id="ff2">ADBC abdc 가나라다 1234 !@#$</p>
<p id="ff3">ADBC abdc 가나라다 1234 !@#$</p>
<h4>웹 폰트 사용 방법</h4>
<p>웹 폰트 제공 사이트 예시 :
<a href="https://fonts.google.com" target="_blank">
구글 무료 웹폰트 사이트
</a>
</p>
<p id="wf1">ABCD abcd 가나다라 1234 !@#$</p>
<p>웹 폰트 제공 사이트 예시 :
<a href="https://noonnu.cc" target="_blank">
눈누 상업용 무료 한글 폰트 사이트
</a>
</p>
<p id="wf2">ABCD abcd 가나다라 1234 !@#$</p>
<hr>
<h3>font-size 속성 : 텍스트 크기 변경 속성</h3>
<pre>선택자 { font-size : 크기; }</pre>
<ul>
<li id="size1">고정크기 px 테스트</li>
<li id="size2">가변크기 em 테스트</li>
<li id="size3">가변크기 % 테스트</li>
</ul>
<hr>
<h3>font-weight : 글꼴의 두께 표현</h3>
<pre>
선택자 { font-weight : normal(기본값) | bold | bolder | lighter | 100 ~ 900;}
</pre>
<ul>
<li id="fw1">굵은 글꼴</li>
<li id="fw2">상위 요소에서 상속된 굵기보다 굵은 글꼴</li>
<li id="fw3">상위 요소에서 상속된 굵기보다 얇은 글꼴</li>
<li id="fw4">상위 요소에서 상속된 굵기보다 얇은 글꼴</li>
</ul>
<hr>
<h3>font-variant : 입력된 영어 알파벳 중 소문자를 작은 대문자로 표시</h3>
<p>Hello World!</p>
<p id="fv">Hello World!</p>
<hr>
<h3>font-style : 텍스트의 기울임 지정</h3>
<pre>선택자{font-style : normal | italic | oblique }</pre>
<ul>
<li id="fs1">abcd ABCD 1234 가나다라</li>
<li id="fs2">abcd ABCD 1234 가나다라</li>
<!-- 글자를 기울이는 태그 <i> <em>보다 CSS를 활용하는게 더 좋다.-->
</ul>
<hr>
<h3>font 속성 : 글꼴 관련 스타일을 한번에 지정함</h3>
<pre>
선택자 {
font : font-style font-variant font-weight, font-size/line-height
font-family;
}
</pre>
<ul>
<li id="f1">글꼴 관련 스타일1</li>
<li id="f2">글꼴 관련 스타일2</li>
<li id="f3">글꼴 관련 스타일3</li>
</ul>
</body>
</html>
@font-face {
font-family: 'MaruBuri-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* font-family : 글꼴 지정 */
#ff1{
font-family : "궁서체";
/* 컴퓨터에 설치된 글꼴 또는 웹 */
}
#ff2{
font-family : "바탕체";
}
#ff3{
font-family : "kh체", "굴림";
/* 폰트를 여러개 작성하여 앞에서부터 적용해보고, 없으면 그 다음 폰트 적용 */
}
#wf1{
font-family :"Dokdo";
}
#wf2{
font-family: "MaruBuri-Regular";
}
/* font-size : 폰트 크기 조절*/
#size1{ font-size: 30px;}
#size2{
font-size : 2em;
/* 부모 요소의 폰트 크기를 1em으로 지정하고
숫자를 변경해서 크기를 지정할 수 있음 */
}
#size3{
font-size: 200%;
/* 부모 요소의 폰트 크기를 100%로 지정하고 숫자를 변경해서 크기 지정 가능 */
}
#fw1 {
font-weight: bold;
}
/* font-weight : 긁씨 굵기 */
#fw1{ font-weight: 900;} /* 600이상 숫자 또는 bold*/
#fw2{ font-weight: bolder;}
/* 부모 요소의 글꼴 굵기가 기본 상태이므로 fw2는 기본보다 굵은 bold로 출력*/
#fw3{ font-weight: lighter;}
/* 부모 요소의 글꼴 굵기가 기본 상태이므로 fw2는 기본보다 얇은 글꼴이 출력됨(300 정도)*/
/* font-varinat */
#fv{ font-variant: small-caps; }
/* font-stlye */
#fs1 { font-style : italic;}
/* italic : 기울어진 폰트 */
#fs2 { font-style : oblique;}
/* oblique : normal 폰트를 기울인 것 */
/* italic : (폰트사에서) 기울어진 폰트 */
/* oblique : nomal 폰트를 (컴퓨터가) 기울인 것 */
/* font */
#f1{
font : 20px/40px "궁서체";
/* 크기 20px, 장평 40px, 궁서체 */
}
#f2{
font : italic bold 30px/30px "고딕체";
}
#f3{
font : italic small-caps 900 2em/50px "굴림";
}
텍스트 관련 스타일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07_텍스트 관련 스타일</title>
<link rel="stylesheet" href="07_텍스트관련스타일.css" type="text/css">
</head>
<body>
<h3>color : 텍스트의 색상 지정</h3>
<pre>
선택자 {
color : 색상명 | rgb16진수 | rgb10진수 | rgba | hsl | hsla;
}
</pre>
<ul>
<li id="c-name">색상명으로 지정</li>
<li id="c-16">16진수 값으로 지정</li>
<li id="c-rgb">rgb 값으로 지정</li>
<li id="c-rgba">rgba 값으로 지정</li>
<li id="c-hsl">hsl 값으로 지정</li>
<li id="c-hsla">hsla 값으로 지정</li>
</ul>
<hr>
<h3>text-decoration : 텍스트에 줄을 긋거나 없애는 속성</h3>
<pre>
선택자 { text-decoration : none | underline | overline | line-through;}
</pre>
<ul>
<li> <a id="td1" href="https://www.naver.com">네이버로 이동</a></li>
<li id ="td2">밑줄</li>
<li id ="td3">윗줄</li>
<li id ="td4">삭제선</li>
</ul>
<hr>
<h3>text-shadow : 텍스트에 그림자 효과를 줄 때 사용</h3>
<pre>
선택자 {text-shadow : none | 가로거리 세로거리 번짐정도 그림자색}
</pre>
<div id="bg">
<span id="ts1" class="shadow">HTML5</span>
<span id="ts2" class="shadow">HTML5</span>
<span id="ts3" class="shadow">HTML5</span>
<span id="ts4" class="shadow">HTML5</span>
</div>
</body>
</html>
/* color : 텍스트 색상 */
#c-name{ color : lightslategray}
#c-16{ color : #ff0000; }
#c-rgb { color : rgb(255, 0, 0)}
#c-rgba { color : rgba(228, 165, 236, 0.5)}
/* rgba에서는 a는 투명도 (0 ~ 1, 1이 제일 불투명 */
#c-hsl{ color : hsl(0, 100%, 50%) }
/* h(0~360) : 색상,
s(0~100) : 채도,
1(0~100%) : 명도 */
#c-hsla { color : rgba(97, 150, 147, 0.63)}
#td1 {
text-decoration: none;
color : black;
font-weight: bold;
font-size : 1.2em;
}
#td2 { text-decoration: underline;}
#td3 { text-decoration: overline;}
#td4 { text-decoration: line-through;}
/* text-shadow */
/* text-shadow */
#bg{
background-color: black;
margin: 30px;
padding: 50px;
}
/* shadow 클래스에게 공통된 폰트 사이즈와 두께 지정 */
.shadow{
font-size: 100px;
font-weight: bold;
}
#ts1{
color: orangered;
text-shadow:5px 5px orange;
}
#ts2{
color: white;
text-shadow: 0px 1px 20px white;
}
#ts3{
color : white;
text-shadow: 1px 1px 20px magenta,
1px 1px 30px red;
}
#ts4 {
color : black;
text-shadow : 0px 0px 4px #ccc, 0px -5px 4px #ff3, 2px -10px 6px #fd3,
-2px -15px 11px #f80, 2px -19px 18px #f20;
}
공유하기
Twitter Google+ LinkedIn
댓글남기기