HTML 강의 - 9

  1. 2011.01.25 [HTML] HTML 강좌, 제 9강의 - 사용자에게 정보를 입력받을 수 있는 입력양식을 만드는 form 태그
  2. 2011.01.25 [HTML] HTML 강좌, 제 8강의 - 프레임 강의!
  3. 2011.01.24 [HTML] HTML 강좌, 제 7강의 - 테이블을 만들어보자! (3)
  4. 2011.01.24 [HTML] HTML 강좌, 제 6강의 - 구분선 그리기, 하이퍼링크와 책갈피 태그!
HTML 강의, HTML 강좌, HTMl 태그 강의, HTML 태그 강좌
안녕하세요, 이번 강의에서는 입력양식을 만드는 <form> 태그에 대해 설명해드릴려고 합니다. 이 폼 태그를 이용해
회원가입같은 입력받는 페이지를 만들어 DB를 저장합니다.

입력 양식 <form> 에 들어오는 양식은 매우 많습니다. 먼저 form 태그를 작성하는법 부터
배워보겠습니다.

입력 양식, 폼 만들기 - <form action = "URL" method = "방식"> ~ </form>
(URL - DB 저장 페이지(파일), method - 웹서버와의 통신방식(post/get))
(method - post(입력한 데이터가 눈에 보이지 않게 전송 , get(기본 값으로 입력한 데이터가 URL에 포함되어 전송됨)

DB 저장페이지는 PHP, ASP 로 만들 수 있습니다.
자세한 내용은 따로 검색을 바랍니다.


이번에는 <form> 태그에 사용되는 여러 속성 입니다. 폼 태그로는 텍스트, 암호, 여러 라인의 글자, 체크 박스, 라디오 버튼,
명령 버튼 등 여러 버튼을 만들고 데이터를 입력받을 수 있는 이벤트를 생성가능합니다.

텍스트 필드 - <input type = "text">
패스워드 필드 - <input type = "password">
텍스트 에어리어 - <textarea rows = "높이" cols = "가로"> ~ </textarea>
체크박스 필드 - <input type = "checkbox">
라디오버튼 필드 - <input type = "radio">
전송 버튼 - <input type = "submit" value="전송">
리셋 버튼 - <input type = "reset" value = "초기화">
셀릭트 박스 - <select name ="이름">
(SIZE 속성 사용 시 콤보박스, 사용 안 하면 리스트 박스)
<option> ~
</select>

동일 속성 - <name = "이름설정" value = "초기값설정">

이번엔 굳이 많은 설명이 필요없습니다. 그냥 한번 만들어보고 확인만하고 여기서 넘어가셔도 됩니다.
자세한 부분은 나중에 PHP 나 ASP 배우실떄 공부하셔도 됩니다. 나머지는 예제를 참고하세요!

이로써 9강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

9강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.
2011.01.25 12:15. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/publishing. Top

댓글을 달아 주세요

HTML 강의, HTML 강좌, HTMl 태그 강의, HTML 태그 강좌
안녕하세요, 현재 시각 AM 1:36...... 혹여나 살아있는분들 있을지 모르겠습니다. 암튼 8강 프레임 강의를 시작하도록 하겠습니다.
이번에도... '야(YA)' 를 마시고 야심하게 공부를 하려니깐 머리가 핑핑 도는군요.... 약간 X 할것도 같은 느낌...

암튼 강의를 시작하겠습니다! 프레임은 <frameset> 로 나눌 수 있으며 <frame> 태그로
프레임에 속할 문서를 불러올 수 있습니다.

프레임 생성 - <frameset cols/rows = "N or %"> 구조 생성 </frameset>
(cols - 가로분할, rows - 세로분할)
프레임 테두리 두께 - <frameset frameborder = "n">
(0 이면 없음, 1이면 생성)

프레임 불러오기 - <frame src = "경로"> </frame>
프레임 좌우여백 - <frame marginwidth = "n">
프레임 상하여백 - <frame marginheight = "n">
프레임 테두리 색상 - <frame bordercolor = "색상명/RGB값"

프레임 크기 변경 - <frame noresize>
프레임 스크롤 변경 - <frame scrollsing = "yes/no/auto"
(yes - 무조건 생성, no - 무조건 없앰, auto - 자동생성)

프레임 타겟 설정 - (원본) <frame src = "처음경로" name = "타겟이름">
프레임 타겟 이동 설정 - <a href = "이동 경로" target = "타겟이름">

그러니깐 a href 로 타겟이름을 설정하면 프레임으로 나눠 뜰때 타겟이름과
원본 name 이름이 똑같을시 이동이 됩니다. 물론 프레임 설정은
따로따로 가능하니깐 예제를 꼭 참고하세요!

참고로 프레임 태그는 Body 에 넣으면 작동하지 않습니다. Body 전 태그에 삽입해야지만 작동합니다.
나머지 내용은 예제를 참고하시길 바랍니다. 간단하게 예제 설명 하겠습니다.

8-1 예제 파일에서 cols(가로분할) 태그를 이용해 분할해 왼쪽은 menu, 오른쪽은 8-1(web) 파일 입니다.
보시면 아시다시피 menu 소스에서 target 를 right 로 설정해줬습니다. 그러면 메인 소스에서 보여질 프레임에
<frame name = "right" > 하면 설정한 프레임에 표시가 됩니다. 직접 만들어보고 비교하세요.

이로써 8강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

8강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.


2011.01.25 03:22. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/publishing. Top

댓글을 달아 주세요


안녕하세요, 드디어 7강 입니다. 이번 강의는 테이블에 관한 내용으로 꽉 채우고 8강은 프레임, 9강은 폼 입력 양식에 관한
태그를 배우고 HTML 강의는 끝날것같습니다. 그리고 CSS 강의를 작성할 것 같습니다. 제가 오늘... 밤을 새울 생각이라서
아마 내일 오전(?) 내로 모두 작성될 듯 합니다. 테이블은 HTML 강의에서 제일 많이 쓰이는 태그입니다.
HTML 언어를 특기로 삼지 않으셔도 꼭 알아두시면 좋을것 같습니다.



먼저 테이블 기본구조부터 시작해 속성을 차근차근 설명해드리겠습니다.

테이블 생성 - <table> ~ </table>

테이블 행 만들기 - <tr> ~ </tr>
테이블 열 만들기 - <td> ~ </td>
(<th> 를 사용하여 나열 시 굵은글자로 됨)
테이블 강한 열 - <th>

테이블 정렬방식 - <table align, valign>
테이블 테두리 두께 - <table border = "N">
테이블 배경색 - <table bgcolor = "색상명/RGB값">
테이블 테두리 색 - <table bordercolor = "색상명/RGB값">


테이블 예제
<table>
<tr>
<td> 1행 1열 </td> <td> 1행 2열 </td>
</tr>
</table>

<TR> 태그로 행을 만들며 <TD> 태그로 열을 만듭니다. 그리고 테이블 태그에서 align 정렬시
CENTER 은 사용 불가능합니다, 가운데로 정렬할려고 하는 경우 <center> ~ </center> 태그를 이용해 정렬해야됩니다.
valign 으로 수직 정렬이 가능합니다.

테이블 여백을 주는 속성은 두 가지 속성이 있습니다.
<table cellspacing = "N"> ~ </table> - 셀의 테두리선 두께
<tabel cellpadding = "N"> ~ </table> - 셀과 텍스트간의 여백

그리고 <tr>, <td> 태그 속성은 따로 있으나 위 테두리 속성과 똑같습니다.
단, <td> 속성에서는 행과 열을 합치는 rowspan 과 colspan 이 있습니다.
자세한 내용은 예제를 참고하시는게 낳을듯 합니다.

오늘 강의또한 여기서 마칩니다, 테이블 부분부터는 예제를 꼭 참고하시길 바랍니다.
이로써 7강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

7강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.




2011.01.24 21:13. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/publishing. Top

댓글을 달아 주세요

  1. BlogIcon 이츠하크

    이야! 이게 바로 제가 원했던 모범강좌네요. 오케이. 우리 블로넷(검색창에 쳐 보세요)에 강사로 한번 초빙해야 겠는데요. 우리 블로넷 친구들은 이런데에 아주 잼병이라서리. 아주 유익한 블로그 잘 보고 갑니다. 이웃 맺고 갑니다. ^^

    2011.01.24 21:16 신고  ×  +
  2. Re. BlogIcon 완소풉

    와아, 정말 감사합니다~ ^^ ;;
    사실 이번 강의는 다른 강의들에 비해 저 또한 이해력이 떨어지는것같아 다른것들에 비해
    원만하게 작성을 못 했다고 생각했는데 그렇게 해주시니 감사합니다~!

    그리고 블로넷이란 사이트는 처음 알았는데 되게 신기하고, 유익할것같네요! 댓글 감사합니다~

    저도 링크걸겠습니다! ^ㅡ^

    2011.01.24 21:30 신고  ×
  3. 구로짱

    감사합니다 잘쓰겠습니다.

    2011.04.24 18:45 신고  ×  +

HTML 강의, HTML 강좌, HTMl 태그 강의, HTML 태그 강좌
안녕하세요, 매번 강의를 시작할때마다 인사말이 줄어듭니다.. 그래서 잡글을 앞에다 쓰겠습니다. 요즘 프로그래밍을 미친듯이
공부하고 있습니다. 사실 C언어 코딩 실력을 늘려야되는게 정답이긴 하지만 일단 다른 언어를 기초라도 배워두어야 다른 분들께
늦쳐지지 않을것같은 생각이 들어 요즘 언어 공부를 많이 하고 있습니다. 아마 2월 내로 끝내고 2월 달 부터는 보안 공부에 다시
몸을 던지고 C언어는 계속 배울 것 같습니다. 그리고 C++ 로 풍덩~
그리고 페이스북 하시는분들 있으신가요~? http://facebook.com/xodnr 친구추가해주세요~!
저도 만날 수 있습니다.. +_+



먼저 구분선 그리기 강의를 시작하도록 하겠습니다. 그리고 플래시 파일을 부른 embed 강의를 한다고 했으나 다음 7강에 하겠습니다.

구분선 그리기 - <hr>

구분선 길이 - <hr width = "n">
구분선 두께 - <hr size = "n">
구분선 정렬 - <hr align = "정렬방식">
구분선 색상 - <hr color = "색상명/RGB값">

구분선 평면 - <hr noshade>


간단하군요, 예제를 참고하시면 속성도 적으니 예제보시면 금방 이해됩니다~ ^^
하이퍼링크 태그 <a href> 와 책갈피 태그 <a name> 입니다.

하이퍼링크 생성 - <a href = "연결 경로"> 내용 </a>
하이퍼링크 이름 - <a name = "하이퍼링크 이름">
하이퍼링크 설명 - <a title = "하이퍼링크 설명 내용">
하이퍼링크 타겟 - <a target = "연결된 URL이 보여질 위치">
(_blank : 새창에 표시/_parent : 호출 프레임의 상위 프레임에 표시/
_self : 현재 창에 보여줌/_top : 웹브라우저 전체화면)

이미지에 링크 걸기 : <a href = "사이트" ><img src = "사진"></a>


그리고 책갈피 태그 <a name> 입니다~ ^^

<내부문서>
책갈피 생성 - <a name = "area"> area 책갈피 </a>
책갈피 이동 - <a name = "#area"> area 로 이동</a>

<외부문서>
책갈피 생성 - <a name = "area"> area 책갈피 </a>
책갈피 이동 - <a href = "문서경로#area"> 단 문서 area 로 이동 </a>

(책갈피 부분 예제는 생략하겠습니다 ^^ )

이번 강의도 이렇게 끝나겠습니다. 사실 구분선그리기 강의를 앞에서 썼어야 됬는데 깜빡하고
작성하지를 않아서 뒤에 올리게됩니다, 그닥 어려운 내용이 많지 않으니 쉽게 얻을수 있을겁니다~

이로써 5강을 마칩니다.  첨부파일로 예제를 올립니다~
예제를 보기전에 한번 만들어보고 직접 비교해보고 하시길 바랍니다.

6강 예제.zip


다르다고 무조건 틀렸다고 생각하지 마세요, 제가 틀렸을수도 있습니다.
그럴땐 지적 깔끔하게 받겠습니다.



2011.01.24 18:13. RSS feed. Trackback 0 came from other blogs. Leave a Response.
Posted in 스터디/publishing. Top

댓글을 달아 주세요