'html' 카테고리의 다른 글
| chm 만들기 (2) | 2012.05.11 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
'html'에 해당되는 글 7건
- 2015.09.21 웹브라우저 HTML5 지원여부 점수 테스트
- 2012.05.11 chm 만들기 2
- 2010.11.02 Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico
- 2010.11.02 [HTML] word-break:break-all, nowrap 유용하게 쓰기 3
- 2010.09.17 웹폰트 적용방법
- 2010.09.14 세로 스크롤만 생기게
- 2010.09.13 position:relative와 position:absolute의 차이점
'html' 카테고리의 다른 글
| 웹브라우저 HTML5 지원여부 점수 테스트 (0) | 2015.09.21 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
브라우저 주소창의 URL 왼쪽에 16x16 픽셀의 조그마한 아이콘을 넣는 방법입니다. 이런 아이콘을 "파비콘(favicon; favorites icon)"이라고 합니다. 원래 MS가 IE 브라우저를 위해서 만든 것입니다. 그래서 웹 표준이 아니지만 파이어폭스에서도 잘 지원됩니다.
실은 몇 년 전부터 IE에서는 파비콘이 잘 보이지 않게 되었습니다. 이제는 오히려 파이어폭스에서 파비콘이 더 잘 보이더군요.
우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.
마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다: ▶▶ 윈도우 아이콘/마우스 커서 편집 프로그램: Microangelo Toolset (마이크로안젤로)
되도록 16x16 픽셀의 소형 아이콘으로 저장해야 합니다.
그런 후 아이콘 파일을 서버에 올립니다. 지오시티(Geocities) 등의 서버에서는 .ico 확장자 파일을 거부하는데, 이때는 favicon.ico 를 favicon.zip 등으로 확장자를 변경하여 업로드한 후, 다시 이름을 favicon.ico 로 고쳐 주어야 합니다.
웹페이지의 <head></head> 태그 사이에 다음의 코드를 삽입하면 됩니다.
위의 코드에서 www.example.com 이라고 된 부분을, 자신의 실제 주소로 바꾸어 주어야 합니다.
HTML 페이지의 최종적인 형태는 다음과 같습니다:
헤드 태그 속의 맨 마지막에 넣으면 적당합니다. 별로 중요한 요소가 아닌 것은 되도록 아래쪽에 넣는 것이 좋습니다.
만약 파일명을 favicon.ico 로 할 수 없는 경우에는 다른 파일명을 지정해도 괜찮습니다.
그런데 favicon.ico 파일은 서버의 루트 디렉토리(최상위 디렉토리)에 있어야 합니다. 그렇지 않고 하위 디렉토리 속에 있으면 IE에서 인식을 못하더군요.
파이어폭스에서는 Favicon 이 항상 잘 보입니다. 그렇지만 IE 에서는 좀 문제가 있습니다. 해당 사이트의 파비콘을 보기 위해서는, 우선 Ctrl+D키를 눌러 그 사이트에 대한 북마크를 만든 후, IE를 닫고 다시 실행하여 그 사이트를 재방문해야, 주소창에 파비콘이 보이는 문제가 있습니다. 그렇지만 이 방법도 확실하게 잘 되는 것은 아닙니다.
원문 : http://mwultong.blogspot.com/2007/01/favicon-site-icon-html-tag-faviconico.html
실은 몇 년 전부터 IE에서는 파비콘이 잘 보이지 않게 되었습니다. 이제는 오히려 파이어폭스에서 파비콘이 더 잘 보이더군요.
favicon.ico 파일 만들기
우선 favicon.ico 라는 파일명의 아이콘 파일을 만들어야 합니다.
마이크로안젤로 같은 아이콘 편집기를 사용하여 만들면 됩니다: ▶▶ 윈도우 아이콘/마우스 커서 편집 프로그램: Microangelo Toolset (마이크로안젤로)
되도록 16x16 픽셀의 소형 아이콘으로 저장해야 합니다.
그런 후 아이콘 파일을 서버에 올립니다. 지오시티(Geocities) 등의 서버에서는 .ico 확장자 파일을 거부하는데, 이때는 favicon.ico 를 favicon.zip 등으로 확장자를 변경하여 업로드한 후, 다시 이름을 favicon.ico 로 고쳐 주어야 합니다.
Favicon 추가 태그
웹페이지의 <head></head> 태그 사이에 다음의 코드를 삽입하면 됩니다.
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico" />
위의 코드에서 www.example.com 이라고 된 부분을, 자신의 실제 주소로 바꾸어 주어야 합니다.
브라우저 주소창에 파비콘 (URL 아이콘) 넣기 예제
HTML 페이지의 최종적인 형태는 다음과 같습니다:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>페이지 제목</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico" />
</head>
<body>
... 여기서 부터 본문 시작 ...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>페이지 제목</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.example.com/favicon.ico" />
</head>
<body>
... 여기서 부터 본문 시작 ...
헤드 태그 속의 맨 마지막에 넣으면 적당합니다. 별로 중요한 요소가 아닌 것은 되도록 아래쪽에 넣는 것이 좋습니다.
만약 파일명을 favicon.ico 로 할 수 없는 경우에는 다른 파일명을 지정해도 괜찮습니다.
그런데 favicon.ico 파일은 서버의 루트 디렉토리(최상위 디렉토리)에 있어야 합니다. 그렇지 않고 하위 디렉토리 속에 있으면 IE에서 인식을 못하더군요.
IE 6 브라우저에서 Favicon 이 보이지 않는 문제
파이어폭스에서는 Favicon 이 항상 잘 보입니다. 그렇지만 IE 에서는 좀 문제가 있습니다. 해당 사이트의 파비콘을 보기 위해서는, 우선 Ctrl+D키를 눌러 그 사이트에 대한 북마크를 만든 후, IE를 닫고 다시 실행하여 그 사이트를 재방문해야, 주소창에 파비콘이 보이는 문제가 있습니다. 그렇지만 이 방법도 확실하게 잘 되는 것은 아닙니다.
원문 : http://mwultong.blogspot.com/2007/01/favicon-site-icon-html-tag-faviconico.html
'html' 카테고리의 다른 글
| 웹브라우저 HTML5 지원여부 점수 테스트 (0) | 2015.09.21 |
|---|---|
| chm 만들기 (2) | 2012.05.11 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
word-break:break-all
- 하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을
하는 스타일속성입니다.
기본적으로 <td></td> 안에서 문장은 띄어쓰기의 공백을 기준으로 잘리기 때문에 100픽셀로 크기를
지정했다 해도 공백 없이 100픽셀을 넘어가는 단어가 들어올 경우 이를 무시하고 마구 늘어나게 됩니다.
이런 단어를 문자단위로 끊어주면 자동으로 100픽셀되는 시점에서 줄바꿈을 해주겠죠?
nowrap
- 그렇다면 반대의 경우도 있을 수 있을 겁니다. 특정경우에는 셀의 너비를 지정했다 해도 줄바꿈을 하지
않았으면... 싶을 때도 분명히 있겠죠. 그역할을 수행하는 HTML태그가 바로 nowrap 이며... <td>태그의
속성으로만 작동하는 태그입니다.
아래는 두녀석들이 적당히 쓰인 예입니다.
#1. 강제 줄바꿈을 허용치 않음
--------------------------------------------------------------------------------------------------------
<table width="400" border=1>
<tr>
<td width="50%" nowrap>동해물과 백두산이 마르고 닳도록 하느님이</td>
<td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
</tr>
</table>
--------------------------------------------------------------------------------------------------------
(결과)
| 동해물과 백두산이 마르고 닳도록 하느님이 | 우리나라 만세 무궁화 삼천리 화려강산 |
#2. 강제로 줄바꾸기
--------------------------------------------------------------------------------------------------------
<table width="400" border=1>
<tr>
<td width="50%" style="word-break:break-all">ooooooooooooooooooooooooooooooooo</td>
<td width="50%">우리나라 만세 무궁화 삼천리 화려강산</td>
</tr>
</table>
--------------------------------------------------------------------------------------------------------
(결과)
| ooooooooooooooooooooooooooooooooo | 우리나라 만세 무궁화 삼천리 화려강산 |
원문 : http://forum.happycgi.com/board_detail.cgi?db=gold_tip&number=110&g_number=9864&c_number=1000&page=1
'html' 카테고리의 다른 글
| chm 만들기 (2) | 2012.05.11 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
| position:relative와 position:absolute의 차이점 (0) | 2010.09.13 |
웹폰트 적용방법
http://pangsan.tistory.com/102
http://pangsan.tistory.com/102
'html' 카테고리의 다른 글
| chm 만들기 (2) | 2012.05.11 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
| position:relative와 position:absolute의 차이점 (0) | 2010.09.13 |
<body scroll=auto style="overflow-x:hidden">
'html' 카테고리의 다른 글
| chm 만들기 (2) | 2012.05.11 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| position:relative와 position:absolute의 차이점 (0) | 2010.09.13 |
'html' 카테고리의 다른 글
| chm 만들기 (2) | 2012.05.11 |
|---|---|
| Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico (0) | 2010.11.02 |
| [HTML] word-break:break-all, nowrap 유용하게 쓰기 (3) | 2010.11.02 |
| 웹폰트 적용방법 (0) | 2010.09.17 |
| 세로 스크롤만 생기게 (0) | 2010.09.14 |
