웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조







웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



 HTML의 기본적인 구조






저작자표시

'웹표준 > HTML' 카테고리의 다른 글

웹표준 html,css,javascript 실무 과정 자료] 속성과 값  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
html공부하기 4_ fieldset  (0) 2015.02.23
HTML 공부하기_3 input type  (0) 2015.02.23
html공부하기2_목록형태그 (dl추가)  (0) 2015.02.13

html공부하기 !! 4번째 예제입니다. ^-^

fieldset에 대하여 올리겠습니다.

오늘하루도 파이팅!!! ><

 

<html>

<head>

<title></title>

</head>

<body>

<fieldset>

<legend>QnA</legend>

<p>Question</p>

<p>질문선택

<select>

<option value="국어">국어</option>

<option value="영어">영어</option>

<option value="수학">수학</option>

<option value="과학">과학</option>

</select>

</p>

<p>학교

<select>

<optgroup label="중학교">

<option value="1">가나중학교</option>

<option value="2">다라중학교</option>

<option vaule="3">마바중학교</option>

</optgroup> 

<textarea cols="40" rows="3" name="reply"></textarea></p>

</fieldset>

<hr>

<fieldset>

<legend>Answer</legend>

<textarea cols="40" rows="4" name="reply"></textarea></p>

</fieldset>

</body>

</html>

 

 

결과확인

 

 

 

 

고등학교도 해서 표시하려했지만..... 시간이 옴쏘소.... ㅋㅋㅋㅋㅋ

고등학교는 직접 해보세용 ^^

 

 

html 복잡하다고 생각할 수 있지만 많은 연습을 하다보면 다들 쉽게 익히실 수 있습니다. ^-^

모두모두 파이팅!!!

 

 

 

저작자표시

'웹표준 > HTML' 카테고리의 다른 글

웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조  (0) 2017.04.27
HTML 공부하기_3 input type  (0) 2015.02.23
html공부하기2_목록형태그 (dl추가)  (0) 2015.02.13
html공부하기1 목록태그 (ol,ul)  (0) 2015.02.13

HTML 공부하기 5번째 연습글은 input type 에 대해서 연습해보려합니다. ^-^

 

<html>

<head>

<title>input type 연습</title>

</head>

<body>

<fieldset>

<legend>회원가입창</legend>

<p>아이디:<input type="text" size="12" maxlength="8"></p>

<p>PASS:<input type="password" size="12" maxlength="8"></p>

<p>메일수신여부:<input type="radio" size="12" value="y" name="receive">예

<input type="radio" size="12" value="n" name="receive" checked="checked">아니오</p>

<p>파일올리기:<input type="file"></p>

<p><input type="hidden" value="#"></p>

<p>관심분야:<input type="checkbox" value="축구" name="chk1">축구

<input type="checkbox" value="야구" name="chk2">야구

<input type="checkbox" value="배구" name="chk3">배구

<input type="checkbox" value="농구" name="chk4">농구 <p/>

<p><input type="submit" value="전송">

<input type="reset" value="취소"></p>

</fieldset>

</body>

</html>

 

결과입니다.

 

다들 연습하시다보면 잘 하실 수 있어요!!! input type 어렵지 않아용 ><

HTML 공부하기는 oraclejavastudy 티스토리를 많이 방문해주세요!!

 

저작자표시

'웹표준 > HTML' 카테고리의 다른 글

웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조  (0) 2017.04.27
html공부하기 4_ fieldset  (0) 2015.02.23
html공부하기2_목록형태그 (dl추가)  (0) 2015.02.13
html공부하기1 목록태그 (ol,ul)  (0) 2015.02.13

지난글에서 ul ol 태그로 예제를 만들어 보았는데요. 이번에는 dl을 추가해서 올리겠습니다.

나머지는 복습으로 생각하시면서 공부하시면 될 것 같아요 ^-^

오늘도 퐈이팅!!!

 

 

<html>

<head>

<title></title>

</head>

<body>

<h1><a href="#">IT개발자 스터디공간</a></h1>

<dl>

<dt>유틸메뉴</dt>

<dd><a href="#">로그인</a><span>|</span></dd>

<dd><a href="#">회원가입</a><span>|</span></dd>

<dd><a href="#">마이페이지</a><sapn>|</span></dd>

<ul>

<li><a href="#">영어</a><span>|</span></li>

<li><a href="#">중국어</a><span>|</span></li>

<li><a href="#">불어</a><span>|</span></li>

</ul>

</dl>

<h2>카테고리</h2>

<ul>

<li><a href="#">JAVA공부하기</a></li>

<ul>

<li><a href="#">JAVA</a></li>

<li><a href="#">JSP</a></li>

<li><a href="#">SPRING</a></li>

</ul>

<li><a href="#">ORACLE공부하기</a></li>

<ul>

<li><a href="#">PL-SQL</a></li>

<li><a href="#">SQL HINT </a></li>

<li><a href="#">SQL TUNING</a></li>

</ul>

<li><a href="#">SMART PHONE공부하기 </a></li>

<ul>

<li><a href="#">iPhone</a></li>

<li><a href="#">Android</a></li>

</ul>

<li><a href="#">웹표준 공부하기</a></li>

<ul>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JQUERY</a></li>

</ul>

<li><a href="#">빅데이터 공부하기</a></li>

<ul>

</body>

</html>

 

 

결과입니다. ^^

 dl은 * 표시가 없는것을 확인 할 수 있습니다...

 

 

저작자표시

'웹표준 > HTML' 카테고리의 다른 글

웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조  (0) 2017.04.27
html공부하기 4_ fieldset  (0) 2015.02.23
HTML 공부하기_3 input type  (0) 2015.02.23
html공부하기1 목록태그 (ol,ul)  (0) 2015.02.13

html 공부하기 1번째 시간입니다.

소스를 따라해보시면서 공부하시면 도움이 될것입니다. ^^

이번에는 ul 과 ol 에 대해서 공부할겁니다.

순차적으로 목록이 나타나지는지.. 비순차적으로 목록이 나타나는지를 확인하면 됩니다.

 

 

 

<html>

<head>

<title></title>

</head>

<body>

<h1>순차적 목록나타내기</h1>

<h2>덧셈공부</h2>

<ol>

<li><strong><a href="#">1+1=2</a></li>

<li><em><a href="#">1+1+1=3</a></li>

<li><a href="#">2+2=4</a></li>

</ol>

<p><h1><ins>비 순차적 목록나타내기</h1>

<h2>뺄셈공부</h2>

<ul>

<li><a href="#"><del>3-1=2</del></a></li>

<li><a href="#"><ins>3-2=1</ins></a></li>

<li><a href="#">3-3=0</a></li>

<li><a href="#">3-4=-1</a></li>

</ul>

</body>

</html>

 

 

결과입니다.

 

 

ol 태그를 쓴경우에는 1,2,3,...순차적으로 번호가 나오며

ul 태그를 쓴 경우에는 *,*,*,...비 순차적으로 나타나집니다.

 

그외에 strong , em, ins, del, a 들이 어떻게 적용되었는지 확인해보세요 ^^ 

 

 

저작자표시

'웹표준 > HTML' 카테고리의 다른 글

웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조  (0) 2017.04.27
html공부하기 4_ fieldset  (0) 2015.02.23
HTML 공부하기_3 input type  (0) 2015.02.23
html공부하기2_목록형태그 (dl추가)  (0) 2015.02.13

+ Recent posts

티스토리툴바