Inline Style Sheet
Internal Style Sheet
Linking Style Sheet
HTML 태그의 style 속성에 CSS 코드를 넣어 적용시키는 방법.
해당 태그가 선택자가 되고, css 코드에는 속성(property)과 값(value)만 들어간다.
단점 : 꾸미는 데 한계가 있으며, 재사용이 불가하다.
ex)
<p style="color:blue"> aa </p>
HTML 문서 안에 스타일 코드를 넣는 방법. 안에 css 코드를 넣는다.
별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법.
장점 : 여러 HTML 문서에 사용 가능.
ex) style.css
h1 {
color:red;
}
ex) HTML
<link rel = "stylesheet" href="style.css">
selector { property : value }
ex) h1 { color: red}
세미콜론(;)으로 구분하여 선언을 여러 개 넣을 수 있다. 마지막 선언에는 세미콜론을 붙여도 되고 붙이지 않아도 된다.
ex)
h1{
color : red;
font-size : 20px
}
값에 공백이 있다면 작은 따옴표 또는 큰 따옴표로 감싼다.
p {
font-family : 'Times new roman';
여러 개의 연속한 공백이나 줄바꿈은 하나의 공백으로 인식한다.
selector {
property : value;
}
/* 같다 */
selector {property : value; }
주석은 /과 / 사이에 쓴다. 사이에 줄바꿈이 있어도 주석으로 인식.
/* 이렇게 꾸미기도 한다.
*comment
*comment
*/
전체 선택자는 모든 HTML 요소를 선택한다. 별표(*)로 나타냄. 다른 선택자와 같이 사용할 때는 생략 가능.
*{ /* 모든 요소의 색을 파란색으로 만듦.*/
color : blue;
}
/* 다른 선택자와 같이 사용하는 경우 */
*.abc{ color = blue; }
.abc{ color = blue; }
h1, p, div, span 등 HTML 요소를 선택하는 선택자
ex) /*HTML 문서 안에 있는 모든 p 요소 내용을 파란색으로 만듦*/
p {
color: blue;
}
특정 속성을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소를 선택. 7가지 형태.
ex) h1[title] /*title 속성을 가진 h1 요소를 선택*/
ex) h1[title="abc"] /*title 속성의 값이 abc인 h1 요소를 선택*/
ex) h1[title~="abc"] /*title 속성의 값이 abc를 포함한 h1 요소를 선택.
*"abc xyz"는 선택되지만 "abcxyz"는 선택되지 않는다.*/
ex) h1[title|="abc"] /*title 속성의 값이 abc이거나 abc로 시작하는 h1 요소를 선택.
*"abc-xyz"는 선택되지만 "abc xyz"는 선택되지 않는다*/
ex) h1[title^="abc"] /*title 속성의 값이 abc로 시작하는 h1 요소를 선택.
*"abc xyz", "abc-xyz" 모두 선택된다.*/
ex) h1[title$="abc"] /*title 속성의 값이 abc로 끝나는 h1 요소를 선택.
*"xyz abc", "xyz-abc" 모두 선택된다.*/
ex) h1[title*="abc"] /*title 속성의 값이 abc를 포함한 h1 요소를 선택.
*"abc xyz","abcxyz","abc-xyz" 모두 선택된다.*/
아이디 선택자는 특정 값을 id 속성의 값으로 갖는 요소를 선택. 속성값 앞에 #을 붙여 아이디임을 나타냄.
ex) /* id 속성값으로 abc를 갖는 요소를 빨간색으로 만든다. */
#abc {
color = red;
}
클래스 선택자는 특정 값을 class 속성의 값으로 갖는 요소를 선택. 속성값 앞에 .을 붙여 클래스임을 나타냄.
ex) /* class 속성값으로 abc를 갖는 요소를 선택 */
.abc
ex) /* class 값으로 abc를 갖는 p 요소를 선택 */
p.abc
ex) /* 둘 다 빨간색. xyz를 나중에 정의했기 때문*/
.abc {color:blue;}
.xyz {color:red;}
특정 요소의 하위에 있는 요소 선택. 사이에 요소가 더 있어도 선택 가능하다.
ex) /* div 요소의 하위에 있는 blockquote 요소 선택*/
div blockquote
특정 요소의 자식 요소를 선택. 한단계 아래에 있는 요소만 선택한다.
ex) /*div 요소의 자식 요소 중 blockquote 선택.*/
div > blockquote
어떤 요소의 형제 요소를 선택.
ex) /* h1 요소의 형제 요소 중 p 요소 선택*/
h1 ~ p
어떤 요소의 형제 요소 중 첫번째 요소를 선택.
ex) /* h1 요소의 형제 요소 중 첫번째 p 요소 선택 */
h1 + p
요소의 특정 부분을 선택.
가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 쓴다. 하지만 콜론을 하나만 써도 대부분 작동.
ex) /* p 요소의 첫번째 줄의 글자색으로 빨간색으로 만듦.*/
p::first-line{
color:red;
}
ex) /* p 요소의 첫번째 문자의 색을 빨간색으로 만듦.*/
p::first-letter{
color:red;
}
ex) /* p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듦.*/
p::before{
content : "xyz";
color:red;
}
ex) /* p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듦.*/
p::after{
content : "xyz";
color:red;
}
ex) /* li 요소 중 내용이 없는 것 선택 */
li:empty
ex) /* p 요소에 마우스를 올렸을 때 글자색을 빨간색으로 만든다.*/
p:hover{
color:red;
}
형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용. 앞에서부터 센다.
문법 : :nth-child( an + b )
ex) /* li 요소 중 2,5... 순서에 있는 것을 빨간색으로 만든다.*/
li:nth-child( 3n+2 ){
color:red;
}
형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용. 뒤에서부터 센다.
문법 : :nth-last-child( an + b )
ex) /* li 요소 중 뒤에서부터 짝수 번째 순서에 있는 것을 빨간색으로 만든다.*/
li:nth-last-child( even ){
color:red;
}
CSS 속성에는 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미치고 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.