이번 미션을 통해 아주 간단한 CSS를 적용해보도록 하겠습니다.

CSS가 뭔지 전혀 모르시더라도 겁먹지 마시고 그냥 따라해주세요.^^;;;

 [초급미션]을 통해 홈페이지를 만들었는데 하이퍼링크가 출력 됩니다.

 

 

 

각 버튼마다 적용된 하이퍼링크를 일일이 색상 지정 및 사이즈 조절해도 되지만 만약 하이퍼링크가 100개이상 된다면 작업시간이 상당히 많이 소요될 것입니다.

이럴때 한번에 해결하는 것이 CSS(스타일시트) 입니다.

 설명이 부족하더라도 실습을 통해 습득하시기 바랍니다. ^-^

 

관리자 모드로 로그인 합니다.  [디자인관리 》 고급 디자인 관리 》 CSS,Javascript] 으로 이동합니다.

 

 

기본 입력된 CSS 소스가 입력되어 있습니다.

필자는 아래 소스를 추가해보았습니다.

A:link { font:9pt; text-decoration:none; color:#303030}
A:active {text-decoration:none; color:#303030}
A:visited { text-decoration:none; color:#303030}
A:hover { text-decoration:uone; color:#1f6bb9} 

  

 

 이제 홈페이지로 가서 어떻게 변경되었는지 확인해봅니다. 조금 이쁘게 변경된것을 확인할 수 있나요?

 만약 수정된 것을 확인할 수 없다면 브라우져창의 [도구>인터넷 옵션]을 클릭하신후 아래와 같이 설정하셔야 합니다.

 

 

모든 브라우져는 빠른 결과물을 출력 하기위해 각종 이미지 및 html 을 클라이언트 PC에 저장하고 필요할때마다 저장된 자료를 불러옴으로써 빠른 속도를 기대할 수 있도록 설정되어 있습니다. 

하지만 홈페이지 제작하시는 분들은 조금씩 수정하면서 매번 결과를 확인 해야 하는데 위와 같이 설정하지 않으면 확인할 수 없게 됩니다. 

이를 방지 하기 위해 위와 같이 "페이지 열때마다"로 설정해야 합니다. 

홈페이지를 만들고 계시는 여러분은 반드시 위와 같이 설정 하시기 바랍니다. ^-^

  

수고하셨습니다. 

CSS 적용 전 : http://uhkr04b.aramschool.co.kr

CSS 적용 후 : http://uhkr05b.aramschool.co.kr

 

이번 미션 너무 쉽죠? 여러분은 다양한CSS를  적용 해보시기 바랍니다.

검색해보시면 정말 많은 CSS 가 있습니다. ^^ 

그럼 다음 미션으로 고고고~  ^^