[월:] 2016 11월

html framework_bootstrap

jhj2015c댓글 남기기

BOOTSTRAP에 대한 이미지 검색결과

  • Bootstrap은 2010년 중반에 트위터 개발자 중 트위터 아이디 @mdo와 @fat을 사용하는 개발자가 만든 오픈 소스 프레임워크(framework).
  • 프레임워크란 “짜여있는 작업”이라는 뜻으로, 부트스트랩은 HTML, CSS, JavaScript 및 다양한 UI 컴포넌트로 구성되어 있다.
  • 부트스트랩에는 CSS 스타일과 jQuery를 기반으로 한 자바스크립트 그리고 컴포넌트 들로 구성되어 있다.
  • 트위터에서 개발한 UI 툴킷으로 적은 코딩으로도 유려하고 풍부한 결과를 얻을 수 있는 강력한 라이브러리.
  • 특히 반응형 웹이라는 트랜드를 반응해서 한번의 개발으로 PC와 모바일 모두에 대응할 수 있어 개발시간을 단축할 수 있고, 유지보수의 이점이 있다.
  • 또한 최고 수준의 UI 디자이너들이 디자인한 기본 디자인을 사용하면 디자이너가 아니라도 일정 수준 이상의 결과물을 얻을 수 있다.
  • 즉 효율적인 웹 디자인을 하기 위해 “미리 필요한 부분 을 작업해놓은 것”
  • 부트스트랩만 잘 활용해도 웹사이트를 빠르고 간편하게 개발할 수 있는 장점이 있다.
  • 원하는 기능이 있으면 단순하게 HTML 코드에 부트스트랩에서 정의 된 선택자만 입력하면 편리하고 빠르게 사이트를 개발할 수 있다.
  • 또한 부트스트랩 은 Responsive 즉 반응형 웹이 기본으로 적용되기 때문에 데스크탑 버전의 웹사이트에 서부터 모바일용 웹사이트까지 한꺼번에 개발할 수 있는 장점이 있다

https://opentutorials.org/course/477

부트스트랩 3.0 PDF

부트스트랩으로 디자인하라

w3school Bootstrap 3 Tutorial

http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

BOOTSTRAP DOWNLOAD

http://bootstrapk.com/
http://getbootstrap.com

한글강좌
http://maczniak.github.io/bootstrap/index.html
http://maczniak.github.io/bootstrap/components.html

 

한글 레이아웃 강좌

https://www.codingfactory.net/node/1054

onepage html

jhj2015c댓글 남기기

ONE page html 이란?
ONE page html 의 정보구조
ONE page html 코딩하기

  1.  html 정보설계
  2.  css 레이아웃
  3.  js 적용

닷홈에 업로드

Aptana 설치

http://www.aptana.com/products/studio3/download 여기에서 standard version을 다운

http://superjang.com/archives/2265

ONEPAGE 코드

<!doctype html>

http://code.jquery.com/jquery.min.js

Moves Like Jagger ft

우리나라에서 마룬5의 인기는 식을 줄을 몰라서 Moves Like Jagger는.
Payphone, One More Night와 함께 멜론차트 1, 2, 3위를 차지하고 있어요.

내용1
내용2
내용3

head 안에 추가하기

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

/**마우스 부드럽게 해당위치로 이동**/

$(function(){
$(‘.tmenu a’).click(function(){
scrollDiv($($(this).attr(‘href’)), 40);
});

function scrollDiv(divElement, navHeight){

var offset= divElement.offset();
var offsetTop= offset.top;
var totalScroll= offsetTop-navHeight;

$(‘body’).animate({ scrollTop: totalScroll }, 500);
}
});

a1