코딩이야기/HTML 16

HTML 강좌 16강 - HTML 태그 익히기#15 - object

HTML 강좌 16강 - HTML 태그 익히기#15 - object 이번 강좌에서는 object 태그에 대해 알아보도록 하겠습니다.object 태그를 사용해 미디어 영상 파일이나 플래시 파일을 재생할 수 있습니다.영상을 삽입하는 방법은 embed 태그 형식이 더 간단합니다.하지만 embed 태그 형식은 사용자의 컴퓨터에 미디어를 재생할 수 있는 플레이어가 없으면 재생이 되질 않습니다.반면에 object 태그는 ActiveX 기반이므로 사용자의 컴퓨터에 플레이어가 없어도 재생이 가능합니다.하지만 ActiveX가 지원되는 브라우저에서만 가능하죠. 간단하게 사용법을 보도록 하겠습니다. Object 태그 속성- id : 객체의 아이디(ID) - 개발자가 임의로 지정합니다.- classid : 윈도우 레지스트리나..

HTML 강좌 15강 - HTML 태그 익히기#14 - marquee

HTML 강좌 15강 - HTML 태그 익히기#14 - marquee 이번 강좌에서는 marquee 태그에 대해 알아보도록 하죠.이 태그는 이런 저런 사이트들을 돌아다니다 보면 가끔씩 볼 수 있는데요.좌에서 우로, 혹은 우에서 좌로 움직이는 텍스트를 표현하는 태그입니다.스크롤 기능이 있는 텍스트라고 합니다. 사용법은 간단합니다.시작태그와 종료태그 사이에 원하는 텍스트를 입력하면 끝!하지만 좌/우 스크롤 방향을 옵션으로 설정해 주어야겠죠~오른쪽으로 흐르는 텍스트왼쪽으로 흐르는 텍스트direction 속성값을 설정해 주면 되겠네요~ 이렇게 코딩을 하고 테스트를 해보도록 하겠습니다. 설정한 값대로 아주 잘 움직이는군요~ 그리고 marquee는 behavior 라는 속성도 가지고 있습니다behavior는 어떤 ..

HTML 강좌 14강 - HTML 태그 익히기#13 - form #2

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

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

HTML 강좌 12강 - HTML 태그 익히기#11 - fieldset

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

HTML 강좌 11강 - HTML 태그 익히기#10 - 배경음악

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

HTML 강좌 10강 - HTML 태그 익히기#9 - iframe

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

HTML 강좌 9강 - HTML 태그 익히기#8 - 이미지맵

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

HTML 강좌 8강 - HTML 태그 익히기#7 - Meta 태그

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

HTML 강좌 7강 - HTML 태그 익히기#6 - LIST 태그

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