인라인 프레임(Frame)
인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe 요소를 사용하기 때문에
약어로 아이프레임이라고 부르기도 한다.
하이퍼 텍스트 생성언어(HTML) 문서에서 글 임의 위치에 또 다른 HTML 문서를 보여주는
인라인프레임 태그, 이미지 태그로 그림 파일을 문서에 포함시키는 것과 유사하다.
인라인 프레임은 인터넷 익스플로러의 독자적인 요소였으나 HTML 4.0과
HTML 4.01 이후에 정식으로 지원하고 있다.
인라인 프레임은 XHTML 1.0 Strict와 XHTML 1.1 에서 사용불가하며(넷스케이프에서도 동작하지 않음)
Transitional DTD에서만 사용할 수 있다.
title 속성에는 iframe의 콘텐츠가 어떤 내용을 담고 있는지 설명해야 하는데
이 화면 낭독기를 이용하여 콘텐츠 접근시 시각장애인에게 접근성 부분에 있어서
지대한 도움을 줄 수 있다.
형식
<iframe src="삽입할 문서" id="식별자" name="변수명" frameborder="테두리 표현여부"
width="가로 크기" height="세로 크기" scrolling="스크롤 여부" title="삽입된 콘텐츠의 내용을 대체하는 설명">
프레임이 지원되지 않는 환경에 대한 대체 콘텐츠</iframe>
개체 삽입(object)
object 요소는 이미지를 포함한 플래시 개체나 동영상, 사운드 등의 플러그인 개체를 의미한다.
이러한 형식의 개체를 웹 문서에 삽입할 때는 object요소를 사용해야 하지만,
인터넷 익스플로러와 비인터넷 익스플로러 계열의 웹 브라우저가 서로 개체를
참조하는 방식이 다르다는 문제가 있다.
인터넷 익스플로러의 경우 ActiveX 방식으로 플러그인을 참조하고
비인터넷 익스플로러 계열은 data 속성만으로 연결할 플러그인을 참조한다.
형식
<objcet type="개체종류" data="URI" width="가로 크기" height="세로 크기" id="식별자">
<param name="Filename" value="URI" />
<objcet >
<param />
</object>
</object>
스타일과 스크립트
- 내부 스타일 적용(style)
XHTML 요소 중에서 style 요소는 CSS를 XHTML 문서에 적용할 때 사용하고
XHTML 요소 중 대부분은 구조를 정의하는 용도로 사용한다.
HTML 요소에는 웹 브라우저 기본 스타일만 적용되어 있기 때문에 가독성을 높이거나
시각적으로 화려하게 표현하려면 CSS(Cascading Style Sheet)의 도움을 받아야 한다.
*style 요소는 head에만 지정할 수 있다. (<head>와 </head> 사이에 넣기)
형식
<style type="text/css">
CSS 구문
</style>
- 스크립트 삽입
웹 문서에 스크립트를 삽입 할때는 script 요소를 사용한다.
script 요소는 head 요소와 body 요소에 여러번 삽입할 수있다.
스크립트를 삽입할 때는 XHTML에서 script요소의 내용 모델이 #PCDATA이기 때문에
"<" , "&" 등의 기호를 문자 참조(Character Entity)로 변환해야 한다.
※문자 참조란?
문자 참조는 XML, HTML 같은 SGML 계열의 마크업 언어에서 한 문자를 표현하기 위한 언어구조이다.
문자 참조를 사용하는 목적은, 입력이 어려운 문자를 표현하거나 마크업 언어를 제어하는 문자를
일반문자로 표현하기 위함이다.
→같은 화살표 기호를 표시하기 위해서는 컴퓨터 자판에 없어서 입력이 힘들지만
→ 처럼 자판을 이용하여 쓸수도 있다. 이렇게 문자를 뜻하는 이름을 써서 표현하는 방법을 "문자 실체 참조" 또는
"실체 참조"라고 하고 문자 코드를 써서 표현하는 방법을 "수치 문자 참조" 또는 "문자참조"라고 한다.
HTML4 버전에서 사용 가능한 문자 참조는 252가지이다.
그룹화 요소
1. 블록 그룹화 요소(div)
div(division) 요소는 분할, 나누기의 의미를 가지며 그룹핑의 역할을 수행한다.
주로 블록 요소를 그룹화 하기위해 사용하며 id와 class 속성으로
해당 그룹의 의미를 부여할 수 있다.
div 요소는 레이아웃을 구현 할 때도 사용할 수 있다.
div 요소를 이용하여 연관성있는 콘텐츠를 그룹화 했을 경우 웹 브라우저에서는
구분할 수 없다.(CSS를 이용하여 그룹을 디자인하거나 원하는 위치에 배치가능)
형식
<div>
블록 요소(Block Element)
</div>
2. 인라인 그룹화 요소(span)
블록요소를 그룹화하기 위해 주로 div 요소를 사용한다면 인라인 요소를
그룹화할때는 span 요소를 사용한다. span 요소는 인라인 요소이므로
p요소와 ul 요소 같은 블록 요소를 포함할 수 없다.
형식
<span>
인라인 요소(Inline Element)
</span>
※웹 브라우저에서 div로 그룹화한 콘텐츠를 확인하는 방법
div 요소는 그룹화하는 용도로 사용되는데 div 요소 안에 어떤 요소들이 포함되어 있는지
해당 그룹의 id 값이나 class 값이 무엇인지는 웹 브라우저에서 확인 할 수 없다.
이때 파이어폭스의 부가기능인 Web Developer에서 제공하는 정보도구의 div 순서표시 기능을
활용하면 블록의 그룹화 범위와 사용된 id값 및 class값등을 확인할 수 있다.
'Web' 카테고리의 다른 글
| CSS 선택자 (0) | 2020.05.29 |
|---|---|
| CSS의 서식 및 적용 (0) | 2020.05.29 |
| 구글 애널리틱스(Google analytics)란? (0) | 2020.05.28 |
| 폼의 정의 및 구성요소 (0) | 2020.05.28 |
| 테이블 관련요소 (0) | 2020.05.28 |
댓글