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

HTML

수업의 핵심

HTML은 웹페이지에서 정보를 담당합니다.

Sublime Text 설치

패키지 메니저 설치

메뉴 > view > Show console 에서 아래 코드 입력

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Emmet 설치

메뉴 > tools > command palette 실행 후 PCI 입력 후 엔터, 입력해서 emmet 선택 

Emmet의 기본 기능

나중에 공부 해주세요

html_sample_heading.html

<!DOCTYPE html>
<html>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <h7>Heading 7</h7>
</body>
</html>

html_sample_list.html

<!DOCTYPE html>
<html>
<body>
    <ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ul>
	<ol>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
		<li>item4</li>
	</ol>
</body>
</html>

opentutorials.org.html 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<header>
	<h1>JavaScript</h1>
</header>
<nav>
	<ul>
		<li>JavaScript란 무엇인가?</li>
		<li>변수</li>
		<li>상수</li>
		<li>반복문</li>
		<li>조건문</li>
	</ul>
</nav>
<article>
	<h2>JavaScript란 무엇인가?</h2>
    
    <p>JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다.</p>
    
    <p><a href="#goal">자바스크립트로 할 수 있는 일</a>을 참고하면 알 수 있지만, 최근에는 자바스크립트가 웹을 벗어나서 광범위하게 사용되고 있다. 그 효용이 다각적이면서도 배우기 쉬운 점 때문에 자바스크립트는 중급 개발자나 프로그래밍 입문자 모두가 도전해볼만한 언어다.</p>
    
    <h2>역사</h2>
    
    <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>
</body>
</html>

나중에 공부해주세요

생활코딩 HTML 수업

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688
댓글 본문
  1. 뒤타
    선생님 emmet설치 후에 컨트롤+시프트 방향키로 에딧포인트로 이동하는게 안먹힙니다 ㅠ 혹시 방법이 있나요
  2. 작심 40시간 여기까지 잘 따라왔습니다
    정말 재밌습니다.
  3. sootea
    선생님

    Emmet 을 설치할 때 실수로 그 밑에 있는 Emmet CSS Snippets 도 설치를 해버렸어요..
    이것도 같이 설치해도 앞으로 강의 듣는데 문제는 없겠죠..? ㅠ
    만약 지장이 있다면 Emmet CSS Snippets 이거를 삭제하고 싶은데
    삭제하려고 하면은 어떻게 해야하나요?
  4. 밍밍
    수업 너무 재미있어요!!! 감사합니다ㅎㅎㅎ
  5. egoing
    힘내세요 ㅠㅠ
    대화보기
    • ㅠㅠ
      여백인 이유가 저장을 안해서 였군요. 2시간 헤맸습니다 허허
      ctrl+s
    • gowill
      emmet 완전 신통방통합니다!!^^
    • 초바비
      선생님처럼...
      html 치고 텝을 누르면 깔끔하게 안나오고, 이것저것 군더더기가 많이 붙습니다.
      분명 패키지 한 것 같은데.. 패키지가 주는. ol>li를 치면 알아서 나오는 기능은 적용이 되었는데
      저처럼 다른 분들도 쌤처럼
      html만 딱 나오고, 다른 것들은 안나오나요?
      왜이렇게 지저분...한 거죠
    • 개츠비짱
      맥에서 Sublime Text사용하고 있는데, 한글이 안뜹니다. 어떻게 해야 하는지 좀 알려주세요^^
    • 반봉
      패키지 매니저 설치할때 콘솔창에다가 import--------------싹 복사해서 붙이니까 설치되는 듯하다가
      마지막에 오류창이 떠버리는데 무시해도 되는건가요?
      1 missing dependency was just installed------------뭐라뭐라 떠요...

      일단 그냥 emmet 설치하고 일단 따라는 하고 있는데 이렇게 해도 괜찮은건가요?
    • 패키지 매니져가 설치되지 않습니다. 한 세번정도 넣었는데 계속 안되서...

      Writing file /Users/ayd1124/Desktop/joo1.html with encoding UTF-8 (atomic)
      >>> import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
      174110
      reloading plugin Package Control.bootstrap
      reloading plugin Package Control.Package Control
      reloading Packages/Package Control/Package Control.sublime-settings
      found 2 files for base name Main.sublime-menu
      reloading plugin 0_package_control_loader.00-package_control
      reloading Packages/User/Package Control.sublime-settings
      Package Control: Installing 1 missing dependency
      Package Control: Installed missing dependency bz2
      Package Control: No updated packages
      error: Package Control

      1 missing dependency was just installed. Sublime Text should be restarted, otherwise one or more of the installed packages may not function properly.
      >>> import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
      174110
      >>> import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
      174110
    • 1시간동안 안떠서 헤맷는데ㅠㅠㅠㅠㅠ코딩선비님 댓글 남겨주셔서 감사합니다
      대화보기
      • driloo
        감사합니다 ㅠㅠ 두시간 찾았어요..
        대화보기
        • emmet 설치 후에 edit point 잡아주는 ctrl + Alt + 오른쪽 방향키

          할 때마다 화면이 돌아갑니다. ㅠㅠ edit point 도 잡히지 않구요ㅠㅠ 이 문제를 어떻게 해결할까요?
        • 질문 하나 하겠습니다. sublime text에서 이고잉님의 folders 라고 되 있는 부분에 저는 open file 이라고 나와있습니다.왜 이럴까요..? ㅠㅠ
        • 별님
          ^^ 꼭 필요한 강의 같습니다
        • 빛나는새벽
          재미있게 강의를 듣고 있습니다.
        • a태그 사이에 글씨를 쓸 때 영어는 잘 쳐지는데 한글을 칠 때는 렉이 걸린다고 해야하나? 그런 식으로 되네요 왜 그러죠?
          아 그리고 한글을 입력했더니 �쐞�뼱라고 되네요.. 이게 글씨 깨지는건가요?
        • egoing
          안드로이드를 하려면 자바는 공부하셔야 합니다. 생코에 자바 강의가 있어요~
          대화보기
          • 기드
            정말 프로그래밍 코딩에 대해 아무것도 모르는 학생입니다.... 앱개발을 한 번 배워보고싶은데 이런 생활코딩 강좌가 도움이 될까요?? 아님 앱개발은 다른 방식으로 접근을 해야한가요?
          • 룽야
            강의 들을때마다 감동입니다. 궁금한게 있는데 서브라임 회사에서 사용가능한지 , 구입을 해야하는건지 ; 무료로 사용가능한가요?
          • 돼지불백
            저두 같은 경우엿는데요 저같은 경우는 파일명 정할때 .html을 안써서 그렇더라고요 한번 확인해보세요
            대화보기
            • 돼지불백
              저두 같은 경우엿는데요 저같은 경우는 파일명 정할때 .html을 안써서 그렇더라고요 한번 확인해보세요
              대화보기
              • <head> 안에 다음 줄을 넣으면 됩니다.
                <meta charset="utf-8">

                예).
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="utf-8">
                <title></title>
                </head>
                ........
                대화보기
                • Rudy
                  editing point의 경우 emmet 설치후에 ctrl + alt + right or left(왼쪽 오른쪽 화살표)입니다.
                  ctrl + shift + p 에서 edit이라고 치시면 'emmet : next edit point'라고 있을겁니다
                  대화보기
                  • 후랄랄~
                    저도 그래요... 윈7 64비트 입니다.
                    대화보기
                    • Ha Seunghyeung
                      한글깨짐현상...네이버에보고 따라해봣는데도 계속깨지는데 혹시

                      어떻게 해야되는지 알수있을까요??
                    • 두미니
                      들을때마다 감동입니다.ㅠㅠ
                    • 히바리쿄야
                      생활코드 카페에서 들어봐서 들르게 되었는데 강좌도 초보자 관점에서 설명해주시고 감동적이었습니다...

                      그런데 좀 아쉽다고 해야 될지 모르겠는데요... 동영상 강좌 들으면서 실습 하려고 하는데 타자 속도의 차이?

                      때문에 그런지... 조금 아쉬운 점이 있었네요 에디터 플러스 도구 이용해서 HTML 실습을 했었는데

                      서브라임 텍스트 툴 처음 써봐서 그런지 적응을 못했다고 해야되나 어색한 점이 많더라구요

                      좋은 강좌 올려주셔서 감사하고 사이버대학교 컴퓨터공학과 학생이지만.. 컴공이라도 컴퓨터 프로그래밍 잘하는건

                      아니더라구요 비 전공자 분들께서 오히려 프로그래밍을 잘한다는 생각이 듭니다...

                      생활 코딩을 통해서 퍼블리셔 취업을 준비중인데 이 기회를 통해서 제 인생의 터닝 포인트가 되었으면 좋겠네요

                      감사합니다..
                    • 스파그
                      커맨드 버튼이 아닌 control을 누르시면 됩니다^^
                      대화보기
                      • 춤추는개발자
                        emmet설치이후에 ctrl+alt+화살표를 누르면 editing point가 화살표에 따라 추가로 커서가 형성됩니다. 즉, 화살표를 움직일때마다 editing point가 더 늘어납니다ㅠㅠ 그래서 커서가 세로로 길어져요... 이 상태에서 문자를 입력하면 여러 개의 editing point에 똑같은 글자들이 입력이 되요... 제 컴터가 이상한 건가요?
                      • Shalom
                        Subline Text에서 다음 편집 포인트로 이동하기 위해
                        '컨트롤 R 방향키'를 이야기해주셨는데,
                        맥북에서 '커맨드 R 방향키' 했을 경우에는 상단에 @와 함께 하얀 박스가 나타나내요!
                        어떤 키를 누르면 될까요??
                      • yong jin
                        Sublime Text3 에서
                        tools 에서 command palette에서 emmet말고 이것저것 다른걸 받아 봤는데요.
                        다시 받기 전으로 초기화 할려면 어떡해 해야 하나요?
                        아무리 삭제하고 다시 받아도 계속 남아 있네요..
                        아무것도 안치고 그냥 글씨를 쳐도 html 브라우저에서 나오네요..
                        어떡해 하면 초기화를 시킬 수 있을까요??
                      • 윈7 32비트 환경에서 사용할때는 아무런 문제 없이 사용하다가
                        윈8.1 64비트에서 사용하려니깐 문제가 생기네요..

                        이게 위에서 말한 환경 때문에 안되는 건지는 잘 모르겠지만,
                        ctrl + alt + <, > 로 편집점 왔다갔다 하려고 하는데 작동이 안됩니다.

                        혹시 이거 어떻게 해결하는지 아시는 분 계실까요..?
                      • 라니
                        잘보고 갑니다!^^
                      • 우분투 운영체제로 sublime text 사용시, 단축기 ctrl+alt+화살표 로 편집점 이동 안먹히네요 ㅋ
                      • 궁금한사람
                        저기... 이상하게 ctrl + alt + 화살표방향키 단축키가 안됩니다.
                        3번째 동영상 13분쯤때부터 텍스트 편집시 다음으로 넘어갈때 저렇게
                        단축키 누르면 바로바로 넘어간다는대 전 아예 반응을 안해서요...
                        노트북이라 그런가 아니면 지금 무언가가 설치가 안된건가하여
                        이렇게 답답한 마음에 문의 드려봅니다.
                      • 배중욱
                        강의 잘 보고 있습니다~ㅎㅎ 감사합니다!!
                      • 신지영
                        강사님 우분투에서는 한글이 입력이 되는데
                        sublime text에서 한글입력이 안되는 것은 어떻게 해야할까요?
                        ....여기저기 서칭해서 시도하는데 벽이 넘 많아요^^;;
                      • 박한일
                        감사합니다.
                        대화보기
                        • egoing
                          뒤에서 한글 깨지는 문제에 대한 해결책이 나올꺼예요. 지금 한글 문제는 중요하지 않으니 계속 진행해주세요~
                          대화보기
                          • 박한일
                            한글이 깨저서 나오는데 이것을 정확히 볼려면 어떻게 해야 하나요
                          • jacob
                            저는 html 그냥 그대로 쓰고 tab을 눌렀더니 조금 다르게 나와요. 그리고 그냥 무시하고 위에 처럼 만들어서 했는데도 <a>한것처럼 해서 글씨쓰고 했는데도 열어봐도 글씨가 안나오네요~

                            왜그런지 알려주세요~

                            title이나오고 그다음 밑에 body가 나오고 그래요.. 그래서 title지우고 위에꺼 처럼 만들어보고 했는데도 크롬깔고 연결프로그램으로 했는데도 글씨가 안나오네요
                          • 환글
                            나날이 재밌어 지네요^^ 고맘습니다.
                          • 토끼
                            <html> 쓰고 탭을 하면 그냥 탭 간격만 벌어질 뿐 아무런 변화도 나타나지 않아요. 왜일까요?
                          • 코딩선비
                            너무 늦은 것은데;; 그래도 한번 올려봅니다;;ㄷㄷㄷ
                            밑에 픽시우스님 문제 해결방법인데요...
                            저두 방금 강좌보다가 빈여백으로 브라우저가 뜨더라구요;;ㅠㅠ
                            혹시나 싶어서 sublime 창에다가 실습예제를 다 쓰고 ctrl+s 눌러서 저장하고 파일을 클릭하니까
                            뙇!!! 뜹니닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

                            요약: 해결방법은 저장이었습니다!!ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
                            대화보기
                            • sSll바버미니llSs
                              너무 좋음~정말 감사요~!!
                            • 슈퍼피포
                              urllib.error.URLError: <urlopen error [WinError 10060] 연결된 구성원으로부터 응답이 없어 연결하지 못했거나, 호스트로부터 응답이 없어 연결이 끊어졌습니다>
                              Traceback (most recent call last):

                              위와 같은 에러가 발생하며 패키지 매니저 설치가 안 되네요. 소스 그대로 붙여넣었는데도 그렇네요. 인터넷 연결도 잘 되어 있는데 ㅠㅠ
                            • 픽시우스
                              소스보기를 해도 빈 공란으로 나와요
                              암것도 없어요 ㅠㅠ
                              대화보기
                              • egoing
                                크롬에서 오른쪽 클릭하고 소스 보기를 누르신 후에 나오는 코드를 알려주시겠어요?
                                대화보기
                                버전 관리
                                egoing
                                현재 버전
                                선택 버전
                                graphittie 자세히 보기