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 태그를 사용하는 방법이 있다.
그럼 저 태그 사이에 지정한 스타일을 해석 해보자
예제 1의 오른쪽을 보면 p 태그안의 text들이 빨간색으로 표현되고 중간에 자리잡은 것이 보일 것이다.
위 그림에서 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 |