태그매니아 HTML 부문

아디

비번

1 분

16 분

CSS 강좌 2. 스타일시트 특강2
	[1][2][3]

흠.... 뭐하다가 넘어오게 된거죠? -_- ? ??? .... 하~! 맞져! class 파일 지정하는 다른 방법에 대해서 설명하려다가 넘어온거죠. 계속 설명드리도록 하죠. ^^ 앞장에서는 태그.클래스이름 ☜이런 식으로 지정해주었는데요.... 이번 예제에서는 약간 다르게 해준 거랍니다.

위에 예제를 보시면 head 부분의 스타일 시트 정의부분에서 class 이름을 지정해 줄때 앞에 태그를 생략해주었죠. 이런 경우에는 보시다시피 태그부분에서 클래스를 아무 태그부분에나 지정을 해주면 그 태그 내에서 해당 클래스의 스타일이 적용이 되게 됩니다. 예제를 가지고 좀더 자세히 설명하자면 <body> 부분에 love 클래스를 연결 시켜주고...<h1> 부분에 kiss 클래스를 연결 시켜주었죠. 그리고 <p>태그에는 story 클래스를 연결시켜 주었구요. 그러자 각각 해당 클래스에 지정된 스타일이 적용이 되는 군요. 이런 경우 앞장에서 배운 경우 보다는 좀더 신축성있게 스타일 시트를 적용할 수 있을 겁니다. 그쵸? ^^ 실제로 복잡한 웹페이지에서 스타일 시트를 사용할 때는 class 를 많이 적용해서 사용한답니다.
여러분들 웹서핑을 하다가 가끔씩 웹페이지 소스를 보면 스타일 시트 부분에 아래와 같은 것을 많이 봤을 겁니다.

A:link { text-decoration:none; color: 00448B;}
A:visited { text-decoration:none; color: 00448B;}
A:active { text-decoration:underline; color: 00448B;}
A:hover {color: blue; text-decoration:underline;}

이걸 앵커 가상 클래스라고 하는데...보통 우리가 홈페이지의 링크된 부분에 마우스를 가져다 대면 색이 바뀌면서 밑줄이 생기기도 하고 또한 한번 클릭한 링크부분은 다른 곳과 색이 달라지게 되기도 하는데....그걸 조절하는 스타일 시트랍니다. 당연 <a> 태그에 적용되는 거니깐 앞에 A 가 붙게 되고 그 다음 link는 아직 방문을 하지 않은 링크부분, visited는 한 번 이상 방문한 부분, active는 마우스로 클릭하는 순간의 지정해주는 것입니다. 마지막으로 hover의 경우는 마우스를 링크위에 올려놨을 때의 스타일을 지정하는 거죠. 그리고 나중에 또 배우겠지만 세부적인 사항으로 text-decoration:none; ☜이건 링크된 부분에 밑줄을 나타나게 해줄 것인지 아닌지를 경정해주는 것이랍니다. underline의 경우 밑줄이 생기는 것이고 none의 경우는 생기지 않는 경우이죠. 위에 설명한 앵커 가상 클래스는 실질적으로 스타일 시트에서 가장 많이 쓰인다고 해도 과언이 아닐 정도로 주로 사용됩니다. 반드시 숙지하고 계시길......... (앵커 가상 클래스에 대한 예제는 특강 마지막 부분에서 다루도록 하겠습니다.)
다음 페이지에서 이어 계속 설명드리겠습니다. Let's Go!

이전 페이지로 || 태그연습장 || 다음 페이지로



연습장	메모장	알FTP	wsftp

유용한 팁

절대경로 알아내기.. - 일... [1]

1차, 2차, 3차 함수그래... [1]