[웹 서비스 개발] CSS for XML (Cascading Style Sheet) (1)

2. CSS 스타일링 방식

[1] tag에 직접 작성하는 방식

1) tag에 직접 스타일을 작성할 수 있다.

<h1 style = "background-color : DodgerBlue;">Hello World</h1>
<p style = "background-color : Tmato;"></p>

[2] css 파일로 나누어 작성하는 방식

1) xml-stylesheet 태그를 사용하여 xml_css2.css와 같이 css 파일을 만들어서 적용할 수 있다.

<?xml-stylesheet type = "text/css" href = "xml2_css2.css"?>

title, paragraph {
	display : block;
}

title{
	font-size : 40px;
    background-color : DogderBlue;
}

paragraph{
	margin-top : 30px;
    font-size : 20px;
    background-color : Tomato;
}

[3] 다양한 CSS 스타일 적용

1) 생성한 태그들은 display 속성이 inline으로 되어 있으므로, block으로 지정한다

title, pargraph {
	display : block;
}

2) 배경색은 background-color, 글자색은 color

title {
	background-color : Tomato;
    color : black;
}

3) hover과 같은 effect 적용이 가능하다.

title:hover {
	background-color : skyblue;
    color : red;
}

4) margin, padding과 같이 여백을 줄 수 있다.

title {
	margin : 20px 0px; (상하, 좌우)
    padding : 20px 0px 20px 0px (상 우 하 좌)
}

5) 글자 크기를 지정할 수 있다.

paragraph {
	font-size : 30px;
}

• pt, px, rem, em 등 다양한 단위도 존재한다.