'HTML'에 해당되는 글 3건
✔웹코딩기초강좌 4 - HTML '블록타입'과 '인라인타입'
Amatuer.세오/HTML&CSS공부

✔웹코딩기초강좌 4 - HTML '블록타입'과 '인라인타입'




각 요소들은 블록타입과 인라인타입으로 구분되는데, html을 작성할 때 꼭 알아둬야 할 기본 항목 중 하나다.








1. 블록타입 (Block Type, Block Level Elements)




블록타입(블록요소)는 기본적으로 줄바꿈이 일어나는 형태로 하나의 요소가 웹페이지 영역 내에서 좌측끝에서 우측 끝까지 전체 너비만큼 차지한다. Width(가로)와 Height(세로) 영역을 설정할 수 있으며, 완벽한 여백과 주변요소와의 간격을 조정한다.


이러한 블록타입에 해당하는 요소들로는 대표적으로 H1~H6요소, P요소, div 등이 있다.




(△ 블록타입 예시. 상단 Result 탭을 클릭해서 결과를 확인해보자)





2. 인라인타입(Inline Type, Inline Elements)




인라인타입은 블록타입과 반대되는 형태로 줄바꿈이 일어나지 않는 형태인데, 요소와 요소가 기본적으로 좌에서 우로 자연스럽게 배치된다.


원칙적으로 Height(높이) 지정은 불가하지만, 예외적으로 img 및 input 태그는 height 설정이 유효하며, 상하 여백과 주변 요소와의 상하 간격에 관련한 조정이 불가한 것이 특징이다.


대표적으로 a, img, strong, span 요소 등이 있다.




(△ 인라인타입 예시. 상단 Result 탭을 클릭해서 결과를 확인해보자)






<관련 포스팅>



✔HTML기초 - HTML, CSS, JAVA Script 입문 - ①  ㅣ  http://seo-apl.tistory.com/53




✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념  ㅣ  http://seo-apl.tistory.com/54




✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기  l  http://seo-apl.tistory.com/55











세오의 어필로그 ㅣ sseoteo@naver.com


저작자 표시
신고
Name
Password
Homepage
Secret
✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기
분류없음

✔웹코딩기초강좌 ③ - HTML문서 Head 요소 알아보기



HTML문서를 작성할 때에 가장 처음 들어가는 Head (머리) 부분에 관련하여 정리해본다.






★ HTML 문서의 구조를 만드는 기본 태그 ★


<!doctype HTML>

<html>


 <head>

  <meta charset="UTF-8">

   <title> 문서제목 </title>

 </head>


 <body>

문서내용

 </body>


</html>






1. Doctype



독타입(Doctype)은 HTML 문서의 가장 상단에 명시하는데, 해당 HTML 문서의 타입과 버전을 알려주는 정보를 담는다. 웹표준으로 작성할 때에 필수로 들어가는 항목이다.


※ HTML5의 선언 ▶ <!doctype HTML> 


<!doctype HTML> 이라고 최상단에 작성해두면, 해당 문서의 버전이 HTML5버전이라는 것을 나타낸다.





2. Head


head요소는 해당 웹페이지에 직접적으로 표현되지는 않으나, 이 페이지의 제목이나 웹페이지가 검색엔진에 노출이 될 수 있도록 하는 각종 정보('메타데이터'라고 한다)들을 담는 역할을 한다. 웹페이지를 꾸미는 CSS파일이나 자바스크립트 JS 파일을 연결하는 부분 또한 주로 head 요소 안에 위치한다.




[ Head를 구성하는 요소들 ]




① Title 


문서의 제목 또는 이름을 나타낸다.


<title> 문서의 제목 </title>


title 요소의 내용은 브라우저 창 제목이나 페이지 탭에 나타나게 된다. 때문에 title 제목을 작성할 때는 간단하고 명료하게 작성하는 것이 좋다. 


Title 작성 Tip )


1. 제목은 해당 웹페이지를 대표할 수 있는 내용의 제목을 사용해야 한다.


- 사이트를 노출시킬 때에 검색엔진이 해당 목적에 맞게 인식하여 노출시킬 수 있도록 키워드 선정이 중요


2. 웬만하면 특수문자를 사용하는 것은 지양하는 것이 좋다.


 






② meta 


메타태그는 스스로 닫는 태그로, 현재 페이지의 인코딩(언어정보), 페이지 설명, 페이지에 관련한 주요 키워드 등을 담는 역할을 한다.

ㄷㅁㅇㄴㄹ

<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="소개 내용"/>


디스크립션메타는 해당 웹페이지를 설명하는 정보들을 담고 있으며, 이 정보는 검색엔진에서 긁어가는 내용으로 인터넷 유저가 검색했을 때 사이트 설명 부분에 나타나게 된다.


<meta name="Keywords" content="키워드 나열" />


해당 웹페이지가 갖고 있는 주요 키워드들을 담는 메타태그로 이 정보 역시 검색엔진에서 긁어가는 주요 정보 중 하나가 된다.


<meta name="robots" content="noindex, nofollow" />


이 메타태그는 해당 웹페이지를 검색엔진이 웹수집을 하게 할 것인지, 하지 않도록 할 것인지를 정하는 태그로, 위와 같이 'noindex, nofollow'로 정의해둘 경우 검색엔진은 해당 웹페이지 정보를 수집하지 않는다. 이는 즉, 검색엔진에 노출되지도 않는다는 것을 의미한다.


그러나 대부분의 사이트는 검색노출을 위한 사이트가 많으므로 content 값을 'index, follow'로 작성해두거나 위 메타태그를 아예 작성하지 않으면 기본적으로 검색엔진이 해당 사이트를 수집하게 된다.



③ link, style


※ 사용 예)


<link href="style.css" type="text/css" rel="stylesheet" /> 


<style type="text/css">

  body{

    color:#333;

  }

</style>



link 및 style 요소는 CSS 파일을 연결할 때 사용하는 요소들이며, Style 요소 안에 원하는 CSS 내용을 넣게 되면 굳이 외부 CSS 파일을 별도로 사용할 필요가 없고, html 파일 안에서 편하게 사용이 가능하다.


물론, 관리를 위해 CSS파일을 분리하여 작성하는 것이 더욱 좋은 방법이긴 하나, 종종 간단한 텍스트 또는 단일페이지를 작성할 때에 사용할 CSS라면 유용히 활용할 수 있다.



④ script


<script type="text/javascript" src="abc.js"> </script> 또는


<script type="text/javascript"> 

  //script Text                       

</script>                             


src 속성에 js파일명을 기입하면, CSS를 연결하듯 외부 js(자바스크립트) 파일을 연결하게 된다. 또한 src 속성 없이 script 요소 안에는 style 요소처럼 js를 html 파일 안에 직접 작성할 수도 있으며, head 뿐만 아니라 body 안에 작성하는 것도 가능하다.





★ 정   리 ★ 



1. 독타입(doctype) 


  - 문서의 최상단에 위치하여 HTML 의 버전과 타입을 선언한다.


2. head 요소 


  - 실제로 웹페이지상에 보여지지는 않지만 페이지가 갖고 있는 중요 정보들을 담고 있다.

  - head 요소 정보들은 검색엔진 및 스크린 리더 등에서 활용된다.


3. title 요소

  

  - 페이지의 제목을 의미하며, 브라우저 탭에 노출된다.

  - 웹페이지 접근성을 위하여 특수문자 또는 긴 내용은 자제하는 것이 좋다.


4. meta Description

 

  - 페이지의 소개 내용을 담는다. 검색엔진에 주로 활용된다.


5. meta Keywords


  - 페이지의 주요 키워드를 명시하여 검색엔진에 주로 활용된다. 

  - 단, 도배성 또는 무관한 내용을 남발할 시 오히려 악영향이 될 수 있으니 주의한다.


6. link, style


  - 주로 CSS 파일과 연결하며, style 요소를 통해 페이지 내에서 CSS스타일을 줄 수 있다.

    

7. script


  - 웹페이지와 javaScript 파일과 연결하는 역할을 한다.








<관련 포스팅>



✔HTML기초 - HTML, CSS, JAVA Script 입문 - ①  ㅣ  http://seo-apl.tistory.com/53




✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념  ㅣ  http://seo-apl.tistory.com/54











세오의 어필로그  l  sseoteo@naver.com





저작자 표시 비영리 변경 금지
신고
Name
Password
Homepage
Secret
✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념
Amatuer.세오/HTML&CSS공부

✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념









1.  HTML 문서 구조를 위한 기본 태그



① <!doctype.html>


웹브라우저에게 해당 문서의 타입이 'HTML' 웹 페이지라고 선언하는 문장으로, HTML 코딩 작성시 가장 상단(첫번째 줄)으로 들어가는 기본 태그.




② <HTML>

    </HTML>


html 태그로 코딩시 모든 내용은 HTML 태그 안에 작성하게 된다. 페이지 전체를 통틀어 감싸안는 성격을 갖고 있다.



③ <head>

   </head>


<body>

</body>


태그 안에 태그를 넣을 수 있는 구조로, head 태그는 웹 페이지의 보이지 않은 정보들을 담는 영역이며, body 태그는 웹 페이지에 보여지는 내용들이 들어간다.



☞ 작성 예


<!DOCTYPE html>

<html>
<head>
<title>세오의 어필로그</title>
</head>

<body>
공부하자
</body>

</html>




※ 웹 코딩을 할 때, '줄바꿈 & 들여쓰기'를 습관화 하자!



태그 및 소스 등을 작성할 때, 각각의 태그가 어느 태그 안에 있는지, 해당 태그가 제대로 잘 닫혀있는지 오로지 텍스트로 이루어진 성격 탓에 눈으로 식별하기가 상당히 어렵다. 태그 작성을 올바르게 했다고 생각하더라도 실제 결과물 속에서 에러가 나거나 원하는 대로 보여지지 않는다면 어떤 문제가 있는지 찾기 쉽도록 태그를 작성할 때 미리미리 들여쓰기 (TAB)을 눌러주거나 스페이스를 통해 공백을 주는 것이 좋다.


들여쓰는 것에 대하여는 별다른 규칙은 없으나, 본인이 읽거나 구분하기 쉽게, 그리고 일관성이 있게 주는 것이 중요하다.






2. 요소와 속성




※ <태그> ~ </태그>


어떤 태그가 시작될 경우 '< >' 괄호 안에 태그명령어를 씀으로써 시작된다. 물론, 태그 내의 소스 또는 명령어를

모두 작성을 완료한 경우 '</ >' 괄호 안에 슬래시를 넣어줌으로써 해당 태그소스는 끝이 났다고 선언해야 한다.


※ 스스로 닫는 태그


단, <br/> 등과 같이 '스스로 닫히는 태그' 또한 존재한다. 이는 태그 안에 담을 내용이 별도로 없고

태그 자체에 의미가 담긴 것들이기 때문이다. 


- 스스로 닫는 태그 예시 ▶  <img/>





위의 코드를 예시로 든다면, img 태그 안에 'src="사이트주소" 형식을 찾아볼 수 있다. 이것을 '속성' 이라고 하며, img를 '요소'라고 한다. 즉, img 라는 요소 안에 scr 속성을 추가하였다고 이해하면 된다.


<요소 속성="속성값"/> 또는 <요소 속성="속성값"> 요소내용 </요소>














세오의 어필로그


sseoteo@naver.com





저작자 표시
신고
Name
Password
Homepage
Secret