p { color:blue; }
//p => 선택자: 앞으로 만든 스타일 규칙이 어디에 적용될것인가?
//color => 속성
//blue => 속성값
내부 스타일시트 저장
<head> 태그 안에서 <style>,</style> 태그로 스타일 규칙을 저장한다.
외부 스타일 시트 저장
노트패드++ 나 메모장에 .css로 저장되어져 있는 파일을 <link> 태그를 사용해 연결한다.
<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">
// rel : <link> 태그로 연결하는 파일의 종류
// type : 스타일시트 소스의 유형
스타일은 상속된다.
부모 요소에 있는 속성들이 자식 요소로 전달되는데, 이것을 '상속'이라고 한다.
ex)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 요안도라</title>
<style>
body{
background=color:#333;
color:#fff;
}
</style>
</head>
-------------------------------------------------------------------------------------------------------------------
<body>
<h2>예약 방법 및 요금</h2>
<p>요안도라 예약의 가장 빠른 방법은?</p>
</body>
</html>
// 스타일은 body에 구현되었지만 <h2>, <p> 태그에도 상속되어 나타난다.
* 배경이미지는 상속되지 않음
스타일은 단계적으로 적용됩니다.
하나의 요소에 여러 가지 스타일이 겹쳐지기도 하는데, 그런 경우에는 가장 나중에 정의된 스타일을 적용한다.
ex)
<style>
.accent {color:red;}
.accent {color:blue;}
</style>
<p class="accent"> 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다.</p>
!important를 추가하면 해당 스타일 규칙이 가장 높은 우선순위를 갖게 된다.
ex)
<style>
.accent {color:red; !important;}
.accent {color:blue;}
</style>
선택자
전체 선택자 - 모든 요소에 스타일 적용하기
1. * 을 사용
ex)
* {
margin:0;
padding:0;
}
태그 선택자 - 특정 태그에 스타일 적용하기
ex)
p {font-size:12px; font-family:"돋움";}
// p 태그에 스타일 걸기
클래스 선택자 - 특정 부분에 스타일 적용하기
같은 태그라도 어떤 곳에서는 다른 스타일을 사용해야 할 경우가 있을 때.
// p 태그에 스타일을 적용하면 p 태그에는 같은 스타일이 걸리게 되는데,
만약 그 중 하나의 태그만 골라서 다른 스타일 적용하고 싶을때
ex)
.redaccent {
color:red;
}
1. 클래스를 만든다(앞에 . 꼭 붙이기!!!)
<p class="redaccent"> 이 내용은 빨간색으로 표시되는 단락입니다.</p>
2. 태그에다 클래스 적용
id 선택자 - 특정 부분에 스타일 적용하기
id 선택자 역시 클래스 선택자와 마찬가지로 웹 문서 안의 특정 부분에 스타일을 지정할 때
사용한다.
ex)
#mynav{ color:blue; }
<ul id="mynav">
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
하위 선택자 - 모든 하위 요소에 스타일 적용하기
1. 자식 요소, 손자 요소까지 모든 하위 요소에 영향을 미침
ex)
상위 요소 하위 요소 { 속성: 속성값; . . . }
section p { color : blue; }
1. 자식 요소, 손자 요소까지 모든 하위 요소에 영향을 미침
ex)
상위 요소 하위 요소 { 속성: 속성값; . . . }
section p { color : blue; }
자식 선택자 - 자식 요소에만 스타일 적용하기
1. 자식 요소에만 스타일이 적용됨
ex)
부모 요소 > 자식 요소 { 속성: 속성값; . . . }
section > p { color:blue; }
1. 자식 요소에만 스타일이 적용됨
ex)
부모 요소 > 자식 요소 { 속성: 속성값; . . . }
section > p { color:blue; }
인접 형제 선택자 - 첫 번째 동생 요소에 스타일 적용하기
ex)
요소1 + 요소2 { 속성: 속성값; . . . }
h1 + p { text-decoration : underline; }
=> h1 태그 다음에 오는 <p> 태그 중 첫 번째 <p> 태그에만 스타일 적용
ex)
요소1 + 요소2 { 속성: 속성값; . . . }
h1 + p { text-decoration : underline; }
=> h1 태그 다음에 오는 <p> 태그 중 첫 번째 <p> 태그에만 스타일 적용
형제 선택자 - 형제 요소에 스타일 적용하기
요소 ~ 요소2 { 속성: 속성값; . . . }
h1 ~ p { text-decoration : underline; }
=> h1의 형제 요소 모두에 스타일 적용
그룹 선택자 - 스타일 한꺼번에 정의하기
요소1, 요소2, . . . { 속성: 속성값; . . . }
a , p { color: #ffffff; }
속성 선택자
// 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정
[속성] 형식
// 지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용
ex)
[속성] { 속성 : 속성값; . . . }
a [ target ] { background-color : skyblue; }
=> <a> 태그로 링크를 건 부분 중 target 속성이 있는 링크에 적용할 스타일을 지정
[속성 = 값] 형식
// 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용
ex)
[속성 = 값] { 속성: 속성값; . . . }
a [ target = "_blank" ] { background-color : skyblue; }
[속성 ~= 값] 형식
//비교할 값이 여러 개일 경우 그 중 하나만 일치해도 스타일을 적용합니다.
ex)
[ 속성 ~= 값 ] { 속성: 속성값; . . . }
[ class ~= "button" ] { border-radius:10px; }
=> class="button" 처럼 값이 정확하게 일치하거나 class="flat button"처럼 여러 속성 값을 공백으로 구분해서 나열해 놓았을 경우에도 적용할 수 있다.
요소 ~ 요소2 { 속성: 속성값; . . . }
h1 ~ p { text-decoration : underline; }
=> h1의 형제 요소 모두에 스타일 적용
그룹 선택자 - 스타일 한꺼번에 정의하기
요소1, 요소2, . . . { 속성: 속성값; . . . }
a , p { color: #ffffff; }
속성 선택자
// 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정
[속성] 형식
// 지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용
ex)
[속성] { 속성 : 속성값; . . . }
a [ target ] { background-color : skyblue; }
=> <a> 태그로 링크를 건 부분 중 target 속성이 있는 링크에 적용할 스타일을 지정
[속성 = 값] 형식
// 주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용
ex)
[속성 = 값] { 속성: 속성값; . . . }
a [ target = "_blank" ] { background-color : skyblue; }
[속성 ~= 값] 형식
//비교할 값이 여러 개일 경우 그 중 하나만 일치해도 스타일을 적용합니다.
ex)
[ 속성 ~= 값 ] { 속성: 속성값; . . . }
[ class ~= "button" ] { border-radius:10px; }
=> class="button" 처럼 값이 정확하게 일치하거나 class="flat button"처럼 여러 속성 값을 공백으로 구분해서 나열해 놓았을 경우에도 적용할 수 있다.
[ 속성 ^= 값] 형식
// 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용
ex)
[ 속성 ^= 값 ] { 속성: 속성값; . . . }
a [href="http://"] { font-style: italic; }
=> <a> 태그로 링크를 건 부분 중에서 href 속성 값이 http://로 시작하는 링크에 스타일을 적용
[ 속성 $= 값] 형식
// 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용
ex)
[ 속성 $= 값 ] { 속성: 속성값; . . . }
a [href $=".zip"] {background:url(zip_icon.gif)}
=> zip파일로 링크 되어 있는 부분에 zip-icon을 적용
[ 속성 |= 값] 형식
//속성이 지정한 겂으로 시작하면 스타일을 적용
1. class="red"처럼 정확하게 속성값이 일치하거나, class="red-bg"처럼 지정한 값으로 시작하면서 뒤에 -이 있는 경우 사용가능
ex)
[ 속성 |= 값 ] { 속성: 속성값; . . . }
a [class |= "red" ] {background:url(red.jpg);}
[ 속성 *= 값 ] 형식
//어느 위치에 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용
ex)
[ 속성 *= 값 ] { 속성: 속성값; . . . }
p [class *="accent"] {font-style:italic;}
가상 클래스
웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.
:link 선택자
1. 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용
ex)
a:link { color : black; text-decoration: none; }
=> 밑줄 없이 검은색으로 표시하는 스타일을 적용
:visited 선택자
1. 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다.
2. 방문한 텍스트 링크는 기본으로 자주색으로 표시되는데, 사용자가 방문했던 링크도 일반 텍스트 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해서 조절
ex)
a:visited { color : black; }
:active 선택자
1. 해당 요소가 활성화되었을 때의 스타일을 지정
ex)
a:active { color : black; }
:hover 선택자
1. 해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정
ex)
a:hover { color: red; text-decoration : underline; }
:focus 선택자
1. 해당 요소에 초점이 맞춰졌을 때의 스타일을 지정
ex)
p:focus { background-color : yellow; }
위치를 기준으로 하는 가상 클래스 선택자
nth-child(n)와 :nth-last-child(n) 선택자
1. 여러 개의 항목이 일렬로 나열되어 있는 경우, 몇 번째 항목인지로 따져서 스타일 적용
2. :nth-child(n)는 n번째 자식 요소에 스타일을 적용
3. :nth-last-child(n) 선택자는 끝에서부터 세어 n번째인 자식 요소에 스타일을 적용
4. 수식 사용 가능
ex)
div p:nth-child(3) // div 요소 안에서 3번째 자식 요소인 p 요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1)
// div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용
:first-child, :last-child 선택자
1. :first-child는 첫 번째 자식 요소에 적용할 선택자
2. :last-child는 마지막 자식 요소에 적용할 선택자
:nth-of-type(n), :nth-last-of-type(n) 선택자
//어떤 태그들이 나열되어있을 때 그 태그들의 순서를 통해 선택자를 지정한다.
1. :nth-of-type(n)은 앞에서 세어서 n번째 요소이다.
2. :nth-last-of-type(n)은 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용
:first-of-type, :last-of-type 선택자
1. 형제 관계에 있는 요소 중에서 first-if-type은 첫 번째 요소, last-of-type은 마지막 요소에
스타일을 적용한다.
ex)
p:first-of-type { color: blue; }
:only-child, :only-of-type 선택자
1. :only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용
2. :only-of-type은 해당 요소가 유일한 요소일 때 스타일을 적용한다.
ex)
p:only-child { color: green; }
p:only-of-type { font-weight: bold; }
:target 선택자(앵커 = anchor)
1. 같은 문서 안에서 다른 위치로 이동할 때 사용
ex)
#intro:target { background-color: yellow; }
:enabled, : disabled 선택자
1.사용할 수 있는 상태와 사용할 수 없는 상태의 스타일을 지정할 수 있다.
ex)
여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드는 입력 화면으로 사용할 때는 사용자가 입력할 수 있도록 enabled 상태이지만, 출력 화면으로 사용할 때는 사용자가 내용을 보기만 해도 되므로 disabled 상태로 만들 수 있다.
ex2)
textarea:disabled { cursor: pointer; }
// 내용을 쓸 수 없는 경우에는 커서가 포인터 형태로 변하는 스타일을 정의
:checked 선택자
라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정
그 외의 가상 클래스
::before, ::after 선택자
1. 특정한 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다.
ex)
p::before { content: "내용: "; }
//<p> 태그로 지정한 모든 텍스트 단락 맨 앞에 "내용: "을 추가한다.
::selection 선택자
1. 사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정한다.
::selection { color : #00ff00; }
:not 선택자
1. "괄호 안에 있는 요소를 제외한" 을 의미
ex)
:not(h1) { color: blue; }
//h1이 아닌 모든 요소의 글자색을 파란색으로 지정
// 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용
ex)
[ 속성 ^= 값 ] { 속성: 속성값; . . . }
a [href="http://"] { font-style: italic; }
=> <a> 태그로 링크를 건 부분 중에서 href 속성 값이 http://로 시작하는 링크에 스타일을 적용
[ 속성 $= 값] 형식
// 지정한 문자로 끝나는 속성에 대해서만 스타일을 적용
ex)
[ 속성 $= 값 ] { 속성: 속성값; . . . }
a [href $=".zip"] {background:url(zip_icon.gif)}
=> zip파일로 링크 되어 있는 부분에 zip-icon을 적용
[ 속성 |= 값] 형식
//속성이 지정한 겂으로 시작하면 스타일을 적용
1. class="red"처럼 정확하게 속성값이 일치하거나, class="red-bg"처럼 지정한 값으로 시작하면서 뒤에 -이 있는 경우 사용가능
ex)
[ 속성 |= 값 ] { 속성: 속성값; . . . }
a [class |= "red" ] {background:url(red.jpg);}
[ 속성 *= 값 ] 형식
//어느 위치에 위치에 있든지 해당 값이 포함되어 있으면 스타일이 적용
ex)
[ 속성 *= 값 ] { 속성: 속성값; . . . }
p [class *="accent"] {font-style:italic;}
가상 클래스
웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.
:link 선택자
1. 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용
ex)
a:link { color : black; text-decoration: none; }
=> 밑줄 없이 검은색으로 표시하는 스타일을 적용
:visited 선택자
1. 문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다.
2. 방문한 텍스트 링크는 기본으로 자주색으로 표시되는데, 사용자가 방문했던 링크도 일반 텍스트 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해서 조절
ex)
a:visited { color : black; }
:active 선택자
1. 해당 요소가 활성화되었을 때의 스타일을 지정
ex)
a:active { color : black; }
:hover 선택자
1. 해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정
ex)
a:hover { color: red; text-decoration : underline; }
:focus 선택자
1. 해당 요소에 초점이 맞춰졌을 때의 스타일을 지정
ex)
p:focus { background-color : yellow; }
위치를 기준으로 하는 가상 클래스 선택자
:root 선택자
1. root 선택자는 html에 스타일을 적용한다
2. 문서 안에 전체적으로 똑같이 적용할 스타일이 있을 때 사용nth-child(n)와 :nth-last-child(n) 선택자
1. 여러 개의 항목이 일렬로 나열되어 있는 경우, 몇 번째 항목인지로 따져서 스타일 적용
2. :nth-child(n)는 n번째 자식 요소에 스타일을 적용
3. :nth-last-child(n) 선택자는 끝에서부터 세어 n번째인 자식 요소에 스타일을 적용
4. 수식 사용 가능
ex)
div p:nth-child(3) // div 요소 안에서 3번째 자식 요소인 p 요소에 스타일 적용
div p:nth-child(odd), div p:nth-child(2n+1)
// div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용
:first-child, :last-child 선택자
1. :first-child는 첫 번째 자식 요소에 적용할 선택자
2. :last-child는 마지막 자식 요소에 적용할 선택자
:nth-of-type(n), :nth-last-of-type(n) 선택자
//어떤 태그들이 나열되어있을 때 그 태그들의 순서를 통해 선택자를 지정한다.
1. :nth-of-type(n)은 앞에서 세어서 n번째 요소이다.
2. :nth-last-of-type(n)은 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용
:first-of-type, :last-of-type 선택자
1. 형제 관계에 있는 요소 중에서 first-if-type은 첫 번째 요소, last-of-type은 마지막 요소에
스타일을 적용한다.
ex)
p:first-of-type { color: blue; }
:only-child, :only-of-type 선택자
1. :only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용
2. :only-of-type은 해당 요소가 유일한 요소일 때 스타일을 적용한다.
ex)
p:only-child { color: green; }
p:only-of-type { font-weight: bold; }
:target 선택자(앵커 = anchor)
1. 같은 문서 안에서 다른 위치로 이동할 때 사용
ex)
#intro:target { background-color: yellow; }
:enabled, : disabled 선택자
1.사용할 수 있는 상태와 사용할 수 없는 상태의 스타일을 지정할 수 있다.
ex)
여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드는 입력 화면으로 사용할 때는 사용자가 입력할 수 있도록 enabled 상태이지만, 출력 화면으로 사용할 때는 사용자가 내용을 보기만 해도 되므로 disabled 상태로 만들 수 있다.
ex2)
textarea:disabled { cursor: pointer; }
// 내용을 쓸 수 없는 경우에는 커서가 포인터 형태로 변하는 스타일을 정의
:checked 선택자
라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정
그 외의 가상 클래스
::before, ::after 선택자
1. 특정한 요소의 내용 앞이나 뒤에 지정한 내용을 만들 수 있다.
ex)
p::before { content: "내용: "; }
//<p> 태그로 지정한 모든 텍스트 단락 맨 앞에 "내용: "을 추가한다.
::selection 선택자
1. 사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정한다.
::selection { color : #00ff00; }
:not 선택자
1. "괄호 안에 있는 요소를 제외한" 을 의미
ex)
:not(h1) { color: blue; }
//h1이 아닌 모든 요소의 글자색을 파란색으로 지정
댓글 없음:
댓글 쓰기