본문 바로가기
REVIEW/FRONTEND

XHTML 기본 구성 요소 정리 (1) - 문서의 기본 구조 및 Head 영역 요소 및 속성

by 진자이 2023. 6. 28.

안녕하세요 진자이입니다. 이번 포스팅에서는 XHTML 기본 구성 요소 공부했던 내용을 기록하고자 합니다. 그 첫 번째로 문서의 기본 구조 및 Head 영역에 대해 알아보고, 다음 포스팅에서 Body 영역에 대해 기록하겠습니다.

 

 

요소? 속성? 값?

<a herf =’http://www.daum.net’>Daum</a>

a - 요소(Element) / herf - 속성(Attribute) / http://www.daum.net - 값(Value)

요소(Element) : <tag> </tag>모든 명령어 집합이 요소이다. XHTML 문서에서 콘텐츠는 이러한 요소들로 구성되며, 각 요소의 의미에 따라 콘텐츠의 제목이나 본문의 구조를 가진다.

속성(Attribute) : 시작 태그는 태그의 의미와 필요에 따라 개별적인 옵션을 가질 수 있는데, 이러한 옵션이 속성이다. 태그마다 다를 수 있고 여러 개의 속성을 하나의 태그에 지정할 때는 공백으로 구분

값(Value) : 속성이 가지는 값을 의미하며 속성에 값을 할당할 때는 대입 연산자인 = 과 함께 지정

태그(tag)

태그는 <와 >로 묶어서 표현하며 기본 형식은 <tag> ~ </tag> 이며, empty element(빈 요소)의 경우 <tag/> 형태로 기술한다. 태그(및 스크립트)는 순서대로 읽어서 번역한다.(CSS는 코드를 전부 읽은 후 마지막에 읽어서 반영)

  • 닫는 태그가 없는 경우 : <img /> 등
  • 닫는 태그가 있는 경우 : <h1></h1>
  • 블록 태그 : <p></p> - 주위에 아무것도 오지 못함
  • 인라인 태그 : <span></span> - 자신의 좌우에 다른 것을 배치할 수 있음
  • 블록과 인라인 설정을 변경하고자하면 css를 이용

 

 

XHTML 서식의 원칙

(1) 요소 사용 시 종료 태그의 생략 불가능 : p, tr, th, td, li 등의 요소 명을 사용할 때도 반드시 시작과 함께 종료 표현

(2) 요소 이름과 속성 이름에 소문자 사용 : 모든 요소 이름과 속성 이름에 소문자만 사용

(3) 빈 요소 사용 시 <요소명/> 형식으로 기술 : 모든 요소에 종료 표현을 기술

(4) 속성에 속성 값 생략 불가능 : XHTML은 단축 표기가 허용되지 않으므로 반드시 속성값을 지정

(5) 태그 중첩 가능 : 부모 - 자식 관계가 존재하는데, 태그 안에 동일한 태그 혹은 다른 태그 중첩 가능

(6) 잘못된 중첩의 사용 불가능 : XHTML에서는 잘못된 중첩을 허용하지 않음

(7) 모든 속성 값에 인용 부호 사용 : XHTML의 경우, 속성값은 시작과 끝을 반드시 인용 부호로 감싸야 함

HTML과 XHTML 모두 문자 참조의 경우(특수 문자) - Characters Entity Name/Code

주석 사용 방법 <!— 내용 —>

 

 

 

문서의 기본 구조

DTD

브라우저에게 웹 페이지의 종류를 알려주는 선언문으로 문서 최상단에 선언한다. 선언하지 않으면 브라우저는 호환 모드로 웹 페이지를 해석해서 화면 표시하는데, 호환 모드는 웹 브라우저마다 웹 페이지를 해석하는 방법이 다르기 때문에 선언하지 않으면 브라우저의 호환성을 확보하기 어렵다.

<!DOCTYPE html>
<html>
	<head> 문서에 대한 정보 </haed>
	<body> 화면에 보여지는 내용 </body>
</html>

! 입력후 엔터를 치면 기본 형식으로 출력이 됨.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta는 문서에 대한 정보-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 문서 제목으로 탭에 보여지는 항목-->>
    <title>Document</title>
    <!-- html은 웹 브라우저가 해석해서 실행합니다.-->>
</head>

<body>
    <img src="" />
    <h1>내용</h1>

    
    <!-- 블록 태그는 자신의 주위에 아무도 못 오는 태그-->>
    <p>블록</p>
    <p>블록</p>
    
    <!-- 인라인 태그는 자신의 좌우에 다른 것을 배치할 수 있는 태그-->>
    <span>인라인</span>
    <span>인라인</span>

    <!-- 블록과 인라인 설정을 변경하고자하면 css를 이용-->>

</body>
</html>

속성

태그 안에 속성이름=’값’의 형태로 작성해서 태그의 옵션을 설정하는 것으로, 모든 태그에 사용할 수 있는 속성이 있고 태그별로 별도로 갖는 속성이 있다.

공통 속성 : <태그 __ = ‘값’></태그>

  • id - 페이지 내에서 구분하기 위한 이름으로, 요소들을 구별하기 위한 속성
  • class - 동일한 묶음을 만들기 위한 이름으로, 요소들을 그룹화하기 위한 속성
  • name - 서버에게 데이터를 전달할 때 사용하기 위한 이름
  • data - 태그 안에 데이터를 포함하고자 하는 경우
  • style - 요소에 직접 CSS를 적용하게 해주는 속성
  • title - 요소의 설명을 지정하는 전역 속성으로, 설명하고자 하는 태그에 title 속성 작성

 

 

Head 영역

<meta>

문서에 대한 정보(문자 코드 세트 지정 + 키워드 지정 + 다양한 문서 정보 저장)

  • charset(encoding) : 어떤 방식으로 해석을 해야 하는지 지정하는 영역으로, 지정하지 않으면 운영체제와 브라우저가 자동으로 설정함
    • <meta charset = ‘utf-8’>
  • name, content : 웹 페이지의 홍보 수단으로 meta 요소를 이용하여 검색 키워드를 지정할 수 있음
    • <meta name=’keywords’ content=’키워드, 키워드, 키워드, 키워드’ />
  • subject를 이용하여 문서 제목 정보를 제공하고 description 값으로 웹 페이지 요약 정보, 제작자 정보, 저작권 정보 및 검색 로봇 제어 여부 등 문서 정보 지정
    • <meta name=’subject’ content=’문서 제목 정보’> 등

 

<title>

title 요소는 웹 문서의 제목을 선언할 때 사용하는 요소로, 문서마다 유일한 내용으로 구성되며 정의하지 않으면 경고다.

즐겨찾기 및 북마크에 해당 웹 문서를 추가할 경우에 사용되는 북마크 이름으로도 활용된다.

 

<base>

HTML 문서의 기준 URL을 명시하며, head 요소 안에서 사용한다.

href 속성이나 target 속성 중 하나 이상을 사용해야 하며, 둘 다 사용할 수도 있다.

  • href : 문서의 기준이 되는 url 지정
  • target : 링크를 어떤 프레임에 열 것인지 설정
    • _blank : 새로운 윈도우/탭 에서 열기
    • _parent : 링크된 문서를 현재 프레임의 부모 프레임에서 열기
    • _self : 기본 값으로 생략 가능한데 링크된 문서를 링크가 위치한 현재 프레임에서 열기
    • _top : 화면이 여러 프레임으로 이루어져있는 경우 전체 화면에 열기
    • frame name : 지정된 frame 에서 열기

예시

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xHTML" lang="ko">
<head>
	<meta http-equiv="content-type" content="text/HTML; charset=UTF-8" />
	<title>문서 정보 삽입하기</title>
	<meta name="keywords" content="웹 접근성,웹 표준,품질마크,웹 콘텐츠 접근성 지침" />
	<meta name="subject" content="웹 접근성 전문가 소개" />
	<meta name="description" content="웹 접근성에 대한 개요와 웹 접근성 품질마크 소개 및 한국형 인터넷 웹 콘텐츠 지침에 대한 내용입니다." />
	<meta name="author" content="ggangpae1@gmail.com, 박문석" />
	<meta name="robots" content="index,follow" />
	<meta name="copyright" content="copyrights 2014 choongang corp." />
저작자표시 (새창열림)

'REVIEW > FRONTEND' 카테고리의 다른 글

CSS 기초 정리 - 기본 형식 및 선택자 등  (0) 2023.06.30
XHTML 기본 구성 요소 정리 (3) - TABLE & FORM  (0) 2023.06.29
XHTML 기본 구성 요소 정리 (2) - BODY 영역 요소 및 속성  (0) 2023.06.29
Web Programming 이론  (0) 2023.06.28
Git 설치 및 소스코드 Git Push 방법 정리 | git init 오류 해결  (0) 2023.06.28

관련글

티스토리툴바