웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언







웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



DOCTYPE 선언


■ HTML5의 DOCTYPE선언


<!DOCTYPE html>

  - 매우 간단하고 심플함


  - 이유(DTD가 존재하지 않음으로 html버전등을 기술할 필요없음)


  - 목적(브라우저의 모드를 웹표준 모드로 만들기 위함)


  - 대소문자 구분 없음


  - 선언은 필수임



저작자표시

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

웹표준 html,css,javascript 실무 과정 자료] 글로벌 속성 id, class  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 문자 인코딩 지정  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 속성과 값  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27

웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소







웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.




부모 요소와 자식 요소


■ 내포(네스트): 이미 태그가 붙여진 요소 안에 다른 태그를 지정하여 정보를 추가 가능

  - ex) <p>여러분 안녕하세요<strong>또</strong> 여러분 안녕하세요</p>


■ 여기서 p는 부모요소, strong은 자식 요소



저작자표시

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

웹표준 html,css,javascript 실무 과정 자료] 문자 인코딩 지정  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 속성과 값  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조  (0) 2017.04.27

웹표준 html,css,javascript 실무 과정 자료] 속성과 값








웹표준 html,css,javascript 실무 과정 자료] 속성과 값

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.


속성과 값


■‘속성’이란?

  - 각 요소에 그 요소의 성질이나 역할등과 같은 상세 정보를 나타내는 것


■ 시작 태그의 요소명 다음에 한 칸을 띄우고 ‘속성명=“값” 형태로 기술


■ 속성명과 값이 동일할 경우 속성값을 생략하거나 속성명만을 사용 가능

   ex) disabled=“disabled”

       disabled=“”

       disabled


■ 여러 개의 속성 지정하는 경우 

- 각각을 스페이스로 구분

- 순서는 구분없음



저작자표시

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

웹표준 html,css,javascript 실무 과정 자료] DOCTYPE 선언  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소  (0) 2017.04.27
웹표준 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,css,javascript 실무 과정 자료] 빈 요소(empty element)







웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



빈 요소(empty element)


■ 요소 내용(content)를 갖지 않는 요소


■ 시작 태그만 있고 종료 태그는 없음





저작자표시

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

웹표준 html,css,javascript 실무 과정 자료] 부모 요소와 자식 요소  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 속성과 값  (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,css,javascript 실무 과정 자료] HTML의 기본적인 구조







웹표준 html,css,javascript 실무 과정 자료] HTML의 기본적인 구조

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.



 HTML의 기본적인 구조






저작자표시

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

웹표준 html,css,javascript 실무 과정 자료] 속성과 값  (0) 2017.04.27
웹표준 html,css,javascript 실무 과정 자료] 빈 요소(empty element)  (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

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

+ Recent posts

티스토리툴바