XML :: 4.1.CSS

저번 목차에 이어서 CSS에 관련해서 더 설명하려고 한다.

---

ℓ CSS 사용법

 

CSS의 구성은 다음과 같다.

 

good {
display :  block
}
blog { 
font-size : 24pt; color : navy
}
name { 
font-weight : bold; color : blue
}
age { 
font-style : italic; color : green
}

<CSS>

 

 

선택자 : good, blog, name, age는 표시 정보를 적용하는 요소 타입의 이름이다.

 

선언 블록 : 중괄호{} 사용하고 하나 이상의 선언을 포함하며, 각 선언은 세미콜론(;)으로 구분한다.

                  (마지막은 세미콜론 생략가능)

 

각 선언(선언 블록 안에 있는 애)은 요소를 표시하는 글꼴과 해당 속성을 지정하며, 선언은 속성과 값, 콜론으로 구성된다.

---

ℓ CSS 적용 방법 및 속성

 

XML 문서에서는 CSS파일을 외부 방식을 이용하여 주로 적용한다.

 

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="xml_link.css"?> <!--CSS 연결-->

<XML CSS 적용>

 

CSS에서 글자 속성은 다음과 같다.

• color : 글자 색상 지정
• font-family : 한글 또는 영문의 글꼴 지정
• font-size : 글자 크기 지정
• font-style : 글자 스타일을 이탤릭체로 지정
• font-weight : 글자 두께 지정
• text-decoration : 밑줄 지정
• text-shadow : 글자에 그림자 넣기, 각각 오른쪽 그림자 길이, 아래쪽 그림자 길이, 흐린 정도, 그림자 색상을 의미
• text-align : 글자 정렬(left, right, center)
• text-indent : 값이 양수면 들여쓰기, 음수면 내어쓰기

글자 속성의 예시다.

C {
color : red;
color : #ff0000; 
}
ff { 
font-family  : NanumGothic;
font-size : 12px;
font-style : italic;
font-weight : bold;
}
tt {
text-decoration : underline;
text-shadow : 3px;
text-align : left, right, center
text-indent : 10;
}

<글자 속성 예시>

 

 

글자 속성의 예시이며 다양한 속성 값을 넣으며 공부하니 이해가 잘됐다.