KH Pre-Academy/Study

[5일차]

김컴맹 2011. 12. 28. 09:13
반응형


CSS . - 내용이 변하지 않음.

CSS의 정의.
 - 기존 태크에 대한 재정의
 - Link관련 태그를 재정의
 - 사용자가 만드는 스타일.

링크가 걸린 메뉴에 대해서는
기존적으로 body에
link="black" 링크 걸린 텍스트 색상
vlink="red" 방문한 링크 텍스트 색상
alink="green" 방문 중인 링크 텍스트 색상.
를 동일한 색상으로 적용한다.

CSS 정의위치.
태그내에 (inline)     -- inline방식은 추천하지 않는다.
 <font style="font-size: 9pt"> 홍길동 </font>
문서내에 (internal)
 <head>
  <style type="text/css">
  font { font-size:9pt ;}
  </style>
 </head>
외부문서로 (external)
 위의 <style> ~ </style> 부분을 확장자를 css 로 저장
 사용할 웹문서에서 이 파일을 참조하려면
 <head><title></title>
  <link rel="stylesheet" type="text/css" href="common.css">
 </head>

사용자정의 CSS정의 및 사용법
 정의법
 - <head>
 <style type="text/css">
 .myfont { font-size:12pt ;}
 </style>
   </head>
 사용법
 - <font class="myfont">

 

font style
 color:tomato; 색 지정
 font-size:12px; 크리 지정
 font-family:굴림; 글씨체 지정 - 잘 사용치 않는다.
 font-weight:bold; 진하게. 100~900 숫자로 조절 가능.
 line-height:25px; 행간 간격 조절.

table style
 border-style:none;
  :dotted; 도트
  :dashed; 점선 - 도트보다 도트선이 좀 더 김.
  :solid; 선
  :double; 2줄 선
  :groove; , ridge; , inset; , outset; 입체선 지정.
아래의 style로 각각의 선의 종류를 따로 설정 가능.
 border-top-style:none;
 border-bottom-style:none;
 border-left-style:none;
 border-right-style:none;

 border-color:orange; 선의 색 지정.
  border-top-color
  border-bottom-color
  border-left-color
  border-right-color

 border-width:1px; 선의 두께 지정.
  border-top-width
  border-bottom-width
  border-left-width
  border-right-width

 margin:3px; 바깥쪽 여백 지정.
  margin-top
  margin-bottom
  margin-left
  margin-right

 

 

 

 

 

 

 

 

 


 

반응형

'KH Pre-Academy > Study' 카테고리의 다른 글

[4일차]  (0) 2011.12.26
[3일차]  (0) 2011.12.23
[2일차]  (0) 2011.12.21
[1일차]  (0) 2011.12.20