이번시간에는 padding과 margin의 값을 비교해보려합니다.

html공부 점점 재밌어지지않나요?? ㅋㅋㅋ

사실... 이런것보다.. 언넝 홈페이지를 꾸미고 싶은데..!!!!

더 열심히해서 꼭 만들자구요!!

다들 파이팅합시다!!

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

#box1{background: yellow; width:200px; height:100px; border:5px solid #f00;}

#box2{background: green; width:200px; height:100px; border:5px dashed #0f0; padding:10px 10px;}

#box3{background: orange; width:200px; height:100px; border:5px solid #00f; margin:10px 10px;}

</style>

</head>

<body>

<div id="box1">박스1</div>

<div id="box2">박스2</div>

<div id="box3">박스3</div>

</body>

</html>

 

결과값입니다.

 

 

박스1은 padding, margin값을 주지않았습니다.

박스2는 padding값만 줬습니다.

박스3에는 margin값을 줬습니다.

 

어떻게 나타나지는지 비교가되네요 ^-^

 

다들 헷갈려하시지마시고!! 복습하시면서 확실하게 익히시길 바랍니다.

 

 

* 웹퍼블리셔 초급과정은 www.oraclejava.co.kr 에서 확인가능합니다. ^^

 

저작자표시

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

html&css공부하기 [float,clear]  (0) 2015.03.12
html&css공부하기 _ [dt, dd을 이용한 예제]  (0) 2015.03.11
HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10
html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02

HTML&CSS공부하기 [글자태그복습]

지난번 예제를 복습하는 의미에서 올립니다. ^-^

HTML공부 아자아자!!! CSS공부 아자아자!!!

 

<html>

<head>

<title></title>

<style type="text/css">

p{font-size:150%;}

p:first-letter{font-size:300%;}

p{border-bottom:1px solid orange}

</style>

</head>

<body>

<p>ORACLE</p>

<p>JAVA</p>

<p>SMART PHONE</p>

<p>BIG DATA</P>

</body>

</html>

 

결과값입니다//

 

짜잔!!! >-<

다들 한번씩해보세요 !!!

저작자표시

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

html&css공부하기 _ [dt, dd을 이용한 예제]  (0) 2015.03.11
HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10
html&css공부하기  (1) 2015.03.09
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25

 

html&css공부하기 !!

꾸준한 예제로 실력을 쏙쏙 키워보세요 ^-^

아직.. 초보이지만... 곧 저희도 멋진 홈페이지를 만들 그런날이 오겠죠...하하하 !!

그날까지 모두들 파이팅하세요!!

 

 

<html>

<head>

<title></title>

<style type="text/css">

body{font:12px;}

h1{background:url("1.png") no-repeat 0 50%; padding:10px;}

p{width:400px; padding:20px; backgroundr:#fdf;}

 

</style>

</head>

<body>

<h1>웹퍼블리싱 초급과정</h1>

<p>본 과정에서는 HTML, HTML5, CSS3, JavaScript, jQuery등을 활용하여 어떠한 브라우저 환경에서도 깨지지않는 웹페이지 제작기술과 노하우를 학습하실 수 있을 것입니다.</p>

<h1>웹퍼블리싱 중급과정</h1>

<p>본과정은 RIA를 실질적으로 접근할 수 있도록 길잡이 역할을 할 것이며 비동기적 Javascript 언어와 XML 등의 기타 웹 표준을 종합적으로 사용하는 기술로서 web 2.0의 핵심 기술인 ajax, 그리고 최근 JavaScript Library중 가장 각광 받는 jQuery를 학습하므로써 동적인 웹페이지를 만들기 위한 기술의 기본을 학습하게 됩니다.</p>

</body>

</html>

 

결과입니다.

 

 

 

다음예제는 좀더 업그레이드 된걸로 !!!

HTML CSS공부하시는 모든분들 파이팅!!

 

 

저작자표시

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

HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10
HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10
HTML5&CSS3 공부하기 글자색과 배경색 2  (0) 2015.03.02
HTML5&CSS3 공부하기 글자색과배경색  (0) 2015.02.25
HTML5&CSS3공부하기  (0) 2015.02.24

 

지난시간에이어서 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

이번글은 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

+ Recent posts

티스토리툴바