검색결과 리스트
HTML에 해당되는 글 51건
- 2011.09.04 배경음악넣기(bgsound,embed)
- 2011.09.01 이미지맵
- 2011.08.30 메타태그
- 2011.08.28 점선테이블
- 2011.08.25 히든필드
- 2011.08.23 input type="file"
- 2011.08.21 reset버튼
- 2011.08.19 radio버튼
- 2011.08.16 체크박스
- 2011.08.13 <select><option>으로 드랍다운메뉴 만들기
글
배경음악넣기(bgsound,embed)
| 배경음악 사용하기 Bgsound와 Embed | ||
|
좀더 분위기 있는 홈페이지를 만들기 위해서 배경 음악을 사용하는 경우가 많습니다. 그러나 방문자가 배경음악을 원하지 않는 경우도 있으므로 배경음악을 사용할때 아래의 내용을 고려해 봐야 합니다.
| ||
|
배경음악 사용 방법 ① bgsound
bgsound element는 인터넷 익스플로러에서만 작동합니다. 그리고 화면에 아무런 내용이 출력되지 않으므로 방문자가 음악을 끄기가 힘듭니다. loop 속성은 배경음악의 반복 횟수를 지정합니다. -1 이나 INFINITE 값으로 지정하면 계속적으로 반복됩니다. ② embed
embed 엘리먼트에서 사용할 수 있는 속성은 아래와 같습니다.
|
'HTML' 카테고리의 다른 글
| 깔끔한 주문서 (0) | 2011.09.08 |
|---|---|
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌) (0) | 2011.09.06 |
| 이미지맵 (0) | 2011.09.01 |
| 메타태그 (0) | 2011.08.30 |
| 점선테이블 (0) | 2011.08.28 |
글
이미지맵
| 이미지맵(image map) | ||||
|
이미지맵은 하나의 이미지에 여러개의 링크를 걸때 사용합니다. 이미지맵을 사용하면 HTML 소스가 간단해 지는 장점이 있습니다.
먼저 이미지맵을 적용할 이미지에 usemap 속성을 사용하여 이미지맵의 이름을 지정해 주어야 합니다.
001이라는 이름을 가진 이미지맵을 사용하겠다는 의미이니다. 이때 #을 사용함에 주의를 기울여야 합니다. 그리고 나서는 <map>태그를 사용하여 이미지맵을 만듭니다.
이미지맵에서 하이퍼링크의 영역을 지정하기 위해서 <area>태그를 사용합니다. <area>태그의 shape속성은 이미지맵의 형태를 지정합니다. rect(사각형), circle(원형), poly(다각형) 등의 속성값을 가질 수 있습니다. coords속성은 좌표값을 지정합니다. 이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분을 지정합니다. 이 coords속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다. | ||||
|
* 출처 : homejjang.com 이미지에 사각형,원부분등을 링크를 걸어서 클릭했을때 그 링크대로 이동하게 되는 것을 말합니다. |
'HTML' 카테고리의 다른 글
| 오브젝트 엘리먼트(Object element) HTML 문서에 멀티미디어 삽입(펌) (0) | 2011.09.06 |
|---|---|
| 배경음악넣기(bgsound,embed) (0) | 2011.09.04 |
| 메타태그 (0) | 2011.08.30 |
| 점선테이블 (0) | 2011.08.28 |
| 히든필드 (0) | 2011.08.25 |
글
메타태그
| 메타(Meta) 태그 | ||
|
<meta>태그는 HTML 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있습니다. <meta>태그는 문서의 헤더부분(<head>와</head> 사이)에 위치하여야 합니다. <meta>태그에서 가장 일반적으로 사용되는 속성은 name, content 속성입니다.
name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다. 그럼 name 속성값으로 keywords를 지정하고, content에 "meta태그, HTML, 홈페이지제작" 이라고 지정했으니 검색엔진에서 홈페이지 제작이라고 입력하면 이 페이지가 상단에 나올까요? 검색엔진이 <meta>태그를 수집하여 참고는 합니다만 이를 상업적으로 활용하는 홈페이지가 너무 많기 때문에 그 효과는 불분명한 실정입니다. | ||
|
<meta>태그는 위와같이 검색엔진에게 정보를 전달할 뿐 아니라 웹 브라우저에게도 정보를 전달하는 역할을 합니다. 웹 브라우저에게 정보를 전달하는 대표적인 경우는 아래와 같이 2가지를 생각할 수 있습니다.
홈페이지의 주소가 바뀌었을 경우에 사용하는 태그로 5초뒤에 url 속성값으로 지정한 페이지로 이동한다는 의미입니다. 이렇게 이동하는 것은 하이퍼링크를 눌러서 이동하는거와는 다른 의미를 갖습니다. 하이퍼링크를 누른다는것은 한 페이지를 읽고 있다가 다른 페이지로 이동한다는 의미이지만, <meta> 태그를 이용한 페이지 이동은 http-equiv 속성값을 지정된거와 같이 refresh 한다는 의미입니다. 즉 위와 같은 <meta>태그가 입력된 페이지는 읽지 않은걸로 인식하겠다는 의미입니다. 그리고 한글로 작성된 홈페이지라는것을 웹 브라우저에게 알리기 위해서는 아래와 같이 <meta>태그를 지정해 줍니다.
이렇듯 웹 브라우저에게 정보를 |
출처 : homejjang.com
'HTML' 카테고리의 다른 글
| 배경음악넣기(bgsound,embed) (0) | 2011.09.04 |
|---|---|
| 이미지맵 (0) | 2011.09.01 |
| 점선테이블 (0) | 2011.08.28 |
| 히든필드 (0) | 2011.08.25 |
| input type="file" (0) | 2011.08.23 |
글
점선테이블
오늘도 소스분석입니다. 오늘은 테이블을 점선으로 표시하게 하는 소스입니다. 보통 그냥 HTML의 TABLE태그를 사용하면 직선으로 나타나는데 이것을 점선으로 나타나게 하는 겁니다. 그리고 모서리도 둥그스럼하게 나타나게 하구요. 그럼 실행결과부터 볼까요?
이런식으로 테이블이 생깁니다. 어려워보이지요? 생각해보면 간단합니다. 쉽게 말해서 테이블의 맨위,위왼쪽,위오른쪽,중간왼쪽,중간오른쪽,아래왼쪽,아래중간,아래오른쪽을 다 이미지로 채우시면 됩니다. 저 점선으로 된게 다 그림이다라는 말입니다. 그것을 <td>태그에 넣어주시면 됩니다. 그럼 소스를 한번 볼까요?
<table width="300" cellpadding="0" cellspacing="0" border="0" align="center">
<tr height="12">
<td width="14"><img src="top_left.gif" border="0"></td>
<td width="270" background="top_center.gif"></td>
<td width="16"><img src="top_right.gif" border="0"></td>
</tr>
<tr>
<td background="mid_left.gif"></td>
<td align="center">보다유연한<br>점선 테이블입니다.<br>테이블 안의 내용이 늘어나면<br>자동적으로 배경이미지
가<br>패턴으로 깔립니다.</td>
<td background="mid_right.gif"></td>
</tr>
<tr>
<td><img src="bottom_left.gif" border="0"></td>
<td background="bottom_center.gif"></td>
<td><img src="bottom_right.gif" border="0"></td>
</tr>
</table>
보이시지요? td태그에 img src="top_left.gif" 이렇게 들어가 있지요? 즉 맨위 왼쪽편을 이루는 그림파일입니다. 그 밑에는 아예 td의 background를 줘서 전체를 다 top_center.gif라는 그림으로 채웠네요. 나머지도 다 마찬가지입니다. 그럼 그 그림이라는게 어떻게 되어있는지 한번 볼까요?
(맨위 가운데죠)
(맨밑왼쪽)
(맨밑오른쪽)
(중간오른쪽)
(중간왼쪽)
(맨밑중간)
(맨위왼쪽)
'HTML' 카테고리의 다른 글
| 이미지맵 (0) | 2011.09.01 |
|---|---|
| 메타태그 (0) | 2011.08.30 |
| 히든필드 (0) | 2011.08.25 |
| input type="file" (0) | 2011.08.23 |
| reset버튼 (0) | 2011.08.21 |
글
히든필드
오늘은 히든필드에 대해서 배워보겠습니다. 히든필드는 정보를 숨겨서 전달할 필요가 있을때 사용됩니다. 예를들어
<input type="hidden" name="UserIP" value="<?echo $REMOTE_ADDR?>">
이렇게 사용자 IP를 화면에 나타내지 않고 히든필드로 전달할 수 있다는 것입니다. 화면에는 아무런 변화가 없으니 별로 중요하지 않은가 싶지만 실제로 php등의 프로그램을 할때 자주 사용된다고 합니다.
'HTML' 카테고리의 다른 글
| 메타태그 (0) | 2011.08.30 |
|---|---|
| 점선테이블 (0) | 2011.08.28 |
| input type="file" (0) | 2011.08.23 |
| reset버튼 (0) | 2011.08.21 |
| radio버튼 (0) | 2011.08.19 |
글
input type="file"
오늘은 input type="file"에 대해서 알아보겠습니다. 인터넷을 하다보면 파일을 올려야 할경우가 있습니다. 그때 파일을 찾아서 올리는데 그런 기능을 하는 소스입니다. 먼저 소스와 결과를 보시죠.
<form action="" method="post" enctype="multipart/form-data" name="">
<input type="file" name="FileName">
</form>
처음 실행했을때입니다. 옆의 찾아보기를 누르면
보셔서 아시다시피 input type="file"을 주면 하드디스크에서 파일을 찾아서 올리게 됩니다. 근데 실제로 올려지는 것은 아니고 올릴려면 다른 코드를 작성해야 합니다. 물론 HTML은 아니죠. 그리고 파일업로드할 경우에는 enctype="multipart/form-data" 라고 꼭 해주셔야 한다고 하네요.
이해되셨죠? 그럼 다음시간에 또 만나요~
'HTML' 카테고리의 다른 글
| 점선테이블 (0) | 2011.08.28 |
|---|---|
| 히든필드 (0) | 2011.08.25 |
| reset버튼 (0) | 2011.08.21 |
| radio버튼 (0) | 2011.08.19 |
| 체크박스 (0) | 2011.08.16 |
글
reset버튼
오늘은 reset버튼에 대해서 알아보겠습니다. reset 영어로 뜻은 다시 놓다, 재시동하다는 뜻이 있습니다. 즉 처음으로 다시 돌아가는 겁니다. 예를들어 자기소개를 적다가 다시 적어야 할경우 다 지우고 다시할수도 있지만 이렇게 reset이라는 버튼을 눌러서 한꺼번에 다 지울수도 있다는 것입니다. 그럼 소스코드를 한번 볼까요?
자기소개하기
<form name="input" method="post" action="">
<textarea rows=5 cols=20></textarea><br>
<input type="reset" value="다시적기">
</form>
자기소개하기 라고 표시하고 form을 선언하는데 이름은 input이고 method는 post라고 했습니다. method에는 get과 post가 있는데 자세한 것은 다음에 하도록 하겠습니다. 그다음에 textarea 저번에 배웠죠? 글상자를 rows=5 세로로 5줄 가로로 20칸을 표시하고 그 밑에 input type="reset" 이라고 했습니다. 입력타입을 reset이라고 주면 버튼이 하나 만들어집니다. 그 버튼을 누르면 같은 폼안에 있는 모든 입력상자가 지워집니다. 즉 textarea에서 자기소개를 적었는데 reset버튼을 누르면 그 소개적은게 다 날라간다는 말입니다. value="다시적기"는 그 reset버튼에 다시적기라고 표시를 한다는 뜻입니다. 그럼 실행결과를 한번 볼까요?
실행해서 제 소개를 적었습니다.
'HTML' 카테고리의 다른 글
| 히든필드 (0) | 2011.08.25 |
|---|---|
| input type="file" (0) | 2011.08.23 |
| radio버튼 (0) | 2011.08.19 |
| 체크박스 (0) | 2011.08.16 |
| <select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
글
radio버튼
안녕하세요?
지난번에는 checkbox를 배웠는데 오늘은 그와 유사한 radio에 대해서 배우겠습니다. 체크박스는 한번에 여러개가 선택이 가능하지만 라디오버튼은 한번에 하나밖에 선택이 안됩니다. 같은 이름을 가진 라디오에서는 하나밖에 선택이 안된다는 말입니다. 그럼 오늘도 예제를 보시죠.
<input type="radio" name="chk_info" value="HTML">HTML
<input type="radio" name="chk_info" value="CSS">CSS
<input type="radio" name="chk_info" value="웹디자인">웹디자인
<br>
<input type="radio" name="chk_info2" value="HTML">HTML
<input type="radio" name="chk_info2" value="CSS" checked="checked">CSS
<input type="radio" name="chk_info2a" value="웹디자인">웹디자인
체크박스와 똑같은데 다른점은 type="radio"라고 되어있는게 다릅니다. 실행결과는
'HTML' 카테고리의 다른 글
| input type="file" (0) | 2011.08.23 |
|---|---|
| reset버튼 (0) | 2011.08.21 |
| 체크박스 (0) | 2011.08.16 |
| <select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
| textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
글
체크박스
오늘은 체크박스에 대해서 배워보겠습니다. 체크박스는 앞에 네모칸이 있고 클릭하면 체크표시가 나오는 컨트롤입니다. 동시에 여러개를 선택할수 있는 것이 라디오 박스와는 다른 점입니다. 라디오박스는 여러개중에 하나밖에 선택할 수가 없습니다. 그럼 간단한 예제를 보시기 바랍니다.
<input type="checkbox" name="chk_info" value="학생">학생
<input type="checkbox" name="chk_info" value="직장인">직장인
<input type="checkbox" name="chk_info" value="백수">백수
<p>
<input type="checkbox" name="chk_info2" value="독서">독서
<input type="checkbox" name="chk_info2" value="컴퓨터" checked="checked">컴퓨터
<input type="checkbox" name="chk_info2" value="그리기">그리기
여기서 input type="checkbox"는 입력도구 타입이 체크박스이다라는 것을 알려주는 것입니다. 입력타입은 앞에서 배운text,password와 checkbox, radio과 버튼등이 있습니다. 여기서는 체크박스다 라는 것을 알려주는 거지요. 그리고 다음에 name="chk_info"는 그 체크박스들의 그룹이름이 되겠습니다. 그리고 value는 폼이 전송되었을때 참조할수 있는 값입니다. 여기까지 체크박스에 대해서 이해하셨지요? 그 다음 밑에 있는 것 중에 checked="checked"라고 되어있는 부분입니다. 대충 아실거같은데 체크박스가 처음 나타났을때 체크표시가 되어있게 하는 겁니다. 즉 세개중에 컴퓨터에 처음부터 체크표시가 되어져나온다는 거지요. 그럼 실행결과화면을 보고 마치겠습니다.
'HTML' 카테고리의 다른 글
| reset버튼 (0) | 2011.08.21 |
|---|---|
| radio버튼 (0) | 2011.08.19 |
| <select><option>으로 드랍다운메뉴 만들기 (0) | 2011.08.13 |
| textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
| input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
글
<select><option>으로 드랍다운메뉴 만들기
오늘도 폼에서 사용되는 컨트롤들에 대해서 배워보겠습니다. 오늘은 흔히들 콤보박스나 드랍다운박스라고 하는 건데요. 예를들면 다음과 같은겁니다.
이런겁니다. 오늘 만들어볼건데요. 직업선택을 누르면 아래로 메뉴들이 나타나고 그것들중에 하나를 선택하는 거지요. 그럼 위와 같은 박스는 어떻게 만들까요? <select><option>을 사용하는데요. 아래를 보시죠.
<select name="job">
<option value="">직업선택</option>
<option value="student">학생</option>
<option value="company">회사원</option>
<option value="etc">기타</option>
</select>
<select name="hobby">
<option value="">취미선택</option>
<option value="game">컴퓨터게임</option>
<option value="reading">독서</option>
<option value="music">음악감상</option>
</select>
이게 저 그림의 소스코드입니다. <select name="job"> 이것은 select 즉 선택이란 뜻이죠. 그래서 선택상자를 만들겠다 하는 뜻입니다. 이름은 job이라고 하구요. 이 이름은 나중에 폼이 전송되었을때 참조하기 위해서 필요한 겁니다. 그거까지는 다음에 하도록 하구요. 그 밑에 <option value="student">학생</option>은 그 박스안의 내용중에 학생이라는 내용이 있고 그것의 참조값은 student라는 뜻입니다. 즉 위에서 보듯이 학생이라는 메뉴항목이 있지요. 근데 그것을 선택하면 선택되어진 값으로 student라는 값이 보내진다는 뜻입니다. 나머지도 마찬가지입니다.
그럼 이해하셔으리라 믿고 다음에 또 만나요~(이해안되시면 메일이나 댓글달아주세요.)
'HTML' 카테고리의 다른 글
| radio버튼 (0) | 2011.08.19 |
|---|---|
| 체크박스 (0) | 2011.08.16 |
| textarea를 이용한 자기소개란 만들기 (0) | 2011.08.10 |
| input태그와 간단한 로그인 박스 만들기 (0) | 2011.08.08 |
| HTML태그정리표 (0) | 2011.08.03 |
