선택자 {속성 : 값 ;}

body (background-color : gray ;}


문법상 표기법은 하나의 속성마다 엔터를 입력하여 구부이 명확히 하여야 하지만
h1
   {
   text-algn : left;
   color : #FFF;
   }



실무에서는 전부 나열하는 방법을 이용
h1   {   text-algn : left;   color : #FFF;   }


1전체 선택자 *
-모든 요소에 대한 스타일을 지정
* {border :0; ; margin :0; }


*#main {border : 1px ; margin : 1px ;}
*.sub {border : 1px ; margin : 1px ;}
-->main 이라는 id를 가진 요소의 모든 하위 요소에 border , margin 값이 1px 씩 표현됨


2타입선택자
-요소명만 선택자로 지정. 가장 많이 이용됨
body {color : black ; background-color : gray ;}
h1 {font-weight : bold ;}


3하위선택자
-주로 타입선택자와 함께 사용. 특정 요소의 묶음 하위에 나오는 요소를 선택자로 지정
li a {text-decoration : underline ;}
a의 태그 요소에만 스타일을 지정



4class선택자, id선택자
-id나 class 이름으로 원하는 요소를 지정

#notice {font-weight : bold ;}
.line01 {color : gray ;}

<p id="notice">공지</p>    <!--굵게 표시됨-->
<p class="line01">사이트오픈</p> <!--회색으로 표시됨-->
 

매번 id와 클래스를 지정해 주고 css를 작성해야 하기에 시간이 많이 걸리고 비효율적이기에
아래와 같이 사용
<style type = "text/css">
#main_title h1 {color : #ccc ;}
#sub_title h1 {color : #aaa ;}
</style>

<div id="main_title">
    <h1>회색글</h1>
</div>

<div id="sub_title">
   <h1>더진한회색글</h1>
</div>



css를 작성할때 너무 많은 클래스를 사용하고 있다면
문서가 제대로 구조화되고 있지 않다는 것을 의미

온라인벼룩시장 중고나라
http://pple2.com




Color : gray;


color : #FF0011;


color : #f01;


color : rgb(255,1,1);


color : rgb(100%, 0%, 0%);



위와 같은 형태로 사용 
1.외부 파일을 불러
<head>
<link rel="stylesheet" type="text/css href="/css/style.css " />
</head>

2.head 범위 안에 import로 외부 스타일시트 참조
<head>
<style type="text/css">
<@import url ("/css/style.css");
</style>
</head> 


3.개별요소에 지정
<div style="width:20px; height:20px; border:1px;">
   <p style = "color:#AAAAAA;"></p>
</div> 

4.사용자 지정스타일 
 <head>
<link rel="stylesheet" type="text/css href="/css/style.css " />
 <style ="text/css">
<@import url ("/css/style.css");
</style> 

</head> 
 
   html xhtml 
대소문자 인식  작성자 기호대로작성  대소문자구분, 모든요소와 속성명은 반드시 소문자 
태그   여는태그만 쓰고 닫는 태그는 생략가능, 일부태그만 생략가능  열고 닫음이 명확해야함 
 값 표현 HTML id=js 
속성값에 따옴표 생략가능 		  XHTML id="js"
따옴표 필수 
 빈태그 <br>, <hr>, <img> 형태로 표현  <br />, <hr />, <img /> 


HTML ex
<BODY>
<H1>너랑</H1>
<P>나랑
<P><IMG src=a.jpg>
</BODY>


XHTML ex
<body>
<h1>너랑</h1>
<p>나랑</p>
<p><img src="a.jpg /></p>

</body>
 
dtd란?
웹 브라우저가 웹 페이지를 동일한 기준에 의해 해석(parsing)되도록 문서의 타입을 선언하는 역할

dtd정의의 필요성

1.문서의 가독성증가
2.브라우저 별 호환성 증가 (크로스 브라우징)
3.문서 제작의 효율성 증가

dtd종류 
1.HTML 4.01 Transitional (호환모드)

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

2. HTML 4.01 strict (엄격모드)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

3.XHTML 1.0 Transitional (호환모드)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

4. XHTML 1.0 strict (엄격모드) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

+ Recent posts

티스토리툴바