본문 바로가기

웹 공부/2. HTML516

HTML - 입력양식 form태그와 그 속성 - 입력태그 (5) HTML - 입력양식 form태그와 그 속성입력태그 (5) 오늘은 HTML 마지막으로 앞서 배운 입력태그를 담는 form태그, 입력양식에 대해서 명확하게 알아 보고 HTML 부분 포스팅을 넘어 가도록 하겠습니다. (추후 HTML 태그가 더 추가되거나 바뀌지 않는 이상 여기서 마무리) 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) form태그와 그 속성이란? 먼저 form태그란 사용자로부터 데이터를 받어서 서버로 넘기는데 사용되는 태그이며 입력양식을 이용하면 쇼핑몰 같은 곳에서 주문을 받을수도 있고.. 2017. 5. 24.

HTML - fieldset태그와 label태그 - 입력태그 (4) HTML - fieldset태그와 label태그입력태그 (4) 오늘은 이전 포스팅에 이어 HTML -fieldset태그와 label태그에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) fieldset태그란? 먼저 fieldset태그란 입력 요소를 그룹화 하는데 사용되는 태그 이며 fieldset태그를 사용하면서 legend태그를 이용해 그룹에 제목을 붙일 수도 있는데 이 사용법은 아래와 같습니다. ^^ 위 는 fieldset 태그안에 legend로 "제목표시"를 넣.. 2017. 5. 23.

HTML - textarea태그와 select태그 - 입력태그 (3) HTML - textarea태그와 select태그 입력태그 (3) 오늘은 이전 포스팅에 이어 HTML - textarea태그와 select태그에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) textarea태그란? 먼저 textarea태그란 여러 줄의 텍스트를 입력받을때 사용하는 태그이며 사용법은 아래와 같습니다. ^^ 위 는 "아래 내용을 입력 하세요!" 라는 문구를 넣고 태그 2개를 이용해 2번 개행 후 textarea태그로 입력 박스를 만들었으며 textare.. 2017. 5. 22.

HTML - input태그의 추가된 속성과 type 속성에 추가된 값 - 입력태그 (2) HTML - input태그의 추가된 속성과 type 속성에 추가된 값입력태그 (2) 오늘은 이전 포스팅에 이어 html5에서input태그의 추가된 속성과 type 속성에 추가된 값에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) input태그의 추가된 속성이란? html5에서 새로운 input 태그가 추가된 내용 입니다.그중 몇개의 내용은 아래와 같습니다. 추가된 속성 내용 pattern 허용하는 입력의 형태를 정규식으로 지정 required 입력양식 제출전에 반드.. 2017. 5. 21.

HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 input태그란? input태그란 form 태그 안에서 추가되는 입력 요소들 중가장 중요한 태그 입니다. input태그는 사용자로 부터 정보를 받아들이는 용도로 사용되는데input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용됩.. 2017. 5. 20.

HTML - div태그 (블록)과 span태그 (인라인) - 멀티미디어 (4) HTML - div태그 (블록)과 span태그 (인라인)멀티미디어 (4) 오늘은 div태그 (블록)과 span태그 (인라인)에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 div태그 (블록)과 span태그 (인라인)란? div태그 (블록)는 과 span태그 (인라인) 는 웹 사이트를 만드는데무조건 적으로 필요한 태그 입니다. 먼저 div 내용입니다. div 같은 경우 divide 의 약자로 페이지를논리적인 세션으로 분리하는데 사용이 되는데 블록 .. 2017. 5. 19.

HTML - 아이프레임(iframe)태그와 그 속성 - 멀티미디어 (3) HTML - 아이프레임(iframe)태그와 그 속성멀티미디어 (3) 오늘은 아이프레임(iframe)태그와 그 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 아이프레임(iframe)태그란? 아이프레임(iframe)태그는 쉽게 말하면 웹 페이지 안에 다른 웹페이지를표시하고자 할 떄, 사용이 되는데 흔히 광고 예를들면 쇼핑몰 쪽에서 이 태그를 많이 이용하고하나의 페이지를 여러 프레임으로 나누어서 각각의 다른 문서를 표시하고자 할때도 사용됩니다. .. 2017. 5. 18.

HTML - 비디오(video)태그와 그 속성 - 멀티미디어 (2) HTML - 비디오(video)태그와 그 속성멀티미디어 (2) 오늘은 비디오(video)태그와 그 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 비디오(video)태그란? HTML5에서 비디오(동영상)을 재생할 수 있는 태그인데앞서 배웠던 오디오 태그와 적용방식의 거의 동일하기 때문에 설명은 아주 간단하게 하겠습니다. ^^ 비디오(video)태그 사용법 위 이미지를 보시면 아시곘지만 사용법은 오디오 태그와 동일합니다.단지 달라진게 있다면 속.. 2017. 5. 17.

HTML - 오디오(audio)태그와 그 속성 - 멀티미디어 (1) HTML - 오디오(audio)태그와 그 속성 멀티미디어 (1) 오늘은 HTML - 오디오(audio)태그와 그 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 오디오(audio)태그란? HTML5에서 오디오를 재생할 수 있는 태그태그를 지원 하는데 흔히 웹 페이지에서 자신이 좋아하는오디오 파일 음원을 배경음으로 재생할때 사용하는 태그입니다. 위 이미지는 오디오 태그 src 속성으로 오디오 파일 music.mp3 를 지정 후속성 outopla.. 2017. 5. 16.

HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7) HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7) 오늘은 HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 테이블(itable)태그란? 표 형태의 데이터를 표시하는 데 사용 되는 태그 이며예전 초기 웹 페이지에서는 레이아웃에도 테이블을 사용하였으며테이블(itable)로 정의 .. 2017. 5. 15.

HTML - 이미지(img) 태그 와 src, width, height, alt 속성 - 텍스트 표시 (6) HTML - 이미지(img) 태그 와 src, width, height, alt 속성 텍스트 표시 (6) 오늘은 HTML - img 태그 와 src, width, height, alt 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 이미지(img) 태그란? 웹 페이지에 이미지를 넣을 수 있게 하는 태그로서 말 그대로 이미지(img)태그로 정의 됩니다. 1. img 태그는 다시 말하지만 이미지를 웹페이지에 삽입할때 사용됩니다. ^^ 2. src.. 2017. 5. 14.

HTML - 링크, a태그 와 href, target, id 속성 - 텍스트 표시 (5) HTML - 링크, a태그 와 href, target, id 속성 텍스트 표시 (5) 오늘은 HTML - 링크 a태그 와 href, target, id 속성에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 a 태그란? 하이퍼 링크를 정의 하는 내용으로 사용자가 커서를 웹 페이지의 링크 위에올리면서 커서의 모양이 화살표에서 손 모양으로 변화합니다. a태그를 사용하기 위해서는 속성이 있어야 하는데이 속성은 href로 링크 주소를 입력하는 부분을 정의 합.. 2017. 5. 13.

HTML - 리스트 태그 중 - ul태그, ol태그, li태그 - 텍스트 표시 (4) HTML - 리스트 태그 중 - ul태그, ol태그, li태그 텍스트 표시 (4) 오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 리스트 태그란?리스트 태그는 말 그대로 항목을 나열하는데 사용하는 태그이며이 태그 안에는 텍스트 말고도 이미지, 비디오, 링크를 넣을 수도 있으며태그에 따라 번호가 있는 리스트가 있고 태그에 따라 번호가 없는 리스트도 있고태그에 따라 정의 리스트라.. 2017. 5. 12.

HTML - 특수 문자 사용법 텍스트 표시 (3) HTML - 특수 문자 사용법 텍스트 표시 (3) 오늘은 HTML - 특수 문자 사용법에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML 에서 특수문자란 예를들어'' 같은 한개 이상의 공백을 만들경우 등 여러 경우에서 사용하게 되는데이때 일반 키보드나 스페이스로는 먹히지 않기 때문에 이를 화면에 표시가 되게끔 쓰는 HTML 태그 안에 쓰는 문구를 말합니다. ※ 키보드나 스페이스로 한개이상의 공백과 특수문자가 사용 안되는 이유 ※ 예를 들면 '' 같은 경우.. 2017. 5. 11.

HTML - 헤딩과 텍스트 서식, 수평선 태그, 주석 - 텍스트 표시 (2) HTML - 헤딩과 텍스트 서식, 수평선 태그 및 주석텍스트 표시 (2) 오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에대해서 알아 보도록 하겠습니다. 먼저 태그 기초부터 알아보기 이전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 헤딩 태그 입니다.해딩 태그란 웹 페이지의 머릿글 같은 말인데요.웹페이지를 신문이라고 친다면 헤드라인? 같은 말을 의미합니다.(상단 가장 큰 글자 같은것!) 그 다음 헤딩도 머리글 처럼 크기가 있듯이 표시도 제각각 인데요 위와 같이 ~ 까지의 6개의 태그로 숫자.. 2017. 5. 10.

HTML - 텍스트 태그, p태그, br태그, pre태그 - 텍스트 표시 (1) HTML - 텍스트 태그, p태그, br태그, pre태그 텍스트 표시 (1) 오늘 포스팅은 HTML 태그 중 텍스트를 표시에 대해서 알아 보도록 하겠습니다.먼저 태그 기초부터 알아보기 전에 이전 포스팅 중 압타나 스튜디오 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!) 먼저 HTML의 텍스트 표시란 ?말 그대로 HTML 문서에서 텍스트를 작성하는 것이며 특별한 태그 없이도 안에서 표시 할 수 있습니다. 그러나! 여러 줄로 되어 있는 텍스트는 단락을 생성한 후에 단락 안에서 표시하는 것이 좋습니다! 왜냐 하면 단락을 생성하지 않으면 모든 텍스트가 하나로 연결이 되어하나의 긴 줄로 표시가 되기 때문 입니다. 위 사진 처럼 HTML 문서를 작성.. 2017. 5. 9.

이전 1 다음

티스토리툴바