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를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07


CSS(Cascading Style Sheets)

- 웹 페이지의 외형을 명시하고 제어하기 위한 언어

- 웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그에 따라 별도의 스타일 정보를 정의하여 종류별로 일괄적인 스타일을 적용한다.

HTML만으로 스타일을 수동적으로 그때그때변경하기 힘들기 때문에

CSS를 이용하여 편하게 외형을 정의할 수 있습니다.


사용하는 방법


<STYLE type="text/css">

H1, H2 { background:url(./bg_sky.jpg) } /* H1,H2의 배경으로 image 사용 */

H3 { background:Navy; color:white } /* H3의 배경을 남색, 글자색을 흰색으로 */

BODY { color:Navy; } /* BODY 태그의 색을 남색으로 지정 속성이 상속되므로 모든

                               글자색이 남색 */

P EM { font-weight:bold; color:red } /* P 태그 안의 EM 태그의 글자를 굵게 */

</STYLE>

// HEAD 안에서 선언을 한 후 BODY구문에서 적용...



간단한 CSS 예제->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 

<style type="text/css">

P {font-size:250%; color:#ff0000} // P 태그에서의 정의

.c1 {font-family:"궁서체"; color:#00cc00} // 클래스(선택자)

#my {width:50px ; height:50px}

P.mySize {font-size:12pt; color:#ff0000} // 같은 P태그에서도 다른 양식 적용(클래스)

</style>

</head>

 <body>

 <p>스타일 연습</p>

 <DIV class="c1"> 클래스 선택자1 연습</div>

 <INPUT type="button" value="버튼" class="c1"></INPUT>

 <INPUT type="button" value="내 버튼" id="my">

 <P class="mySize">글꼴 크기</P>

 <DIV class="mySize">글꼴 크기</DIV>

 </body>

</html>


신고

'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> INPUT form 예제 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>
 <FORM action="#" method="post">
  <TABLE border= "1">
<TR>
<TH> ID </TH> 
<TD> <INPUT type="text" name="id"></TD>
</TR>
<TR>
<TH> 성명 </TH> 
<TD> <INPUT type="text" name="name"></TD>
</TR>
<TR>
<TH> 전자우편 </TH> 
<TD> <input type="text" name="email"></TD>
</TR>
<TR>
<TH> 암호 </TH> 
<TD> <input type="password" name="pwd" size="10" maxlength="10" ></TD>
</TR>
<TR>
<TH> 성별 </TH>
<TD> <input type="radio" name="gender" value="male"> 남 <input type="radio" name="gender" value="female"> 여</TD>
</TR>
<TR>
<TH> 직업 </TH> 
<TD> <select name="job">
<option value="컴퓨터기사"> 컴퓨터기사 </option>
<option value="요리사"> 요리사 </option>
<option value="프로게이머"> 프로게이머 </option>
<option value="학생"> 학생 </option>
</TD>
</TR>
<TR>
<TH colspan="2"> <input type="submit" value="가입완료"> &nbsp; &nbsp; <input type="reset" value="취소"> </TH>
</TR>
</TABLE>
</FORM>
 </body>
</html>


신고

'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07

HTML이란?
- HyperText를 만들기 위한 Markup 언어

/* 기본적인 HTML의 구조 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head> // HEAD부
  <title> 제목 표시줄에 나타나는 부분 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=urf-8"> 
 </head>

 <body> // BODY부
  <p><b>실제로 웹브라우저에 출력되는 부분</b><p>
 </body>
</html>

- 주석 tag
1. <!-- 주석 -->
2. <! 주석>
3. <!-- 여러 줄 주석 //--> 


<HEAD>...</HEAD>

 HTML문서에 대한 정보 표현 Tag로 <TITLE> Tag를 제외한 다른 정보들은 웹 브러우저를 통해 보이지 않는다.
  - <TITLE> </TITLE>
   HTML 문서의 제목을 지정
   웹 브라우저의 제목 표시줄에 표현됨
  - <META>
  홈페이지의 작성자, 작성일자, 사용 웹 에디터, 검색 키워드 등에 대한 정보 표시
 
 속성 이름  값  설명
name  generator, author, content, description, copyright, date 제공할 정보의 종류 
content  문자열  제공할 정보의 내용 
schema  문자열  추가설명 
Http-Equiv  refresh, page-enter, expire 동적 헤더 정보 갱신 
ex) <META http-equiv="refresh" content="5; url=http://www.naver.com">
      <META http-equiv="Content-Type" content="text/html; charset=urf-8">  

<BODY>... </BODY> 

 웹 브라우저 화면에 실질적으로 나타나는 홈페이지 내용
 속성 이름  값  설명
 bgcolor  색이름, 16진수 색상  페이지의 배경색 지정
 background  이미지 파일명  페이지의 배경 그림 지정 
 bgproperties  fixed  배경 그림을 고정시켜 스크롤해도 움직이지않게
 text  색이름, 16진수 색상  페이지의 기본 문자 색상 지정
 link  색이름, 16진수 색상  링크의 색상 지정
 alink  색이름, 16진수 색상  활성화(Active)된 링크의 색상 지정
 vlink  색이름, 16진수 색상  방문했던(Visited) 링크의 색상 지정
 topmargin  픽셀값   페이지의 상하 여백 지정 
 leftmargin   픽셀값   페이지의 좌우 여백 지정
 scroll  yes/no  스크롤 허용 여부 지정

참고 : 위에서 말한 16진수 색상은 밑 링크를 reference하여 쓸 수 있다.
http://www.w3.org/TR/css3-color/#svg-color

<XMP> ... </XMP>
 HTML 문서를 해석해서 웹 브라우저에게 보여주지 않고 소스 자체를 보여주게끔 한다. 

<HR> - 수평선 삽입

번호가 있는 리스트(<OL> ... </OL>)
 - <LI> 태그에 확장 옵션을 두어 숫자표기 대신 영문자나 로마 숫자로 나타낼     수 있다. 

<IMG src="이미지 파일명">
 - 그래픽 이미지를 웹 브라우저에 삽입할 때 사용
 - src속성은 생략 불가능한 필수 옵션. 
 
신고

'Web Programming > HTML & CSS' 카테고리의 다른 글

CSS를 이용한 간단한 예제(선택자)  (0) 2012.04.04
CSS 기초 01  (0) 2012.03.28
HTML소스(가입양식 폼 만들기)  (0) 2012.03.14
HTML(HyperText Markup Language) part 01  (0) 2012.03.07

+ Recent posts