|
|
| 강아지랑 송아지도 만들 수 있는 HTML 강좌 - 08편 : 그 외 |
이번에 설명드릴 것은 그동안 설명드리지 못한 HTML 태그들입니다.
나중에 설명드렸다고 중요하지 않은 것은 아닙니다.
앞부분에 마땅히 끼워넣을 곳이 없어서 지금 소개해드리는 것 뿐입니다.
#1. 그 외의 태그들
[ center 태그]
center 태그는 그 사이에 있는 모든 내용을 가운데로 가로 정렬시킵니다.
내용이 문장이건 테이블이건 이미지이건 상관없이 모두 가운데 정렬을 시켜주는 편리한 태그입니다.
아마 자주 사용하시게 될 겁니다.
[ hr 태그 ]
hr태그는 horizon(수평선)의 약자로 가로로 길게 선이 그러지는 태그 입니다.
자주 쓸 일은 없지만 가끔 써주면 편합니다. 물론 이거 대신 테이블을 쓸 때가 더 많습니다만.
속성은 아래와 같습니다.
width : 수평선의 가로 길이입니다. 픽셀길이 뿐 아니라, 모니터가로사이즈에 비례한 %로도 사용가능합니다.
size : 높이 입니다. 수치로 입력합니다.
align : 가로 정렬. 이제 다 아시죠?^^
color : 색상값을 입력해서 수평선의 색을 변화시킵니다.
noshade : 그림자를 없애서 입체감을 없앱니다.
|
직접 써볼까요?
(예)
<hr width="100" size="1" allign="center" color="#0000FF">
| (결과)
|
[ 주석처리 ]
html뿐만 아니라 모든 컴퓨터 언어는 주석처리를 할 수 있습니다.
html에서 주석처리를 하는 이유는,
1) 나중에 자기가 짠 코드를 봤을 때 알아보기 쉽게 하기 위해서
2) 에러가 났을 때 해당 코드를 보이지 않기 위해서
3) 필요없거나 임시로 지우려는 코드(태그)를 실행되지 않게 하기 위해서.
입니다.
번호 순대로 중요한 순서인데요.
쉽게 말해서 주석 안에 있는 html 태그는 실행이 안됩니다. 브라우져에 표시도 안 되구요.
브라우져가 웹문서를 읽을 때 주석 부분은 "쓰레기"로 간주해서 다 버려버리죠.
때문에 주석을 잘 이용하면 많이 편해집니다.
사용법은 간단합니다.
<!-- 내용 -->
입니다.
<!-- 와 --> 사이의 모든 내용은 없는 것으로 처리됩니다.
줄을 바꿔도 됩니다.
<!--
내용
-->
이렇게요.
쉽죠?
#2. body 태그의 속성을 보자
마지막으로 body 태그의 속성을 보죠.
body태그 잊지 않으셨죠?^^;
body태그는 html문서의 내용을 써주는 부분이지만, 몇 가지 주요 속성을 지정해줄 수 있습니다.
아래의 속성을 봅시다.
bgcolor : html 문서 전체의 바탕색을 지정합니다.
link : 하이퍼링크의 글자색을 지정합니다.
vlink : 한 번 이상 방문한 하이퍼링크의 색을 지정합니다.
alink : 하이퍼링크를 누를 때의 색을 지정합니다.
text : 일반 글자 색을 지정합니다.
background : 배경 이미지를 지정합니다.
|
여기서 가장 중요한 것은 의외로 bgcolor입니다. 다른 것은 사실 다 아무래도 좋아요.
보통 우리가 흰색바탕의 웹페이지를 보죠? 그럴 경우라도 반드시 bgcolor를 흰색으로 지정해줘야합니다. 이렇게요.
(흰색 = #FFFFFF)
원래 흰색인데 왜 흰색으로 다시 지정을 할까요?
이유는 가끔 가다가 웹브라우저의 기본 웹페이지 색상을 흰색 이외의 다른 색으로 지정하는 사람들이 있어서입니다.
그 사람들이 잘못하는 게 아니에요. 당연히 홈페이지를 자기가 보여주기 위한 색으로 지정하는 것이죠.
방문하는 모든 사람들이 설정하고 있는 기본 색이 흰색이라고는 생각하지 마세요. 큰 착각입니다.
여기까지 해서 순수한 HTML의 강의는 끝났습니다.
하지만 아직 뭔가 빠진 게 있는 것 같죠?
그렇습니다. 이번이 아니라 다음 강의까지가 마지막입니다.
다음에는 HTML은 아니지만, 그동안 하지 않았던 부분을 보충하는 시간을 갖겠습니다.
|
|
| 강아지랑 송아지도 만들 수 있는 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 끝입니다.
|
|
[PREV] [1] ... [274][275][276][277][278][279][280] ... [379] [NEXT]
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse |
|
|