웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(1)
2002.08.15 11:08
nzeo.com 에는 그래도 꾀 웹에대해서 알고계신분들이 찾는 사이트라
이팁이 유용하게 보일사람이 몇 되진 않을거라 생각되지만 그래도 한번 올려봐요 -ㅁ-
가끔가다가 어떤 홈페이지를 들어가면 꾀 열심히 만든듯 한데 상당히 지저분해보이고 깔끔하지
않게 보이는곳이 여럿있죠 !
그 이유는 ① text문서에대한 잘못된 스타일시트 지정 ② 과다한 이미지, 자바스크립트(마우스 따라다니는;
꽃이 날리는 등;) 사용 ③ 촌스러운 색상(?)의 사용 -ㅁ- 정도로 볼 수 있겠죠..
먼저 ① text문서에 대한 잘못된 스타일시트 지정 에 대해서 본다면
http://slowplus.com/test/test_1.html
위 링크를 클릭해보세요
정말 웹의 초보자의 지저분한 홈페이지를 완벽하게 재연해 냈죠? -ㅁ-
먼저 ①번을 해결하고자 하니 스타일시트의 문제점을 찾아보면
이 페이지에서 제작자는(-ㅁ- 난데~;) head안에서 스타일을 지정하지 않고
body에서 font size=2 로 지정을 했습니다.
저또한 오래전 경험했던 일이고, 이같이 나타나는 홈페이지에서 소스보기를 통해
본결과 역시 font size=2 였습니다 -ㅁ-
또한 밑에 링크를 보세요 아주아주 지저분한 링크의 모습이죠..;
여기서 해결방법!!
<head>와 </head> 사이 에 다음을 집어넣으세요..!
<style>
body, td, select, input, div, form,textarea, center, option, pre, blockquote {font-family:굴림; font-size:9pt; line-height:160%;}
A:link {color:링크색상; text-decoration:none}
A:visited {color:방문했던 링크색상; text-decoration:none}
A:active {color:진행중인 링크색상; text-decoration:none}
A:hover {color:마우스를 올리면 바뀔 색깔; text-decoration:none;}
</style>
물론 font size=2 를 하셨던분은 그태그를 삭제하셔야 겠죠..
http://slowplus.com/test/test_2.html
보세요 -ㅁ- test_1.html 문서보다는 꾀 깔끔하게 정리되었죠?..
글씨크기를 9pt로 맞추고, 따닥따닥 붙어서 지저분해보이는것을 방지하기 위해
line-height 를 넣었죠..
여기서 첫번째를 마치고 (2)를 눌러줘요 -ㅁ-
이팁이 유용하게 보일사람이 몇 되진 않을거라 생각되지만 그래도 한번 올려봐요 -ㅁ-
가끔가다가 어떤 홈페이지를 들어가면 꾀 열심히 만든듯 한데 상당히 지저분해보이고 깔끔하지
않게 보이는곳이 여럿있죠 !
그 이유는 ① text문서에대한 잘못된 스타일시트 지정 ② 과다한 이미지, 자바스크립트(마우스 따라다니는;
꽃이 날리는 등;) 사용 ③ 촌스러운 색상(?)의 사용 -ㅁ- 정도로 볼 수 있겠죠..
먼저 ① text문서에 대한 잘못된 스타일시트 지정 에 대해서 본다면
http://slowplus.com/test/test_1.html
위 링크를 클릭해보세요
정말 웹의 초보자의 지저분한 홈페이지를 완벽하게 재연해 냈죠? -ㅁ-
먼저 ①번을 해결하고자 하니 스타일시트의 문제점을 찾아보면
이 페이지에서 제작자는(-ㅁ- 난데~;) head안에서 스타일을 지정하지 않고
body에서 font size=2 로 지정을 했습니다.
저또한 오래전 경험했던 일이고, 이같이 나타나는 홈페이지에서 소스보기를 통해
본결과 역시 font size=2 였습니다 -ㅁ-
또한 밑에 링크를 보세요 아주아주 지저분한 링크의 모습이죠..;
여기서 해결방법!!
<head>와 </head> 사이 에 다음을 집어넣으세요..!
<style>
body, td, select, input, div, form,textarea, center, option, pre, blockquote {font-family:굴림; font-size:9pt; line-height:160%;}
A:link {color:링크색상; text-decoration:none}
A:visited {color:방문했던 링크색상; text-decoration:none}
A:active {color:진행중인 링크색상; text-decoration:none}
A:hover {color:마우스를 올리면 바뀔 색깔; text-decoration:none;}
</style>
물론 font size=2 를 하셨던분은 그태그를 삭제하셔야 겠죠..
http://slowplus.com/test/test_2.html
보세요 -ㅁ- test_1.html 문서보다는 꾀 깔끔하게 정리되었죠?..
글씨크기를 9pt로 맞추고, 따닥따닥 붙어서 지저분해보이는것을 방지하기 위해
line-height 를 넣었죠..
여기서 첫번째를 마치고 (2)를 눌러줘요 -ㅁ-
댓글 5
-
Essay
2002.08.15 21:48
;;;;; 키르님을 이런데서 뵙게 될 줄이야. -
오늘시작
2002.08.17 05:02
'line-height:160%' 는 새로 안 사실이네요..감사~~
근데 이거랑 BR 이랑 차이나는 정도가 비슷하나요..160 정도면.. -
kasio
2002.08.18 06:04
'line-height:160%' 높이의 간격을 말하는것입니다 라인 ... -
신동윤
2002.08.20 20:36
감사해용 ^^* -
ZipShin
2002.08.23 13:16
line-width:160% 또는 line-width:180 픽셀값으로 줘도 된다는.사실..이러한 옵션도 있음.
제목 | 글쓴이 | 날짜 |
---|---|---|
Whois를 이용해서 접속자가 사용하는 ISP출력(한국통신,하나로,두루넷 등등) [6] | 김재경 | 2003.09.23 |
내 홈페이지의 방문자 어디서 접속했을까 알아봅시다 [21] | 버찌소년 | 2003.10.08 |
알기쉬운 웹용 MySQL 관리도구, phpMyAdmin 설치하기 [10] | 허창원 | 2003.10.11 |
공지사항|일기장 4강 - notice.php 간단한 글보이기 | 시루바 | 2003.10.16 |
include, onload, <span id=...> 다계층메뉴 활용 강좌 [2] | 김병희 | 2003.10.25 |
홈페이지 관리자 모드 구축하기 (HTTP 인증, 중복 맞음) [10] | 9000㎒ | 2003.11.01 |
지금은 시스템 점검중 만들기... [8] | zentoo.com | 2003.11.11 |
회원 포인트 랭킹(중복 -_-a) [4] | weky | 2003.11.15 |
한꼬마의 제로보드 활용방법 (로그인 값 알아 보기) [3] | 한꼬마 | 2003.11.20 |
한꼬마의 제로보드 이용법 (sql로 테이블 호출) [2] | 한꼬마 | 2003.11.26 |
throttle-me를 이용한 계정 트래픽 나타내기 [39] | 旻天 | 2003.11.27 |
랜덤 배경음악 만들기. [6] | 폭주나루 | 2003.12.01 |
세션을 이용한 관리자 모드 구축하기 1강(중복?) | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 2강 [6] | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 3강 [6] | 박정호 | 2003.12.09 |
카일레라 서버 페이지 만들기. [2] | teslaMINT | 2003.12.09 |
나도 @ 도메인 서비스를 해보자 [29] | 김병철 | 2003.12.19 |
[팁&테크] 텍스트파일에서 디비 입력하기. [1] | 김영진 | 2004.01.09 |
include에서 Failed opening 발생문제 [4] | 이경훈 | 2004.01.10 |
unset / isset 를 알아보자. [2] | 씨파개 | 2004.01.12 |