Embed Size (px)
Citation preview
ONE page html 이란?
원페이지는 최근의 홈페이지 제작 트렌드로 한 페이지에 상단에서 하단으로의 마우스 스크롤링을 통해서 컨텐츠를 보여주는 스타일의 홈페이지입니다.
USER의 시선을 분산시키지 않고 위쪽에서 아래쪽으로 마우스 스크롤링을 통해서 홈페이지의 컨텐츠를 보여주게 됩니다. 반응형으로 제작되어 스마트폰,아이패드,태블릿,PC, 노트북등 다양한 디바이스에서 자동으로 최적화됩니다.
http://itsoncraft.com/ http://ryanjohnson.me/
https://onepagelove.com/
ONE page 웹사이트 사례
ONE page 정보구조
상단에는 로고와 메뉴가 있다. 정보의 박스(영역) 가 차례대로 세로정렬로 배치되어 있다. 정보의 박스안에는 각요소가 들어가 있다. 메뉴를 누르면 각 영역으로 이동한다.
ONE page 웹사이트 디자인하기
One Page Wireframes_PSD
http://graphicburger.com/one-page-website-wireframes/
<!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>- 아래 글씨를 집어넣을 곳
<p>CopyRight @ Park Yong</p> </footer> </body> </html>
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
http://blog.naver.com/zmvk3967/220478746013
<div id="section01“>
<div class="menu_box">
<div class="logo">
<ul>
ONE page html+Css 설정
http://yongja.tistory.com/19
<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 0 0 35px; 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; }
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);
http://gskool.tistory.com/67
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;}
a:link 는 일반적으로 보여지는 링크의 스타일 입니다.
a:hover는 마우스를 가져갔을 때의 링크 스타일 입니다.
a:active는 해당 링크를 클릭했을 때의 링크 스타일 입니다.
a:visited는 방문 하였던 링크의 스타일입니다.
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;}
링크 스타일을 정의내리는 CSS구문
http://yongja.tistory.com/16
.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배 이상 생산성을 높일 수 있습니다. 또 jQuery는 파생된 라이브러리들을 가지고 있는데요. jQuery UI는 jQuery기반의 GUI 라이브러리입니다. 이것을 이용해서 윈도우 에플리케이션과 같은 기능성의 UI를 만들 수 있습니다. 최근에는 jQuery Mobile라는 이름의 모바일 라이브러리를 출시해서 모바일용 웹에플리케이션을 만드는데도 많은 도움을 주고 있습니다.
https://jquery.com/
<html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery.min.js"></script> <style>
<script> /**스크롤이 설정한 높이 이상 내려갔을때 스타일추가하기**/ if ( jQuery(window).width() > 0) { jQuery(window).on("scroll",function(ev){ if( jQuery(window).scrollTop() > 150 ) { /**높이 픽셀 조정**/ jQuery('.menu_box').addClass('fixed'); /**위의 높이에서 .fixed 클래스를 추가합니다. 스타일에서 자유롭게 수치 조절 가능.**/ } else{ jQuery('.menu_box').removeClass('fixed'); } return false; }); } /**마우스 부드럽게 해당위치로 이동**/ $(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; }); }); </script> </body>
제이쿼리 소스
스크롤 움직임을 주는 js 소스
http://blog.naver.com/zmvk3967/220478746013
150픽셀만큼 내려갔을때 .main_box클래스에 .fixed클래스를 추가해주는 방식
![VIP 이란 경제제재 해제의 한국 경제 파급 영향 160118hri.co.kr/upload/publication/2016118143357[1].pdf · 16-1 (통권 639호) 2016. 1. 18 이란 경제제재 해제의](https://img.pdfslide.tips/doc/110x75/5a79c5ea7f8b9a9b4d8ce2f5/vip-1pdf16-1-.jpg)
![Η γλʚσσα HTML - sch.gr1epal-trikal.tri.sch.gr/static/html/HTML.pdfημειώσεις HTML / JavaScript Μαρολαʗάκης Μάριος [1] Η γλʚσσα HTML HTML είναι](https://img.pdfslide.tips/doc/110x75/5f0298e87e708231d4050e7a/-ff-html-schgr1epal-f-html-javascript-oe.jpg)
