현역가왕3 투표하기

일반적인 문서 작업에서 상단에 가장 먼저 쓰는 것은 큰 제목과 소제목입니다. 문서 내에서 큰 줄기가 되는 부분을 제목으로 처리할 때 쓰는 요소는 <h> 요소입니다. <h>요소는 <h1> 부터 <h6>까지 사용할 수있습니다. 실습 내에서 확인하는 큰 제목을 확인할 경우 <h1>이 가장 큰 제목이고, 그 다음 순서대로 <h2>로 내려가는 것을 볼 수 있습니다.

웹 표준 문서 작업시, <h1>는 마크업해 주어야 하는데, 웹 문서의 <h1>는 보통 회사나 단체의 상호명으로 처리합니다. 마크업시 <h1> 다음에는 <h2<가 와야 하며  <h3>가 올 수는 없습니다. 내용의 흐름이나 중요도에 따라서 제목을 정의할 수 있습니다. <h1>부터 <h6> 블록 요소이며 텍스트나 인라인 요소를 포함할 수 있지만, 블록 요소는 포함할 수 없습니다. 

단락을 정의하는 태그는 <p>입니다. 문장과 같은 텍스트들은 인라인 요소의 성질을 가지고 있기 때문에 앞에서 언급했듯이 단독으로 쓰지 않고 보통 <p>요소 안에 포함시켜야 합니다. 단락 내에서는 엔터를 치더라도 <p>를 치지 않으면 출력화면상에는 한 줄로 표시됩니다. 만약, 자체적으로 문장을 띄우기 위해서는 <br> 마크업을 적용해야 합니다.

웹 문서 하단에 보면 문서와 관련된 연락처, 주소, 전화번호, 저작권 등에 관련된 내용을 확인할 수 있습니다. 이러한 문서의 연락처 정보를 나타내는 요소가 주소 요소입니다. 주소는 블록 요소이며 텍스트와 인라인 요소는 포함할 수 있지만 블록요소는 포함할 수 없습니다. 구분선에서 확인할 수 있는 방법은 <hr>태그입니다.

HTML DTD 선언문은 다양한 브라우저들에서 마크업에 대한 일관된 화면 표시가 될 수 있도록 표시하는 기능을 가지고 있습니다. 문서형 정의 종류는 상황에 따라서 차이가 발생합니다. HTML 4.0으로 제작할 때 문서형 선언, XHTML 1.0으로 제작할 때 문서형 선언, XHTML 1.1 문서형 선언에 따라 차이가 발생합니다. DTD 선언문을 조금 더 자세하게 알아보도록 하겠습니다.

HTHL DTD 선언문

<!DOCTYPE ... dtd>는 굳이 외워서 진행할 필요는 없습니다. 보통 에디터 플러스와 같은 웹 에디터에서 자동으로 설정하여 나오게 할 수 있기 때문입니다. 1~3편까지 XHTML 문서의 기본적인 내용을 설명하였습니다. 웹 표준 문서 제작에 필요한 기본 내용이기 때문에, 반드시 알아야 합니다.

블록요소(Block Element)

웹 표준 마크업시 필요한 태그를 하나씩 알아보도록 하겠습니다. 그전에 반드시 알아야 하는 것이 유형과 성질입니다. 요소의 유형은 블록 요소와 인라인 요소가 존재하고 있습니다. 블록요소는 마크업시 줄 바꿈이 일어나느 성질을 나타납니다. 실습 화면에 확인하며 결과화면에 따라 각 요소에 대해서 한 줄씩 출력되는 것을 확인할 수 있습니다. 실습 내에 표시되었던 블록의 성질을 가지고 있어서 화면상 줄바꿈 현상이 나타나기 때문입니다. 실제 블록 요소의 모양을 빨간색으로 모양을 확인할 수 있는데, 블록 요소와 블록 요소 사이는 흰색 바탕이 기본 여백입니다.

인라인 요소

인라인 요소는 블록요소와 다르게 줄바꿈 성질은 따로 없습니다. 블록요소처럼 행이 바뀌지 않고 한 줄로 출력되게끔 구성되어 있습니다. 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있습니다. 인라인 요소는 블랙 요소를 포함할 수 없습니다. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 합니다.

일반적으로 사용하는 XHTML 1.0 기본 문서 구조를 통해서 알아볼 수 있습니다. <!DOCTYPE ..은 현재 문서 타입이 무엇인지를 알려주는 브라우저에게 알려줍니다. 이 부분은 DTD 선언문에서 자세하게 알아보도록 하겠습니다. HTML 요사 안에는 HEAD 요소와 BODY 요소로 구성되어 있습니다. HEAD 요소 안에는 meta, title, link script, stype 과 같은 요소들이 올 수 있습니다.

META는 문서의 설명, 키워드, 저자 등을 지정할 수 있습니다. title은 문서의 제목을 지정할 수 있습니다. link는 일반적으로 외부의 CSS 파일을 연결할 때 사용할 수 있습니다. script는 주로 자바스크립트를 선언할 때 사용합니다. style은 문서 내에서 직접 스타일을 정의할 수 있습니다.

XHTML은 네임 스페이스라는 것을 꼭 지정해주어야 합니다. HTML 태그 안에 있는xmlns="http://www.w3.org/1999/xhtml 속성이 바로 네임 스페이스 부분입니다. 옆에 있는 lang="ko" xml:lan="ko"는 언어는 한국어라는 뜻입니다.

meta 태그를 보면 charset=UTF-8로 지정한 부분이 있습니다. charset은 character set의 약어로 문자 조합을 의미합니다. UTF-8은 모든 언어 문자 및 특수 문자를 표한할 수 있어 다국어 환경에 적합합니다. 또한 여기에서 중요한 점은 charset을 UTF-8로 설정할 경우, 문서를 저장할 때에도 반드시 인코딩 옵션을 UTF-8로 지정하고 저장해야 합니다. 그렇지 않으면 글자가 깨지는 현상이 발생할 수 있습니다.

DTD 선언은 Document Type Definition은 선언문인 <!DOCTYPE..., dtd> 부분의 역할은 이 문서는 여기서 정해놓은 규칙에 따라 마크업한다라는 것을 의미합니다. 다양한 브라우저들에서 마크업에 대한 일관된 화면 표시가 될 수 있도록 도와줍니다. 자세한 내용은 다음에 다시 알아보도록 하겠습니다.

HTML 기본 문법에 대해서 한번 알아보도록 하겠습니다. 표준이라는 말은 결국 정해놓은 규칙이나 절차라는 의미이므로 웹 표준을 준수한다는 의미 또는 정해 놓은 규칙을 잘 지켜서 마크업한다라는 것을 의미합니다. HTML 내에는 여러가지 용어들이 있습니다. 자세하게 한번 알아보도록 하겠습니다.

P, SPAN, A 등과 같은 명령의 형태가 <>로 되어있는 것을 태그라고 합니다. 시작 <>, 끝인 / 는 하나의 요소라고 합니다. 또 이러한 요소들을 이용하여 웹 문서를 작성하는 것을 마크업이라고 합니다. HTML에서는 중요한 문법 규칙이 존재하고 있습니다.

요소는 제대로 충전되어야 합니다. 마지막에 정의한  태그를 가장 먼저 닫아야 한다는 뜻입니다. 요소 및 속성 이름은 소문자여야 합니다. 속성값에는 인용 부호를 붙여야 합니다. 속성은 속성값과 함께 써야 합니다. 속성은 속성값과 같이 선언해야 하며 생략하면 안됩니다.

img, area 요소에는 alt 속성이 있어야 합니다. img 요소에는 alt를 주어야하는 이유는 문법적으로도 필요하지만, 이미지를 볼 수 없는 환경에서도 충분히 그 이미지에 대한 정보를 제공해야 하기 때문입니다. 특수문자를 쓸 때는 entiny name 또는 entity code를 사용해야 합니다. 특수문자 &출력하기 위해서는 그냥 & 쓰게 되면 entity name 또는 entity code 맨 앞에 오는 &로 로인하여 문법적 오류가 발생합니다. 이러한 문제를 발생하지 않으려면 특수문자의 경우에는 entity로 변환하여 기술해야 합니다.

주석처리 방법은 협업시 다음 작업자가 현재 작업한 내용을 쉽게 볼 수 있도록 도와주는 설명문입니다. html 코드 내에서는 <!-- 내용 --> 로 작성하며 화면에는 출력되지 않습니다.