생활코딩 오프라인 수업 라이브 - 작심40시간

Twitter Bootstrap

opentutorials.org.html 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <!-- Bootstrap -->
	<style type="text/css">
		body {
			font-size: 0.8em;
			color:#666;
			padding-top:30px;
		}
		h2 {
			font-size:35px;
			margin-bottom: 30px;
		}
	</style>
    
</head>
<body id="body">
    <div class="container">
        <header id="header" class="hero-unit">
            <h1>JavaScript</h1>
        </header>
        <div class="row">
            <nav id="nav" class="span3">
                <ul class="nav nav-tabs nav-stacked">
                    <li><a href="#">JavaScript란 무엇인가?</a></li>
                    <li><a href="#">변수</a></li>
                    <li><a href="#">상수</a></li>
                    <li><a href="#">반복문</a></li>
                    <li><a href="#">조건문</a></li>
                </ul>
            </nav>
           <article class="span9">   
                <h2 id="title">JavaScript란 무엇인가?</h2>
            
                <p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>
            
                <p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>
            
                <h3>역사</h3>
            
                <p>HTML이 한번 화면에 출력된 후에는 그 형태나 동작방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어졌다. 이후에 이 언어는 마이크로소프트의 인터넷 익스플로러에 jscript라는 이름으로 탑재된다. 후에 ECMA라는 표준화 기구로 이 언어의 관리 주체가 옮겨졌다.</p>
            
                <h3>ECMAScript</h3>
            
                <p>ECMAScript는 표준화 기구인 Ecma International에 의해서 관리되는 자바스크립트 표준안이다. 현재의 자바스크립트는 ECMAScript 3 기반으로 만들어졌고, 현재 시점(2013년)에서는 ECMAScript 5가 표준으로 정의 되었고 이 버전의 자바스크립트를 브라우저 벤더들이 자신들의 브라우저에 구현하는 작업이 한창이다. 곧 ECMAScript 5의 새로운 기능들을 웹에서도 문제 없이 사용할 수 있게 될 것이다. ECMAScript 4는 기존의 자바스크립트와 너무 큰 차이점 때문에 표준으로 채택되지 못했다.</p>
            
                <h3>JavaScript 학습에 요구되는 선행학습</h3>
            
                <p>웹페이지를 동적으로 제어하기 위한 목적으로 자바스크립트를 학습한다면 아래 내용은 반드시 선행해야한다. 아래 내용을 학습 한 후에 본 수업을 공부하고 DOM을 학습하면 웹페이지를 프로그래밍적으로 제어 할 수 있다. 최근에는 DOM을 직접 제어하는 것 보다는 jQuery와 같은 라이브러리를 사용하는 것이 일반적이다. DOM에 대한 내용은 <a href="http://opentutorials.org/course/49/24" target="_blank">DOM 수업</a>을 참고하고 jQuery에 대한 내용은 <a href="http://opentutorials.org/course/53" target="_blank">jQuery 수업</a>을 참고한다.</p>
            
            </article>
        </div>
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script src="bootstrap/js/bootstrap.min.js"></script>
    </div>
</body>
</html>

나중에 공부해주세요.

생활코딩 TwitterBootstarp

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
댓글 본문
  1. 맞아요. 저도 제이쿼리 다운로드 안되고 경고창 같은거만 뜹니다.
    대화보기
    • 래드블
      http://bootstrapk.com......ons 트위터 부트스트랩 한국어 사이트 링크입니다!
    • 초바비
      해결되었습니다.
      대화보기
      • 초바비
        재밌네요
        제가 처음 교육을 수강할 때 필요한 내용을 들은 듯 합니다.
        그런데 13강에서 들었던 제이쿼리 멈춰있는.... 저 이네요
        교육을 쭉 듣고 복습을 해봐야 할 거 같아요
        제이쿼리 다운 버전이 강의 때보다 많이 상향된 거 같아요
        다운 버전 이름을 스크립트 주소로 적어놨는데.. 왜 되지 않을까요
        답답스러운 마음................
      • 블루펜더
        잘보고 있습니다.
        너무 감사드립니다.
      • 유튜브 40시간 강의 중 TwitterBootstrap 제목이 Bootstarp 이라고 오타가 나있네요^^;;; 부트스트랩 관련 강의 제목이 다 그렇게 되어 있습니다 ㅎㅎ 수정 부탁드림~
      • 빛나는새벽
        재미있고 감사합니다
      • yson
        bootstrap 3.0 에서는 responsive feature가 기본으로 사용이 되고 있네요. 추가적인 작업이 필요 없습니다.
        mobile first ! 라고 하네요 ㅎㅎ
      • 빠쑝
        우와~ 정말 강의 하나하나가 예술입니다.
        오늘내용은 정말재밌었어요!
        이고잉님 진심으로 감사드립니다.

        내인생에 IT는 없다고 생각한 하드웨어 공돌이었는데..
        재미붙이고 있어요!!
        짱짱!!
      • 쟌이
        강의 동영상대로 안돼서 고민하고 있었는데 ^^;;

        Sunghyun Hwang 님이 가르쳐주신 방법대로 하니까 되네요.

        egoing님, Sunghyun Hwang님 모두 감사합니다. ^^
        대화보기
        • 환글
          bootstrap 이란게 이런거 였군요^^ 좋은 강의 고맙습니다.
        • egoing
          헤헤 빨리 업데이트 하도록 할께요~
          대화보기
          • Sunghyun Hwang
            먼저 좋은 강의 너무 감사드립니다 ^ ^
            확실히 bootstrap을 사용하니 페이지가 예뻐지고, 또 코딩도 편해졌네요.

            강의 자체가 bootstrap 2.3.2 버전으로 진행되는데,
            최신 버전인 3.xx 버전을 사용하실 경우 강의에서 언급되는 'span[N]' class가 작동하지 않습니다.

            span[N] 대신 col-[xx]-[x]를 사용하시면 되는데요.
            http://getbootstrap.com......rid <- 링크를 참고하시면 될 것같네요.

            예를 들어 'col-md-8' 이런식으로 사용하시면 됩니다.

            또한 강의에서 'hero unit'을 사용하는데, bootstrap 3 으로 넘어오면서 이름이
            'Jumbotron'으로 바뀌었습니다. 이 점 참고하시면 좋을 것 같네요.
            (따라서 div class = 'row jumbotron' 으로 넣으면 될 것 같네요. 약 42분경)

            동영상에서 약 45분경에 나오는 nav의 경우 bootstrap 3에서는 'stacked nav tabs'가 사라졌습니다.
            따라서 실습에서는 아쉽지만, 'nav nav-pills nav-stacked'를 사용하시면 비슷한 효과를 낼 수 있을 것 같습니다.

            ** 혹시나 bootstrap 3 버전을 사용하시면서 멘붕하실 분들을 위해 댓글 남겨 봤습니다.
          • ㅁㅁㅁ
            주소 알려주신 분들 감사합니다 ㅠ^ㅠ
          • 상상초월
            요즘 bootstrap을 들어가보면 3.1.1 버전으로 안내가 되더군요
            강의에 나와있는 그리드 레이아웃으로 실습 해보시려면 2.3.2 버전 페이지로 가셔야 하는듯 합니다. 아래 주소입니다.

            http://getbootstrap.com/2.3.2/
          • 러너잭
            아..... 저도 버전 다른거 받아 놓고 왜 안되지 계속 짜증만 내고 있었네요 ㅠㅠ
          • 한란
            클라이언트 끝!!! 여기까지 달리신분들 수고하셨습니다~
          • greenyant
            잘못해서 버전 다른것 받아서 왜 안되지? 하고 있었네요 ^^;
            나중에 공부하는 페이지에 있는 댓글, 여기에도 링크 댓글로 남깁니다
            http://getbootstrap.com/2.3.2/
          • HwangTY
            오... 부트스트랩은 혁신이에요
          • 홍즈
            오.. TwitterBootstrap 너무 좋아요
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기