HTML 들어가기

프로그래밍/HTML&CSS 2022. 8. 19. 12:47

728x90

HTML은 간단히 웹문서를 만드는 언어하고 할 수 있다. 웹사이트의 구조를 담당하며, 웹사이트를 구성하는 제목, 문단, 이미지, 동영상들을 정의하고 의미를 부여하는 언어이다.

HTML은 프로그래밍 언어가 아닌 마크업 기반의 언어로 일반적으로 프로그래밍을 한다기 보단 작성한다는 의미를 사용한다. HTML 문서를 작성하다보면 에러를 보여주지 않기 때문에 명확한 코드 작성이 요구된다.

* Markup Language : 특별한 기호나 표기를 사용하여 글의 서식과 스타일을 정해주는 언어.

HTML의 특징

- 문서를 작업할 수 있는 편집기라면 어떤 것이든 사용이 가능하다.

- 확장명은 .html로 지정한다.

- 대소문자를 구별하지 않지만 관례상 소문자로 작성하는 것을 권장한다.

- 띄어쓰기, 줄바꿈을 구별하지않고 태그가 별도로 존재한다.

HTML의 구조

- html 태그 : 문서의 시작과 끝을 표시한다.
- head 태그 : 문서의 메타 정보를 정의한다.
- body 태그 : 실제 사용자에게 보여질 화면 구현한다.

<html>
	<head>
		<!--문서의 정보, 화면에 도출X-->
	</head>
	<body>
		<!--실제 브라우저에서 보이는 정보-->
		<!-- html의 주석을 표현하는 방법이다.-->
	</body>
</html>

예시로 간단한 HTML 문서를 작성하여 확인해보자.

<html>
    <head>
		<title>문서의 제목</title>
    </head>
    <body>
		첫번째 HTML 문서입니다.
    </body>
</html>

태그의 구조

태그는 Element를 의미하며, HTML를 구성하는 요소이다.

1. 여는 태그 : 요소를 시작하기 위해 요소명을 열고 닫는 꺽쇠 괄호<>로 감싸며 단락의 시작 부분에 위치한다.

2. 태그명 : 요소를 표현하는 이름이다.

3. 내용 : 태그의 내용으로, 단순 텍스트가 들어가거나 다른 태그를 포함할 수 도 있다.

4. 닫는 태그 : 요소를 닫기 위해 요소명을 열고 닫는 꺽쇠 괄호<>로 감싸며 요소명 앞에 슬래시(/)를 붙이고 단락의 끝 부분에 위치한다.

<요소명1> <!--여는 태그-->
    <요소명2> ... </요소명2> <!--또다른 태그-->
    ...
    내용
    ...
</요소명1> <!--닫는 태그-->

728x90

내 이야기 꾸러미 내 이야기 꾸러미