|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 07편 : 폼 |
#1. 들어가기에 앞서서
폼은 html 수준에선 비교적 어려울 뿐만 아니라,
html만 다루실거면 알아봐야 거의 쓸모가 없습니다.
그러므로 앞으로 웹프로그래밍을 더 공부하실 게 아니라면 폼은 보지마세요.
초보자는 더 헷갈릴 뿐입니다. 어차피 쓸모도 없어요.
보지마시고, 간혹 폼이 필요할 때가 있습니다.
필요해지면 그 때 다시 와서 보시기 바랍니다.
폼은 처음 html을 배우는 사람은 알 필요가 없습니다.
그럼 나중에 모르는 게 나왔을 때 폼이 뭔지 어떻게 아냐구요?
폼은 <form></form> 대부분의 경우 이 사이에 들어갑니다.
또한 저희가 글을 쓸 때 사용하는 버튼이나 클릭하면 목록이 쭉 아래로 늘어지는 리스트같은
'글이나 정보를 입력하는 창, 버튼, 도구 등등'이 폼에 속합니다.
혹시 이 부분의 '외형'을 수정하게 되거나 만들어야 할 일이 생기면 그 때 와서 폼을 보세요.
당장은 필요없을 겁니다.
#2. 폼이란 무엇인가?
폼이란, 웹 프로그램과 연동해서 사용자가 특정한 정보를 컴퓨터에 전달할 때 사용하는 도구입니다.
게시판을 예로 들 수 있는데, 저희가 게시판에서 제목을 쓰고, 이름을 쓰고, 전송버튼을 누르는 바로 이 부분이 폼입니다. 가입 화면에서 가입자 정보를 입력하는 모든 부분도 다 폼입니다.
폼은 일종의 그릇과 비슷하다고 생각합니다.
그 그릇에 정보를 담은 후에 컴퓨터에게 전달하는 것입니다.
아주 중요한 기능이죠.
그런데 왜 폼이 쓸모가 없냐구요?
HTML에는 정보를 처리하는 기능이 없습니다.
게시판에다가 저희가 글을 입력을 했는데, 이걸 처리하지 못하면 저장도 안 되고 아무 것도 안 되죠.
정보를 처리하고 연산을 하는 것은 서버에 있는 컴퓨터가 하는 일인데,
HTML문서와 컴퓨터 사이에서 돌아가는 프로그램이 이 명령을 내립니다.
HTML은 레고에 가깝지 프로그램이 아니구요. 웹프로그래밍을 할 줄 알아야지 폼을 만드는 게 쓸모있답니다. 그렇기 때문에 보지말라고 말씀드린겁니다.
그러면 다음에는 폼에 대해서 설명하겠습니다.
여기는 초심자가 아닌 분이 본다는 가정 하에서 좀 더 불친절하게 설명하겠습니다.
#3. 폼을 만들어보자
아래의 소스를 보세요.
(예)
<form name="test_form" action="명령을 수행할 프로그램 실행파일명" method="post">
<input type="text" size="50" name="title" tabindex="1"><br>
<input type="password" name="test_pwd" tabindex="2"><br>
<input type="radio" name="test_radio" value="radio1" tabindex="3"><br>
<input type="radio" name="test_radio" value="radio2"><br>
<select name="test_select" tabindex="4" style="width:153px;">
<option value="none" selected>옵션1</option>
<option value="test_option1" >옵션2</option>
<option value="test_option2" >옵션3</option>
<option value="test_option3" >옵션4</option>
</select><br>
<textarea name="test_txtarea" cols="50" rows="10" tabindex="5">
</textarea><br>
<input type="checkbox" name="test_check" tabindex="6"><br>
<input type="button" value="버튼" onclick="함수" tabindex="7"><br>
<input type="reset" value="reset" tabindex="8"><br>
<input type="hidden">
<input type="file" tabindex="9"><br>
<input type="submit" value="submit" tabindex="10"><br>
<input type="image" src="./dogcow03_01.jpg" tabindex="11"><br>
</form>
| (결과)
|
위의 소스는 html의 주요 폼 관련 태그를 모두 표시한 소스입니다.
하나씩 차례대로 설명하겠습니다. 아마 위의 것만 보셔도 사용법은 이미 다 아시겠지만요.
[ form 태그]
(예)
<form name="test_form" action="명령을 수행할 프로그램 실행파일명" method="post">
</form>
|
폼의 내용은 항상 form 태그에 둘러쌓여있습니다.
이것으로 둘러쌓여있기 때문에 최종적으로 '전송'을 했을 때
'명령을 수행할 프로그램 실행파일'로 안의 내용이 전송되는 것이죠.
폼에서는 폼 자체도 그렇고 내부의 요소들도 그렇고 이름을 지정해주는 게 중요합니다.
왜냐하면 실행되는 프로그램에서 해당 값을 이름에 해당하는 변수로 넘겨받기 때문입니다.
form 태그의 속성들을 보겠습니다.
name : 폼의 이름
action : 값을 넘겨줄 웹 프로그램의 실행파일 이름
method : 전송방식
|
method는 get방식과 post방식이 있습니다. 둘은 중요한 차이가 있는데,
get 방식은 일단 전송 길이의 제한이 있습니다. 그리고 보안이 전혀 안 됩니다.
값을 넘길 때 주소창에 값이 뜨면서 전송이 되기 때문입니다.
?변수1=값1&변수2=값2 이런 식으로요.
그래서 get은 길이 제한이 되는 누가 봐도 아무 상관없는 내용이 전송될때 씁니다.
post 방식은 보안도 되고 길이 제한도 없습니다.
[ input 태그]
input 태그는 가장 기본적인 방식의 입력태그이면서 동시에 다양한 형태로 변합니다.
속성을 하나씩 보죠.
(input 속성 : type)
type 속성은 각각 아래와 같은 대표적인 값들을 갖는데, 어떤 값이 오느냐에 따라서 입력창의 종류가 달라집니다.
각 속성 아래에는 해당 타입의 세부 속성을 쓰겠습니다.
1) text : 한 줄짜리 글 입력 박스.
- size : 수치를 입력하여 박스 길이를 조정.
- value : 페이지 로드시 박스에 입력 되어있는 초기값
2) password : 패스워드 용 한 줄짜리 글 입력 박스. 박스에 입력한 문자가 가려짐.
- value : 페이지 로드시 박스에 입력 되어있는 초기값
3) radio : 라디오 버튼. 같은 이름 버튼끼리 그룹화. 그룹화되면 복수 선택이 안됨.
- checked : 따로 값을 지정해주지는 않음. 처음부터 선택되어있음.
- value : 프로그램에 전송되는 값
4) checkbox : 체크박스. 여러 개여도 복수선택 가능.
- checked : 따로 값을 지정해주지는 않음. 처음부터 체크되어있음.
- value : 프로그램에 전송되는 값
5) button : 누를 수 있는 버튼. 전송과는 무관함. 보통 자바스크립트 등과 같이 씀.
- value : 버튼 위에 뜨는 이름
6) reset : 리셋 버튼. 폼 내부의 모든 값을 초기화
- value : 버튼 위에 뜨는 이름
7) hidden : 숨겨진 전송값. 사용자 눈에 보지는 않음.
- value : 프로그램에 전송되는 값
8) file : 파일 전송 시 사용하는 버튼.
9) submit : 전송 버튼. 폼에 입력된 모든 내용을 프로그램으로 전송.
- value : 버튼 위에 뜨는 이름
10) image : 전송 버튼과 동일하나, 버튼 대신 이미지가 표시.
- src : 불러올 이미지 경로
(공통 세부속성1) name : 각 요소의 이름이자 프로그램으로 입력된 값이 전송될 때 그 값을 갖고 있는 변수명으로 사용됨.
(공통 세부속성1) tabindex : 해당 페이지에서 탭을 누를 때 탭 인덱스의 순서대로 커서가 이동.
|
[ select 태그]
네모칸을 클릭하면 선택할 수 있는 값이 슬라이드 되는 입력 창입니다.
option태그를 통해서 값을 넣어주며 아래와 같은 방법으로 씁니다.
(예)
<select name="이름">
<option value="전송값1" selected>보여질 이름1</option>
<option value="전송값2" >보여질 이름2</option>
<option value="전송값3" >보여질 이름3</option>
<option value="전송값4" >보여질 이름4</option>
</select><br>
|
여기서 selected가 들어가면 초기값으로 해당 옵션이 선택되어집니다.
[ textarea 태그]
input type="text"와 거의 동일하나, 한 줄짜리 박스가 아닌 큰 박스가 나옵니다..
보통 게시물의 내용을 입력하는 박스로 사용되는 폼이죠.
input 태그와는 다르게 태그를 열고 닫아줍니다.
(예)
<textarea>초기값</textarea>
|
초기값은 보통은 아무것도 없으나, 넣어주면 처음 페이지가 로드될 때
텍스트에어리어 안에 해당 문장이 들어있게 됩니다.
그럼 텍스트에어리어의 속성 두 개를 보죠.
cols : 텍스트에어리어의 가로 길이
rows : 텍스트에어리어의 세로 줄 수
|
이걸로 폼의 주요 기능은 다 설명이 끝났습니다.
다음에는 지금까지 설명하지 못한 기타 태그들에 대해서 설명하겠습니다.
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 06편 : 메타 태그 |
#1. 메타태그
메타 태그란 일반적으로 head태그 안에 사용해주는 '설정'의 일부라고 생각하시면 됩니다.
접속하는 웹브라우저와 검색엔진이 볼 수 있는 정보를 표시해주는데,
어떤 것은 필수이며, 어떤 것은 필수는 아니지만 최근에 각광을 받고 있는 중요한 태그입니다.
[ META 태그]
메타태그는 발음 그대로 이렇게 써줍니다.
열고 닫는 것 없이 그냥 저렇게만 써줍니다.
단지 다른 태그와는 다르게 각 용도별로 여러 개의 메타태그를 써줍니다.
그래서 head 태그 안에는 보통 여러 개의 메타 태그가 포함됩니다.
메타태그는 예상하신대로 용도별로 속성과 사용 방법이 있습니다.
우선 메타태그에서 가장 중요한, 필수인 사용법을 하나 살펴보겠습니다.
[ 웹 브라우저에게 html문서에서 사용하는 언어를 알려주자 ]
지금까지 인터넷을 하면서 한 번쯤은 글자가 이상하게 깨져있는 웹페이지에 접속해본 적이 있을 겁니다.
분명히 한국어로 된 홈페이지인데도 글자는 전혀 알아볼 수 없게 되어있는 곳.
혹은 다른 곳은 다 멀쩡한데 페이지 한 중간의 글씨가 알아볼 수 없게 되어있는 곳.
이런 곳들은 모두 지금 이야기하는 메타태그를 지정해주지 않았기 때문에 문제가 발생한 곳들입니다.
웹브라우저는 인터넷의 웹페이지에 접속하면 저희가 작성한 html 을 포함해서 다양한 컴퓨터 언어를 읽어들이고 처리합니다. 이것을 '인코딩'이라고 하는데 사실 특정 국가의 언어만이 아닌 더 넓은 의미입니다. 하지만 저희는 몰라도 됩니다.
요는 이것을 지정하지 않으면 웹브라우저가 어찌할줄 몰라하다가 대충 표시를 해서 글자가 다 깨지게 됩니다. 그러므로 잘 지정해줍시다. 방법은 아래와 같습니다.
<META http-equiv="Content-Type" content="text/html; charset=EUC-KR">
메타 태그는 자세하게 분석해서 알 필요는 없습니다. 그냥 이걸 썼을 때 어떤 효과가 있는지만으로 충분합니다. 만약 나중에 어떤 필요에 의해서 이 태그의 값을 바꿔주게 될 경우 charset=EUC-KR 이 부분을 바꿔주게 될 것입니다. 우선은 그 정도만 알고 넘어가면 됩니다.
그 외 주요 메타태그
<META name="author" content="제작자"> : 홈페이지를 만든 사람의 이름을 써주는 태그입니다.
<META name="copyright" content="저작권자"> : 홈페이지의 저작권을 갖고 있는 사람의 이름을 써줍니다.
<META name="keywords" content="검색어"> : 검색엔진이 해당 페이지를 읽을 때 힌트가 될 검색어들입니다. 콤마로 구분해서 여러개를 씁니다.
<META name="description" content="설명"> : 검색엔진이 참고할 페이지의 설명을 기입합니다.
<META name="robots" content="noindex"> : 검색엔진이 이 페이지를 취급하지 못하게 합니다. (강제력이 있는 건 아님)
<META http-equiv="refresh" content="시간; url=웹페이지 주소"> : 해당 사이트 접속 시 지정 시간(초 단위) 경과 후 자동으로 url에 지정된 사이트로 이동합니다.
메타 태그는 사용하시고 싶은걸 그냥 쭈욱 나열해서 적으시면 됩니다.
예를 들어 위의 태그를 다 쓰고 싶으시면 그냥 다 써버리시면 다 적용됩니다.
이 정도만 알아두면 충분하겠네요. 관심이 있는 분은 더 찾아보시기 바랍니다.
참고로 검색엔진과 관련된 부분은 최근 검색엔진 친화형 사이트라는 개념이 떠오르면서 중요하게 부각되고 있답니다.
#2. 웹페이지에 이름을 달아주자
[ title 태그]
이건 기본 중의 기본이지만 head 태그 내부와 연관있는 것이라서 지금 이야기합니다.
웹페이지에 접속하면 브라우저 좌측상단에 페이지의 이름이 뜨죠?
예를 들면 네이버에 접속하면 네이버라고 뜨고, 제 홈페이지에 접속하면 '추억의 상자'라고 뜨고.
저 이름을 페이지마다 지정해줄 수 있습니다. (지정하지 않으면 untitle이던가 이상한 글자 뜹니다.)
title 태그는 head 태그 안에서 써서 페이지의 이름을 써줍니다.
방법은 다음과 같습니다.
(예)
<head>
<title>페이지 이름</title>
</head>
|
끝입니다. 쉽죠?
앞으로 3강 남았습니다 그러면 html 끝입니다.
|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 05편 : 프레임 |
#1. 프레임이란 무엇인가?
HTML에는 프레임이라는 개념이 있습니다.
요즈음 인터넷에서는 프레임을 사용하는 곳을 거의 볼 수 없지만,
과거 개인 홈페이지가 성했던 시대만해도 프레임은 거의 모든 곳에서 사용되고 있었습니다.
프레임(frame)이란 틀, 뼈대라는 뜻인데, HTML에서 사용되는 프레임 페이지는
다른 여러 개의 HTML페이지를 동시에 화면에 배치해서 보여주는 커다란 레이아웃 역할을 합니다.
대표적으로 응용되던 방식은,
메뉴와 메인 페이지를 나누어서 메뉴를 누르면 메인페이지만 바뀌게 하거나,
절대 안 바뀌는 프레임을 따로 나누어서 음악을 재생시키거나 하는 등의 방식이었습니다.
거의 대부분은 메뉴와 메인 페이지죠.
요즈음은 일체형 페이지가 대부분이라 잘 쓰이지 않습니다만,
프레임은 여전히 응용될 수 있는 곳에는 어디에든 쓰일 수 있습니다.
#2. 프레임을 만들어보자.
프레임을 만들려면 최하 3개의 HTML 페이지가 필요합니다.
편의를 위해서 frame.html, menu.html, main.html의 3개라고 하죠.
menu.html 과 main.html 은 미리 만들어둔 완성된 html 문서입니다.
지금까지 배웠던 것을 응용해서 원하는 페이지를 만드시면 됩니다.
그리고 frame.html은 완성된 다른 2개의 페이지를 가져와서 한 곳에서 보여주는 창틀입니다.
지금부터 쓰는 태그는 frame.html에서 쓰는 태그입니다.
[frameset 태그]
<frameset></frameset> 태그는 화면을 어떻게 나눌지를 설정해주는데, 화면을 가로와 세로로 크게 나눕니다.
( frameset 속성 cols )
cols속성은 화면을 세로로 어떻게 나눌지를 결정합니다.
들어가는 값은 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
(예1)
<frameset cols="30%, 70%"></frameset>
| (결과1)
frame.html 실행 시 화면 분할
|
(예2)
<frameset cols="300, *"></frameset>
| (결과2)
frame.html 실행 시 화면 분할
|
( frameset 속성 rows )
cols속성은 화면을 가로로 어떻게 나눌지를 결정합니다.
들어가는 값은 마찬가지로 %(100분율 비율)값, 혹은 픽셀로 된 수치값입니다.
rows와 cols를 병행하여 화면을 3구간 이상으로 나눌 수도 있습니다. 당연히 나눈 만큼의 html 페이지가 필요합니다.
(예)
<frameset rows="200, *">
<frameset cols="30%, 70%">
</frameset>
</frameset>
| (결과)
frame.html 실행 시 화면 분할
|
( frameset 속성 frameborder )
0혹은 1값을 가지며 프레임 페이지간의 경계선 표시 유무를 지정합니다.
0이 안 보이게, 1이 보이게.
( frameset 속성 border )
다른 border 속성처럼 수치를 적어주면 되며, 마찬가지로 경계선의 두께를 지정합니다.
( frameset 속성 bordercolor )
경계선의 색을 지정합니다.
( frameset 속성 framespacing )
프레임간의 여백을 지정합니다.
[frame 태그]
화면을 나눴다면 이제 분할된 영역에 html 페이지를 불러와야합니다.
이 때 사용되는 태그가 <frame> 입니다.
frame 태그는 frameset의 태그 안에 사용하는데,
frame 태그가 쓰인 순서에 맞춰서 frameset 태그로 분할한 화면에 차례대로 들어갑니다.
예는 아래의 속성을 보고서 보겠습니다.
( frame 속성 src )
img 태그와 마찬가지로 불러올 페이지의 주소를 지정합니다.
src 속성으로 주소가 지정되지 않으면 분할된 프레임에 아무 페이지도 불려오지 않습니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html">
</frame>
<frame src="./main.html">
</frame>
</frameset>
| (결과1)
frame.html 실행 시 화면
|
( frame 속성 noresize )
분할된 프레임의 크기가 변하지 않게 하는 속성입니다.
이 속성을 지정하지 않으면 방문자가 프레임의 크기를 마우스로 클릭해서 마음대로 바꿀 수가 있습니다.
다른 속성과 다르게 따로 값을 지정해줄 필요없이 써주기만 하면 됩니다.
(예) <frame src="./main.html" noresize> </frame>
( frame 속성 scrolling )
스크롤링 속성은 아래의 3가지 값을 같습니다.
(1) yes : 해당 프레임에 스크롤바를 표시.
(2) no : 해당 프레임에 스크롤바를 표시하지 않음.
(3) auto : 평소에는 스크롤바를 표시하지 않지만, 해당 프레임의 내용이 프레임 크기보다 커지면 스크롤바를 자동으로 표시.
어떤 값을 지정해주느냐에 따라서 프레임에 스크롤바가 나올지 말지를 결정합니다.
( frame 속성 marginwidth )
프레임의 가로 여백의 크기를 지정합니다.
( frame 속성 marginheight )
프레임의 세로 여백의 크기를 지정합니다.
( frame 속성 topmargin, leftmargin, marginheight, marginwidth)
프레임의 각각 상하좌우 4방향에 해당하는 여백의 크기를 지정합니다.
( frame 속성 name )
프레임에서 name 속성은 중요합니다.
일반적으로 프레임을 나누는 이유는 메뉴 프레임 등의 하이퍼링크를 클릭해서
메뉴 프레임의 다른 페이지를 콘트롤하기 위함입니다.
이 때, 프레임에 이름이 없으면 특정한 프레임을 대상으로 해서 명령을 내릴 수가 없습니다.
때문에 프레임을 만들 때 반드시 아래와 같이 이름을 지정해주어야합니다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
name값은 자신이 원하는 임의의 이름을 지정하면 됩니다.
여기서 잠시 앞에서 배웠던 앵커태그를 다시 봅시다.
( a 태그 속성 target )
앞에서 이미 살펴본 속성입니다. 우리는 _blank 값이 들어갈 경우 새 창으로 링크가 뜬다는 것을 이미 알고 있습니다.
여기서 target 속성이 갖는 좀 더 명확한 의미는 '하이퍼링크의 결과를 표시할 대상'을 의미합니다.
예를 들어서 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있을 때,
이 링크를 누르면 링크가 표시되어있는 해당 페이지 자체가 contents.html로 바뀔 것입니다.
이것은 target, 즉 목표가 지정이 안 되어있기 때문입니다.
위에서 봤던 프레임을 다시 한 번 봅시다.
(예1)
<frameset cols="300, *">
<frame src="./menu.html" name="menu">
</frame>
<frame src="./main.html" name="main">
</frame>
</frameset>
|
여기서 menu.html에 <a href="./contents.html"> 컨텐츠 표시 </a> 라는 링크가 있다고 칩시다.
이 링크를 누르면 프레임의 menu.html 페이지 부분이 contents.html 로 바뀌고, main.html은 그대로 표시되어있을 것입니다.
하지만 우리는 main.html 이 들어있는 프레임의 내용을 바꾸고 싶습니다. 이 때 바로 target을 지정합니다.
(예)<a href="./contents.html" target="main"> 컨텐츠 표시 </a>
이렇게 지정한 후 링크를 누르면, main 프레임창에 있는 main.html이 contents.html로 바뀌게 됩니다.
이것이 바로 프레임을 만드는 가장 큰 이유 중 하나입니다.
target속성은 이것 이외에도 몇 가지 기본 속성을 갖고 있습니다.
1) _blank : 새 창
2) _top : 모든 프레임을 무시하고 페이지 전체를 바꿈. 즉, 여기서는 frame.html 페이지 자체를 다른 페이지로 바꾸게 됨.
3) _parent : 이 창의 한 단계 위 부모창을 바꿈. (이 기능을 쓰게 되면 한 번 테스트해보세요.)
4) _self : 현재 창, 혹은 현재 프레임 내부를 바꿈.
만약 target에서 _blank를 지정하지 않았는데, 새 창에서 열린다면 그건 대게의 경우 target으로 지정된 대상이 없을 때입니다.
즉, 실수이거나 오타인 것이지요.
그런데 menu.html에는 하이퍼링크가 아주 많고, 그 대부분은 main 프레임의 내용을 바꾸고 싶습니다.
이 때 하이퍼링크 하나하나마나 target을 지정해줘야할까요?
답은 아닙니다.
#3. head 태그의 안을 한 번 건드려보자
2강에서 html의 기본구조를 배웠고, 거기서 html태그 안에는 head와 body태그가 있다고 배웠습니다.
그리고 우리가 그동안 배웠던 모든 것은 다 body태그 안에서 일어나는 일이구요.
이제 head 태그의 내부를 살짝만 건드려봅시다.
즉, html 문서에 설정을 하나 추가해봅시다. 아주 간단합니다.
다음은 menu.html 의 내부라고 가정합니다.
(예) # menu.html
<html>
<head>
설정이 들어갈 부분
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
지금 우리가 이것을 보는 이유는, 모든 링크에 하나하나 target을 지정해주기가 귀찮아서였죠?
간단하게 한 줄로 써주죠.
<base target="main">
즉, 전체가 이렇게 됩니다.
(예) # menu.html
<html>
<head>
<base target="main">
</head>
<body>
<a href="./contents.html"> 컨텐츠 표시 </a>
</body>
</html> |
이제 다시 frame.html 로 가봅시다.
menu 프레임에 menu.html 이 불려져있습니다.
여기 있는 target 이 지정되어있지 않은 무슨 링크를 클릭하든,
내용이 바뀌는 것은 main 프레임의 내부입니다.
특정 페이지 전체의 기본 target을 다르게 설정해준 것입니다.
이제 프레임을 거의 다 봤습니다. 하나만 더 보겠습니다.
#4. 프레임을 지원하지 않는 브라우져
저는 한 번도 본 적이 없달까, 사실 대부분의 사람들이 제가 인터넷 익스플로러를 썼'었'기 때문에 잘 모르겠습니다만.
간혹 프레임이 표시되지 않는 브라우져가 있다고 합니다.
특히 요즘처럼 스마트폰이 많아지면 어떻게 될지 모르겠어요.
(아이팟에서 프레임이 지원되는 것은 확인했습니다만)
그러면 프레임을 지원하지 않는 브라우져를 위한 최소한의 배려는 없을까요?
그걸 배워보죠.
[ noframe 태그 ]
사용은 <noframe> 내용 </noframe> 이렇게 합니다.
보통은
<noframe>
이 페이지를 보려면 프레임을 지원하는 브라우저가 필요합니다.
</noframe>
이런 식으로 쓰고 끝입니다. 저 안에는 프레임을 지원하지 않는 브라우저가 볼 수 있는 내용이 출력됩니다.
어떤 식의 내용을 쓰실지는 제작자의 자유입니다.
#5. 인라인 프레임
인라인 프레임. 태그로는 iframe 이라고 씁니다. <iframe></iframe>
iframe은 html 문서 내부에 창문을 열어서 다른 문서를 불러오는 역할을 합니다.
프레임이랑 뭐가 다르냐구요?
frameset은 화면 전체를 가로나 세로로 나누는 것 밖에 못합니다.
하지만 iframe은 html 문서 안에 마치, 테이블로 작은 창을 하나 만든 것 처럼 구멍을 뚫어줍니다.
사용법을 볼까요?
<iframe src="./small_window.html" width="300" height="100" name="small_window" marginwidth="0" frameborder="0"></iframe>
기본적으로 frame 태그와 거의 같은 방식으로 쓰인다는 걸 볼 수 있을 것입니다.
하지만 table이나 td 태그 처럼 width와 height, 즉 가로 세로 길이를 지정하는 것이 보이죠?
이것은 페이지 한 가운데에 구멍을 낼 것이기 때문에 그 구멍의 크기를 지정해줄 필요가 있는 것입니다.
iframe은 페이지 가운데에 다른 페이지를 띄워서 특정 정보를 스크롤을 이용해서 보여줄 수도 있고,
iframe 내부의 정보만을 바꾸면서 외부에 영향을 주지 않을 수도 있는 등 다양한 용도로 활용될 수 있습니다.
이제 프레임도 다 배웠습니다.
html의 끝이 보입니다. 조금만 더 힘내죠.
|
|
[PREV] [1] ... [254][255][256][257][258][259][260] ... [359] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|