선택자란?
스타일은 적용 대상이 있어야 하는데 선택자가 바로 그 대상이다. 기본적으로 태그, 아이디, 클래스를 선택자로 사용하고 조합하여 선택자를 정의해 사용한다.
기본 선택자
기본 선택자에는 태그, 아이디, 클래스 3가지가 있다.
태그 선택자
- 태그 선택자는 태그 이름으로 요소를 선택
- 문서내 임의의 태그를 선택자로 사용
- 같은 디자인 속성을 가지는 여러 태그는
,로 나열해 일괄적용
p {
text-align: center;
color: red;
}
h1,h2,h3,h4 { color: blue; }태그의 특정 속성에 대해서 선택자를 지정하는 것이 가능하다.
input[type=text] {
background-color: blue;
color: white;
}id 선택자
id속성을 사용해 특정 요소를 선택id는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택하는데 사용
#id_name { color: blue; }
---
<div id="id_name">
...
</div>class 선택자
- 클래스 선택자는 특정 클래스 속성이 있는 요소를 선택
.class_name형식으로 사용- class로 디자인을 먼저 정해놓고 필요한 곳에서 해당 class를 지정해 사용하는 방식
.class_name1 { color: blue; }
p.class_name2 { color: red; }
---
<div class="class_name1">
...
</div>기본 선택자 조합
동시 지정
,을 이용해 선택자를 나열하면 해당 선택자에 동일한 속성 부여
h1, h2 {...}
.box, .note {...}태그와 클래스 결합
태그와 클래스를 .를 이용해 결합 가능
.header { color: red; }
h1.header { color: blue;}
h2.header { color: green;}속성 활용
텍스트 속성
기본적으로 화면에 출력되는 글자와 관련된 속성
color: 글자색 지정text-align: 글자 정렬 방식 지정(left/right/center)
폰트 속성
기본적으로 화면에 출력되는 글꼴과 관련된 속성
font-family: 폰트의 이름과 유형을 지정하는 속성
h1 {
font-family: "Times New Roman", verdana, airal;
}font-weight: 폰트의 스타일을 지정하는 속성
.text1 { font-style: normal }
.text2 { font-style: italic }font-size: 폰트의 크기를 지정하는 속성
.text1 { font-size: 10px }
.text2 { font-size: 2em }font-weight: 폰트의 두께를 지정하는 속성
.text1 { font-weight: normal }
.text2 { font-weight: bold }
.text3 { font-weight: bolder }정렬 속성
text-align: 요소내 텍스트의 정렬vertical-align: 인라인 혹은 테이블 셀에서 수직 정렬
링크 속성
하이퍼링크를 만들기 위한 <a> 태그에 적용할 수 있는 속성
대부분 가상 선택자를 사용
a:link: 방문한 적 없는 기본 링크a:visited: 방문한 링크a:hover: 마우스가 링크 위에 올라갔을 때a:active: 링크를 클릭했을 때
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: blue;
text-decoration: none;
}
a:hover {
color: hotpink;
text-decoration: underline;
}
a:active {
background-color: blue;
text-decoration: underline;
}컬러 속성
CSS에서 color 속성은 색상이름, HEX(#)코드, rgb, hsl로 나타낼 수 있고 색상에 투명도를 적용시킬 때는 rgba, hsla를 사용하여 0.0(완전투명)~1.0(완전불투명) 사이의 숫자로 나타낼 수 있다.
#text1 { color: red; }
#text2 { color: #FF0000; }
#text3 { color: rgb(255, 0, 0); }
#text4 { color: rgba(255, 99, 71, 0.5) }
#text5 { color: hsla(9,100%, 64%, 0.5) }배경 속성
색상이나 이미지를 배경으로 지정하기 위한 속성
background-color: 글자색 지정background-image: 배경이미지 지정, 상대경로, 절대경로, url 사용가능background-repeat: 이미지 반복background-position: 이미지의 위치를 지정background-attachment: 이미지의 스크롤이나 고정을 지정
body {
background-image: url("back_img.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
