{ 태그에 닫는 태그가 없습니다. error :295 아람스쿨 [초급5단] CSS(스타일 시트) 설정
아이디저장


더보기 >










[공지] 미션 도전하기 전에 꼭 읽어보세요.
[공지] 초급미션이 A코스,B코스로 분리되었습니다.

미션 B코스 [초급5단] CSS(스타일 시트) 설정
2011-12-09 20:01:00
아람스쿨 조회수 2295

 이번 미션을 통해 아주 간단한 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} 

동일하게 소스를 복사하여 붙여넣기 하시거나 원하는 소스를 입력 후 CSS저장을 클릭합니다.

  

 

 이제 홈페이지로 가서 어떻게 변경되었는지 확인합니다. 조금 이쁘게 변경되었나요? ^-^

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

 
 

 

 
 

 

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

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

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

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

  

수고하셨습니다. 

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

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

 

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

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

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

위 미션 수행 후 덧글에 소감 한마디 남겨주세요~~~~ ^0^

 

댓글 157개