[생활코딩] HTML 기본 강좌 요약
생활 코딩이라는 좋은 사이트가 있어 필자가 공부하면서 요약 정리한 내용입니다.
생활 코딩에서 web 공부 사이트는 아래와 같습니다.
https://opentutorials.org/course/1688/10245
* HTML 작업 툴
아톰 에디터로 HTML 작업 수행한다.
그외
aptana
sublime text
brackets
- 아톰 사용 법 : https://opentutorials.org/module/1579
plug in : emmet(코드 자동 완성)
- sublime text 사용법 : https://opentutorials.org/course/671/3595
Hypertext
Markup
Language
* 하이퍼 텍스트
-> 문서와 문서가 연결되어 있다.
링크는 HTML의 본질이다.
HTML의 본질은 웹의 본질이다.
* Tag 를 기본적으로 사용한다.
태그 사이에 있는 것을 content 한다.
Ex)
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> 안녕하세요. <strong>생활코딩</strong>입니다. </body> </html> |
* HTML 속성
a 태그 : 링크를 거는데 사용하지만 추가적잉 정보가 필요하다.
문법적 요소를 추가하는데 사용되는 것이 속성이다
링크 주소와 타겟(새창, target 없는 경우 유지되는 창.)
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> 안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다. </body> </html> |
# a 태그 : 링크를 표시하는 태그 (바로 위 내용)
# li 태그 : 리스트를 표시하는 테크
# 순서를 나타내는 태그
ul 태그 : 그룹을 만드는 것 (unordered list)
ol 태그 : 그룹을 만들면서 번호를 앞에 붙여 주는 태그
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <ol> <li>html</li> <li>css</li> <li>JavaScript</li> </ol> <ul> <li>최진혁</li> <li>최유빈</li> <li>한이람</li> </ul> </body> </html> |
# <!DOCTYPE html>
=> html 문서가 어떤 html 표준에 맞춰서 작성이 되었는지 알려주는 코드이다.
html 5 를 예제에서는 사용하고 있다고 되어 있다.
다른 표준을 사용하는 경우 아래 링크로 확인 가능하다.
https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8
# body 태그
: 본문에 해당되는 내용을 의미하는 태그다.
# head 태그
: 문서의 정보나 문서를 설명하는 태그
문자 인코딩 정보등.
올수 있는 정보 : meta charset
title 태그 : ex) <title>xxx</title>
# html 태그
html 태그 안쪽에 있는 것은 html 문서이다라는 것을 알려주는 것이다.
* 태그가 어떤 것이 있는지 궁금할 때
"Tag Reference" 로 검색
- http://dev.w3.org/html5/html-author/
- https://opentutorials.org/course/1058 => HTML 사전
* Semantic Web : 의미가 잘 드러나는 웹
정보의 의미를 더 잘 드러나게 하는 tag들이 있다.
* nav 태크 : 구역을 알려주는 태그라고 한다.
태그가 어떤 기능을 하는 것이 아니고 그냥 여기서 부터는 윗부분에 있는 것이다. 여기서부터는 아래에 있는 것이다라는 것을 알려줘서
나중에 다른 사람이 이 코딩을 보고 유지 보수할 때 편리하게 하려는 목적도 있다고 합니다.
* article 태그 : 본문이라는 의미를 부여한다.
* index.html 이 해당 website의 대문이다.라는 암묵적인 약속이 되어 있다.
보통 index.html을 붙이지 않아도 해당 페이지를 찾아서 이동한다.
'IT > PHP Web JS CSS HTML..' 카테고리의 다른 글
| [생활코딩] bitnami wamp 설치 및 요약 (0) | 2019.12.09 |
|---|---|
| Online code editors : html tag online 테스트 (0) | 2019.12.09 |
| HTML Tag 요약 (0) | 2019.12.09 |
| [PHP] 정규 표현식 (0) | 2016.01.22 |
| [PHP] PHP DB basic 문법 [INSERT SELECT UPDATE DELETE] (0) | 2016.01.22 |