CSS 기본 7강 - Element별 속성(property) 1 -

본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라

는 특정인물과 상황을 만들었습니다.
 

▶ Element별 속성(property)

 이제 우리의 최삼순 인턴사원은 HTML에서 스타일을 위하여 “어떤 엘리먼트든지 마음껏 선택할 수 있습니다. 그런데 선택만 한다면 CSS를 사용하는 의미가 없겟죠? 다음으로 생각해 볼 것은 선택한 Element를 “어떻게 바꿀 것인가“ 입니다. CSS의 구성을 다시 한번 보도록하겠습니다.

selector {property:value}

 

Property가 바로 Element을 어떻게 바꾸어 주는지를 결정하게 됩니다. 이제부터 알아볼 것은 이 Property에 대한 부분입니다. Property는 각각의 Element별로 정의 할 수 있는 것이 모두 다르며 그 종류만 해도 방대한 양을 이루고 있습니다. 여기서 이 Propery에 대한 모든 설명을 하는 것은 무리이며, 최삼순 인턴사원에게 꼭 필요한 Property에 대하여 알아보고 어떻게 그 속성들을 사용할 수 있는지 알아보겠습니다.

 ○ 1단계 일단 글씨속성부터 바꾸어 보자!

 HTML문서를 구성하고 있는 내용을 가장 직접적으로 표현하는 방법은 바로 글씨를 이용한 부분입니다. 최삼순 인턴사원에게도 가장 먼저 필요한 것은 바로 글씨(font)와 관련된 속성들입니다. 글씨체 속성 중 처음으로 사용해 볼 것은 바로 글씨의 색깔과 글씨의 크기를 조정하는 것입니다. CSS에서 글씨속성을 정의해주는 것은 "font"와 관련된 속성들입니다. 글씨와 관련된 속성은 "font"는 대표적으로 다음과 같은 구성을 가지고 있습니다. 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height'가 바로 그것입니다. 여기서 폰트의 사이즈를 조정하는 것은 당연히 “font-size"입니다.

 이제 ”font-size“속성에 대하여 알아보도록 하겠습니다. "font-size"속성에 지정할 수 있는 값은 4가지 종류로 다음과 같습니다.

 

일단 가장 많이 쓰이는 "value"의 값으로는 길이입니다. 길이 값으로는 여러분이 직접 px로 폰트의 사이즈를 정해주는 것입니다. 주의할 점은 여기에 PX의 값을 음수값으로 정해 줄 수 없습니다.

 다음으로는 사용할 수 있는 값으로는 백분율로써 %와 em값으로 사용할 수 있습니다. 여기에 사용되는 폰트의 백분율의 기준은 속성이 사용된 엘리먼트의 부모엘리먼트의 값을 기준으로 합니다. 폰트의 백분율크기와 같이 다음의 2가지 방법은 폰트사이즈 속성이 적용된 엘리먼트의 상위 엘리먼트를 기준으로 합니다. 절대크기는 상위 엘리먼트의 폰트크기를 "medium"으로 large쪽으로 갈수록 medium의 1.2배씩 상승하게 됩니다. 상대 크기는 위의 절대 크기를 기준으로 smaller를 사용하면 1단계 작게, lager를 사용하면 1단계 크게 글자크기를 조정하여 줍니다. 이렇게 4가지 방법으로 “font-size"의 값을 정하여 줄 수 있습니다.

div { font-size: 12pt; } p { font-size: small; } li { font-size: smaller } span { font-size: 150% }

 

상대 크기 및 절대크기 같은 경우는 여러분이 만드는 HTML 엘리먼트의 font를 원하는데로 크기를 정할 수 없기 때문에 사용하기 까다롭습니다. 직접 폰트의 크기를 정해주는 길이 값을 사용하세요.

 다음으로 “최삼순”인턴사원이 자주 사용하는 글자의 색을 바꾸는 속성에 대하여 알아보겠습니다. 글자의 속성을 바꾸는 속성은 “color"로 여러분이 만드는 대부분의 엘리먼트에 사용할 수 있습니다. color은 속성을 사용하는 방법 또한 상당히 간단합니다.

Element { color: #998877 }

위와 같이 원하는 엘리먼트에 color속성을 사용합니다. 그리고 값으로는 RGB 색상값으로 직접 입력할 수도 있고, HTML에서 사전에 정의된 색상명(color name)을 정의해 줄 수도 있습니다.

p { color: red } span { color: rgb(255,0,0) } a { color: #ff0000 }

 

이렇게 글자와 관련된 아주 간단한 속성인 컬러와 크기에 대하여 알아 보았습니다. 이제 지금까지 배운 간단한 글자속성을 이용하여 “최삼순”인턴사원이 무엇을 만들어 보았는지 보도록 할까요?

 

 최초에 “최삼순” 인턴사원이 만들었던 사원관리목록과 크게 다른점은 없을 것입니다. 하지만 CSS를 사용하지 않고 만들었던 사원관리목록과 코딩부분에서는 큰 차이 보일 것입니다. 한번 비교해 볼까요?

 

CSS를 사용한 HTML문서와 사용하지 않은 HTML문서의 차이는 이제 알 수 있을 것입니다. 지금의 파일 상태야 “최삼순”인턴사원이 아직까지 사원들의 수를 많이 하지 않았기 때문에 큰 차이를 못 느끼지만 100개이상으로 늘어간다면 CSS를 적용한 문서가 관리하기에는 훨씬 용이 할 것입니다. 각각의 엘리먼트에 모두 class를 주었기 때문입니다.

 다시 본론으로 돌아가서 “최삼순”인턴사원이 적용한 font들에 대하여 알아보겠습니다. 일단 위에서 언급했듯이 사원들의 정보를 각각의 항목에 맞게 span과 class를 사용해 특정이름을 가진 엘리먼트로 만들어 주었습니다. 그럼 CSS부분을 보겠습니다.

.name, .team {   font-size: 120%;   color: blue; }

 

 엘리먼트를 선택하는 selector 부분에는 name 이라는 class를 가진 엘리먼트와 team라는 class를 가진 엘리먼트 2가지 그룹지어 선택하였습니다. 그리고 "font-size“로 글씨의 크기를 120%로 증가 시켰으며, "color"를 사용하여 글씨의 색을 파란색으로 만들어 주었습니다.이제 여러분도 엘리먼트에 포함된 글씨를 마음껏 변경할 수 있겠죠?

다음 강의에서 계속됩니다... CSS기본 8강을 봐주세요