스타일시트 활용하기. 제 1장. (CSS)
대구 오늘 날씨가 22' 날씨가 상당히 덥다.
반팔 티셔츠를 입은 학생들이 스쿨버스를 기다리는 모습이 정겹다.
자 오늘도 여김없는 궁시렁거림에 움찔하지 말자.
Style Sheet 를 사용해서 링크에 동적 효과를 주자.
오늘은 링크에서 자유롭게 움직이는 Style Sheet에 대해 배워보도록 하겠다.
웹사이트를 이용하다 보면 글짜에 마우스를 올리면 색깔이 변하는 사이트를 본적이 있을것이다.
아니, 이제는 CSS를 사용하지 않는 웹사이트가 없을 정도로 이젠 보편화 되어있다.
--------------------------------------------------------------------------------------------------
판다씨 블로그 바로가기 > : 마우스를 올리기 전에는 이랬던 녀석이.
판다씨 블로그 바로가기 > : 마우스를 딱 올렸더니만 글짜가 굵어지면서 Underline 이 생겼다.
---------------------------------------------------------------------------------------------------
오늘은 이녀석을 한번 만들어 보자.
항상 메모장에서 Html을 연습하길 바란다.
웹디자이너 2년 3년차 분들이 Table을 직접 코딩할줄 모르는 상황이 생길지 모르니 말이다.
테이블은 드림위버가 다 만들어주기 때문에 어렵지 않게 코딩을 할수 있다.
하지만 나중에 코딩된 화면을 수정할려면 코딩에 대한 이해가 필요할것이다.
1.Style Sheet 를 작성하자.
빈 메모장을 보면 항상 경건한 마음이 -ㅈ-;
메모장의 흰 바탕에 한번 적어보도록 하자.
---------------------------------------------------------------------------------------------------
<style type="text/css"> : 스타일 시트의 시작은 이렇게 하겠다.
</style> : 그리고 스타일 시트의 끝을 요렇게 표기.
---------------------------------------------------------------------------------------------------
자 이제 스타일시트를 정의할 준비를 다했다. 참 간단해 보인다.
저 두녀석 사이에다가 이제 오늘 배울 링크를 정의 해보자.
2.Style Sheet 의 속성들을 미리 정의해두자.
--------------------------------------------------------------------------------------------------
<style type="text/css">
A.panda:link {} : 일반 링크타입을 설정합니다.
A.panda:visited {} : 방문했던 링크타입을 설정합니다.
A.panda:active {} : 마우스를 클릭하고 있을때의 링크타입을 설정합니다.
A.panda:hover {} : 마우스를 올렸을때의 링크타입을 설정합니다.
</style>
---------------------------------------------------------------------------------------------------
자. 링크타입을 설정해봤다.
Link,Visited,Active,Hover 로 네가지의 설정상태가 있으며, 네가지 모두를 보기좋게 한번 꾸며보도록 하자.
각 메소드 뒤에는 {} 요런 모양이 있으며 이속에 작성되는 명령어들이 링크의 자세한 액션을 만들어낸다.
그러기에 앞서 네가지 모양을 먼저 생각해두자.
가만히 있을때는 회색,폰트 크기는 12px,밑줄은 없으며 폰트는 돋움으로 하고싶다.
링크된 녀석들은 회색,폰트 크기는 12px, 밑줄은 역시 없으며 폰트는 돋움으로 하고 싶다.
마우스를 누르고 있을때의 모습은 붉은색, 폰트크기는 12px로, 그리고 밑줄을 그려주자.
그리고 마우스를 올리고 있을때는 주황색,폰트크기는 12px로, 그리고 밑줄을 그려주자.
이렇게 자세히 머릿속으로 상상을 먼저 해두자.
그리고 저렇게 나열된 자신의 생각을 코드로 한번 삽입해보자.
3.머릿속으로 상상한 Style Sheet 의 속성들을 코드로 입력하자.
---------------------------------------------------------------------------------------------------
<style type="text/css">
A.panda:link {color:#666666;font-size:12px;text-decoration:none;}
A.panda:visited {color:#666666;font-size:12px;text-decoration:none;}
A.panda:active {color:#FF3300;font-size:12px;text-decoration:underline;}
A.panda:hover {color:#FF6600;font-size:12px;text-decoration:underline;}
</style>
--------------------------------------------------------------------------------------------------
생각했던 링크의 타입을 설정했다.
저녀석은 링크속에서 Class 라는 이름으로 사용할수 있으며 그 이름은 Panda 다.
저녀석을 저렇게 설정을 했으니 이제 저녀석을 한번 사용해보도록 하자.
4.만들어진 Style Sheet를 한번 불러와서 사용해보자.
-------------------------------------------------------------------------------------------------
<style type="text/css">
A.panda:link {color:#666666;font-size:12px;text-decoration:none;}
A.panda:visited {color:#666666;font-size:12px;text-decoration:none;}
A.panda:active {color:#FF3300;font-size:12px;text-decoration:underline;}
A.panda:hover {color:#FF6600;font-size:12px;text-decoration:underline;}
</style>
<a href="http://Blog.naver.com/2verworks">판다씨 블로그 바로가기 >></a>
---------------------------------------------------------------------------------------------------
이건 뭔가.
스타일 시트를 만들었는데, 아무런 변화가 없다. 마우스를 올려봐도 클릭해봐도...
(아무런 값이 없을땐 자신의 윈도우 옵션에 설정된 스타일로 폰트가 보인다)
자 그럼 링크 속성 뒤에다가 Class라는 속성을 한번 적어보자.
---------------------------------------------------------------------------------------------------
<a href="http://Blog.naver.com/2verworks" class="panda">판다씨 블로그 바로가기 >></a>
---------------------------------------------------------------------------------------------------
