개발 일기
HTML 공부하기 1 <HTML 시작> 본문
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
python을 공부할때 jump_to_python을 참조해서 공부했던 기억이 떠올라서 HTML에도 비슷한 site가 없나 찾아보던 차에 위 사이트를 발견하게 되었다. 우선 따라서 정리를 해보자.
HTML이란?
HTML은 HyperText Markup Language의 약자
웹페이지는 이런 HTML태그들로 구성되어 있다.
HTML 버전
대략적인 버전은 위와 같으며 현재는 HTML5가 사용된다. 자세한 사항은 W3C 공식 사이트에서 확인할 수 있다.
W3C란? World Wide Web Consortium의 약자로 월드와이드웹(www)를 위한 표준을 제정하고 관리하는 중립적인 기관
HTML, CSS, DOM, SVG, XHTML, XML 과 같은 대표적인 웹 표준을 관리한다.
HMTL의 기본 구조
<위 사진을 보면 h1, h2, h3, p가 보인다. 이를보고 마크다운과 비슷하다는 느낌을 받았다. h뒤의 숫자는 제목의 크기를 나타낸다.>
HTML 태그(tag)
tag는 이름을 <>로 감싸서 표현한다. 보통 start tag와 end tag가 쌍으로 존재하지만 태그에 따라서 end tag가 존재하지 않는 경우도 있다. 또한 end tag는 이름앞에 /를 덫붙여 구분한다.
<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다.
<html> : HTML 문서의 루트(root) 요소를 정의합니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의합니다.
- 메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미합니다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있습니다.
<title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용됩니다.
- 웹 브라우저의 툴바(toolbar)에 표시됩니다.
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됩니다.
- 검색 엔진의 결과 페이지에 제목으로 표시됩니다.
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
<h1> ~ <h6> : 제목(heading)을 나타냅니다.
<p> : 단락(paragraph)을 나타냅니다.
HTML 요소 구조 (element)
HTML의 요소(element)는 여러 속성(attribute)을 가지며 이는 해당 요소에 추가적인 정보를 제공한다. 이러한 element역시 시작 태그로 시작해서 종료 태그로 끝나게 된다.
주의 할 점은 다음과 같다.
- 속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의되며 속성 이름과 속성value로 표현된다.
- 속성은 언제나 소문자로 작성한다.(HTML5표준에서 속성이름에 대소문자는 구분되지 않는다.)
- 속성값은 항상 따옴표를 사용해주자.(따옴표 사용을 강제하지는 않지만 이는 오류를 발생시킬 수 있다.) (큰따옴표, 작은따옴표상관없지만 보통 큰 따옴표가 사용된다.)
--> 오류 의 예시
