HTML 이론_기본문법, 속성, 태그 중첩, 그 외

Coding/웹 애플리케이션

HTML 이론_기본문법, 속성, 태그 중첩, 그 외

#ming 2017. 6. 14. 14:37

1. HTML이란?
웹을 위한 언어
HyperText Markup Language => HTML
  1) HyperText - 문서와 문서 링크로 연결된 시스템
* 링크로 연결된 여러 문서들의 복합체 = 웹
  2) Markup Language - Tag를 사용해 화면에 표시되는 형식에 대한 언어
   옷의 Tag = 옷에 대한 자세한 정보를 포함하고 있는 것
html의 Tag = 화면에 표시되는 형식에 대한 자세한 정보

i) strong tag = 해당 내용 강조 태그
안녕하세요. <strong>Ming</strong> 블로그에 방문해 주셔서 감사합니다.
=> 안녕하세요. Ming 블로그에 방문해 주셔서 감사합니다.

<strong> 시작 태그
</strong> 끝 태그

아래는 생활코딩에서 만든 html tag 사전이다.
https://opentutorials.org/course/1058

2. HTML 문법 - 속성
1) 중요한 Tag 일수록 글자가 짧다.
2) <a>태그 = 링크 연결 태그
<a>Ming</a> => 어디에 링크되어 있는지 표시안되어 있음
<a>태그는 링크태그로 어디에 연결되어 있다고 표시해줘야함
이 때 표시해주는 것을 속성이라 한다.
<a href="Http://blog.naver.com/koreanming">Ming</a>
속성명 = href (HyperText Reference)
속성값 = Http://blog.naver.com/koreanming

3) <a> 태그 링크가 새로운 창or탭에서 링크 열리게 하기
<a href="httl://blog.naver.com/koreanming" target="_blank">Ming</a>
위의 코드에는 두 가지 속성(링크 주소 속성, 새로운 탭으로 열기 속성)이 들어가 있다.
_blank = 새로운 창 or 탭에서 열어라
_self = 현재 창 or 탭에서 열어라
target은 잘 이해가 안간다.....
4) 속성과 속성의 구분은 띄어쓰기∨로 구분

3. 리스트 관련 Tag

위 처럼 리스트로 표시된다.
4. 리스트 사이 간격 넣기 / 리스트 내부 순서 유무
1) <ul> tag 리스트 사이 간격 리스트 내부 순서 없음
ul=unordered list

2) <ol> tag 리스트 사이 간격 리스트 내부 순서 있음

5. <head> tag 문서에 대한 정보를 담고 있는 태그
<head>
1) <meta charset="utf-8" /> => 이 문서는 utf-8 방식으로 저장된 문서
</head>
2) <title> tag => html문서의 타이틀을 지정 하는 태그
브라우저 타이틀바에 표시 된다.

6. <body> tag 본문에 대한 내용을 표시해야 하는 태그
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</body>

7. <html> tag
<html> </html> 안쪽에 있는 것이 html문서에 관한 내용이다를 알려주는 태그
최상위 태그(?)

8. 번외편
1) HTML은 누가 표준을 만들까 = W3C
2) W3C의 의장 = 팀버너스리
3) 멤버들에 의해서 HTML은 끊임 없이 변화 중 (대표적인 멤버 apple, google, microsoft)
9. <!doctype html>
<html> 위에 적는 <!doctype html>은 문법이 아니다.
어떤 표준에 따라서 문서가 작성되었는가 표시해주는 것

<!doctype html> = HTML5를 준수하는 HTML코드다.

10. HTML 태그를 하나씩 외울필요 없다. 어떤 태그가 있는지 알고 필요할때 찾아서 사용하면 된다.
1) Tag Reference
Http://dev.w3.org/html5/html-author
html5 기준 최신 tag들

생활코딩 코딩야학 2일차