XHTML 기본 구성 요소 정리 (2) - BODY 영역 요소 및 속성

안녕하세요 진자이입니다 :) 이번 포스팅에서는 XHTML 기본 구성 요소 정리로 BODY 영역에 대한 요소 및 속성 정리와 함께 StyleSheet와 Script를 활용한 디자인에 대해 짧게 기록하고자 합니다.

Body 영역

기본 속성

bgcolor: 배경 색상
background: 배경 이미지
text: 문서 전체의 글자 색
link: 링크가 걸린 텍스트 색상
vlink: 클릭한 후의 텍스트 색상
alink: 클릭할 때의 텍스트 색상
leftmargin: 왼쪽 여백, topmargin: 상단 여백, marginWidth, marginHeight
oncontextmenu: 마우스로 오른쪽을 눌렀을 때 메뉴
onselectstart: 마우스로 선택 할 때 메뉴
ondragstart: 마우스로 드래그 했을 때 메뉴
bgproperties: fixed를 주면 배경 이미지가 고정
scroll: 스크롤 바의 유무로 auto를 주면 자동으로 생성

(참고) on 으로 시작하는 3개 속성의 값을 return false를 설정하면 브라우저에서 메뉴가 제한

h<n> : heading 요소

제목을 작성할 때 사용하는 헤딩 요소로, h1 ~ h6 여섯 가지가 있으며 숫자가 작을 수록 큰 제목이다. h1은 한 문서에 1번만 사용하는 것을 권장하며 heading은 css를 이용해서 크기가 변경 가능하다

예시 : <h1> 대제목 </h1>

<p> : paragraph 요소

텍스트를 문단으로 정의할 때 사용하는 요소로 닫는 태그를 생략하면 다음 블록 요소가 올 때까지를 하나의 블록으로 처리한다. 문단 요소 안에는 <a>, <img> 등과 같은 인라인 요소와 텍스트만 포함할 수 있으며, 블록 요소는 사용할 수 없다. 문단 안에서 강제로 줄 바꿈 해야 할 때는 <br /> 요소를 사용할 수 있으나 시각적 효과 등을 위해 함부로 사용하지 않아야 한다.

예시 : <p> 문단 텍스트 </p>

<br /> : 줄바꿈

문단 내에서 텍스트를 강제로 줄 바꿈할 때는 line break의 의미인 br 요소를 사용

br 태그는 빈 요소(empty element)로 사용 형식

<address>

웹 문서의 아래쪽에 연락처 및 제작자, 저작권 정보 등을 표시

address 안에는 블록 요소를 포함할 수 없음

<hr /> : 구분선

수평선을 출력해주는 태그로, 구분선 역할을 하고 빈 요소로 종료 태그 없이 사용한다. 논리적인 의미의 구분이라기보다는 콘텐츠의 전후의 내용을 구분할 수 있도록 선으로 나타내는 것이다. HTML5에서는 다른 의미로 사용되는데, 브라우저는 아직도 수평 가로 줄로 렌더링함.

width : 너비로 숫자나 퍼센트 모두 가능
size : 선의 두께로 픽셀로만 입력 가능
align : 정렬 기능으로 기본값은 center
noshade : 입체감을 없애준다.

예시

<div id='content'> content 영역 </div>
<hr />
<div id='aside'> aside 영역 </div>

<a> : 링크 설정

a(anchor) 요소는 텍스트나 이미지 콘텐츠 링크를 설정할 때 사용하며 href, target, name, title 속성이 있다. href 속성에 링크 요소를 설정하며 연결된 경로가 웹 브라우저고, 출력할 수 없는 형식이면 다운로드 한다. 이미지를 설정하는 것도 가능하다. base 태그를 이용해서 기본 경로를 설정할 수도 있다.

절대 경로 : 변하지 않는 경로로, 프로토콜/도메인 이름/필요한 경우는 경로명까지 포함한 전체 URL을 입력한다. (웹의 url이 절대 경로 : <a href=’http://www.naver.com’>네이버</a> 등
상대 경로 : 현재 URL(위치)에서의 경로 ‘./’(상위 디렉토리를 의미) or 앞에 기호를 생략하면 현재 위치 (’./’ 를 항상 입력하는 것으로 생각하는 게 좋음)
→ 절대 경로로 이미지 주소를 설정할 경우, 한 번 밖에 다운로드 받지 않지만 상대 경로로 할 경우 여러 번 다운받기 때문에 절대 경로가 더 좋다!

<a target 속성>

_blank : 새로운 창으로 열기
_self : 자신의 페이지에 문서 열기(default)
_top : 현재 페이지 전체에 문서 열기
_parent : 현재 문서 상위 페이지에 열기

책갈피(문서 내에서 이동) - document fragment

찾아갈 곳에 id를 설정 : <a id=’x’></a>
하이퍼링크 설정 : <a href=’#x’>텍스트</a>
다른 URL의 책갈피로 이동 : <a href=’url#x’>텍스트</a>

예시1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 상대경로 지정 -->
    <p><a href="./index.html" target="_blank">인덱스</a></p>
    <!-- 절대경로 지정-->
    <a href="https://www.google.co.kr">구글</a>
</body>
</html>

예시2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/HTML" charset = "UTF-8">
	<title>다음넷</title>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br />
	<a href="https://www.daum.net" target="_blank" title="클릭하면 다음 홈페이지로 이동합니다.">다음</a>
</body>
</html>

<ul> <ol> : 목록태그

ul(unorderlist) 순서 없는 목록

type : disc(기본값), circle, square

ol(orderlist) 순서 있는 목록

type : 1(기본값), A, a, I, i

세부 항목은 li 태그를 이용해서 표시하며, 순서 있는 목록에서 start 속성을 이용하면 시작 숫자를 변경할 수 있다. 목록 태그에서 정의형 목록을 구성하는 방법이 있다. 용어 정의와 설명, 참고 문서, 링크와 설명 등 다양한 용도로 이용할 수 있다.

dl(definition list) : 정의형 항목의 목록 나열, 블록 요소이며 dt 요소와 dd 요소만 포함 가능하다
dt(definition term) : 정의형 항목의 용어, 인라인 요소이며 인라인 요소와 텍스트를 포함 가능하다
dd(definition description) : 정의형 항목의 설명, 블록 요소로 인라인 요소와 텍스트, 또 다른 블록 요소를 포함 가능하다 → 대부분의 브라우저에서 들여쓰기 되어 표시되며 여러 개의 dd 사용 가능하다.

예시1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3> 제목 </h3>
    <ul>
        <li>아메리카노</li>
        <li>카푸치노</li>
    </ul>
    <ol>
        <li>아메리카노</li>
        <li>카푸치노</li>
    </ol>>
</body>
</html>

예시2

<!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>
</head>
<body>
	<h1>정의형 목록</h1>
<dl>
		<dt>XHTML</dt>
		<dd>HTML은 Hyper Text Markup Language의 약자로, 웹 문서를 제작하기 위한 언어로
	설계되었습니다. 그래서 범용적 전자 문서나 전자데이터를 표현하는 기능은 충분하지 않았
	습니다. 이러한 요구로 인해 등장한 것이 바로 XML(eXtensible Makeup Language)이며,
	XHTML은 HTML을 XML로 재구축한 마크업 언어입니다. 그러므로 HTML과 XHTML은 동일
	한 요소를 가지며 두 가지 마크업 언어 모두 웹 문서를 제작할 때 사용되는 웹 표준 기술입
	니다.</dd>
	</dl>
</body>
</html>

<img/>이미지

<p><img src=’이미지 경로’ alt=’대체텍스트’ /></p>

이미지 개체를 삽입하는 요소로 빈 태그이며, 인라인 요소이다.alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용하며, 이미지와 동등한 정보를 제공한다 속성은 다음과 같다. width (너비), height(높이), align(맞춤, left, top, middle, bottom, right 설정 가능), border(경계선), hspace(좌우 여백), vspace(상하 여백). width, height는 사진과 앞 뒤에 있는 항목들을 포함해서 렌더링하는 과정을 빠르게 하므로 꼭 지정하는 게 좋다. 이미지는 출력 내용을 미리 만들어놓고, 나중에 출력한다. 다시 말해, 이미지를 바로 불러와 출력하는 경우는 없다!

html 파일과 image는 같은 디렉토리에 있으면 안된다! → resource 폴더 새로 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 절대 경로를 활용한 이미지 출력-->
    <img src='이미지 주소 복사한 링크' width='100' height='100'/>
    
    <!--상대 경로를 활용한 이미지 출력-->
    <img src="./resource/lesserafim.jpg" width="100" height="100" />

</body>
</html>

글꼴 관련 태그 - 물리적인 태그

html5에서는 css를 이용해서 설정하는 것을 권장한다.

<b> </b> : 진하게
<i> </i> : 이탤릭체
<s> </s> : 취소
<u> </u> : 밑줄 주석
<big> </big> : 큰 글자
<small> </small> : 작은 글자
<tt> </tt> : 타이핑체
<sup> </sup> : 위첨자
<sub> </sub> : 아래첨자

글꼴 관련 태그 - 논리적인 태그

눈에 보이는 영역이 아님

<abbr> </abbr> : 검색 엔진, 스크린 리더기, 기타 보조 장치에 유용한 정보
<cite> </cite> : 출처
<dfn>, <code>,<var>, <samp>, <kbd> 등

글꼴 관련 태그 - font

<font> 태그의 속성은 css로 대체.

<basefont size=숫자> : 기본 글자 크기 설정 → css로 대체

color : 색상 → html 문서에서 색상을 표현하는 방식은 영문 색상 이름, 16진수 RGB 값 2가지가 있음
face : 글꼴
size 크기

글꼴 관련 태그 - 특수문자

&nbsp: non-breaking space의 약어. 공백문자 하나를 추가
&lt: < Less than 의 약어
&gt: > Greater than의 약어
&amp: & Ampersand의 약어
&quot: “quotation maker의 약어
&trade: ™ Trademark의 약어

정리

물리적인 글꼴

태그	설명	결과
<b>	bold (굵은 글자)	bold
<i>	italic (이탤릭체)	italic
<u>	underline (밑줄)	underline

논리적인 글꼴

태그	설명	결과
<em>	emphasis (강조할 때) 이태릭체로 표현	emphasis
<strong>	strong emphasis (강한 강조) 굵은 문자로 표현	strong emphasis
<code>	code (컴퓨터 코드를 나타낼 떄) 고정폭 글자체로 표현	`code`
<kbd>	keyboard (키보드의 키입력을 표현할 떄) 고정폭 글자체로 표현	`keyboard`

StyleSheet와 Script 활용

스타일은 모든 요소를 전부 읽어서 트리를 구성한 후, StyleSheet를 적용하기 때문에 위치에 상관없이 적용되지만, Script는 순서대로 읽어서 실행하기 때문에 올바른 위치에 작성해야 한다.

StyleSheet
- 외부 스타일시트 파일을 이용할 때 사용 : <link rel=’stylesheet’ herf=’외부 스타일시트 파일 경로’>
- HTML 파일 내부에 스타일시트를 사용할 때 사용. 두 아래 방식 모두 상관 없음 : <style> 스타일시트 내용 </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <h1 class='redarea'>안녕하세요</h1>
    <p class="redarea">반갑습니다</p>
    <p>두번째 단락입니다.</p>
	   
		<style>
        .redarea{
            color:red;
        }
    </style>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .redarea{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='redarea'>안녕하세요</h1>
    <p class="redarea">반갑습니다</p>
    <p>두번째 단락입니다.</p>

</body>
</html>

Script
- 외부 자바스크립트 파일을 이용할 때 사용 : <script src=’외부 자바스크립트 파일 경로’></script>
- HTML 파일 내부에 자바스크립트를 이용할 때 사용하며, Style과 다르게 아래처럼 입력해야 함 : <script> 자바스크립트 내용 </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .redarea{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='redarea'>안녕하세요</h1>
    <p class="redarea">반갑습니다</p>
    <p id="adam">두번째 단락입니다.</p>
    <button id="btn">클릭</button>
    <script>
        document.getElementBy('btn').addEventListener(
            'click', function(0){
                document.getElementBy('adam').innerHTML='클릭'
            }
        )
    </script>
</body>
</html>

저작자표시 (새창열림)

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

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

진자이의 DATA RECODRD

XHTML 기본 구성 요소 정리 (2) - BODY 영역 요소 및 속성

Body 영역

물리적인 글꼴

논리적인 글꼴

StyleSheet와 Script 활용

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

티스토리툴바

XHTML 기본 구성 요소 정리 (2) - BODY 영역 요소 및 속성

Body 영역

물리적인 글꼴

논리적인 글꼴

StyleSheet와 Script 활용

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

관련글

티스토리툴바