본 글은 자주 사용되는 HTML구성요소에 대한 설명이다.
사실 본인이 봐도 두서가 없다.
하지만 요소 하나하나가 누군가에겐 도움이 될 수 있다는 전제하에 포스팅을 한다.
HTML은 태그의 집합이고 본문에서는 태그의 종류를 다룬다.
필요한것 하나둘 알다보면 앞뒤 순서가좀 다를 수는 있어도.. 어느샌가 알게되리라...
title 요소
title요소는 문서의 제목이나 이름을 나타냅니다. 안에는 텍스트만 넣을 수 있으며, 문서 내에 한 번만 사용된다.
예) <title> 제목 </title>
이 title 요소의 내용은 브라우저 창 제목이나 페이지 탭에 나타나게 되며, 검색엔진에서는 검색된 페이지의 이름으로 나타난다.
title의 제목은 페이지의 제목을 명료하게 적어주는것이 좋다.
meta 요소
head에서 메타정보를 담은 meta 요소이다.
메타태그는 스스로 닫는 태그이기 때문에 아래와 같이 작성된다, 또한 속성값으로 정보를 나타낸다.
예) <meta 속성="속성값" />
메타에서 담을 수 있는 종류는 여러 종류가 있으며, 페이스북이나 트위터 등에서 요구하는 임의의 메타정보들도 있다. 그중 몇가지를 살펴보도록 하자!
예) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
위의 메타는 현제 페이지의 인코딩에 관한 정보를 담고 있습니다. 저 메타는 현재 페이지의 인코딩이 utf-8 방식으로 작성이 되었다는 뜻으로, 브라우저가 이 메타를 읽고 글자를 올바르게 랜더링 합니다. 국내에서는 보통'utf-8'과 'euc-kr'을 많이 사용하고 있으며, 새로운 서비스를 구착한다면 다른 언어에서도 볼 수 있는 'utf-8'을 권장합니다.
예)<meta name="Description" content="소개 내용"/>
위의 메타는 현재 페이지에 대한 설명을 담고 있으며, 이 정보는 주로 검색엔진이 확인합니다. 구글의 경우 페이지 제목 아래로 페이지를 소개하는 내용을 주로 이 메타 정보를 이용합니다. 글자 수는 160자 이내로 작성하시길 권장한다.
예)<meta name="Keywords" content="키워드들의 나열" />
이 메타는 페이지에 대한 주요 키워드들을 담고 있으며, 이 정보 역시 검색엔진이 확인하는 정보이다. 따라서 페이지에 관련 있는 키워드들을 나열해서 적어놓으면 검색엔진이 저장해놓았다가 해당 관련 검색어가 나왓을때 보다 잘 찾아준다. cntent속성에 ,를 구분으로 이용하여 사용한다.
예)<meta name="Keywords" content="카로틴,HTML,CSS,자동제어"/>
*주의 : 굉장히 많은 키워드는 검색엔진에서 스팸과 같이 인식하여 하위에 노출이 될 수 있다. 한 30개 정도가 적당하다.
<meta name="robots" content="noindex, nofollow"/>
위의 메타는 이 페이지를 검색엔진이 수집을 할지 안 할지를 정하는 정보이다. 위와 같이 content값을 'noindex, nofollow'로 줄 경우, 검색엔진은 여러분의 페이지를 색인 하지 않습니다. 때문에 검색 엔진에 노출되지도 않습니다. 검색되지 않는 사적인 페이지를 만들고 싶으실 때 사용하시면 유용하다. 반대로 노출되고 싶다면 index,follow를 넣어주면 된다.
link, style 요소
<link href="style.css" type="text/css" rel="stylesheet: />
link요소는 주로 css파일을 연결할 때 사용하는 요소이다.
"href"는 해당 css파일의 주소를 적어주면 된다. 'type'과 'rel'을 적어주는 이유는 link요소가 다른 외부요소를 연결하는데에도 쓰이기 때문입니다. 참고로 'rel'은 'relationship(관계)'의 줄임 말이다.
style 요소는 html과 css를 분리하지 않고 html안에서 css를 그대로 사용하는 방법이다.
예)
<style type="text/css">
body{
color:#333;
}
</style>
script 요소
자바 스크립트를 이용할 때 사용하는 요소이다.
* head뿐만 아니라 body에 들어가도 괜찮다*
예)
<script type="text/javascript" src="abc.js"> </script> 또는
<script type="text/javascript">
//script Text
</script>
예와 같이 src에 js 파일 주소를 적으면 외부 css 연결하듯 외부 js파일을 연결시킨다. 또한 src 속성 없이 script 요소 안에는 style 요소처럼 js를 html파일 안에 직접 적을 수 있다.
사실 본인이 봐도 두서가 없다.
하지만 요소 하나하나가 누군가에겐 도움이 될 수 있다는 전제하에 포스팅을 한다.
HTML은 태그의 집합이고 본문에서는 태그의 종류를 다룬다.
필요한것 하나둘 알다보면 앞뒤 순서가좀 다를 수는 있어도.. 어느샌가 알게되리라...
title 요소
title요소는 문서의 제목이나 이름을 나타냅니다. 안에는 텍스트만 넣을 수 있으며, 문서 내에 한 번만 사용된다.
예) <title> 제목 </title>
이 title 요소의 내용은 브라우저 창 제목이나 페이지 탭에 나타나게 되며, 검색엔진에서는 검색된 페이지의 이름으로 나타난다.
title의 제목은 페이지의 제목을 명료하게 적어주는것이 좋다.
meta 요소
head에서 메타정보를 담은 meta 요소이다.
메타태그는 스스로 닫는 태그이기 때문에 아래와 같이 작성된다, 또한 속성값으로 정보를 나타낸다.
예) <meta 속성="속성값" />
메타에서 담을 수 있는 종류는 여러 종류가 있으며, 페이스북이나 트위터 등에서 요구하는 임의의 메타정보들도 있다. 그중 몇가지를 살펴보도록 하자!
예) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
위의 메타는 현제 페이지의 인코딩에 관한 정보를 담고 있습니다. 저 메타는 현재 페이지의 인코딩이 utf-8 방식으로 작성이 되었다는 뜻으로, 브라우저가 이 메타를 읽고 글자를 올바르게 랜더링 합니다. 국내에서는 보통'utf-8'과 'euc-kr'을 많이 사용하고 있으며, 새로운 서비스를 구착한다면 다른 언어에서도 볼 수 있는 'utf-8'을 권장합니다.
예)<meta name="Description" content="소개 내용"/>
위의 메타는 현재 페이지에 대한 설명을 담고 있으며, 이 정보는 주로 검색엔진이 확인합니다. 구글의 경우 페이지 제목 아래로 페이지를 소개하는 내용을 주로 이 메타 정보를 이용합니다. 글자 수는 160자 이내로 작성하시길 권장한다.
예)<meta name="Keywords" content="키워드들의 나열" />
이 메타는 페이지에 대한 주요 키워드들을 담고 있으며, 이 정보 역시 검색엔진이 확인하는 정보이다. 따라서 페이지에 관련 있는 키워드들을 나열해서 적어놓으면 검색엔진이 저장해놓았다가 해당 관련 검색어가 나왓을때 보다 잘 찾아준다. cntent속성에 ,를 구분으로 이용하여 사용한다.
예)<meta name="Keywords" content="카로틴,HTML,CSS,자동제어"/>
*주의 : 굉장히 많은 키워드는 검색엔진에서 스팸과 같이 인식하여 하위에 노출이 될 수 있다. 한 30개 정도가 적당하다.
<meta name="robots" content="noindex, nofollow"/>
위의 메타는 이 페이지를 검색엔진이 수집을 할지 안 할지를 정하는 정보이다. 위와 같이 content값을 'noindex, nofollow'로 줄 경우, 검색엔진은 여러분의 페이지를 색인 하지 않습니다. 때문에 검색 엔진에 노출되지도 않습니다. 검색되지 않는 사적인 페이지를 만들고 싶으실 때 사용하시면 유용하다. 반대로 노출되고 싶다면 index,follow를 넣어주면 된다.
link, style 요소
<link href="style.css" type="text/css" rel="stylesheet: />
link요소는 주로 css파일을 연결할 때 사용하는 요소이다.
"href"는 해당 css파일의 주소를 적어주면 된다. 'type'과 'rel'을 적어주는 이유는 link요소가 다른 외부요소를 연결하는데에도 쓰이기 때문입니다. 참고로 'rel'은 'relationship(관계)'의 줄임 말이다.
style 요소는 html과 css를 분리하지 않고 html안에서 css를 그대로 사용하는 방법이다.
예)
<style type="text/css">
body{
color:#333;
}
</style>
script 요소
자바 스크립트를 이용할 때 사용하는 요소이다.
* head뿐만 아니라 body에 들어가도 괜찮다*
예)
<script type="text/javascript" src="abc.js"> </script> 또는
<script type="text/javascript">
//script Text
</script>
예와 같이 src에 js 파일 주소를 적으면 외부 css 연결하듯 외부 js파일을 연결시킨다. 또한 src 속성 없이 script 요소 안에는 style 요소처럼 js를 html파일 안에 직접 적을 수 있다.
댓글 없음:
댓글 쓰기