HTML2013. 7. 1. 14:00

 


" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을   이렇게 표현해 줍니다. 그러면 브라우저가   기호를 빈 칸으로 표시해 줍니다.

예제:

aaa    bbb


이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa    bbb


이렇게 합니다. 진짜 공백과   기호를 번갈아서 쓰면 됩니다.




<


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h1>제목이 <여기에> 표시됩니다</h1>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



&gt;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;


앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를,&amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다.


출처 : http://mwultong.blogspot.com/2006/06/html-escape.html

'HTML' 카테고리의 다른 글

[HTML]메타태그의 종류 및 사용 방법  (0) 2013.02.05
Posted by 광포한곰돌이
HTML2013. 2. 5. 16:15

메타 태그는 웹 사이트에 없어서는 안될 필수 요소 입니다. 웹 사이트의 기본적인 정보를 포함하고 있습니다. 또한 웹 사이트의 각 페이지 마다 효과를 설정하기도 합니다. 메타 태그를 활용하여 로봇을 제어하여 보안 성능을 강화하는 역할도 할 수 있습니다. 본 글에서는 메타태그의 다양한 활용 방법을 소개합니다.




Table of Contents - 목 차 -
1. 기본적으로 반드시 포함되어 있는 메타태그
2. 웹 사이트의 기본 정보를 제공
3. 효과를 나타내는 메타태그
4. 호환성을 설정하는 메타태그
5. 로봇을 제어하는 메타태그
기타정보 etc_info
REFERENCES


1. 기본적으로 반드시 포함되어 있는 메타태그


<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=utf-8"> <!-- /문자인코딩 형식/ -->

문자 인코딩 방식을 설명하는 태그는 모두 포함되어 있습니다. 문자 인코딩 형식은 EUC-EN, EUC-KR, UTF-8, UTF-16이 대부분 활용되고 있습니다.

2. 웹 사이트의 기본 정보를 제공


<META NAME="Generator" CONTENT="사이트 제작 툴 혹은 에디터"> <META NAME="Author" CONTENT="저자 제작자"> <META NAME="Keywords" CONTENT="검색을 위한 키워드"> <META NAME="Description" CONTENT="페이지의 요약설명"> <META NAME="Copyright" CONTENT="저작권 정보"> <META NAME="Subject" CONTENT="사이트의 주제 입력"> <META NAME="Title" CONTENT="사이트의 타이틀"> <META NAME="Publisher" CONTENT="발행인 조직 혹은 기업"> <META NAME="Other Agent" CONTENT="사이트 책임자"> <META NAME="Classification" CONTENT="카테고리 분류"> <META NAME="Reply-To(Email)" CONTENT="메일주소"> <META NAME="FileNAME" CONTENT="파일명"> <META NAME="Author-Date(Date)" CONTENT="제작일"> <META NAME="Location" CONTENT="위치/국가"> <META NAME="Distribution" CONTENT="배포자">

필요한 항목만을 선택하여 HEAD 태그 안에 삽입하여 사용합니다.

3. 효과를 나타내는 메타태그


<META HTTP-EQUIV="Refresh" CONTENT="60"> <!-- //60sec 자동으로 새로고침 --> <META HTTP-EQUIV="Refresh" CONTENT="3;url=http://kwangoms.tistory.com/"> <!-- //해당 주소로 3초후 자동이동 --> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <!-- //익스플로러에서 이미지 마우스 오버시 이미지툴바 표시 안함 --> <META HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=1, transition=23)"> <!-- //페이지 들어갈 때 장면 전환 효과 --> <META HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=1, transition=23)"> <!-- //페이지 나갈 때 장면 전환 효과 --> <!-- 각 옵션의 선택사항 : Page-Enter : 페이지 들어갈 때 효과 줌 Page-Exit : 페이지 나올 때 효과 줌 blendtrans : 점점 밝게 또는 점점 어둡게 나타나도록 설정 revealtrans : 문서 전환 효과 지정 duration : 시현 시간 지정 transition=0 사각형 작아지기 transition=1 사각형 커지기 transition=2 원 작아지기 transition=3 원 커지기 transition=4 위에서 아래로 transition=5 아래이서 위로 transition=6 왼쪽에서 오른쪽 transition=7 오른쪽에서 왼쪽 transition=8 수직 블라인드 transition=9 수평 블라인드 transition=10 체크무늬 왼쪽에서 오른쪽으로 transition=11 체크무늬 위에서 아래로 transition=12 랜덤 뿌리기 transition=13 수직 2등분 가운데로 모움 transition=14 수직 2등분 바깥으로 퍼짐 transition=15 수평 2등분 가운데로 모움 transition=16 수평 2등분 바깥으로 퍼짐 transition=17 45도 오른쪽 위에서 왼쪽 아래로 transition=18 45도 오른쪽 아래에서 왼쪽위로 transition=19 -45도 왼쪽 위에서 오른쪽 아래로 transition=20 -45도 왼쪽 아래에서 오른쪽 위로 transition=21 수평 랜덤 transition=22 수직 랜덤 transition=23 1~22 랜덤 선택 -->

자신이 원하는 효과를 선택하여 사용할 수 있습니다.

4. 호환성을 설정하는 메타태그


ie8 이전 버전의 호환성을 설정하여 웹 페이지가 엉망으로 나오는 것을 방지할 수 있다.

"As of Windows Internet Explorer 8, the httpEquiv attribute also supports a value of x-ua-compatible, which allows developers to specify the document compatibility mode that Internet Explorer should use to display a webpage. To do this, set the content attribute to a String value containing a comma-delimited list of one or more of the following values."
[마이크로소프트 MSDN의 설명]

현재 대규모 사이트의 IE 옵션 사용은 다음과 같다.

<!-- // Google // --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- // Yahoo // --> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- // 네이버 // --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- // 다음 // --> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

5. 로봇을 제어하는 메타태그


robot.txt 파일을 생성하지 않고 메타태그를 활용하여 로봇을 제어할 수 있습니다.

<META NAME="ROBOTS" CONTENT="ALL" /> <!-- // 로봇 검색을 허가한다. // --> <META NAME ="ROBOTS" CONTENT="NONE" /> <!-- // 로봇 검색을 허가하지 않는다. // --> <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW" /> <!-- // 이 파일을 읽는다. 링크 연결 문서도 읽는다. // --> <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW" /> <!-- // 이 파일은 읽지 않는다. 링크 연결 문서만 읽는다. // --> <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" /> <!-- // 이 파일을 읽는다. 링크 연결은 무시한다. // --> <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW" /> <!-- // 이 파일를 읽지 않는다. 링크 연결도 무시한다. // -->

Posted by 광포한곰돌이