코딩야학#2. HTML의 이론과 속성
이번 코딩야학 강의에서는 HTML의 이론과 속성에 대한 강의였다. 웹을 이용하는 사람이니 HTML이 익숙한 건 맞지만 제대로 배운 적은 없었는데, 강의를 통해 기초부터 차근차근 알 수 있었다.
* HTML이란?
HTML은 Hyper Text Markup Language의 약자로 정보를 포함한 텍스트를 구조적으로 구현가능한 언어이다. (이건 나의 표현이고, 자세한 정의는 여기를 참고)
* HTML의 기본 구조
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8" /> </head> <body> 안녕하세요. <strong>미니도날드</strong>의 블로그입니다. </body> </html> | cs |
HTML의 기본 구조는 이렇다. 수기로 보고서를 작성한다고 가정했을 때, 펜과 종이를 준비해놓는 정도라고나 할까? <!DOCTYPE html> 은 html의 버전을 나타내며, HTML이라는 큰 틀 <html> ... </html> 안에 문서의 제목 역할을 하는 <head> ... </head> 와 본문 역할을 하는 <body> ... </body> 가 있다.
* HTML의 속성, 링크 걸기
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <meta charset="utf-8" /> </head> <body> 안녕하세요. <a href="http://01s2-min.tistory.com/">미니도날드</a>의 블로그입니다. </body> </html> | cs |
인터넷에는 수많은 웹사이트들이 있지만 보통 한 페이지로 이루어진 웹사이트는 찾아보기 어렵다. 한 페이지 안에서도 여러 링크들이 다른 페이지로 연결될 수 있도록 되어있다. 위 소스코드의 8번째 줄에 적용한 속성을 보면 해당 텍스트가 어디에 링크가 걸려 있는지 알 수 있다. 위에서는 미니도날드라는 텍스트에 "http://01s2-min.tistory.com" 이 주소가 연결되어 있다.
추가) 위 코드에서는 미니도날드를 클릭하면 현재 탭에서 페이지가 넘어가게 된다. 만약 새 창에서 페이지가 열리도록 하고 싶다면 아래처럼 target="_blank" 속성을 추가해주면 된다. HTML 문서는 띄어쓰기( )로 속성과 속성을 구분해준다.
1 2 3 4 5 6 7 8 9 10 11 | <html> <head> <meta charset="utf-8" /> </head> <body> 안녕하세요. <a href="http://01s2-min.tistory.com" target="_blank">미니도날드</a>의 블로그입니다. </body> </html> | cs |
* HTML 문법, 태그의 중첩
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html> <head> <meta charset="utf-8" /> </head> <body> <ol> <li>코딩야학 1일차</li> <li>코딩야학 2일차</li> <li>코딩야학 3일차</li> </ol> <ul> <li>도날드 덕</li> <li>데이지 덕</li> <li>디즈니월드</li> </ul> </body> </html> | cs |
Q. 리스트를 출력하고 싶을 땐?
마무리는 실제 실행화면으로 :)
