HTML5와 CSS 공부하기 

... CSS기초적인 예제입니다. ^-^

 

 

<html>

<head>

<title>HTML CSS공부하기</title>

</head>

<body>

<h1 class="logo">IT개발자스터디공간

<h1 class="study">ORACLE JAVA STUDY

<h1 class="html">HTML공부하기

<h1 class="css">CSS공부하기

<h2><a href="http://www.oraclejava.co.kr">오라클자바오프라인공부하기</a></h2>

</body>

</html>

 

스타일을 적용하기전 결과값입니다.

 

 

CSS를 적용해보도록 하겠습니다. ^-^

 

 

<html>

<head>

<title>HTML CSS공부하기</title>

<style type="text/css">

h1.logo{color:red;}

h1.study{color:orange;}

h1.html{color:green;}

h1.css{color:blue;}

a:hover{color:pink;}

a:active{color:violet;} 

</style>

</head>

<body>

<h1 class="logo">IT개발자스터디공간

<h1 class="study">ORACLE JAVA STUDY

<h1 class="html">HTML공부하기

<h1 class="css">CSS공부하기

<h2><a href="http://www.oraclejava.co.kr">오라클자바오프라인공부하기</a></h2>

</body>

</html>

 

 

CSS (스타일)을 적용한 후 결과값입니다.

 

 

 a:hover{color:pink;} 적용했을때의 결과값입니다..

 

 a:hover{color:violet;}을 적용했을때의 결과값입니다.

 

나름...보라색인데... 보라인듯아닌듯..

하핫!!!!!! HTML CSS공부모두모두 파이팅!!!

 

저작자표시

'웹표준 > HTML5 & CSS3' 카테고리의 다른 글

html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25
HTML5공부하기_ input type  (0) 2014.11.06
HTML5공부하기1 문서구조  (0) 2014.10.22

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

이번글은 input type에 대해서 알아보도록하겠습니다.

 

<!DOCTYPE HTML>

<html lang="ko-KR">

<head>

<meta charset="UTR-8">

<title>input type</title>

</head>

<body>

<h1>input type</h1><br>

color: <input type="color" name="color"><br><br>

date: <input type="date" name="date"><br><br>

email: <input type="email" name="date"><br><br>

search: <input type="search" name="search"><br><br>

tel:<input type="tel" name="tel"><br><br>

week:<input type="week" name="week"><br><br>

submit:<input type="submit" name="submit"><br><br>

</body>

</html>

 

결과를 보도록 할께요 ^^

 

 

손쉽게 input type를 작성하실 수 있습니다. ^^

궁금하신 점은 뎃글 남겨주세요.

 

이외에도 많은 input 요소들이 있어요. (저는 몇가지만 적었어요.)

 

 

 

 

저작자표시

'웹표준 > HTML5 & CSS3' 카테고리의 다른 글

html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25
HTML5&CSS3공부하기  (0) 2015.02.24
HTML5공부하기1 문서구조  (0) 2014.10.22

HTML5 공부하기  오늘은 문서구조에 대해서 보려합니다.

 

 

 

HTML의 구조를 코딩한것입니다. ^^

<!DOCTYPE html>

<html>

<head>

<title> Sample page</title>

<head>

<body>

<header>

<h1>HTML5 ex </h1>

</header>

<nav></nav>

<section>

<article><p>Comment</p></article>

<article><p>content</p></article>

<article><header><h2>HTML 5</h2></header></article>

</section>

<aside> This is aside Area</aside>

<footer></footer>

</body>

</html>

 

아직 CSS가 없어서 실행해도 이상하게 보일거에요 ^^ 차츰차츰 공부하자구요 ><

 

저작자표시

'웹표준 > HTML5 & CSS3' 카테고리의 다른 글

html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25
HTML5&CSS3공부하기  (0) 2015.02.24
HTML5공부하기_ input type  (0) 2014.11.06

HTML공부하기 7-2 <font color>

 

HTML공부하기 7-2 번째 글입니다.

계속해서 <font>태그의 공부를 하고있는데요 ^^

이번엔 글자 색을 넣어보려고 합니다.

글자색은 <font color=" 색상명 "> 또는 <font color="#RGB"> 를 이용해서 색을 넣습니다.

그럼 지난글들의 HTML공부하기 복습도 같이 하면서 예제를 보시겠습니다.

 

<html>

<head>

<title> OracleJava it공부하자 </title>

</head>

<body bgcolor="purple">

<basefont size="3">

<h2 align="center">

안녕하세요. Oraclejava it공부하자에 오신 여러분들을 환영합니다. <br>

오늘배우는 태그는 font color 입니다. <br>

</h>

<font color="yellow"> 색상명으로 노란색으로 지정하였습니다. </font><br>

<font color="pink"> 색상명으로 분홍색으로 지정하였습니다.</font><br>

<font color="white"> 색상명으로 흔색으로 지정하였습니다.<p>

<pre>

이번엔 #RGB로 색을 지정하겠습니다.

<p align="center">

<font color="#FFFF48"> 노란색으로 지정하였습니다.</font>

<font color="#ABF200"> 연두색으로 지정하였습니다.</font>

<font color="#6CFFFF"> 하늘색으로 지정하였습니다.</font>

</p>

</pre>

</body>

</html>

 

저장 ----> html공부7-2.html

 

결과를 보시겠습니다.

 

 

 

이해가 안가시면 뎃글로 남겨주세요 ^^

 

 

표준웹&HTML5&jQuery&Ajax 실무과정 - 평일주간 환급강좌 보러가기 클릭!!!

 

HTML공부하기 7-2 <font color>

 

저작자표시 비영리 변경금지

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

[프론트앤드] 프론트앤드 입문자를 위한 추천과정  (1) 2023.10.30
[코딩공부] 자바스크립트 단기속성으로 마스터하기  (24) 2023.10.04
HTML공부하기 7-1 <basefont size="n">태그  (0) 2014.06.02
[HTML공부하기 7] <font>태그  (0) 2014.05.30
[HTML공부하기 6] bgcolor속성  (0) 2014.05.28

+ Recent posts

티스토리툴바