지난시간에이어서 HTML5&CSS3공부하기에는 글자색과 배경색 예제를 올리도록하겠습니다.

조금..조금 업그레이드된... 예제로..? ㅋㅋㅋ아닐 수도 있겠지만.. 다들 한번 해보세요 ^-^

 

 

<html>

<head>

<title></title>

</head>

<body>

<p>안녕하세요.오라클자바교육학원입니다. 초보자를 위한 실습위주의 기본교육, 실무중심의 SKILL UP교육, 실무경력자 중심의 강사진, 교육에 대한 철저한 사전/사후 관리 시스템을 가지고 늘 학생 및 개발자 여러분들 곁에 있겠습니다. 기본기를 충실히하여 프로그래머를 지원하는 학생 및 개발자 여러분들 곁에 있겠습니다.</p>

<p> 웹표준 퍼블리셔 실무과정[중급] 평일저녁반</p>

<p> 시간 19:00 ~ 22:00 월~금 수업</p>

<p> 근로자 직업능력개발카드 적용가능/ 사업주위탁훈련으로 신청가능</p>

</body>

</html>

 

결과값입니다.

 

 

CSS를 적용하기 전이기 때문에 글만 있죠 ^-^

그럼 이젠 CSS를 적용해보겠습니다.

 

 

<html>

<head>

<title></title>

<style type="text/css">

p:first-letter{font-size:250%; color:green;}

p:first-child{background:orange;}

p:first-line{color:blue; font-size:150%}

</style>

</head>

<body>

<p>안녕하세요.오라클자바교육학원입니다. 초보자를 위한 실습위주의 기본교육, 실무중심의 SKILL UP교육, 실무경력자 중심의 강사진,교육에 대한 철저한 사전/사후 관리 시스템을 가지고 늘 학생 및 개발자 여러분들 곁에 있겠습니다. 기본기를 충실히하여 프로그래머를 지원하는 학생 및 개발자 여러분들 곁에 있겠습니다.</p>

<p> 웹표준 퍼블리셔 실무과정[중급] 평일저녁반</p>

<p> 시간 19:00 ~ 22:00 월~금 수업</p>

<p> 근로자 직업능력개발카드 적용가능/ 사업주위탁훈련으로 신청가능</p>

</body>

</html>

 

결과값입니다.

먼저 사이즈를 줄였을때 !!!

 

 

사이즈를 조금 늘렸을때!!!

비교해서 보세요 ^-^

 

 

 

저는 title을 정해주지 않았지만 HTML공부하시는 분들을 타이틀도 달아보세요 ^-^

글자색과 배경색 공부2탄!!!

점점 재밌어지지않나요?!! ㅋㅋㅋ나만...그런가아아아..

 

다음글에서 또만납시다!!! >< 열공 !!! 파이팅!

 

저작자표시 (새창열림)

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

HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10
html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25
HTML5&CSS3공부하기  (0) 2015.02.24
HTML5공부하기_ input type  (0) 2014.11.06

HTML5& CSS공부하기

이번엔 글자색과 배경색을 넣어보면서 head쪽 style body쪽에 style을 적용했을때 어떻게 변화가 되는지 보도록 하겠습니다. ^-^

 

모두가 파이팅!!! ><

 

<html>

<head>

<title></title>

<head>

<body>

<h1> IT개발자스터디공간</h1>

<h2 class="logo"> HTML&CSS</h2>

<p>오늘하루도 좋은하루!!!</p>

<h1 style="color:blue">이곳에서 파랑으로 하면 CSS쪽에서 h1의 색을 빨강으로해도 이글은 파랑색으로 보여집니다.</h1>

<h2 style="color:green">h2로 복습!!! head쪽 style에서 분홍색으로 지정하였지만 지금은 초록색!!</h2>

<h3 id="text1">하핫</h3>

</body>

</html>

 

CSS를 적용하기 전 결과값입니다. ^-^

 

 

 

 

CSS를 적용해서 예제를 다시!!!

 

<html>

<head>

<title></title>

<style type="text/css">

h1{color:red;}

h2{color:pink;}

h3{color:gray;}

#text1{background:yellow;}

h2.logo{background:aqua; font-style:strong;}

</style>

</head>

<body>

<h1> IT개발자스터디공간</h1>

<h2 class="logo"> HTML&CSS</h2>

<p> 오늘하루도 좋은하루!!! </p>

<h1 style="color:blue">이곳에서 파랑으로 하면 CSS쪽에서 h1의 색을 빨강으로해도 이글은 파랑색으로 보여집니다.</h1>

<h2 style="color:green"> h2로 복습!!! head쪽 style에서 분홍색으로 지정하였지만 지금은 초록색!!</h2>

<h3 id="text1">하핫</h3>

</body>

</html>

 

최종결과값입니다.

 

 

너무 조그만해서..ㅜㅜ 힁 잘안보이실 수도 있는데.. 메모장에 복붙하시고 html연습하기.html 이런식으로 저장하셔서

확인해보시면 크게 보실 수 있습니다. ^^

 

저작자표시 (새창열림)

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

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

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

 

 

클래스의 정의

 

What is Class?

: 클래스는 특정 종류의 객체내에 있는 변수와 메소드를 정의하는

일종의 틀(template)이다.

 

: User Defined Data Structure

 

: 객체의 자료형

- 객채가 가질 데이터 및 이 데이터를 조작하는 연산에 대한 정의(description)

 

: 클래스는 내부에 다음을 정의한다

- 변수(Variable): 데이터를 저장한다.

- 메소드(Method): 데이터를 조작하는 연산이다.

 

** 클래스는 C에서 구조체(Structure)의 확장된 형태라고 생각하면 이해하기가 쉽다. 

 

 

저작자표시 (새창열림)

'닷넷 > Wpf프로그래밍' 카테고리의 다른 글

WPF 교육2  (0) 2015.09.17
WPF 교육1  (0) 2015.09.17
WPF공부하기 57_ Object Oriented  (0) 2015.02.09
WPF공부하기 56_ Object Oriented_상속  (0) 2015.02.06
WPF공부하기 55_ Object Oriented_클래스  (0) 2015.02.06

+ Recent posts

티스토리툴바