호랑사과
[생활코딩] 웹어플리케이션 만들기 2일차 본문
이 글은 오픈튜토리얼스의 생활코딩의 '웹어플리케이션 만들기'를 듣고 개인적으로 정리한 내용입니다.
굵은 글씨로 된 제목을 누르시면 해당 강좌로 이동할 수 있습니다.
HTML : Hypertext Markup Language 이론
하이퍼 텍스트는 문서와 문서가 링크로 연결 되여 있는 시스템을 말한다. 이것은 팀 버너스가 고안했다.
이런 링크로 문서와 문서가 연결되어 웹이 구성된다. 즉, 링크는 HTML의 본질이며 HTML의 본질은 웹의 본질이라 할 수 있다.
마크업 랭귀지는 태그를 이용하여 표시하는 언어를 말한다.
태그는 예시로 <strong>생활코딩</strong> 처럼 꺾쇠표시(<strong>)를 한 것을 이야기한다. 여기서 '생활코딩'은 contents라 한다.
<a> 태그는 링크를 나타내는 태그이다. <a>생활코딩</a>는 '생활코딩'에 링크가 걸려있다는 의미이다. 하지만 이 상태에는 어떤 문서와 링크가 걸려있는지 모르기 때문에 '속성'을 추가시켜 나타내야 한다.
<a href="http://opentutorials.org">생활코딩</a>
여기서 href (hypertext reference)는 속성명이라 한다.
<a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>
여기서 target="_blank"는 어떤 브라우저에 무엇을 통해서 새로운 페이지를 열 것인지에 대한 정보를 나타낸다. 여러 속성 간의 구별은 띄어쓰기로 구별한다.
리스트는 <li> </li> (list)를 사용해 나타낸다. 리스트와 다른 리스트 사이에 공백을 넣고 싶으면 <ul></ul> (unordered list)로 각각의 리스트를 감싸서 나타낸다. <ol></ol> (ordered list)로 앞머리에 번호가 붙인다.
<body>와 동급의 태그는 <head> 태그다. <body> 태그는 문서의 내용, <head> 태그는 문서의 정보를 나타낸다.
<meta charset="utf-8" />을 쓰지 않으면 한글이 깨져서 나온다.
<head> 태그 하위에 <title> 태그를 넣으면 브라우저 탭에 이름을 넣을 수 있다.
<html>태그는 이 태그 안에 있는 것들이 html 문서임을 브라우저에 알리는 역할을 한다.
팀 버너스리가 만들었지만 html이 중요한 언어로 바뀌면서 개인이 관리하기 힘들어졌다. 그래서 W3C라는 기구가 출범되어 시대에 따라 기능을 제거하거나 추가하는 일을 맡게 되었다. 여기서 의장은 역시 팀 버너스리이고 이 기구의 멤버는 MS, 삼성, 애플 등이 있다.
HTML을 작성할 때 맨 첫줄에 적는 <!DOCTYPE html>이 의미하는 것은 HTML이 어떤 표준안에 작성된 것인지를 나타낸다. 위의 내용이 각 HTML 버전별로 선언하는 코드이다.
태그는 많이 있으므로 어떤 것이 있는 지만 알고있고 사용할 때 찾아서 사용하면 된다.
위 사이트는 들어가서 사용하고자 하는 태그에 대해 검색하면 된다.
HTML의 본질은 어떠한 정보를 사람도, 컴퓨터도 이해할 수 있게 태그라는 것을 이용해서 규정하고 정의하는 것이다. 이를 시각적이고 디자인을 하기 위해 CSS라는 언어를 분리해서 사용하고 있다.
<h#>는 제목을 나타내며 1부터 오름차순으로 글자가 작아져 소제목으로 나타나게끔 한다.
사람에게, 컴퓨터에게 정보로써 가치를 높여 주기 위해 여러 기능들이 추가되어왔다. XHTML이 계승해서 HTML5까지 Web을 의미론적으로 잘 드러나게끔 만들었다.
<nav>(navigation)은 이 웹사이트에 탐색하는 정보라는 것을 나타나게 한다. 외관은 변하지 않지만 코드상에서는 네비게이션 역할을 한다는 의미가 부여된다.
<header>는 간판역할을 하는 정보라는 것을 의미 부여한다.
<article>은 이 문서에서 본문이라는 것을 나타낸다.
주소/index.html 에서 index.html은 암묵적으로 약속 되어있기 때문에 주소만 쳐도 바로 index.html로 연결된다.
도구에 대한 학습의 비용이 얼만큼 드는지도 따져봐야 한다. 빠르게 도구를 취하려고 하면 금방 좌절할 수 있다.
Version Control System은 변경된 코드들을 기록해 나가는 것을 말한다. 이것은 소스코드를 백업하여 만약의 사고에 대비하는 역할을 할 수도 있고 여러 사람과 협업을 할 때도 질서를 잡아주는 역할을 하기 때문에 중요하다.
VCS에는 SVN, Mecurial, GIT이 있는데 이 중 GIT이 가장 유망하다. 해당 링크에 들어가서 좀 더 자세히 배울 수 있다.
GIT 회사가 만든 아톰 에디터를 사용한다. 이외에도 Aptana, Sublime Text, Brackets이 있다.
아톰에서 emmet 플러그인을 설치하면 html 적고 탭만 눌러도 <html></html>로 바꿔준다. 또한 li*3>a라고 적고 탭을 누르면 보다 쉽게 링크가 포함된 리스트를 작성할 수 있다.
'작업실 > 웹프로그래밍' 카테고리의 다른 글
| [생활코딩] 웹어플리케이션 만들기 6일차 (0) | 2017.06.18 |
|---|---|
| [생활코딩] 웹어플리케이션 만들기 5일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 4일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 3일차 (0) | 2017.06.18 |
| [생활코딩] 웹어플리케이션 만들기 1일차 (0) | 2017.06.18 |
