[HTML] iframe, meta, stylesheet

iframe (아이프레임)

floating frame 라고도 불리는 iframe 는 (internet frame) 의 약자로 그림이나 테이블과 같은 객체 처럼 프레임셋을 정의 하지 않고도 문서의 어느곳이나 원하는 위치에 프레임을 넣을 수 있습니다.

 

1. <iframe src="프레임 url" name="프레임 이름" width="넓이" height="높이" marginwidth="프레임의 좌, 우 여백" marginheight="프레임의 상, 하 여백" frameborder="프레임의 구분선(테두리)" scrolling="no, yes, auto">
2. iframe 이 지원되지 않는 웹 브라우저에 나타날 내용
3. </iframe>

 

iframe (아이프레임) 속성
src	프레임에 나타날 문서의 주소를 지정 합니다.
name	<iframe> 의 이름을 지정 합니다. 하이퍼 링크의 target=""  지정에 사용 합니다.
width	프레임의 가로 넓이를 지정 합니다.
height	프레임의 세로 높이를 지정 합니다.
marginwidth	프레임의 좌, 우 여백을 지정 합니다.
marginheight	프레임의 상, 하 여백을 지정 합니다.
frameborder	프레임의 구분선(테두리)을 지정 합니다.
scrolling	프레임의 스크롤 속성을 지정 합니다.
scrolling 의 속성값
no	프레임 문서의 스크롤을 비활성화 합니다.
yes	프레임 문서의 스크롤을 활성화 합니다. (가로, 세로)
auto	프레임 문서의 컨텐츠가 많을 경우 자동으로 세로 스크롤바가 나타납니다. (default)

meta 태그

메타 태그는 HTML 문서의 head 에 삽입하여 문서의 정보, 인코딩, 트렌지션 효과, 다른 페이지로의 자동 이동과 같은 형태로 다양하게 사용 할 수 있습니다.

 

stylesheet

스타일시트는 HTML 에서 구현 할 수 없는 문단의 줄간격, 포인트 단위의 크기 문서 배경에서의 반복 횟수 지정, 밑줄 없는 상태에서의 하이퍼 링크와 같은 것들을 만들 수 있습니다. HTML 에 디자인을 입힌다고 생각하면 됩니다.

 

또, 스타일시트를 이용하면, 자주 사용하는 문단에 관련된 스타일, 폼 구성 요소와 같은 스타일을 CSS 확장자 형태로 정의 해놓고, 이 파일을 공유해서 다른 문서에서 똑같은 형태로 사용 할 수 있습니다. 그렇게 되면 웹 사이트의 모든 문서에 같은 스타일을 적용 할 수 있어서 반복 작업을 줄이고, 무분별한 코드 낭비를 하지 않습니다.

 

장점

HTML 에서 구현하지 못하는 줄간격, 글자 간격, 포인트, 픽셀과 같은 단위의 사용, 배경 그림을 특정한 방향으로 반복 시키거나 하이퍼 링크의 밑줄 변화, 오버 상태 만들기 등이 가능 합니다. 스타일을 공유 할 수 있어서, 반복 작업으로 인한 코드 낭비를 줄일 수 있습니다. 

 

별도의 CSS 파일을 만들어 놓고 웹 사이트 각각의 문서에서 불러와 적용 할 수 있습니다. 다양한 디자인이 적용된 사이트를 만들 수 있습니다. 

 

HTML 문서 만으로는 할 수 없는 개성 넘치는 디자인을 스타일시트를 이용하여 웹 페이지에 적용 시킬 수 있습니다.

 

적용 방식

인라인 스타일 : HTML 요소에 스타일 속성을 각각 적용 합니다.

내장 CSS : HTML 문서의 head 부분안에 <style> 을 사용하여, 선택자와 속성을 정의해서 사용 합니다.

외장 CSS : *.css 파일 형태로 만들어 사용 합니다.

 

• <link rel="stylesheet" type="text/css" href="url" />
• @import url("url");

 

 

 

 

 

 

 

 

출처 : http://blog.naver.com/joonhojeon/220157267293