| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- 포인터
- java
- c++
- algorithm
- WebProgramming
- Call-by-reference
- System
- OOP
- JavaScript
- 악성코드
- API
- Sort
- 윈도우즈
- CLASS
- function
- beans
- 투자
- windows
- jsp
- query
- HTML
- Kafka
- 노드
- UTF-8
- array
- request
- CSS
- meta
- C
- 자료구조
- Today
- Total
hahahia
CSS를 이용한 간단한 예제(선택자) 본문
CSS 선택자(Selectors)
- 원하는 스타일 요소를 선택하기 위해 사용하는 패턴
- HTML태그에 class와 id속성을 정의하여 element를 선택하고 적용
- 보통 일반적으로 class 속성을 정의해서 사용한다.
class 선택자
- 같은 태그에 내용에 따라 서로 다른 스타일을 적용하고자 할 때 사용한다.
- class = "intro"와 같이 class 속성을 가지는 모든 element들을 선택
ex) .intro{ background-color:yellow;}
ex) P.question1 {font-size:15pt; background:rgb(215,200,240) }
P.question2 {color:#0000ff}
id 선택자
- id="firstname" 속성을 가지는 하나의 element를 선택
- 문서 내에서 어떤 스타일을 단 한번만 적용하고자 할 경우 사용
ex) #intro {font-style:italic}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<META http-equiv="content-type" content="text/html; charset=UTF=8" />
<STYLE type="text/css">
.thumbnail {width:100px; height:90px} /* 선택자 클래스를 이용하여 그림크기 같게끔 고정 */
.wideImg {position:absolute; left:30% ; top:30%; width:300px; height:270px;} /* 이미지크기를 늘리게 하는 클래스 선언(선택자)*/
</STYLE>
<SCRIPT type="text/javascript">
var flag=0;
function img01() { document.getElementById("img1").style.display="none"; }
function img02() { document.getElementById("img2").style.display="none"; }
function img03() {
temp = new Image()
temp.src = document.getElementById("img3").src;
document.getElementById("img3").className = "wideImg"; // className을 wideImg로 변경.....
}
function jongbum()
{
document.getElementById("img1").style.display="inline";
document.getElementById("img2").style.display="inline";
document.getElementById("img3").style.display="inline";
}
/*
function hide(obj)
{
obj.style.display="none";
}
function showAll()
{
for(i=0; i<document.images.length.i++)
{
document.images[i].style.display="inline";
document.images[i].style.visibility="visible";
}
}
*/
</SCRIPT>
</HEAD>
<BODY>
<IMG class="thumbnail" src="img01.jpg" id="img1" onclick="img01()"> <!-- class를 thumbnail로 선언 그리고 클릭시 onclick이벤트발생(img함수호출) -->
<IMG class="thumbnail" src="img02.jpg" id="img2" onclick="img02()">
<IMG class="thumbnail" src="img03.jpg" id="img3" onclick="img03()">
<P>
<input type="button" value="원래대로" onclick="jongbum()">
</P>
</BODY>
</HTML>
'Web Programming > HTML & CSS' 카테고리의 다른 글
| CSS 기초 01 (0) | 2012.03.28 |
|---|---|
| HTML소스(가입양식 폼 만들기) (0) | 2012.03.14 |
| HTML(HyperText Markup Language) part 01 (0) | 2012.03.07 |
