선택자
속성선택자
HTML 요소에서 src, href, style, type, ...과 같은 속성을 선택자로 지정해서 스타일을 적용
[속성명]{
CSS 문법
}
[src]{
src 속성요소 선택
}
[src='apple.png']{
src 속성이 'apple.png'인 요소들 선택
}
[속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택
= "apple" - 값이 "apple"인것
~= "apple" -값이 "apple banana"인 것도 선택
[속성명 *= "속성값"] : 속성 값이 포함된 문자를 가지고 있는 요소를 선택
*= "apple" -값이 "applebanana" 인것도 선택
[속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택
[속성명 |= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택
|= "apple" - "applemango", "apple-mango", ("apple mango" x)
[속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택
^= "apple"-"applemango", "apple-mango", "apple mango"
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[title="css"]{color: red;}
[title~="css"]{color: red;}
[title*="css"]{color: red;}
[title$="css"]{color: red;}
[title|="css"]{color: red;}
[title^="css"]{color: red;}
</style>
<title>속성 선택자</title>
</head>
<body>
<h2>속성 선택자 - 2</h2>
<p title="css">독립적인 단어</p>
<p title="funny-css">하이픈이 들어간 합성어</p>
<p title="funny_css">언더바가 들어간 합성어</p>
<p title="funny css">공백으로 연결된 합성어(접미사)</p>
<p title="css funny">공백으로 연결된 합성어(접두사)</p>
<p title="funnycss">공백이 없는 합성어(접미사)</p>
<p title="cssfunny">공백이 없는 합성어(접두사)</p>
</body>가상클래스선택자
클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택하여 스타일 지정
li : first-child -> li 요소 중에서 첫번째에 해당하는 요소
li : last-child -> li 요소 중에서 마지막에 해당하는 요소를
li : nth-child(n) -> li 요소 중에서 n번째 해당하는 요소
li : nth-child(odd) -> li 요소 중에서 홀수번째에 해당하는 요소
li : nth-child(2n+1)
li : nth-child(even) -> li 요소 중에서 짝수번째 해당하는 요소
li : nth-child(2n)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.list > li:first-child{color: deeppink; } 김사과
.list > li:last-child{color:deepskyblue} 차두리
.list > li:nth-child(2){color: whit;} 반하나
.list > li:nth-child(odd){background-color: gold;} 김사과, 이체리
.list > li:nth-child(even){background-color:hotpink;} 반하나, 차두리
</style>
<title>가상클래스 선택자</title>
</head>
<body>
<h2>가상클래스 선택자</h2>
<ul class="list">
<li>김사과</li>
<li>반하나</li>
<li>이체리</li>
<li>차두리</li>
</ul>
</body>가상요소선택자
::before
글, 이미지, 그라데이션 등을 요소 앞에 삽입
::after
글, 이미지, 그라데이션 등을 요소 뒤에 삽입
:link
하이퍼링크가 연결됬을 때(기본상태)
:visit
특정 하이퍼링크를 방문한 적이 있을 때
:active
마우스 버튼을 클릭하고 있을 때
:hover
마우스가 올라갔을 때
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.tx1::before{content: '☆'; color: red;}
.tx2::after{content: '★';}
a:visited{
text-decoration: none;
color: maroon;}
a:link{
text-decoration: none;
color: mediumvioletred;
}
a:hover{
color: dodgerblue;
text-decoration: underline;
}
a:active{
color:coral;
}
</style>
<title>가상 요소 선택자</title>
</head>
<body>
<h2>가상 요소 선택자</h2>
<p class="tx1">before</p>
<p class="tx2">after</p>
<a href="https://www.naver.com" target="blnak">네이버</a>
<a href="http://www.naveffr.com" >여긴어디?</a>
</body>CSS의 컬러
색상 이름으로 표헌
red, white, black ....
RGB 색상값으로 표현
rgb(0~255, 0~255, 0~255)
rgba(0~255,0~255,0~255,0~1) (1에 가까울 수록 불투명)
16진수 색상값으로 표현
rgb 색상값을 16진수로 0~f / 00~ff까지 범위를 지정
#0000ff(파랑색) -> #00f
| 16진수 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
|---|
hsl, hsla 표기법
hsl은 차례로 hue(색상), saturation(채도), lightness(밝기)
hsl + a(alpha 값 : 투명정도, 1에 가까울 수 록 불투명)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background-color: thistle;
}
#color1{
width: 200px;
height: 200px;
padding: 20px;
/* background-color: rgb(220, 237, 200); */
background-color: rgba(200, 23, 100, 0.8);
}
#color2{
width: 200px;
height: 200px;
padding: 20px;
background-color: #64ffda;
color: #004d40 ;
}
</style>
<title>CSS 컬러</title>
</head>
<body>
<h2>CSS 컬라</h2>
<div id="color1">첫번째 컬러</div>
<div id="color2">두번째 컬러</div>
</body>CSS의 텍스트
- color
- 텍스트의 색상을 설정(기본색상은 검정색) - letter-spacing
- 텍스트 내에서 글자 사이의 간격을 설정 - word-spacing
- 텍스트 내에서 단어 사이의 간격을 설정 - text-align
- 텍스트의 수평 방향 정렬을 설정 - text-indent
- 단락의 첫 줄의 들여쓰기를 설정 - line-height
- 텍스트의 줄 간격(높이)를 설정 - text-decoration
- 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
- none, underline, line-thirough, overline - text-transform
- 텍스트에 포함된 영문자에 대한 대소문자를 설정
- uppercase, lowercase, capitalize - font-variant
- 소문자를 작은 대문자로 변경 - text-shadow
- 텍스트에 그림자 효과를 설정
선택자 {
text-shadow : 가로거리 세로거리 번짐정도 색상;
}- text-overflow
- 텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정(clip, ellipsis)
- white-space
- 스페이스와 탭, 줄바꿈, 자동 줄 바꿈을 어떻게 처리할지 설정
- wrap, wordbreak, nowrap,.. - overflow
- 기준선을 벗어나 넘칠 경우 값을 어떻게 처리할지 설정 (hidden, visible) - font-size
- 텍스트의 크기를 설정- px 스크린의 픽셀을 기준으로 하는 절대 크기 설정
- % 기본크기(16px)를 기준으로 하고 상대 크기 설정 (150% -> 24px)
- em 부모요소의 글자 크기를 기준으로 하고 상대 크기 설정
- rem 부모요소에 상관없이 기본 크기에 대한 상대 크기 설정
- font-weight
- 텍스트의 굵기를 설정
- 기본 굵기는 숫자 400
- 숫자는 100~900 - font-family
- 글꼴을 설정
- 하나의 글꼴을 설정, 여러개의 글꼴을 등록
- 여러개의 글꼴이 등록되어 있는 경우, 웹 브라우저에서 순서대로 사용여부를 판단한 뒤 적용
- 글꼴 이름에 띄어쓰기가 있는 경우 반드시 따옴표로 감싸주어야 함
CSS의 배경
-
background-color
- HTML 요소의 배경색을 -
background-image
- HTML 요소의 배경으로 나타날 배경 이미지를 설정
- 배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남
선택자{
background-image:url('이미지파일 경로')
}- background-repeat
- 배경 이미지를 수평이나 수직 방향으로 반복하돌고 설정
- repeat, repeat-x, repeat-y, no-repeat(반복하지 않음.)
