Use CSS Selector 이용해서 스타일 정의하기

style=>new =>Use CSS Selector 의 순으로 찾아가면 우리가 작업했던 첫번째 메뉴make custom styles (class) 가 아니라 가장 마지막에 있는 Use CSS Selector 선택합니다. 그림과 같죠

New Style 대화상자에서 Use CSS Selector를 선택한 상태에서 역삼각형의 풀다운 메뉴를 선택하면 그림에서 보듯이 링크 텍스트에 대해 수정할 수 있는 목록이 리스트박스에 표시되는데 여기서 [a:link]를 선택한다. 여기서 [a:link]는 링크가 걸린 줄의 속성을 지정하는 태그입니다. 가령 기본적인 하이퍼 링크 색깔은 파란색인데 여기서 지정해주면 기본 색깔인 파란색을 바꿀수가 있는 것입니다 .[a:visited]는 링크를 눌러 연결된 웹페이지를 한번 이상 방문했을 때 나타낸 속성을 바꿔주고 그리고 [a:active]는 사용자가 마우스를 링크가 된줄에 올려 놓는 순간에 표시되는 링크된 곳에 대한 속성을 지정해 줄 수 있다. 일단 여기서는 [a:link]를 선택하고 ok버튼을 선택하면 [a:link]에 대한 스타일을 정의할 수 있는 대화상자가 그림과 같이 뜬다

여기선 보통 링크를 걸때 여러분이나 많은 사람들이 사용하는 글자크기인 size 10을 선택하고 (보통웹페이지에선 글자크기10이 보통이죠 글자크기를 크게한 홈은 세련되지 못해보님 !! ) decoration에서는 none를 선택하자 !!!

decoration이라는 것은 말그대로 꾸밈 링크된 곳을 꾸미는 것이다. 많은 사람들이 링크를 걸면 밑줄이 자동적으로 나오는데 이것을 없애보고 싶지만 쉽게 하지는 못했는데 바로 decoration에서 none로 지정을 한다는 것은 링크된 곳에 아무련 꾸밈을 없게 만드는 것이다 밑줄이나 다른 효과를 주고 싶다면 None 대신 다른 것을 선택해서 연습해보세요. 그리고 ok를 선택하게 되면 edit style sheet 창에 [a:link] 라는 이름이 생기고 저장된것을 보실수가 있죠. 이렇게 그럼 다른 것도 해보죠 [a:active]는 녹색으로 [a:visited] 는 똑같이 글자크기 10에 색깔은 빨간색으로 지정하고 저장해 보세요 그럼 edit style sheet란에 저장되어 진것이 보이시죠. 이런 방식으로 링크된 부분을 페이지 전체에 적용시킬수가 있는 것이죠. 물론 부분적으로 적용시킬수 있는 방법도 있구요. 그렇지만 이렇게 해도 잘 적용이 안되시죠. 쩝 이것은 설명을 하지 않았지만 a: hover와 같이 런 방식으로 지정을 해줘도 상태가 제대로 표현이 안되는 것을 확인하실겁니다..

스타일 시트 적용 하는 법을 알고 스타일 시트 인터페이지를 눈에 익게 하기 위해서라고 꼭 알아야 되는 사항입니다. 나머지도 이와 같이 작업하면 됩니다. 위와 같이 했는데도 안되는 것은 외부 스타일 시트를 이용해야 정확하게 적용시킬수가 있습니다 다음페이지에서 외부스타일시트의 사용법에 대해 알아본후 응용해보도록 합니다.

top