html&css공부하기

 

이번글은 float , border 복습을 하겠습니다. ^^

자주자주 복습하시다보면 더 쉽게 이해할 수 있어요..

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

#wrap{width:550px; height:250px; background:pink; border:5px dashed gray; margin:10px;}

h2{text-align:center; padding:10px;}

h3{padding-bottom:3px;}

.box1{width:260px; height:160px; background:lightgreen; float:left; margin-left:10px; }

.box2{width:260px; height:160px; background:yellow; float:right; margin-right:10px;}

#wrap:after{dispaly:block; clear:both;}

</style>

</head>

<body>

<div id="wrap">

<h2>애국가</h2>

<div class="box1">

<h3>1절</h3>

동해물과백두산이 마르고 닳도록<br>

하나님이 보우하사 우리나라만세<br>

무궁화 삼천리 화려강산<br>

대한 사람 대한으로 길이 보전하리<br>

</div>

<div class="box2">

<h3>2절</h3>

남산 위에 저 소나무 철갑을 두른 듯<br>

바람서리 불변함은 우리 기상일세<br>

무궁화 삼천리 화려강산<br>

대한 사람 대한으로 길이 보전하세<br>

</div>

</div>

</body>

</html>

 

결과입니다.

 

사이트를 만드는 그날까지 !!! 우리모두 퐈이야!!!

 

float, border // it개발자 스터디공간

저작자표시

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

html&css공부_article  (0) 2015.04.28
html&css공부 <nav>만들기  (0) 2015.03.19
html&css공부하기 [float,clear]  (0) 2015.03.12
html&css공부하기 _ [dt, dd을 이용한 예제]  (0) 2015.03.11
HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10

html, css공부하기 **

 

이번에는 float와 clear에 대해서 예제를 올리겠습니다.

예제한번 보시면서 익혀보도록할께요 ^-^

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:5px; padding:0;}

#box1{width:150px; height:150px; background:yellow; float:left;}

#box2{width:150px; height:150px; background:green; float:left;}

#box3{width:150px; height:150px; background:blue; float:right;}

#box4{width:150px; heigth:150px; background:pink; clear:both;}

</style>

</head>

<body>

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

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

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

<p id="box4">박스4</p>

</body>

</html>

 

결과값입니다.

 

 

 

CSS에서 clear:both를 적용하기 전입니다.

float다음에 clear:both를 꼭 써야하는 이유!!

 

 

 

이해가 되시나요?? ㅠㅠ

하하핫

온라인으로 독학하는 방법도 있지만 www.oraclejava.co.kr에서 오프라인 강좌도 있으니 확인해보시구요

강사님의 도움을 받으며 몰랐던 부분을 더 자세히 공부해보세요 ^-^

 

html&css공부하기 float, clear 이였습니다. ><

저작자표시

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

html&css공부 <nav>만들기  (0) 2015.03.19
html&css공부하기_float, border  (0) 2015.03.13
html&css공부하기 _ [dt, dd을 이용한 예제]  (0) 2015.03.11
HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10
HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10

이번시간에는 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

+ Recent posts

티스토리툴바