[웹1]
6강 - CSS
05_스타일시트.zip
CSS : Cascading Style Sheet
HTML : 뼈대 / CSS : 인테리어
HTML 단점인 여러개 붙여야 하는 소스를 간단하게 만들어주기 위해 CSS언어도 같이 쓴다.
1) CSS 선택자
스타일 시트 작성법 : 선택자{스타일속성:스타일값;}
선택자명 작성시 주의사항 : 한글, 띄워쓰기(다른의미), 특수문자, 숫자 나중에, 특정 키워드, 태그명 X
- 태그 선택자
태그명 특정한 태그를 모두 선택
- 클래스 선택자
.클래스명 클래스명이 지정된 모든 태그를 선택(1:다수)
- 아이디 선택자
#아이디명 아이디명이 지정된 유일한 태그를 선택(1:1)
- 그룹 선택자
선택자, 선택자 같은 속성을 각각 지정할 경우 그룹으로 묶어서 표현가능
태그명.클래스명(#아이디명) 특정 태그를 더 정확히 선택
- 태그 클래스 중복 적용시
.클래스명 .클래스명 .....(한칸띄우고 계속 적용)
- 태그 중 클래스 적용(ex. li태그 중 하나의 클래스에만 글자체 적용, 클래스 적용 안된 태그에는 미적용됨)
태그 .클래스명
* 예제1
<head>
<title>CSS 선택자</title>
<style type="text/css"> --->css언어 시작 (head 안, title 밑에 위치함)
h1{color:red;} ---> h1 태그 명령 (h1태그에만 적용됨)
li{color:blue; font-size:24px;}
.list1{ font-style:italic; font-weight:bold;} ---> .클래스명 (태그 클래스="클래스명" 에만 적용됨)
#list2{color:green;} ---> #아이디명 (태그 아이디="아이디명" 에만 적용됨)
.list3{border-bottom:1px solid #00F;}
li.list3{border-bottom-style:dashed;} ---> li 태그안의 list3에만 적용됨
</style>
</head>
<body>
<h1 class="list3 list1">CSS 선택자</h1> ---> class 중복 삽입
<ul>
<li class="list1">CSS 선택자</li> ---> li 별로 class, id 개별로 적용 가능
<li class="list1">CSS 선택자</li>
<li class="list3">CSS 선택자</li>
<li id="list2">아이디 선택자</li>
<li class="list1">클래스 선택자</li>
</ul>
</body>
2) 후손 자손 선택자, 마우스 반응 선택자
- 후손 선택자
선택자 선택자(한칸띄우기) ---> 둘이상의 연결고리가 있는 선택자.
- 자식 선택자
선택자 > 선택자(사이에 > 꺾인가로 쓰기, 공백 상관없음) ---> 하나의 연결고리만 있는 선택자.
- 반응 선택자
:hover 마우스를 올린 상태
:active 마우스를 누르고 있는 상태
- 링크 선택자(텍스트)
:link href 속성을 가지고 있는 a태그 (클릭 전)
:visited 방문했던 a태그 (클릭 후)
* 예제2
<head>
<title>자손후손 선택자</title>
<style type="text/css">
body h1{color:red;} ---> 후손 선택자
자손선택자 아닌가? -> 만약 body>h1이라면, p안에 있는 h1만 해당함. 저경우에는 body안의 h1과 p안의 h1 모두 해당
p>span{color:blue;} ---> 자손 선택자
h1:hover{color:green;} ---> h1에 마우스 올린 상태 (링크 뿐 아니라 텍스트에도 적용가능)
h1:active{color:yellow;} ---> h1에 마우스로 누르고 상태
a:link{color:black;} ---> 링크 걸린 href에 모두 적용
a:visited{color:yellow;}
a:hover{color:green;}
a:active{color:yellow;}
</style>
</head>
<body>
<h1>자손 후손 선택자</h1>
<h2>DOM : Document Object Model</h2>
<p class="p1">
<span>HTML은 계층구조를 가집니다.</span>
</p>
<p>
<h1>계층구조를 이용하여 특정 구조의 하위요소를 찾아갑니다.</h1>
</p>
<a href="#">링크텍스트</a>
</body>
3) CSS 속성
- 크기 단위
px 픽셀 (고정적)
% 백분율 (유동적)
em 배수 (유동적)
기본 사이즈 (폰트 크기를 지정하지 않은 경우) : 16px
기본 사이즈 조정하는 법 : body{font-size:36px;}
반응형 웹(사이즈가 유동적)을 만들 경우 : 유동적인 %, em 사용
* 예제3
<head>
<title>Untitled Document</title>
<style type="text/css">
body{font-size:36px;}
.type1{font-size:16px;}
.type2{font-size:24px;}
.type3{font-size:32px;}
.type4{font-size:100%;}
.type5{font-size:150%;}
.type6{font-size:200%;}
.type7{font-size:1em;}
.type8{font-size:1.5em;}
.type9{font-size:2em;}
</style>
</head>
<body>
<h1>크기 단위</h1>
<h2>픽셀 단위</h2>
<p class="type1">DreamWeaver</p>
<p class="type2">DreamWeaver</p>
<p class="type3">DreamWeaver</p>
<h2>퍼센트 단위</h2>
<p class="type4">DreamWeaver</p>
<p class="type5">DreamWeaver</p>
<p class="type6">DreamWeaver</p>
<h2>배수 단위</h2>
<p class="type7">DreamWeaver</p>
<p class="type8">DreamWeaver</p>
<p class="type9">DreamWeaver</p>
</body>
- 색상 단위
#000000 HEX 코드 단위 (16진수 색상 표현)
2자리식 중복될 경우 세자리 #000로 표현 가능
2자리씩 RGB
0 어두운색 - F 밝은색 (검은색 #000 흰색 #FFF)
RGB (Red, Green, Blue) RGB 색상 단위
RGBA (Red, Green, Blue, Alpha) RGBA 색상 단위 (Alpha : 투명도 0.0~1.0)
- URL 단위
url(경로)
댓글