HTML 기초
HTML 이란?
HTML(HyperText Markup Language)
- 모든 웹 콘텐츠는 HTML로 이루어져 있음
- 웹 브라우저는 서버로부터 전달받은 HTML 문서의 구조를 해석해 화면을 구성함
- 클라이언트인 웹 브라우저가 서버로부터 수신하는 데이터의 구조는 HTML임
하이퍼텍스트(HyperText)
- 다른 정보와 연결된 텍스트를 의미하며
사용자가 관련 문서를 링크를 통해 이동하며 정보를 얻을 수 있음
- 초기 월드 와이드 웹은 바로 이러한 정보의 연결에 중점을 두고 설계됨
마크업 언어(Markup Language)
- 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템
- 표현하고자 하는 정보가 있을 때 정보의 앞뒤에 태그(Tag) 표기를
달아 정보에 의미를 부여하는 형식
: 예) <h1>안녕하세요?</h1>
XML(eXtensible Markup Language)
- HTML보다 범용적으로 사용할 수 있는 마크업 언어
- HTML : 사용할 수 있는 태그의 종류가 정해져 있음
- XML : 자신만의 규격을 정의할 수 있음
<단순한 텍스트 정보 > - 홍길동, 010-1234-5678, 서울시 마포구
<XML로 표현된 정보>
<name>홍길동</name>
<tel>010-1234-5678</tel>
<addr>서울시 마포구</addr>
HTML의 기본 용어
태그(Tag)
- 태그는 < >를 사용하여 나타냄
- 태그는 일반적으로 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으며,
종료 태그앞에는 /를 붙여야 함
- 사용할 수 있는 태그는 표준으로 정해져 있으며 태그마다 역할이 다름
<시작 태그 속성 = "값" 속성= "값"...> 내용 </종료 태그>
태그의 특징
- 모든 태그가 종료 태그를 가지는 것은 아님
- 태그 이름은 대소문자를 구분하지 않음
- 태그에 추가적인 정보 부여는 속성을 사용
속성(Attribute)
- 태그에 추가 정보를 제공하기 위해 사용함
- 사용할 수 있는 속성 역시 정해져 있음
- 디자인과 관련된 속성은 거의 사용하지 않고 뒤에서 배울 CSS를 사용함
<img src = "photo.jpg" alt = "사진" >
<태그 속성 = "파일명.확장자" 속성 ="파일을 찾을수 없을 때 출력할 대체 텍스트">
태그 바디(Tag Body)
- 시작 태그와 종료 태그 사이에 위치하는 내용(콘텐츠)을 의미함
-대체로 텍스트가 위치하며, 다른 태그를 태그 보디에 둘 수도 있음
: 즉 태그 사이에 다른 태그를 위치시키는 것이 가능함
- 단, 태그 사이에 부모-자식 관계가 정해져 있는 경우 규칙을 따라야 원하는 결과물을
보여줌
<h2>Hello World</h2> // 태그 바디가 텍스트인 경우
<ul>
<li>아이템</li> // 태그 바디가 다른 태그인 경우
</ul>
시맨틱 태그(Semantic Tag)
- HTML5에서 도입된 개념으로, 특별한 의미를 가지는 태그를 말함
- 문서의 구조를 정의하는 데 주로 사용됨
- 시맨틱 태그 그 자체로는 별다른 역할을 수행하지 않고 화면 디자인에도 영향을 미
치지 않지만 코드의 가독성을 높이는 데 도움을 줌
－ 또한 부모-자식 관계 없이 다른 태그를 자유롭게 사용할 수 있음
<header>, <footer>, <article>, <section>, <aside>, <nav>
HTML 문서의 구조
- <!DOCTYPE html>: HTML5 문서를 선언하는 구문으로 웹 브라우저에 문서가 HTML5로
작성됨을 알림
- <html> … </html>: HTML 문서의 시작과 끝을 의미함
- <head> … </head>: CSS, 자바스크립트, 메타 태그 등이 위치함
:－ <title> 태그 : 문서의 상단 제목을 표시
:－ <meta> 태그 : 문서의 정보를 설정하는 등도 포함
- <body> … </body>: 문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분
HTML 문서의 구조
자동 생성된 HTML 기본 템플릿..
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="id=edge">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
- <charset>: 캐릭터 세트로 정상적인 한글 처리를 위해서는 반드시 ‘UTF-8’로 설정
- <viewport>: PC, 모바일 등의 서로 다른 크기의 단말기에서 화면 최적화를 위한 설정
- <http-equiv>: HTTP 헤더 정보를 설정하는 속성
- <X-UA-Compatible>: 브라우저의 호환성 보기 설정
: ‘ie=edge’ : 항상 최신 렌더링 엔진을 사용함을 의미
제목 태그
- 제목 태그는 <h1>~<h6>까지 있으며, 숫자가 작을수록 큰 글자로 출력됨
- 단순히 텍스트의 크기를 지정하는 용도가 아니라 문서에서 제목으로 사용될 텍스트
에 사용하는 태그를 의미함
: 어떤 의미에서는 시맨틱 태그로도 볼 수 있다.
- 즉 <h1>~<h6>을 제목에서의 상-하위 개념으로 이해하는 것이 좋음
- 제목 태그가 중요한 이유는 SEO(Search Engine Optimization)임
: SEO : 구글과 같은 검색 엔진에서 우리가 만든 HTML 문서의 내용이 잘 검색될 수 있도
문단 태그
- <p> 태그 : 문단(Paragraph)을 구분하기 위해 사용
- HTML에서는 연속된 공백이나 줄 바꿈은 단순한 공백으로 처리하기 때문에
문단 구분을 할 때는 <p> 태그를, 줄을 바꿀 때는 <br> 태그를 이용함
: 줄 바꿈뿐만 아니라 공백도 별도 처리가 필요함
: 여러 공백을 표현하려면 ‘ ’를 필요한 만큼 입력하거나 CSS로 여백 설정
목록 태그
- 목록 태그는 최신 HTML 문서 작성법에서 매우 중요한 부분임
- 대다수의 콘텐츠가 목록 형태로 정의될 정도로 많이 사용됨
: 예) 신문기사 목록 : 하나의 신문기사는 <div>로 묶이고 이 안에 제목,
작성일, 신문사, 기자 이름 등이 목록으로 들어가는 구조
목록 태그 사용법
- <ul>: 순서가 없는 목록
- <ol>: 순서가 있는 목록
: <ol>보다는 <ul>을 주로 사용함
- <li>: 리스트의 아이템
<ul>
<li>item</li>
<li>item</li>
<ul>
블록 태그
- 라인 전체를 사용하는 태그
- 즉 다른 태그 요소와 같은 라인에 배치할 수 없음
<h1>Hello</h1> <h2>World</h2>
- 대표적인 블록 태그
<p>, <div>, <h>, <ol>, <form>
인라인 태그
- 다른 태그 요소와 같은 라인에서 나란히 배치될 수 있는 태그
- 경우에 따라 블록/인라인 두 가지 형식을 혼합한 ‘inline-block’속성을 사용하기도 함
<img src="cat.jpg"><a herf="...">상세정보 보기</a>
대표적인 인라인 태그
<span>, <img>, <a>
'Hello World > Frontend Study' 카테고리의 다른 글
| JavaScript - javascript basic 자바스크립트 node.js 라이브러리 다운로드. [개발스터디 기몬] (0) | 2023.05.04 |
|---|---|
| JavaScript - javascript basic memo [개발스터디 기몬] (0) | 2023.05.04 |
| CSS - CSS 기초 이론 정리 [개발스터디 기몬] (0) | 2023.04.24 |
| 프론트엔드 HTML / CSS 기초 공부하는 것들 코드 내용 (0) | 2022.07.19 |
| Frontend Beginner : vs code download / Visual Studio Code _ HTML _ Hello World (0) | 2022.07.17 |
댓글