[css] css 겉핥기 핥핥

시작하기전에 저는 css를 집중적으로 배운적도 없고 관련전공을 한것도 아닙니다.

대부분이 검색/실험을 통해 습득한 바, 깊고 정확한 메커니즘 설명이 불가능합니다.

또한 제가 사용하기 때문에(..) 파이어폭스를 기준으로 합니다.

홈페이지를 만들어본 혹은 만들어보고자 준비했던 사람이라면 스타일시트를 한번쯤은 들어보았을 겁니다.

사실 기본적인 태그만으로도 예쁘고 멋진 홈페이지를 꾸밀수 있고,

css로 낼수있는 대부분은 스타일을 엘리먼트에 직접 정의하거나 자바스크립트를 사용함으로 충분히 낼 수 있습니다.

그런데 왜 css가 사용될까요 ?

우선 설계/코딩시에 매 엘리먼트마다 일일히 짜줄 필요가 없고, 직관적이고 쉬워 편리합니다.

필요에따라 수정하게 되었을때에도 편하고 빠르며 일관성을 유지할수 있으며 코드의 경량화에도 일조하게 됩니다.

더욱이 스타일시트는 따로 임시폴더에 저장되어 일일히 불러오지 않기 때문에 부담을 덜어줍니다.

(가까운 과거에는 -특히 IE에서- 이 때문에 스타일시트나 이미지등이 수정되어도

파일명이 같은경우 클라이언트의 임시파일이 새롭게 갱신되지 않아 문제가 되었었지만

요새는 브라우저가 좋아져서 개발자가 신경쓰지 않아도 될 부분이 되었습니다)

<일본의 오픈소스 HoF. 단지 css에서 몇줄 바꾼것만으로도 분위기가 달라졌다>

1. css의 사용

우선 스타일시트의 구조는 다음과 같습니다.

선택자 { 선언 }

여기서 선택자(selector)에는 태그엘리먼트 혹은 선언해준 id, class등이 들어갈 수 있습니다.

선언한 내용을 적용시킬 대상을 지정하는 것이지요. 콤마로써 다수의 대상을 한번에 지정할 수도 있습니다.

선언은 속성(property):값; 을 나열한 형식으로 이루어지며 역시 콤마로써 다수의 속성을 선언할 수 있습니다.

예를들어 body내의 글씨를 붉은색(ff0000)으로 하고 배경을 검정색으로 하려면, 다음과 같이 하면 됩니다.

body { color:#ff0000; background-color:#000 }

각 선언의 마지막 세미콜론(;)은 예문과 같이 생략할 수 있지만, 가능하면 붙이는 습관을 들입시다.

이제 실제로 문서에 스타일을 정의하여 적용해봅시다.

또한 다음과 같은 항목을 문서에 추가함으로 css파일을 따로 만들어 불러올 수도 있습니다.
<link rel="stylesheet" type="text/css" href="위치">

함수를 따로 빼놓고 불러오는 것과 같은 이치로 더 많이 쓰입니다.

(만은, 예제에선 한 파일안에서 설명하는편이 편해서 보기 좋을것 같아 문서내에 정의했습니다)

가능하면 스타일(혹은 링크)은 헤더내에 정의하는 습관을 기릅시다.

---

body { color:#ff0000; background-color:#000; }

</style></head>

<body>안녕하세요 !</body>

---

<e1.html>

2. 오버라이팅

같은 엘리먼트 내에서, 앞서 정의된 속성과 나중에 정의된 속성이 겹치면 가장 나중에 정의한 값을 따라갑니다.

엘리먼트란 배열에 속성이란 인덱스를 주어 값을 대입한다고 생각하시면 됩니다.

이는 바로 다음의 id/class 혹은 나중에 나올 상속에서도 마찬가지로 적용됩니다.

---

body { color:#ff0000; background-color:#000; }

body { color:#ffff00; }

</style></head>

<body>안녕하세요 !</body>

---

<e2.html>

3. id와 class

앞서 선택자에서 id와 class를 언급하였는데 이것들이 무엇인고 하니,

다음과 같이 각 엘리먼트에서 id 혹은 class를 정의해 주고,

<a id="anchorId">anchor</a>

다음과 같이 해당 값을 가진 엘리먼트만을 집어 선택할 수 있는 것입니다.

#anchorId {}

id와 class의 차이점은 , 우선 id는 선언대상을 #id {} 로 지정하지만 class는 .class {} 로 합니다.

또한 class가 상관없는 반면에 id는 문서내에 유일한 것이 좋습니다.

(css만을 사용하고 js등을 사용하지 않는 경우엔 같은 id값을 여럿이 써도 무관하긴 합니다)

---

body { color:#ff0000; background-color:#000; }

#iHaveAId { color:#ff00ff; }

.weHaveAClass { color:#00ffff; }

</style></head>

<body>

안녕하세요 !<br>

<a id=iHaveAId>안녕하세요 !</a><br>

<a class=weHaveAClass>안녕하세요 !</a><br>

<a class=weHaveAClass>안녕하세요 !</a>

</body>

---

<e3.html>

4. 상속

여느 언어에서도 그렇듯, 부모 속성안에 정의된 자식 속성은 부모의 속성을 가져갑니다

만, 개중에 background-image(배경이미지)와 같은 일부 속성들은 상속되지 않습니다.

상식적으로 생각해서 이런게 상속될필요가 없지.. 하는것들은 대부분 되지않습니다.

상세한 리스트는 레퍼런스를 찾아보거나 필요한 부분을 직접 실험해보세요

다음과 같이 선택자에 부모를 선택하고 이어 자식을 선택하면,

해당하는 부모안에 포함되어 있는 자식만을 선택할 수 있습니다.

.mon #john {} // class가 mom인 엘리먼트안에 포함된 id가 john인 엘리먼트를 선택

---

<head><style type="text/css">
body { color:#fff; background-color:#000; }
.mom { color:#ff0000; }
.mom .baby { color:#ffff00; }
#yourMom { color:#ff00ff; }
#yourMom .baby { color:#00ffff; }
#yourMom #you { color:#00ff00; }
</style></head>

<body>
<span class=mom>나쁜엄마 -

<a class=baby>가여운아기</a><br> 
<span class=mom>흔한엄마 -

---

<e4.html>

5. 속성들

실제로 이것저것 적용해 보기위해 기본적인 속성몇개를 나열합니다.

기준은 파이어폭스12이며 브라우저에 따라 일부속성은 적용되지 않거나 속성명이 다를수 있습니다.

크로스브라우징을 지원하려는 경우엔 레퍼런스등에서 따로 검색하야 해결해주시기 바랍니다.

ㅇwidth, height

순서대로 엘리먼트의 가로, 세로크기를 지정하며 단위로 px 혹은 % 를 붙여씁니다.

퍼센트를 붙일경우 컨테이너(화면 혹은 속한 레이어)의 크기에 따른 비율로 설정됩니다.

( ! 앞으로 나올 대부분의 퍼센트기호역시 마찬가지 )

ex) <div style="width:320px; height:50%;">

가로가 320px 이고 세로가 화면의 절반 크기인 레이어를 만듭니다.

ㅇposition, top, left, right, bottom

top은 상단, left는 좌측 right는 우측 bottom은 하단기준으로 재어 엘리먼트 위치를 지정합니다.

엘리먼트의 기준점은 최상단좌측입니다. 따라서 640*480 크기의 화면 중앙에 위치하게 하고싶으면,

top:320px; left:240px;이 아니라 320에서 엘리먼트가로를 반으로 나눈값 240에서 세로를 반으로 나눈값을 빼주어야합니다.

position속성은 값이 relative 혹은 absolute로 나뉘는데

이를 지정해주지 않으면 상단의 속성으로 위치를 지정해 줄 수 없습니다.

또한 다른 스타일의 동작에도 영향을 주기때문에

정의할 필요성을 느끼지 못하더라도 relative로 정의해두는것이 좋습니다.

relative는 일반적인 느낌으로 앞/뒤에 올 엘리먼트들의 위치에 영향을 주고

위치지정 역시 일반적으로 표시될 위치를 기준으로 배치됩니다.

absolute는 공중에 떠있는 느낌으로 앞/뒤에 올 엘리먼트가 이 엘리먼트가 없는것으로 간주하여 위치가 정해지게 되며

위치지정시 페이지(레이어에 속해있는경우 레이어) 최상단 좌측을 기준으로 배치됩니다.

(relative와 absolute에대한 자세한 이해는 검색으로..ㅠㅠ)

ex) <div style="position:absolute; top:48px; right:24px;"></div>아아 마이크테스트

페이지상단에서 48, 우측에서 24px 떨어진곳에 레이어를 만든다. 문자열은 줄바꿈없이 맨첫줄에 나타난다.

ㅇbackground-color, color

각각 엘리먼트의 배경색, 엘리먼트내 글씨색을 지정한다. #rgb 의 형태로 값을 지정해준다.

각각의 r,g,b는 붉은색,녹색,파란색의 농도이며 0~255사이의 값을 가지며 16진수로 나타내어진다.

특히 배경색의 경우는 디자인외에도 복잡한 레이어구성일때에

각각의 레이어가 차지하고있는 공간, 상하관계등을 가늠할때 유용하게 쓰일 수 있습니다.

ex) <div style="width:320px; height:240px; background-color:#ff0000;">

가로가 320 세로가 240px 이며 배경색이 붉은색(#ff0000)인 레이어를 만든다.

ㅇborder

경계선, 태그의 기본속성으로 지원하기는 합니다만 더 상세히 지정할 수 있습니다.

값은 "굵기 타입 색상" 의 구조를 갖습니다.

순서는 바뀌어도 됩니다만, 브라우저별로 다를수 있으니 가능한 지켜주세요.

타입엔 solid (실선) dashed (점선) dotted (진짜 '점' 선) 등이 있습니다.

background-color와 함께 디버깅(?)의 일등공신.

ex) <div style="width:320px; height:240px; border:1px dashed #fff;">

1px 굵기의 점선을 테두리로 하는 레이어를 만든다.

( ! border의 경우 엘리먼트를 그대로 둔채 두르는것이 아니라,

엘리먼트를 반대로 테두리 굵기만큼 밀어낸뒤에 테두리를 두릅니다.

따라서 위치지정을 해주지않은 엘리먼트의 경우 -왼쪽,윗쪽을 기준으로하는-

원래의 엘리먼트보다 우측아래로 테두리굵기의 2배만큼 커지게됩니다.)

ㅇpadding, margin

처음에 가장 헷갈리고 난해했던 둘입니다. 알고보니 별거아니었지만서도..

padding은 엘리먼트 테두리로부터 내부로 향하는 여백이고,

margin은 테두리로부터 외부로 향하는 여백입니다.

이 둘의 차이는 background-color와 border를 적절히 사용하면서 몇번 실험해보면 곧 느낄수 있을겁니다.

ex) <div style="width:32px; border:1px solid #ff0000; padding:0px; margin:100px;">아아</div>아아

내부여백이 0, 외부여백이 100px인 레이어를 만든다. 경계선을 기준으로,

안에있는 문자열과의 거리/바깥에 있는 문자열과의 거리를 비교해봅시다

ㅇz-index

엘리먼트간 상하관계를 조절합니다.

정의하지 않은 엘리먼트의 z-index는 0이고 숫자가 높을수록 상단에 위치하며 음숫값을 줄수도 있습니다.

z-index를 적절히 이용함으로써 다층관계 디자인을 할 수 있습니다.

ex) <div style="width:320px; height:240px; background-color:#ff0000; z-index:-1">아랫단</div>

ㅇopacity

투명도를 조절합니다. 값의 비율범위는 0~1입니다.

단, 0을 주어서 완전히 투명한 경우에도 z-index가 높아 다른 엘리먼트를 덮었을 경우에는

클릭이 불가능하게 되니 화면가리개나 툴팁등을 짜는경우엔 z-index도 같이 음수를 주세요

( ! 브라우저에 따라 알파필터를 쓰는경우도 있고 각자 다르니 검색후 사용하시는 것을 추천합니다 )

ex) <div style="width:320px; height:240px; background-color:#ff0000; opacity:0.25"></div>

ㅇfont

폰트계열 속성엔 style weight size family가 있습니다.

style에는 기본적으로 normal이며 italic이나 oblique가 있는데.. 직접 보시는게 빠른 설명이 될 듯 합니다. ㅠㅠ

weight는 normal이 기본, 100n의 값으로 혹은 bold(=700)로 글씨 굵기를 설정 할 수 있습니다.

size는 글씨의 크기로, 단위는 pt 혹은 px가 있습니다. 기본은 10pt=13px입니다.

family는 글꼴인데.. 사실 저도 모릅니다. 전 굴림체를 사랑해서 한번도 안써봤거든요..

이것들을 전부 설정할 필요가 있을경우 한줄로 나열할수도 있습니다. ...family 검색하는김에 같이 해주셔유 ㅠㅠ

계속수정중 -12.05.26 13:00

로그인

단축키

단축키

Who's 럇