HTML 강좌 14강 - HTML 태그 익히기#13 - form #2 지난 강좌에 이어 추가적으로 form 태그에서 사용하는 입력양식에 대해 알아보겠습니다.이번 강좌에서 나오는 입력양식 역시 자주 사용하는 태그들 입니다.역시 form 태그 사이에 들어가야 합니다.(1)password(2)textarea(3)select(4)file(5)hidden(6)reset button이러한 것들이 있는데, 예제를 보고 설명하도록 하죠. 그림을 보면서 하나씩 살펴볼까요~(1) password 태그는 말그대로 비밀번호 양식입니다.text 태그와 달리 내용을 입력해도 내용이 보이지 않고 비밀번호 형식으로 *** 처리됩니다.(2) textarea 태그는 장문을 입력할 수 있는 텍스트박스 입니다.우리가 흔히 메세지나 메일같은..

HTML 강좌 13강 - HTML 태그 익히기#12 - form 이번에는 form 태그에 대해 알아보겠습니다.입력양식 form 태그는 다음과 같은 경우에 사용합니다.- 회원가입 양식- 이벤트참여 양식- 설문조사 양식- 게시판 게시글 작성 양식등등.. form 태그는 정말 많이 사용합니다.나중에 개발자나 퍼블리셔 쪽으로 직업을 선택하게 된다면, 정말 많이 접하게 될 태그입니다. 우리는 회원가입 양식으로 테스트를 해보겠습니다.그런데 한가지 알아야 할것은 html에서는 단지 양식의 값을 전달하는 기능만 합니다.값을 받아서 서버로 전송을하여 DB에 저장을 하기 위해서는 php 혹은 jsp 같은 프로그래밍이 필요합니다.이후에 공부하게 될 강좌에서 자세히 알아보기로 하고 일단 회원가입 form을 하나 만들어 보겠습..

HTML 강좌 12강 - HTML 태그 익히기#11 - fieldset 이번에는 fieldset 태그에 대해 알아보겠습니다.fieldset 이란 어떤 특정한 목적으로 모인 하나의 그룹 이라고 보면 될 듯 합니다. 간단한 예를 들어보겠습니다.설문조사를 하는데 대상의 취미를 조사하고 싶습니다.그렇다면 주제.. 즉 field는 '취미'가 되고..주제에 해당하는 객체들을 셋팅 해야겠죠?영화감상, 자전거라이딩, 여행, 음악감상이렇게 객체들을 셋팅한고 하고 fieldset 태그를 사용해 봅니다. 시작태그와 종료태그 사이에 다음과 같은 형식으로 사용합니다.취미영화감상자전거라이딩여행음악감상 legend 태그는 주제를 설정하는 태그입니다.input 태그는 입력방식을 설정하는 태그인데 checkbox는 많이 봤던 체크박스..

HTML 강좌 11강 - HTML 태그 익히기#10 - 배경음악 이번에는 배경음악을 설정하는 태그에 대해 알아보겠습니다.배경음악을 설정하는 태그는 두 가지가 있습니다.하나는 사용자가 컨트롤 할 수가 없는 태그이고, 다른 하나는 사용자가 컨트롤을 할 수 있는 태그 입니다.어떠한 사이트에 들어갔을 때 사용자가 원하지 않는 음악이 계속 흘러나온다면..저라면 아마도 스피커를 끄던가 사이트를 꺼버릴듯 합니다.그래서 보통 사용자가 컨트롤 할 수 있는 태그로 설정을 합니다.하지만 두가지 태그 모두 알아보도록 하겠습니다. 1. 컨트롤러가 없는 태그 - bgsound

HTML 강좌 10강 - HTML 태그 익히기#9 - iframe 이번에는 iframe 태그에 대해 알아보겠습니다.iframe 태그란 웹문서 내에 특정한 다른 사이트의 내용을 보여주는 기능입니다. 사용법은 이미지 태그와 유사합니다. 테스트를 통해 알아보도록 하겠습니다. 위와 같이 코딩을 하고 웹문서를 실행해 봅니다. 위와 같이 사이트의 내용을 불러오는것을 볼 수 있습니다.저 사이즈가 iframe 에서 사이즈를 지정하지 않았을 경우 기본사이즈 입니다.iframe 태그도 이미지 태그와 마찬가지로 사이즈를 지정할 수 있습니다.사용법은 다음과 같습니다. 역시 테스트를 해보도록 할까요~ 이렇게 코딩을 하고 실행해 봅니다~ 지정해 놓은 사이즈로 크기가 바뀐것을 볼 수 있습니다. 그리고 frameborder 속성으로..

HTML 강좌 9강 - HTML 태그 익히기#8 - 이미지맵 이번에는 이미지맵 태그에 대해 알아보겠습니다.이미지맵 태그란 이미지의 특정 부분을 클릭했을 경우 어떠한 액션이 일어날 수 있도록 하는 기능입니다.예를 들어 다음과 같은 이미지가 있다고 가정해 봅시다. (무난한 이미지를 찾다보니 글쓴이의 취향이 그대로 들어나는 이미지를 선택했..) 소주의 라벨부분을 클릭했을 때 네이버로 이동하는 기능을 만들어 보겠습니다.일단 이미지의 맵.. 즉 클릭을 하는 범위를 지정해주어야 합니다.그림판에서 이미지를 열어 클릭하고 싶은 범위의 좌표를 보겠습니다. 1번 좌표 소주병의 라벨부분에서 왼쪽 위로 마우스를 가져갔습니다.붉은색 부분이 바로 소주병의 라벨부분에서 왼쪽 위의 좌표입니다.이번에는 라벨에서 오른쪽 위 부분을 찾아..

HTML 강좌 8강 - HTML 태그 익히기#7 - Meta 태그 이번에는 메타태그에 대해 간단히 이해하고 넘어가도록 하겠습니다.먼저 메타태그가 무엇인지 보도록 하죠.태그는 HTML 문서가 어떤 내용을 담고 있는지, 그리고 문서의 키워드는 무엇인지 등의 문서의 특성을 담고 있습니다.태그는 사이에 위치합니다.그리고 태그는 주로 name과 content 속성을 사용합니다. 위와 같이 사용합니다.그리고 인기있는 SNS인 페이스북에 관련한 메타태그도 있습니다.위와같이 설정해주면 페이스북에서 공유를 할 경우 이미지를 지정할 수 있습니다.페이스북이나 카카오톡 같은 SNS 공유에 대한 스크립트도 차후에 공부하도록 할게요~ 그리고 페이지를 이동시키는 기능도 있습니다.위와 같이 코딩을 하면 웹문서가 열리고 5초후에 ur..

HTML 강좌 7강 - HTML 태그 익히기#6 - LIST 태그 이번엔 프레임 태그와 리스트 태그를 연습해보자. *리스트 태그리스트 태그는 두 종류의 태그가 있다.순서가 있는 리스트가 있고, 순서가 없는 리스트가 있다.(1)순서가 있는 리스트 사용법은 다음과 같다. 순서가 있는 리스트(2)순서가 없는 리스트 사용법은 다음과 같다. 순서가 없는 리스트 위와 같이 코딩을 하고 테스트를 해보자. 첫번째 리스트는 1,2,3 번호로 순서를 지정하고, 두번째 리스트는 순서가 없음을 볼 수 있다. 그리고 순서가 있는 리스트는 숫자 말고도 다른 방법으로 순서를 지정할 수 있는데, type 속성을 사용하여 지정할 수 있다.사용법은 다음과 같다. 순서가 있는 리스트 순서가 있는 리스트 위와 같이 코딩을 추가해서 테스트를..

HTML 강좌 6강 - HTML 태그 익히기#5 지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자. *테이블 태그테이블 태그는 HTML 많이 사용하는 태그이다.표 같은 형식의 데이터를 표현할 때 사용하거나, 게시판, 갤러리 등 사용도가 무척 많다.사용법은 다음과 같다. 1행1열 1행2열 2행1열 2행2열 위와같이 코딩을 하고 테스트를 해보자. 라인이 없으니 보기가 좀 불편한듯..보기 편하게 먼저 border 속성을 추가해보자~ 이렇게 border 속성에 값을 주면.. 테이블에 라인이 생긴다. 그리고 테이블 태그 속성에는 행이나 열을 합치는 속성이 있다.colspan 속성과 rowspan 속성이다.예를 들면 다음과 같이 1행과 2행의 열의 숫자가 일치 하지 않을 경우~ 1행1열 2행1열 2행2열 ..

HTML 강좌 5강 - HTML 태그 익히기#4 지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자. *이미지 태그문서에 이미지를 삽입하는 태그이다.사용방법은 다음과 같다. 그리고 이미지 태그의 속성을 이용하여 이미지의 크기를 변경할 수 있다. 예제를 위해 어떠한 이미지도 좋으니 HTML 문서와 같은 폴더에 임의로 이미지를 넣어보자.이미지의 경로는 상대경로, 절대경로 두 가지 경로가 있다.상대경로 : 웹문서의 위치기반절대경로 : 웹디렉터리의 최상위 루트폴더 기반 현재는 서버기반 강좌가 아니기 때문에 상대경로만 간단히 설명하겠다.예를들어 테스트 하고자 하는 웹문서가 E:\HTML 공부방\05\01.html 이라고 가정하자.01.html 문서에 이미지를 넣고자 코딩을 할 경우 웹문서와 같은 경로인 E..