본문 바로가기

Web/CSS

CSS 문법 (CSS syntax)


CSS 문법은 크게 두가지 부분으로 나눌 수 있다. 

1. 어떤 부분 
2. 어떻게 나타내라


[그림 1]

위 그림에서 h1이 1.어떤 부분에 해당한다. <h1> 태그를 대상으로 한다는 것이다. 
{color:blue; font-size:12px;}  부분이 2. 어떻게 나타내라에 해당한다.

즉, css 문법에 맞춰 기술 해주면 위와 같이 문서에서 원하는 부분을 잡아서 스타일링을 할 수 있다. 
 그림 1에서 보면 h1위에 Selector라고 나와있는데 스타일링하기 위한 대상을 지정하기 위해 Selector가 쓰인다. 

예를 한번 보자 (  http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1 )

[예제 1]

css 문법을 적용하는 방법 중 하나로 html내에서 style 태그를 사용하는 방법이 있다. 

<style type="text/css"> 스타일을 지정 </style> 


그럼 저 태그 사이에 지정한 스타일을 해석 해보자 

p                           //p 태그를 selector로 잡는다. 모든 p 태그가 잡힌다. 

{

color:red;               //글씨의 칼라를 빨강으로 지정하고,

text-align:center;    //글을 중간에 위치하게 한다. 


예제 1의 오른쪽을 보면 p 태그안의 text들이 빨간색으로 표현되고 중간에 자리잡은 것이 보일 것이다. 


 

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

CSS  (0) 2012.03.05
CSS selector  (0) 2012.02.10
background image 백그라운드 이미지 사이즈 맞추기  (4) 2011.04.28