PowerPoint 프레젠테이션

Size: px

Start display at page:

Download "PowerPoint 프레젠테이션"

소현 환
6 years ago
Views:

1 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다.

2 ONE page 웹사이트사례

3 ONE page 정보구조 상단에는로고와메뉴가있다. 정보의박스 ( 영역 ) 가차례대로세로정렬로배치되어있다. 정보의박스안에는각요소가들어가있다. 메뉴를누르면각영역으로이동한다.

4 ONE page 웹사이트디자인하기 One Page Wireframes_PSD

5 <!DOCTYPE html> - html의 DOCTYPE을 html5라고명시했습니다 <head> - html문서의머리에해당합니다. 메타데이터나문서의제목을씁니다 <meta charset="utf-8"> - 이문서의캐릭터셋은 utf8이라고명시를해주는데요. 문자의인코딩을알려주는거죠 <title>99_simple_page</title> - 문서의제목 </head> - 항상열면닫아야됩니다. <body> - 본격적으로문서의구조를잡을건데요. 삼단구성이기때문에 header, section, footer 로간략히나눴습니다. <header> - 로고와네비게이션이들어갈곳 </header> <section> - 산그림과 HELLO 가들어갈곳 </section> <footer> - 아래글씨를집어넣을곳 Park Yong</p> </footer> </body> </html>

6 ONE page html 의구조 <body> <div id="section01"> <div class="menu_box"> <div class="logo"><a href="#section01">ralrari</a></div> <ul> <li><a href="#section01">home</a></li> <li><a href="#section02">company</a></li> <li><a href="#section03">portfolio</a></li> <li><a href="#section04">news</a></li> <li><a href="#section05">contact</a></li> </ul> </div> </div> <div id="section02"></div> <div id="section03"></div> <div id="section04"></div> <div id="section05"></div> <div id= footer ></div> </body> Html frame

7 ONE page html+css 설정 <div class="logo"> <div class="menu_box"> <ul> <div id="section01 >

8 <div id="section01"> <div class="menu_box"> <div class="logo"><a href="#section01">ralrari</a></div> <ul> <li><a href="#section01">home</a></li> <li><a href="#section02">company</a></li> <li><a href="#section03">portfolio</a></li> <li><a href="#section04">news</a></li> <li><a href="#section05">contact</a></li> </ul> </div> </div> #section01{ width:100%; height:1000px; background:#fff url(img/home-banner.jpg) top center no-repeat;}.menu_box{ width:100%; height:90px; color:#fff; position:fixed;}.logo a{ font-size:46px; padding:15px px; float:left; color:#fff; font-family: 'OpenSans',Arial,Helvetica,sans-serif; text-decoration:none;}.menu_box > ul{ float:right; padding:0 35px 0 0;}.menu_box li{ float:left; text-align:center; width:100px; }

9 body {background-color:#ffffff;} #container {background-color:transparent;} /* 배경투명하게 */ body {background-image:url("image/bg.gif");} /* 관용색명사용 */background-color:red; /* 16 진수사용 */ background-color:#ff0000; /* RGB 사용 ( 포토샵팔레트참고 ) */ background-color:rgb(255,0,0); /* RGB 색상에투명도사용 ( 맨마지막 0.5 는투명도 50%) */ background-color:rgba(255,0,0,0.5);

10 Type1 <div id="container"> <div id="content"></div> <div id="sidebar"></div> </div> #container {width:600px;} #content {width:400px; float:left; background-color:#000000;} #sidebar {width:200px; float:left; background-color:#ffffff;} /*id 네임 content 의링크스타일 */ #content a {color:#ffffff;} /*id 네임 sidebar 의링크스타일 */ #sidebar a {color:#000000;}

14 링크스타일을정의내리는 CSS 구문 a:link {text-decoration:none; color:#000000;} a:hover {text-decoration:none; color:#000000;} a:active {text-decoration:none; color:#000000;} a:visited {text-decoration:none; color:#000000;} a:link 는일반적으로보여지는링크의스타일입니다. a:hover는마우스를가져갔을때의링크스타일입니다. a:active는해당링크를클릭했을때의링크스타일입니다. a:visited는방문하였던링크의스타일입니다..menu_box li a{ text-decoration:none; color:#fff; line-height:100px; font-family: 'Open Sans'; font-size:14px;}.menu_box li a:hover{border-top:2px solid #6FF; padding-top:40px; color:#6ff;}

jquery 란 jquery 는자바스크립트의생산성을향상시켜주는자바스크립트라이브러리입니다. 라이브러리란자주사용되는로직들을재활용, 유통가능하도록만든로직들의묶음을의미합니다. jquery 를이용하면순수한자바스크립트로코딩하는것보다 10 배이상생산성을높일수있습니다.

15 jquery 란 jquery 는자바스크립트의생산성을향상시켜주는자바스크립트라이브러리입니다. 라이브러리란자주사용되는로직들을재활용, 유통가능하도록만든로직들의묶음을의미합니다. jquery 를이용하면순수한자바스크립트로코딩하는것보다 10 배이상생산성을높일수있습니다. 또 jquery 는파생된라이브러리들을가지고있는데요. jquery UI 는 jquery 기반의 GUI 라이브러리입니다. 이것을이용해서윈도우에플리케이션과같은기능성의 UI 를만들수있습니다. 최근에는 jquery Mobile 라는이름의모바일라이브러리를출시해서모바일용웹에플리케이션을만드는데도많은도움을주고있습니다.

16 <html> <head> <meta charset="utf-8"> <title>untitled Document</title> <script src=" <style> 스크롤움직임을주는 js 소스 제이쿼리소스 <script> /** 스크롤이설정한높이이상내려갔을때스타일추가하기 **/ if (jquery(window).width() > 0) { jquery(window).on("scroll",function(ev){ if(jquery(window).scrolltop() > 150 ) { /** 높이픽셀조정 **/ 150 픽셀만큼내려갔을때.main_box 클래스에.fixed 클래스를추가해주는방식 jquery('.menu_box').addclass('fixed'); /** 위의높이에서.fixed 클래스를추가합니다. 스타일에서자유롭게수치조절가능.**/ } else{ jquery('.menu_box').removeclass('fixed'); } return false; }); } </script> </body> /** 마우스부드럽게해당위치로이동 **/ $(function(){ $('a[href^=#]').click(function() { var speed = 800; var href= $(this).attr("href"); var target = $(href == "#" href == ""? 'html' : href); var position = target.offset().top; $('body,html').animate({scrolltop:position}, speed, 'swing'); return false; }); });

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width