웹 애플리케이션 만들기 실습

HTML

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었고, 2015년 6월 이후에 폐지됩니다. 개편된 수업에서 뵙겠습니다.http://opentutorials.org/course/1688

언어란 무엇인가?

지금까지 프로그래밍을 위한 준비작업을 했다면 이제부터는 본격적으로 프로그래밍을 시작 할 것이다. 용어 정리를 간단히 정리 해보자. 프로그래밍이란 프로그램을 만드는 행위를 의미한다. 프로그래밍은 그 프로그램이 어떻게 동작할 것인가에 대한 일종의 설계도가 필요한데 이것을 코드(code)라고 부르고, 이 코드를 만드는 행위를 코딩(coding)이라고 한다. 코드는 사람인 프로그래머가 이해할 수 있고, 기계인 컴퓨터도 이해할 수 있도록 약속된 형식을 가지고 있는데, 이 형식을 언어(language)라고 부른다.

잘 아시다시피 언어란 소통을 위한 도구다. 소통을 위해서 제일 중요한 것은 어떤 기호가 어떤 의미를 지니는지에 대한 공통의 합의 즉 약속이 제일 중요하다. 이 약속을 언어의 세계에서는 문법(syntax)이라고 하고, 컴퓨터 프로그래밍의 세계에서도 똑같이 문법이라고 부른다. 그래서 문법을 익히는 것은 프로그래밍의 세계에서 매우 중요한 일이다. 하지만 두려워할 필요는 없다. 프로그래밍 언어는 인간의 언어에 비하면 매우 단순하다. 지금부터 배울 HTML은 문법 자체를 이해하는데 (10분은 너무하고) 20분도 걸리지 않는다.

HTML이란?

HTML이란 웹페이지를 만들기 위한 언어다. HTML 문법에 맞게 코드를 작성해서 브라우저로 열어보면 브라우저는 이것을 해석해서 사람이 이해할 수 있는 웹페이지를 만든다.

HTML에 대한 자세한 내용은 생활코딩 HTML 수업을 참고하자. http://opentutorials.org/course/11

기본지식

HTML과 웹페이지의 관계

HTML은 마크업이라는 형식의 언어다. 어떤 정보가 있을 때 그 정보의 성격이나 기능을 태그라는 형식으로 감싸는 것이 마크업이다.

다음 예제에서 <h1>을 태그(tag)라고 부르고, <h1>을 여는 태그 </h1>을 닫는 태그라고 부른다. h1은 웹페이지에서 가장 큰 제목을 의미하는 태그인데 Hello world라는 문자를 열리는 태그 <h1>과 닫히는 태그 </h1>으로 감싸면 브라우저는 Hello world가 가장 큰 제목임을 알게 되면서 이 문자열을 크고 진하게 화면에 표시한다.

<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>

다음은 위의 예제를 브라우저에서 실행한 결과다.

다음 예제는 링크를 만드는 예제다. 이 예제에서 열리는 태그는 <a>이고 닫히는 태그는 </a>인데 a 태그는 생활코딩이라는 문자가 링크임을 브라우저에게 알려주고 있다. href="http://opentutorials.org" 와 같은 것을 속성이라고 부르는데, href는 속성명, http;//opentutorials.org는 속성 값이라고 한다. href 속성의 역할은 링크가 어떤 문서를 가르키는지를 명시하는 것이다. 태그만으로는 그 태그가 감싸고 있는 컨텐츠의 성격이나 기능을 나타내기 어려운 경우 속성이 사용된다.

<a href="http://opentutorials.org">opentutorials.org</a>

위의 코드는 아래와 같은 링크를 만든다.

opentutorials.org

위와 같이 태그는 약속이다. h1은 제목을 a 태그는 링크를 의미한다는 약속이 이미 맺어져 있다. 그래서 하나의 HTML 코드를 작성하면 모든 브라우저에서 거의 동일한 화면을 볼 수 있는 것이다. 바로 이 약속을 이해하는 것이 웹페이지를 만드는 기본이 된다. 아래의 링크를 방문해보면 생활코딩에서 공동번역을 진행 중인 HTML 태그 사전이 있다. http://opentutorials.org/course/8 이 태그 사전의 목록들이 HTML 웹페이지를 만드는데 동원되는 태그들이다. 양에 주눅이 들지 말자. 자주 사용하는 태그는 이것보다 훨씬 적고, 어떤 태그가 있는지만 대충 알고 있으면 그때그때 사전의 도움을 받으면 된다. 생활코딩 HTML 수업을 듣는 것만으로도 기본적으로 알고 있어야 하는 태그들을 자연스럽게 알게 된다. http://opentutorials.org/course/11

HTML 실습

이제 웹페이지를 직접 만들어보자.

에디터를 실행한다. 이번 수업에서는 aptana를 에디터로 사용할 것이다. (http://opentutorials.org/course/488/2604)

opentutorials 프로젝트에 마우스 포인트를 올려놓고 오른쪽 클릭한 후에  new > file 을 선택한다. new file 창에서 File name으로 sample.html을 입력하고 Finish 버튼을 누른다.

그리고 아래 내용을 복사해서 입력한 후에 저장한다.

<html>
       <head>
               <title>opentutorials.org</title>
       </head>
	<body>
		<h1>Hello world</h1>
		<h2>Hello world</h2>
		<h3>Hello world</h3>
		<a href="http://opentutorials.org">coding everybody</a>
	</body>
</html>

firefox를 실행하고 주소표줄에 아래 URL을 입력한다.

http://localhost/opentutorials/sample.html

아래와 같은 결과가 출력되면 당신은 직접 서버를 구축해서 자신이 작성한 HTML문서를 화면에 표시하는 웹서비스를 만든 것이다! 그 결과가 약간 소박하기는 하지만, 앞으로 다양한 기술을 익혀가면서 점점 세련된 결과를 얻게 될 것이다.

기본 태그

위에서 실행한 예제 코드를 보면 몇 가지 태그가 등장하는데 각 쓰임은 아래와 같다.

  • html : 이 문서가 html 문서임을 의미하는 태그다. 모든 태그는 <html>과 </html>태그 사이에 온다.
  • head : 웹페이지의 제목이나 작성자나 키워드와 같이 그 문서 자체를 설명하는 정보가 온다. 화면에 출력되지 않는다.
  • title : head 태그 안쪽에 등장해야 하고 그 문서의 제목을 의미한다.
  • body : 웹페이지의 실제 정보가 등장한다.

opentutorials 의 HTML 실습

제일 먼저 해야 할 것은 UI 모델링에서 그린 기본 골격을 HTML로 만드는 것이다. 아래는 그림은 UI 모델링 수업에서 그려본 대략적인 서비스의 구성이다.

UI 모델링

전체 코드

위의 그림을 HTML 코드로 작성하면 아래와 같다. opentutorials 프로젝트의 index.html 파일에 아래의 코드를 복사&붙여넣기하고 저장한다. HTML 코딩에는 정답이 없다. 그 코드를 만드는 사람의 취향과 목적에 따라서 다양한 형태의 코드가 나올 수 있기 때문에 꼭 아래와 같이 해야 하는 것은 아니다.  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>

	<body id="body">
		<div>
			<header>
				<h1>JavaScript</h1>
			</header>
			<div id="toolbar">
				<input type="button" value="black" />
				<input type="button" value="white" />
			</div>
			<nav>
				<ul>
					<li><a href="http://opentutorials.org/course/49/17">JavaScript</a></li>
					<li><a href="http://opentutorials.org/course/49/16">변수와 상수</a></li>
					<li><a href="http://opentutorials.org/course/49/18">연산자</a></li>
					<li><a href="http://opentutorials.org/course/49/19">함수</a></li>
					<li><a href="http://opentutorials.org/course/49/20">이벤트</a></li>
					<li><a href="http://opentutorials.org/course/49/21">객체</a></li>
				</ul>
			</nav>
			<article>
				<h2>변수와 상수</h2>
				<div>
					<p>변수란</p>
					<ul>
						<li>
							변하는 값
						</li>
						<li>
							x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
						</li>
					</ul>
					<p>
						상수란
					</p>
					<ul>
						<li>
							변하지 않는 값
						</li>
						<li>
							x = 10 일 때 오른쪽항인 10이 상수가 된다.
						</li>
					</ul>
				</div>
			</article>
		</div>
	</body>
</html>

실행

웹브라우저를 이용해서 이 파일에 접속한다.

http://localhost/opentutorials/index.html

실행 결과는 아래와 같을 것이다. UI 모델링에서 그린 모습과는 많이 다르다. 걱정 말자. 디자인은 CSS라는 언어의 몫이다. HTML은 정보를 표현하는 언어이기 때문에 시각적인 부분은 신경 쓰지 않아도 된다. 이게 무슨 뜻인지는 다음 강의인 CSS 편에서 곧 알게 된다.

헤더영역

전체 코드를 봤으니 부분별로 살펴보자. 아래는 상단의 헤드 부분이다.

<header>
        <h1>JavaScript</h1>
</header>

header 태그는 이 태그가 감싸는 컨텐츠가(위의 예제에서는 <h1>...</h1>) 제목이나 로고 또는 검색과 같이 통상 페이지의 최상단에 등장하는 정보들을 그룹핑할 때 사용된다.

웹페이지들은 관습적인 구성을 가지고 있는데, 예를 들어 상단에는 타이틀이 오고, 왼쪽 측면에는 다른 페이지로 이동할 수 있는 네비게이션이 위치하고, 최하단에는 (회사소개나 도움말과 같은) 부가적인 정보 페이지로 이동하는 푸터(footer)를 가지고 있다. 이런 관습적인 구성을 표현하기 위해서 아래와 같은 태그들이 준비되어 있다.

  • header : 페이지의 제목이나 검색창과 같은 요소. 블로그로 치면 블로그의 제목
  • nav : 다른 페이지로 이동할 수 있는 메뉴와 같은 요소. 블로그로 치면 방명록이나 관리자로 이동할 수 있는 링크들
  • aside :  그 페이지의 핵심적인 컨텐츠와는 큰 관련이 없는 부가적인 요소들이 온다. 블로그로 치면 사이드 바에 있는 최근 글이나 카테고리
  • article : 페이지의 핵심적인 내용에 해당하는 요소. 블로그로 치면 본문
  • footer : 페이지의 하단에 오는 요소들. 회사소개, 도움말, 개인정보 보호정책 등

<h1> 태그는 그 페이지에서 가장 중요한 제목이 온다. 중요한 제목이 무엇인가를 판단하는 편리한 방법은 가장 크게 표시되어야 하는 정보가 무엇인가를 생각해보는 것이다. 예제에서는 수업의 제목인 JavaScript를 h1태그가 감싸고 있다.

테마기능

사용자의 취향에 따라서 검은색/흰색 배경의 디자인을 선택할 수 있도록 버튼을 제공한다. 이 기능은 html만으로는 구현할 수 없기 때문에 현재는 동작하지 않는다.

<div id="toolbar">
    <input type="button" value="black" />
    <input type="button" value="white" />
</div>

div 태그는 특별한 의미가 있는 태그가 아니고, 태그와 태그들의 경계를 설정할 때 사용한다. 위의 예제에서는 두개의 input 태그를 하나로 그룹핑해서 다른 태그들과 구분하고 있다.

네비게이션 영역

네비게이션은 다른 페이지로 쉽게 이동할 수 있도록 한 목록을 의미한다. UI 모델링 그림에서는 아래의 부분이 여기에 해당한다.

코드는 아래와 같다.

<nav>
    <ul>
        <li><a href="http://opentutorials.org/course/49/16">JavaScript</a></li>
        <li><a href="http://opentutorials.org/course/49/17">변수와 상수</a></li>
        <li><a href="http://opentutorials.org/course/49/18">연산자</a></li>
        <li><a href="http://opentutorials.org/course/49/19">함수</a></li>
        <li><a href="http://opentutorials.org/course/49/20">이벤트</a></li>
        <li><a href="http://opentutorials.org/course/49/21">객체</a></li>
    </ul>
</nav>

nav 태그는 header 태그처럼 그 하위 컨텐츠들이 네비게이션의 역할을 한다는 것을 의미하는 태그다.

ul 태그는 목록을 의미한다. 이 태그의 하위 태그로 등장하는 li 태그는 앞에 점이 붙어서 이 태그들이 목록의 항목을 나타내고 있음을 시각적으로 표현한다.

예제에서는 각각의 토픽을 의미하는 'javascript, 변수와 상수, 연산자'등이 일종의 목록이기 때문에 ul 태그를 사용했다. 목록에 대한 자세한 내용은 생활코딩 HTML 목록 편을 참고한다. http://opentutorials.org/course/11/67

본문 영역

<article>
	<h2>변수와 상수</h2>
	<div>
		<p>
			변수란
		</p>
		<ul>
			<li>
				변하는 값
			</li>
			<li>
				x = 10 일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.
			</li>
		</ul>
		<p>
			상수란
		</p>
		<ul>
			<li>
				변하지 않는 값
			</li>
			<li>
				x = 10 일 때 오른쪽항인 10이 상수가 된다.
			</li>
		</ul>
	</div>
</article>

기획안에 따르면 본문은 크게 두 개의 정보가 표시된다. 토픽의 제목과 본문의 내용이다. 이제 '제목' 하면 떠올라야 하는 태그가 있다. <h1>, <h2>... 말이다. 그런데 기획상 이 페이지 상에서 가장 크게 표시돼야 하는 것은 "JavaScript"라는 수업의 제목이다. 그 다음에 크게 표시돼야 할 것이 본문의 제목이기 때문에 제목의 태그로 h2를 사용했다. 그리고 본문이 시작되는 부분은 div 태그로 감싸줬는데 div 태그는 지금까지 살펴본 태그들과 다르게 특별한 의미를 가지고 있지 않다. 그냥 필요에 따라서 태그들을 그룹핑해서 구획을 나누는데 사용된다. div 태그 안쪽의 내용들은 본문의 내용인데, 이 부분은 샘플이기 때문에 따로 설명하지 않는다.

버전관리

이렇게 해서 HTML코딩이 끝났다. 만약 git으로 버전관리를 하고 있다면 지금까지 작업한 내용을 커밋해서 로컬 저장소로 동기화하자.

1. 터미널을 실행한다.

2. 작업 중인 디렉토리로 이동한다.

cd /var/www/opentutorials

3. 추가된 파일인 index.html에 대한 버전관리를 시작한다.

git add index.html

4. 작업한 내용을 커밋한다. 'add html' 부분은 작업이력이기 때문에 취향에 따라서 메시지를 바꿔보자.

git commit -am 'add html'

이제 로컬 저장소와 원격저장소를 동기화하자. git pull로 원격 저장소의 소스를 우선 다운로드하고, git push로 로컬의 소스를 업로드한다.

git pull origin master;
git push origin master;

지금까지 작업한 내용을 github.com으로 업로드 했다. github.com을 방문해서 자신의 저장소를 확인해보자.

정리

지금까지 매우 간단한 형태의 HTML 마크업을 해봤다. HTML은 이해하기 쉬운 언어다. 하지만 프로그래밍을 처음 시작하는 입장에서는 쉬운 것도 당연히 어렵다. 그렇다고 너무 걱정할 필요는 없다. 후속 수업에서도 지속적으로 HTML과 관련된 언급을 반복할 것이고, 생활코딩의 HTML 수업을 통해서 HTML에 대한 체계적인 지식을 구축할 수 있을 것이다. 다음 수업에서는 CSS라는 기술을 이용해서 못생긴 웹페이지를 디자인해볼 것이다.

사족. 이 많은 것을 암기해야 하나?

프로그래밍 입문자의 시작을 돕다보면  기억에 의존해서 코드를 짜야 한다는 강박관념을 발견하게 됩니다. 프로그래밍의 궁극적인 경지는 머릿속에 담겨있는 지식으로 일필휘지 코딩하는 것이라는 건 맞습니다. 하지만 이것은 다시 강조하지만 '경지' 입니다. 여러분은 (참조할 정보를 의미하는레퍼런스가 넘쳐나는 인터넷을 가장 중요한 도구로 실제 코딩을 하게 됩니다. 모르는 것은 찾아봐야 합니다. 자주 찾는 지식은 머리속에 남아서 자연스럽게 암기될 것이고, 자주 찾지 않는 지식은 도태될 것입니다. 이런 과정을 반복하다보면 효율적이면서 개인화된 레퍼런스가 머리속에 만들어지게 되고 결국 궁극적인 경지에 도달하게 되는 것이죠. 암기는 시험을 치뤄야 하는 공교육과 검색 불가인 올드 정보들의 한계가 가져온 저주입니다. 한때는 암기가 필요한 시대도 있었을 것입니다. 하지만 세상이 바뀌었는데도 암기는 가장 중요한 학습방법으로 남아있습니다. 다시 한번 강조하지만 실무 공학에서 암기란 없습니다. 지루하게 암기하지 마시고, 즐겁게 경험하시길 바랍니다. 코딩은 세상에서 제일 재미있는 일입니다. 

댓글

본 수업은 웹 애플리케이션 만들기 수업으로 대체 되었습니다. 개편된 수업에서 뵙겠습니다. 본 수업은 2015년 6월 이후에 폐지됩니다. http://opentutorials.org/course/1688

 

궁금하신 점은 각 강의의 댓글로 문의해주세요. 답변이 없는 것은 운영자가 못 봤거나 모르는 것입니다. 생활코딩 커뮤니티에 질문하면 더 많은 분의 도움을 받을 수 있습니다. 그리고 문제를 해결했다면 본문의 댓글로 공유해주시면 다른 분에게 큰 도움이 됩니다. 원하는 답변을 얻는 것은 확률의 문제입니다. 질문의 품질이 높으면 그 확률도 올라갑니다. 질문자의 상황을 더 잘 전달하기 위해서 screenr.com이나 이미지 캡처의 이용을 권합니다.

 

댓글 본문
작성자
비밀번호
  1. 샘물
    강의 잘 봤습니다.ㅎㅎ
    질문요~
    editplus3에서 a href 가 안 먹히네요...
    다음 소스에서요

    <a href="C:\Program Files\eps\EditPlus 3\사진\문구.html"><img src="C:\Program Files\eps\EditPlus 3\사진\11.gif"></a>

    html파일 내용은>>>>><p>문구</p>
    html파일을 마우스 오른쪽버튼으로 눌러서 url을 복사해서 링크했거든요.. 실제로 사진을 눌러보면 >>웹페이지를 표시할 수 없습니다<<라고 뜨네요.. 뭐가 잘못된걸까요. ㅜ
  2. 사족이 그냥 사족이 아니라 힘이 되는 말이네요 :)
    이번 강의도 즐겁게 잘 들었습니다!
  3. 또롱
    좋은강의 감사합니다!
  4. zoeas
    신민호 / 브라우저에 따라 다르긴한데 오른쪽 클릭시 소스보기 말고
    요소검사란게 있습니다. 익스플로러는 모르겠고 , 파폭이랑 크롬은 있습니다
    영어론 inspector? 뭐 그렇게 되어있을텐데
    클릭하면 css는 물론 html에 자바스크립트콘솔, 네트워크랑 지금 뭘 주고 받고 있는지, 쿠키, DB 다나옵니다
    무엇보다 css를 직접 바꿔볼 수가 있죠.
  5. 신민호
    브라우저에서 소스코드 보기할경우 HTML 코드만보이나요?
    CSS는 어떻게 볼 수 있어요?
  6. 빛나는새벽
    감사합니다.
  7. justin
    혹시 링크 부분의 코드 (<a> 테그부터 </a>테그까지) 를 알려주실 수 있나요?
    에러 코드도 많은 정보를 주지만, 보통은 코드 자체를 천천히 훑어보면 간단한 문법오류(syntax error)에 의해 에러가 나는 경우가 많습니다.
    아래는 제가 쓴 네이버 링크 테그입니다. 도움 되시길 바랍니다 :)
    <a href="http://www.naver.com">네이버</a>
    대화보기
    • 지우개
      안녕하세요~ 어제부터 강의를 듣고있는 1인입니다.
      먼저 강의 너무재밌게잘듣고있습니다. 어제 Aptana Studio3를 설치하여 사용중에 제가...이상한걸 많이 만졌더니
      제일 위에 메뉴바만 나오고 다른 기능을 사용할수 있는 기능바(?)는 사라져버렸네요...
      지금 나와있는건
      File Edit Navigate Search Project Commands Run Windows Help만 나타나네요...
      기능을 몰라서 손도못대고있는데... 강의 4 듣다가 말았네요
      ㅜㅜ 감사합니다~
    • 수지
      안녕하세요
      오늘 a href로 링크 연습을 하는데 아래의 에러창이 계속 뜨네요.
      어떻게 수정해야 하는지 아시는 분 있다면 답변 부탁드리겠습니다
      감사합니다~

      다음 웹 주소(file:///Users/LUCKYCHAE/Desktop/�€쐆ttps://www.naver.com�€�)에 대해 발견된 웹페이지가 없습니다.
      오류 코드: ERR_FILE_NOT_FOUND
    • Organic media
      노트북 환경이 좋지 않아 실습을 건너뛰고 있지만, 큰 도움이 되고 있습니다.
    • 도로시
      제가 지금 세상에서 제일 재미있는 일을 하고 있군요 :)
    • egoing
      게스트 확장 도구 설치하셨죠?
      대화보기
      • hskim
        웹에 있는 코드를 aptana 에 붙여넣는 방법이 있나요?

        클립보드를 양방향으로 설정해도 안되서요
      • egoing
        아뇨! 계속 뛰어넘으셔요!!
        대화보기
        • 버전관리는 너무 어려워서 뛰어넘고 이번 수업으로 왔는데
          마지막 부분에 버전관리가 나오네요...
          돌아가서 다시 하고 와야 하나요?
        • 조드군
          감사합니다. 최고의 강의입니다.
        • overman
          감사합니다.
        • hxzx
          「다시 한번 강조하지만 실무 공학에서 암기란 없습니다. 지루하게 암기하지 마시고, 즐겁게 경험하시길 바랍니다. 코딩은 세상에서 제일 재미있는 일입니다. 」
          >> 감사합니다. 코딩의 재미를 느껴가도록 하겠습니다-
        • egoing
          출력 되지 않는게 아니고 출력되지 않는 녀석들을 거기에 넣는다고 해석해주세요. 거기에 넣는다고 출력 안하고 하지는 않습니다. 말이 좀 이상한가요? ^^
          대화보기
          • egoing
            ^^ 고맙습니다
            대화보기
            • 암기하지말고 즐겁게 경험하라는 말 너무 와닿습니다. 정말 고맙네요. 그저 프로그래밍을 배우는 것 뿐아니라 프로그래밍에 대한 가치관이나 시선을 달리하게 되는 좋은 강의 인것 같습니다!
            • hojun
              음, 헤드 태그 안에 내용은 화면에 출력되지 않는다고 하셧잖아요? 그런데 제가

              ....
              <head>
              made by benny
              <title> open~~ </title>
              </head>
              <body>
              <h1>hello world</h1>
              ......

              라고 입력하니까

              made by benny
              Hello world
              ...

              라고 페이지에 표시가 되더라구요;, '화면에 출력되지 않는다' 는 말을 제가 잘못이해한건가요?
            • 김소희 :)
              전부 다 이해하지는 못했지만 잘 따라가고 있어요 :) 이해하지 못하는데도 재미있다니 너무 신기해요 :)
            • 포스만빵
              싱크 성공 했네요 ㅎㅎ
            • MisticStar
              감사합니다. html을 과거에 잠시 접해보고, 수업을 통해 다시 접해보니 새롭기도하고 이고잉님의 설명이 이해가 잘 되네요 ^^ 좋은 컨텐츠 만들어주셔서 감사합니다!
            • 박종길
              특히! 압타나의 기능, 편리성에 놀랐습니다.
              감사합니다.
            • HOTSHOT
              코딩은 세상에서 제일 재미있는 일입니다. 덕분에 세상에서 제일 재미있는 일을 할 수 있겠군요.
            • 말짱황
              덜덜 떨 타이밍에 적절하게 다독거려 주시네요.ㅋㅋ
              뭔가 체계적으로 배운다는 느낌 건 참 오랜만인 것 같습니다.
              기분 좋게 다음 단계로 가겠습니다 ㅎ
            • ziki
              "지루하게 암기하지 마시고, 즐겁게 경험하시길 바랍니다." 아무렴요. ^^
            • rustypassion
              자 이제 시작입니다. 흥분됩니다.
              두서없이 지금까지 머릿속 넣어만 두었던 수많은 정보들이 하나씩 제 자리를 찾아가는 느낌입니다.
              오늘도 훌륭한 수업 감사합니다.
            • erdia22
              웹 페이지에 내가 원하는 문자를 나타낸다는 것이 신기하네요. ^^
              잘 따라가고 있습니다. 정말 감사합니다.
            • 김윤
              감사합니다 :)
            • 라울
              감사합니다! 10:12 PM
            • evidagoogoo
              aptana에서 복사와 붙여넣기가 안되는 것은 무었때문일까요?
              다른것은 이상없이 잘 되는데 말이지요~
              아시는 분은 답변 부탁드려요.
            • 굵은감자
              벌써부터 어렵네요....
            • David Jung
              코딩은 세상에서 제일 재미있는 일. 코딩의 즐거운 정의이군요 !
            • 열심히
              강의잘 듣고 있습니다. WAMP 설치하고 따라하고 있는데 한글 폰트가 깨지는 현상이 있습니다. 어떻게 해결할 수 있나요?
            • ture
              "코딩은 세상에서 제일 재미있는 일입니다." 라는 문장에서 깊은 동의를 하게 됩니다..<br />
              <br />
              아직 제대로 아는 것도 없는데....^^;;;
            • 쌈닭
              잘 보고 갑니다...^^
            • 박태웅
              html tag의 의미에 대한 잘 정리한 설명이 있군요. 공유합니다.
              http://www.w3.org......k...
              href와 같은게 hypertext reference의 약자였다는 것과 같은 내용을 알려줍니다.
            • 압타놔
              git add index.html을 입력하였더니.
              error: file write error(??? ?? ??? ??)fatal: unable to write sha1 file이라는 메세지가 뜨는 데요. 왜그런걸까요 ㅠ 어떻게 해결해야하죠.
            • dusskapark
              여기서 이제 html로 넘어가면 되는 것이군요
            • Sehyeon Jo
              "코딩은 세상에서 제일 재미있는 일입니다."라는 말에 동의합니다~
            • oh535
              정말 재밌어요~~!
            • hacktree
              마지막 글이 너무멋있는데요 ㅎ 암기는 저주이다. 즐겁게 경험하자~
            • egoing
              ㅎㅎ 고쳤습니다. ^^
              대화보기
              • golee28
                음 다른 부분도 다 제목과 동일한 링크는 아니군요... 그게 중요한건 아니니깐요;; 괜히 댓글 달았나 싶군요~ 전 계속 청강하러 휭~
                대화보기
                • golee28
                  윽 댓글에도 태그가 되는군요...(댓글 수정은 안되나봐요? 아무리 찾아봐도 수정하는 버튼이 안보이네용;;)JavaScript = http://opentutorials.org......와 상수 = http://opentutorials.org/cours...
                  대화보기
                  • GOLee
                    이렇게쉽고 재밌게 강좌를 해주셔서 너무 감사드립니다 (그것도 무료로!! TAT)b)그리고 크게 상관없는 내용이긴 한데 위에 링크중에 "JavaScript" 와 "변수와 상수" 링크가 서로 바뀐듯 합니다.
                    <li>JavaScript</li><li>변수와 상수</li>
                    이게 서로 맞는 링크인듯 합니다 ^^
                  • LeeYongGi
                    "코딩은 세상에서 제일 재미있는 일입니다." 마음을 두근대게 만드는 말이네요. 실제로 그런지는 아직 모르겠습니다. 하지만 열심히 따라가서 저도 꼭 느껴보고 싶군요.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기