안녕하세요,

오라클자바교육학원입니다.

​

오늘은 프론트앤드 개발자가 되기 위해

필수로 알아야할것들과 어떻게 입문해야하는지에 대해 알아보겠습니다.

​

프론트앤드

 

프론트앤드는 고객이 가장 먼저 보게되는,

웹페이지의 화면을 개발하는 일을 합니다.

​

이미지, 디자인, 글씨체, UI 등

시각적으로 볼 수 있는 모든것들을 담당하게 되죠.

​

백엔드 API 에서 가져온 데이터의 입출력을 통한

비지니스 로직 구성, 사용자와 대화하는 인터페이스를 작업합니다.

​

프론트앤드 필수언어

​

프론트앤드 개발자라면

HTML, CSS, JavaScript 는 기본적으로 알고 있어야 합니다.

​

HTML 은 문자의 크기, 글자색, 모양, 그래픽 등을

정의하는 명령어로 웹브라우저에서 해석이 가능한

사용하기 쉬운 언어입니다.

​

CSS 는 HTML 의 제약적인 부분을 보완하기 위해

만들어진 스타일 시트 표준안으로서,

보다 풍부한 디자인으로 웹을 설계할 수 있으며

유지보수가 간편하게 해주는 언어입니다.

​

마지막으로 JavaScript 는 웹페이지의 동작을 담당하는데,

크로스 플랫폼, 객체지향 스크립트 언어로서

동적인 부분을 명령하는 언어라고 보시면 됩니다.

​

위 3가지 언어를 마스터 한다면

프론트앤드 개발자로서의 능력을 갖추었다고 볼 수 있습니다.

​

프론트앤드 공부하기

​

오라클자바교육학원에서는

위 언어들을 한번에 배워보실 수 있는

프론트앤드 종합과정을 진행하고 있습니다.

​

각 언어에 대한 이론과 문법,

반복적인 실습을 통해 실무활용능력을 극대화 시키고

개발자로서의 능력을 함양할 수 있도록

커리큘럼이 구성되어 있어요.

​

또한 국비지원이 가능하여

국민내일배움카드, 취업성공패키지 등

다양한 방법으로 교육비 지원도 가능하답니다.

​

오라클자바교육학원을 통해

프론트앤드 개발자로서 거듭나시기 바랍니다.

​

www.oraclejava.co.kr  

 

오라클자바교육학원

4 7월 아이폰 iOS App 개발 with 스위프트(swift) … 7월 4일(화) ~ 7월 26일(수) 과정 바로가기

www.oraclejava.co.kr

 

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

html&css공부 유틸메뉴만들기  (0) 2015.05.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공부하기 [float,clear]  (0) 2015.03.12

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' 카테고리의 다른 글

[오라클자바] 프론트앤드 입문자를 위한 추천과정  (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공부하기 [float,clear]  (0) 2015.03.12

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공부하기

 

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

 

 

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

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

+ Recent posts

티스토리툴바