html 기본 개념( 문법 / 속성 ) / 문서의 구조에 대해서 정리한다.
HTML ( HyperText Markup Language ) 기본 개념( 문법 / 속성 )
- 문서의 구조를 표현
- 사람과 웹브라우저간의 약속
- 보통 <tag>로 시작해서 </tag>로 끝나게 된다.
안에 내용이 없는 경우에는 <tag />와 같은 사용도 가능하다.
- 태그안에 속성을 사용해서 필요한 기능들을 사용할 수 있고 속성의 순서는 중요하지 않다.
- 태그는 중첩을 이용해서 사용이 가능하고 중첩을 이용해 하나의 그룹으로 나눌 수 있다.
( 에디터에 적은 내용을 웹 브라우저에서 실행 시키면 그대로 텍스트 형식으로 출력이 되는데
html을 이용하면 문서의 구조를 더 효율적으로 표현할 수 있다 )
( 위와 같이 태그를 이용해서 문서를 효율적으로 표현하고 속성을 이용해서 해당 태그를 더 섬세하게 제어할 수 있다 )
( <a> 태그를 이용해서 href 속성에 주소를 주게 되면 해당 링크 클릭시에
href 속성에 적힌 주소로 이동하게 된다 )
( html에서는 공백은 두칸이상부터는 무시하게 되있고 엔터키 또한 무시되는걸 위 결과를 보고 확인할 수 있다 )
( <li> 태그는 리스트 형식으로 나타날때 사용하고 단독으로 쓰이기 보다는 <ol>이나 <ul>태그 하위에서 사용이 된다 )
( 위 결과를 보고 <ul>는 리스트의 순서를 표시해주지 않고 <ol> 태그는 리스트의 순서를 표시해준다는걸 알 수 있다 )
문서의 구조
- HTML 문서의 구조에서 <head></head> 태그 안에는 문서의 정보를 적도록 약속 되있고
<body></body> 태그 안에는 본문에 표시되는 내용을 적도록 약속 되있다.
( 약속일뿐 꼭 그렇게 적어야 되는건 아니다 )
DOCTYPE
- 웹 브라우저에게 어떤 타입의 HTML을 따르고 있는 태그인지를 알려준다.
- 현재 HTML5에서는 <!DOCTYPE html>로 단일화 되었다.
- 간단한 HTML 웹사이트 만들기
- 웹 사이트라고 하기엔 부족하지만 기본적인 웹사이트란 어떤것인가라는 개념을 이해하기 위해 만들어봤다.
1.html
( 해당 내용에 <a> 태그를 이용해서 간단한 웹사이트 느낌을 만들어보겠다... )
( 해당 내용들에 대한 링크를 걸어서 클릭시에 해당 페이지로 이동하게 된다.. )
( 1번을 클릭하면 1.html 파일로 이동하면서 기술소개에 대한 내용이 나오게 된다 )
HTML 태그의 역사
http://www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] html5 ( 입력양식 / 속성들 / 입력 값 체크 ) (0) | 2017.09.05 |
|---|---|
| [HTML] 정보로서의 html( font / meta / semantic / 모바일 지원 / iframe ) (0) | 2017.09.03 |
| [HTML] html 주요태그 - 단락<p>, 줄바꿈<br>, 이미지<img>, 표<table>, 입력 양식<form> (0) | 2017.09.03 |
댓글