이번에는 css 스타일을 적용해서 링크 색상과 형태를 바꾸는 것을 해보도록 하겠습니다.
나모의 하단의 탭에서 HTML부분을 선택해 HTML 편집 모드로 갑니다.
다른 기타 에디터에서 편집하셔도 상관 없습니다.
우측의 스크롤바를 위로 당겨 문서의 맨 위가 보이도록 하고 <head>와 <head>사이에
<style type="text/css">
< !--
a {text-decoration:none ; color:black}
a:link {text-decoration:none ; color:black}
a:hover {text-decoration:none ; color:black}
a:active {text-decoration:none ; color:black}
a:visited {text-decoration:none ; color:black}
-->
< /style>
이란 것을 집어넣습니다.
여기서
a {text-decoration:none ; color:black}-->일반 텍스트의 형태와 색
a:link {text-decoration:none ; color:black}-->링크가 걸려잇는 텍스트의 형태와 색
a:hover {text-decoration:none ; color:black}-->마우스가 링크위에 올려졌을 때 바뀔 형태와 색
a:active {text-decoration:none ; color:black}-->링크에 연결되는 순간 바뀌는 형태와 색
a:visited {text-decoration:none ; color:black}-->이미 한번 방문했던 링크의 형태와 색
위에서 굵게 되어 있는 부분은 다음과 같이 변형시킬 수 있습니다.
none
: 수식않음
link
underline
: 밑줄
link
overline
: 윗줄(익스플로러 만)
blink
: 깜빡거림(넷스케이프 만)
link
line-through
: 취소선
link
혹은 위의 내용을 일일이 넣지 않아도, *.css파일로 저장하여 각 문서에서 짧은 문장으로 링크시켜 주면 위의 내용을 일일이 넣은 문서와 같게 됩니다.
a {text-decoration:none ; color:black}
a:link {text-decoration:none ; color:black}
a:hover {text-decoration:none ; color:black}
a:active {text-decoration:none ; color:black}
a:visited {text-decoration:none ; color:black}
우선 위의 내용을 입맛대로 바꾼 뒤, 복사한 다음 텍스트 에디터를 열어 붙이고 style.css정도의 파일명으로 저장합니다.
그리고 나모로 돌아와 HTML탭을 열어 아까처럼 <head>와 </head>사이에
<link rel="stylesheet" href="style.css">
라는 문장을 넣습니다.
물론 style.css와 지금 편집하는 문서는 같은 폴더안에 있어야 겠죠.
많약 다른 폴더에 있다면
<link rel="stylesheet" href="폴더명/style.css">
이라는 것으로 바꾸셔야 합니다..
이 css 파일 안에는 다른 것도 넣을 수 있는데, 예를 들면 글자 크기, 글씨체, 투명 스크롤바 등입니다,
먼저 스크롤바부터 보겠습니다.
BODY {
scrollbar-face-color: white;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: black;
}
제가 주로 사용하는 스크롤바는 위와 같은 스타일입니다.
스크롤바 색상 편집에 관한 것은 아래 그림을 참조하세요
그 다음으로 글씨크기와 글씨체..
body {font-size:9pt; font-family:"tahoma"; color:black}
td {font-size:9pt; font-family:"tahoma"; color:black}
위줄의 뜻은 body태그(본문)안의 글씨들은 사이즈는 9pt로 하고 글씨체는 tahoma로, 글색상은 검은색으로 하라는 말입니다..
둘째줄은 td태그(표)안의 글씨들도 사이즈는 9pt로, 글씨체는 tahoma로, 색은 검은색으로 하라는 말입니다.
저는 body와 td를 함께 쓰지 않습니다만, 그냥 본문과 표안에 들어가는 글씨가 다르게 나오기를 바라는 분들께서는, 같이 쓰시면 좋겠습니다.
(tahoma체는 윈도우즈에 기본 내장되어 있는 글꼴로, 영어만 지원합니다. 한글은 일반 굴림체와 같이 나옵니다만, 영어체가 너무 깔끔하고, 이쁜지라 제가 많이 애용합니다~)
위의 내용을 모두 합치면
a {text-decoration:none ; color:black}
a:link {text-decoration:none ; color:black}
a:hover {text-decoration:none ; color:black}
a:active {text-decoration:none ; color:black}
a:visited {text-decoration:none ; color:black}
BODY {
scrollbar-face-color: white;
scrollbar-shadow-color: black;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white;
scrollbar-track-color: white;
scrollbar-arrow-color: black;
}
body {font-size:9pt; font-family:"tahoma"; color:black}
td {font-size:9pt; font-family:"tahoma"; color:black}
위와 같이 됩니다. 이 모든 것들을 style.css에 넣고 위에 알려드린대로 문서에 연결하면 끝입니다~
'Html & Css' 카테고리의 다른 글
| 배경그림 원하는 위치에 원하는.. (0) | 2016.06.02 |
|---|---|
| 태그로 점선 테이블을 만들기 (0) | 2016.06.02 |
| 프레임에 테두리를 넣고 싶을때 (0) | 2016.06.02 |
| 여러가지 테이블 프레임 (0) | 2016.06.02 |
| 마우스를 가져다 대면 그 해당설명이... (3) | 2016.06.02 |