html&css공부

이번예제는 유틸메뉴를 만들어 보겠습니다. ^^

 

바디쪽 부터 시작해 볼께요.

<div id="wrap">

<div id="header">

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

<dl id="util_menu">

<dt class="hide">유틸메뉴</dd>

<dd><a href="#">홈</a></dd>

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

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

<dd><a href="#">사이트맵</a></dd>

</dl>

</div>

</div>

 

CSS를 적용해보겠습니다.

 

 

<style type="text/css">

*{margin:0; padding:0;}

body{font:12px gulim,"굴림", sans-serif; color:#333;}

a{text-decoration:none; color:#333;}

.hide{position:absolute; left:-9999px; font-size:0; overflow:hidden;}

#wrap{width:770px; margin:0 auto;}

#header{height:100px; position:relative;}

#header h1{padding:30px 0 0 4px;}

#header dd{float:left; margin-left:30px; dispaly:inline;}

#util_menu{position:absolute; right:3px; top:8px;}

</style type>

 

 

 

 

연습을 계속 하다보면 실력이 up 될거에요 !!!

모두들 파이팅!!! ><

유틸메뉴 만들기 어렵지않아요~

저작자표시

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

[프론트앤드] HTML, CSS, Javascript 코딩언어 마스터하기!  (1) 2024.11.21
[오라클자바] 프론트앤드 입문자를 위한 추천과정  (0) 2023.06.26
html&css공부_article  (0) 2015.04.28
html&css공부 <nav>만들기  (0) 2015.03.19
html&css공부하기_float, border  (0) 2015.03.13

html&css공부

 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>article</title>

<style>

p{margin: 0;    padding: 0;}

.news{ margin: 0 auto; padding: 1em; width: 80%; border: 1px solid #666;}

.news header {margin-bottom: 2em;}

.news .cmt {border-top: 1em dotted #666;}

.news .cmt article {margin-top: 1em; font-size: 0.8em;}

</style>

</head>

<body>

<article class="news">

<header>

<h2> HTML공부하기</h2>

<p><time datetime="2015-01-01">2015/01/01</time></p>

</header>

<p>

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

또 누구나 쉽게 웹 표준에 맞는 페이지를 제작할 수 있도록 도구들의 기본부터 활용까지 교육을 통한 실습과정 입니다.

</p>

<p>

HTML의 기초부터 시작하여 실무에서 사용하는 단계까지 실습 진행을 통해 보다 효과적인 방법을 통해 실력을 업시켜드리겠습니다.

</p>

<section class="cmt">

<h3>뎃글</h3>

<article>

<p> HTML을 빨리 배워보고싶어요..</p>

<footer>

<p> [<time>2015-01-02</time>] 배우고싶은사람 </p>

</footer>

</article>

<article>

<p>ORACLEJAVA IT공부하기에서 차근차근 배워보세요.^^ 빨리빨리 업뎃해드릴께요!! 파이팅!</p>

<footer>

<p>[<time>2015-01-02</time>]관리자</p>

</footer>

</article>

</section>

</article>

</body>

</html>

 

결과입니다. ^^

 

style를 하기전 -----

 

 

----- style를 적용한 후!

 

 

 

 

저작자표시

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

[오라클자바] 프론트앤드 입문자를 위한 추천과정  (0) 2023.06.26
html&css공부 유틸메뉴만들기  (0) 2015.05.26
html&css공부 <nav>만들기  (0) 2015.03.19
html&css공부하기_float, border  (0) 2015.03.13
html&css공부하기 [float,clear]  (0) 2015.03.12

이번시간부터는 홈페이지를 만들어보려고합니다.

두근두근 ... ><

열심히 도전해보아요!!

이번엔 nav부터 만들어보겠습니다.

 

<html>

<head>

<title></title>

<style type="text/css">

*{margin:0; padding:0;}

ul{list-style:none;}

h2{color:blue; margin:2px;}

#wrap{width:90%;}

#gnb nav ul{background:#111; margin-top:1em;}

#gnb nav ul li{font-style:bold; color:#eee; display:inline-block; padding-right:2em;}

</style>

</head>

<body>

<div id="wrap">

<header id="gnb">

<nav>

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

<ul>

<li>ORACLE</li>

<li>JAVA</li>

<li>HTML&CSS</li>

<li>Big Data</li>

<li>Smart Phone</li>

</ul>

</nav>

</header>

</div>

</body>

</html>

 

결과입니다.

 

 

 

nav를 만들어 봤는데요.^^

생각보다 쉽죠??

display:inline-block;  <-- 이부분을 잘알고 있어야해요!!

body쪽에는 <li><a href="#">ORACLE</a></li> 추가해서 링크를 걸수도 있어요 !!

그거는 다음글에서 연속해서 해보도록 하겠습니다. ^^

 

 

저작자표시

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

html&css공부 유틸메뉴만들기  (0) 2015.05.26
html&css공부_article  (0) 2015.04.28
html&css공부하기_float, border  (0) 2015.03.13
html&css공부하기 [float,clear]  (0) 2015.03.12
html&css공부하기 _ [dt, dd을 이용한 예제]  (0) 2015.03.11

 

 

이번 html과 css공부에서는 dt, dd를 이용하여 수학문제를 내보려합니다.

여러분은 다른문제를 만들어서 공부해보세요^-^

 

<html>

<head>

<title>html&css공부하기</title>

<style type="text/css">

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

.box{width:250px; brder:1px solid black; background:#ffd112;}

.box h3{border-top:3px dashed green; padding-top:3px;}

</style>

</head>

<body>

<div class="box">

<dt><h2>x의값을 구하여라</h2></dt>

<dd>

<h3> 2x=3x-4 </h3>

<p>2x-3x=-4  / -x=-4 / x=4</p>

</dd>

<dd>

<h3>7x+5=5x+13</h3>

<p>7x-5x=-5+13  / 2x=8 / x=4</p>

</dd>

</div>

</body>

</html>

 

* 결과값입니다. ^-^

 

 

* 아래그림은 *{margin:5px; padding:0;}을 적용안했을 때의 값입니다.

비교가 되시나요?? ^^

 

 

하루에 두개씩은 올리려하나..ㅜ 시간이 안되소.....

다들 파이팅!!!

 

** 웹표준 오프라인강좌는 www.oraclejava.co.kr 에서 확인하세요 !!

저작자표시

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

html&css공부하기_float, border  (0) 2015.03.13
html&css공부하기 [float,clear]  (0) 2015.03.12
HTML&CSS공부하기 [padding, margin]  (0) 2015.03.10
HTML&CSS공부하기 [글자태그복습]  (0) 2015.03.10
html&css공부하기  (1) 2015.03.09

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

+ Recent posts

티스토리툴바