■ 프론트엔드 ■/CSS

css - 기초사용 3가지

serpiko 2013. 10. 14. 18:44

css : Cascading Style Sheets

 

HTML과 XHTML에 주로쓰이는 CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다.

W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.

 

CSS를 사용하는 방법은 크게 3가지로 분류할수있다.

 

 

 

 

1. HTML 태그에 직접 Style 속성을 사용.

 

<태그 STYLE="속성:값;"> 의 형태. 9번 라인을 보면 <p Style="font-size:20pt;color:red;">css를 적용한 모습</p>

 

폰트의 사이즈, 컬러를 적용한 상태이다.

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>첫번째 방법</title>
 </head>
 <body>
  <p>html 태그에 직접 Style속성을 이용하여 사용할 수 도있다.</p>
  <p Style="font-size:20pt;color:red;">css를 적용한 모습</p>
 </body>
</html>

 

결과)

 

 

2. head부분에서 선언하여 사용.

<head> ~ </head> 사이에 선언하여 쓰는 방법 아래의 경우는 앞으로 쓰이는 모든 H1 태그는 색상이 red, 사이즈는 12pt가 된다.

 

문법및 사용예)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
<style type=“text/css”>
  <!--
      적용태그 { 속성:값; 속성:값;}
      적용태그 { 속성:값; 속성:값;}
    -->
</style>  
  
<style type=“text/css”>
  <!--
      H1{ color:red;
          font-size:12pt; }       
    -->
</style>

 

실무코드)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 
<style type="text/css">

body{margin:0;overflow:hidden;}
.absolute{position:absolute;overflow:hidden;}
.bgColor {background-color:#ffffff}
.imgContainerClass{position:absolute;top:100px;}

#titleConatiner{position:absolute;background-color:#ffffff;top:0px;width:100%;height:100px;}
.title0{position:fixed;top:27px;left:50%;margin:0 0 0 -125px; cursor:pointer;}
#footerContainer{position:absolute;background-color:#ffffff;width:100%;height:120px;bottom:0;}
.enter0{position:fixed;bottom:60px;left:50%;margin:0 0 0 -75px; cursor:pointer;}

</style>

 

 

3. 외부 스타일시트 사용.

HTML의 head사이에 style.css 문서를 호출하는 구문을 적어주고, 실제 css는 style.css에 따로 기술하여 적용한다.

 

1
2
3
 
<head>
    <link rel=“stylesheet” type=“text/css” href=“style.css”/>
</head>

 

저작자표시 비영리 변경금지