고급 HTML 공부 기본 HTML
특성이란 태그 안에 들어가는 정보를 의미한다. 이 정보를 이용해서 시작 및 마침 태그 안에 들어가는 내용에 대한 추가 정보를 줄 수 있다. 특성들은 절대 혼자서 쓰이지 않는다. 특성은 이름=값 형태를 가지고 있으며 이름에는 특성의 이름(예, color(색깔)), 값에는 원하는 설정이 들어간다(예: red(빨강색)).  사실 특성을 배우고 지나갔다. 설명만 안 했을 뿐이다. <img> 태그는 src 특성을 쓴다. 링크에는 href 특성이 있다. 표를 만들려면, 여러 태그가 필요하다. 다음 태그들을 이용해 표를 만들어 보자.   표의 시작과 끝:<table></table>  열의 시작과 끝: <tr>  첫번째 열의 제목을 달기 위한 태그: <th>  열의 각 칸: <td>  전체 예:<table><tr><th>Column 1: Month</th><th>Column 2: Money Saved</th></tr><tr><td>January</td><td>$100</td></tr></table> 문서 시작 부분에 들어가는 head 태그에 대해 배웠다. 이제 title 태그 외에 사용할 수 있는 다른 태그들을 배워 보자.   메타 태그를 달아 보자. <meta>를 이용하면 페이지에 대한 정보를 추가해 줄 수 있다. 이 정보는 검색 엔진 로봇들이 웹을 수집할 때 사용된다. 검색 엔진에 노출이 더 많이 되기 위해서는 이 태그를 사용하면 된다. name 특성과 content 특성이 하나씩만 들어가야 한다. 예: <meta name="description" content="설명 기록">; or <meta name="keywords" content="쉼표로 분리된 키워드 목록"> <link>를 이용하면 파일들을 연결할 수 있다. 이 태그는 주로 CSS 파일을 추가하기 위해 쓰인다. CSS 파일에는 HTML 페이지의 모습을 변경시키는 스타일 코드가 들어간다. <script> 태그를 이용해서 JavaScript 파일을 추가해 줄 수 있다. 사용자와 상호 작용하는 페이지를 만들려면 필수다. HTML에 대한 지식을 넓힐 수 있는 방법은 다른 페이지들을 보는 것이다. 페이지에서 마우스 오른쪽 클릭 후 "소스 보기"를 클릭한다. 또는 "보기" 메뉴 아래 있는 메뉴를 골라도 된다. 못 보던 HTML 태그를 확인해 보자. 그리고 검색해 보자.  다른 사람의 웹사이트를 수정할 수는 없지만, HTML을 복사한 후에 바꾸어 볼 수 있다. CSS 링크가 제대로 연결이 되지 않을 경우, 색이나 정렬 등은 유지되지 않는다. 인터넷에는  W3Schools, Codecademy처럼 HTML을 배울 수 있는 곳이 많다. 책들도 많다. 하지만 최근 몇 년 내로 출판된 책을 고르도록 하자. 계속 바뀌고 있기 때문이다. 또한 CSS를 배워서 웹 페이지 레이아웃이나 겉모습을 바꾸어 보자. CSS를 배운 후에는 대개 JavaScript를 다루게 된다. Notepad++이나, MS Word 같은 윈도우 프로그램이나, TextEdit같은 맥용 텍스트 편집 프로그램을 사용하면 HTML 문서를 작성할 수 있다. 파일 → 다른 이름으로 저장 클릭 후에 웹 페이지를 선택한다. 또는 확장자를 ".doc", ".rtf"나 다른 것들 대신에 ".html"이나 ".htm"으로 바꾼다.   "rich text"에서 일반 텍스트로 바뀐다는 경고가 뜨는 경우나 편집 기능 일부를 사용할 수 없거나 이미지 저장이 제대로 되지 않을 것이라는 경고 메시지가 뜨는 경우가 있는데, 무시해 준다. HTML 문서는 그런 것을 사용하지 않는다. .html과 .htm 사이에는 차이가 없다. 둘 다 잘 작동한다. 문서를 저장한 후에 문서 아이콘을 찾아서 더블 클릭하자. 브라우저에 빈 화면이 뜰 것이다. 그렇지 않다면, 파일 아이콘을 끌어다가 주소 창에 내려 놓는다. 이 글의 내용을 따라하면서 HTML을 배울 때 이 방법을 쓰면서 HTML이 정상 작동하는지 확인할 수 있다.  이 방법은 인터넷으로 접속 가능한 HTML 페이지를 만드는 것이다. 이 페이지는 다른 사람이 접속 불가능하다. 확인하는데 인터넷 접속이 필요하지도 않다. 그냥 브라우저가 HTML 문서를 읽고 표시하게 하는 것일 뿐이다. 태그는 일반 문자들처럼 화면에 표시되지 않는다. 그 대신, 태그들은 브라우저에게 어떻게 페이지를 표시해야 하는지 알려 준다. "시작 태그"가 그런 명령을 알려 준다. 예를 들어서, 브라우저에다가 어떤 텍스트를 굵게 표시하라고 명령하고 싶으면, 시작 태그를 추가해서 태그를 달아 주면 된다. 그리고 "마침 태그"를 이용해서 어디에서 명령을 마치면 되는지 보여 주면 된다. 이 경우에는 <b> 태그가 된다. 마침 태그의 경우에는 시작 부분에 슬래시(/)가 붙는다.   각 괄호(<>) 안에 태그를 쓴다. 예: <시작 태그>  마침 태그 역시 각 괄호를 쓰지만, 시작 부분 앞에 슬래시가 있어야 한다. : </마침 태그>) 어떤 태그가 있는지 알고 싶다면 글을 계속 읽어 보자. 지금은 < >, </ > 사이에 태그가 들어간다는 것만 알면 된다. 다른 HTML 글에서는 태그를 요소(element)라고 하기도 한다. 또한 태그들 사이에 있는 애용을 "요소의 내용(element content)"라고 한다. 모든 HTML 문서는 <html>로 시작해 </html>로 마친다. 이렇게 하면 브라우저에게 이 태그들 사이에 있는 것은 전부 HTML이라는 것을 알릴 수 있다.    <html>을 맨 위에 적자.  enter나 return을 눌러서 공간을 띄운 다음에 </html>을 적자. 모든 내용은 이 두 태그 사이에 들어가야 한다는 점을 잊지 말자. <html>과 </html> 태그 사이에는 <head> 태그와 </head> 태그가 들어가야 한다. 이 둘 사이에도 공간을 주자. 이 두 태그 사이에 들어간 내용은 페이지에 나타나지는 않는다.   <head>와 </head> 사이에 <title>과 </title>을 넣자. <title>과 </title> 사이에 HTML 공부 - wikiHow라고 적자. 문서를 저장한 후에 브라우저를 이용해서 열어 보자. (또는 문서를 열어 놓은 상태라면, 저장한 후 새로고침을 해 보자.) 웹 페이지 제목 창에 자신이 적어 놓은 제목이 보이는지 확인해 보자. 이 글에서 배우는 나머지 부분은 전부 body 부분에 들어가게 될 것이다. 이 부분은 화면에 표시되는 부분이다. </head>  태그 뒤 그리고 </html> 태그 앞에 <body>와 </body> 태그를 넣어 주자. 이제 문서는 다음과 같은 모양이 되었을 것이다. (점들은 무시하자.)  <html> <head> <title>How to Learn HTML - wikiHow</title> </head> <body> </body> </html> 브라우저 화면에 나타나는 것을 적어 볼 시간이다! body 태그 사이에 들어가는 내용은 문서를 저장한 후, 새로고침을 하면 브라우저에 나타나게 된다. 하지만 이 때에도 <과 > 사이에 내용을 적으면 브라우저가 태그로 인식해서 아무 것도 보이지 않게 된다. Hello world!(또는 원하는 문구)를 입력해 보도록 하자. 새로운 태그를 입력해서 어떤 변화가 생기는지도 살펴 보자.   강조된 텍스트: <em>Hello world!</em> -> Hello world!  굵은 텍스트: <strong>Hello world!</strong> -> Hello world!  취소선이 그어진 텍스트: <s>Hello world!</s> -> Hello world!  윗첨자로 표시된 텍스트: <sup>Hello world!</sup> -> Hello world!  아래첨자로 표시된 텍스트: <sub>Hello world!</sub> -> Hello world!  섞어 보자. <em><strong>Hello world!</strong></em>는 무슨 코드가 될까? 여러 줄로 된 글을 적을 때, HTML 문서 상에서는 다른 줄로 나와도, 화면에서는 한 줄로 나오는 것을 볼 수 있을 것이다. 어떻게 문단을 표시하는지 배워 보자.   <p>문단입니다</p>  이 줄 다음에 엔터를 눌러서 줄을 바꾸었습니다.<br>잘 바뀌었군요. <br>의 경우에는 마침 태그가 필요 없다. 이런 태그를 "빈 태그"라고 부른다. 소제목을 만들어 보자. 문단의 소제목을 표시하려면 h로 시작하는 태그를 쓰면 된다. <h1>header text</h1>: 제일 큰 소제목<h2>header text</h2> (2번째 소제목)<h3>header text</h3> (3번째 소제목)<h4>header text</h4> (4번째 소제목)<h5>header text</h5> (5번째 소제목) 목록을 만드는 법은 여러 가지가 있다. 다음 방법들을 시도해 보고, 좋아하는 방법을 사용하자. 목록을 감싸는 태그는 <ul>, </ul>(ul은 unordered list(정렬되지 않은 목록)의 약자)이며, 각 항목은 <li>, </li>로 감싸야 한다.   점 목록 코드:<ul><li>One item</li><li>Another item</li><li>Another item</li></ul>  숫자 목록 코드:<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>  내용 정의 코드:<dl><dt>커피</dt><dd>- 뜨거운 음료</dd><dt>콜라</dt><dd>- 차가운 음료</dd></dl> 텍스트 말고 다른 것을 넣는 법을 배워 보자. 다음 태그들을 사용하면 된다. 이미지 태그에 사용할 이미지를 넣기 위해서는 이미지 호스팅 서비스나 서버에 올린 이미지가 필요하다.   줄 삽입: <br> 또는 <hr>  그림 삽입: <img src="이미지 url"> 다른 페이지나 웹사이트의 링크를 걸 수 있다. 하지만, 웹사이트가 현재 없는 관계로 a 태그를 이용해서 문서의 다른 곳에 링크를 거는 법을 알아 보려고 한다.     <a> 태그를 이용해서 이동할 지점을 만들어 보자. 보면 알 수 있는 이름을 짓고, <a name="Tips">a 태그 내용</a>같이 코드를 작성해 주자. href를 이용해서 내부 위치나 다른 사이트에 링크를 걸어 보자. <a href="페이지 url 또는 페이지에 있는 위치">링크로 표현할 텍스트나 이미지</a>  a 태그가 있는 곳에 링크를 걸고 싶다면, # 표시를 url에 넣은 후에 anchor의 이름을 적어 주자. 예를 들면,  http://www.wikihow.com/Learn-HTML#Tips 링크를 누르면 이 글의 영문판의 팁 부분으로 이동하게 된다.
특성에 대해 배워 두자. HTML 표를 사용해 보자. head 태그 안에 들어가는 기타 태그들을 배워 보자. 웹사이트들에서 찾을 수 있는 HTML 파일들을 가지고 놀아 보자. 다른 글을 통해서 웹 디자인에 대해서 더 많이 배워보자. HTML 문서 열기. 인터넷 브라우저에서 문서를 열어 보자. 태그를 이해하자. 첫 <html> 태그를 작성하자. <head> 부분을 채우자. <body> 부분을 작성하자. 여러 가지 스타일의 텍스트를 추가해 주자. 문단을 표시해 보자. 목록을 만드는 법을 알아 보자. 문서에 공백, 가로줄, 그림 넣기. 링크 걸기.
https://www.wikihow.com/Learn-HTML https://www.wikihow.com/Learn-HTML
Learning More Advanced HTML Learning Basic HTML