728x90
HTML
@2024.03.27
HTML(Hyper Text Markup Language)
💡
웹 페이지를 만들기 위하여 사용하는 기본적인 웹 언어 중 한 종류로,
웹 브라우저에게 내 콘텐츠를 어떻게 표현해야 하는지 명령하고,
동료 및 웹 크롤러에게도 웹 문서 내에 데이터를 구조적으로 표시하여 정보를 전달하는 것
웹 브라우저에게 내 콘텐츠를 어떻게 표현해야 하는지 명령하고,
동료 및 웹 크롤러에게도 웹 문서 내에 데이터를 구조적으로 표시하여 정보를 전달하는 것
하이퍼 텍스트 마크업언어- 1989년 팀 버너스 리가
World Wide Web개발- 문서와 문서를 연결하는
Hyper Link개념 등장
- 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 HTML 태그라고 부르면서 시작
- 문서와 문서를 연결하는
- HTML1.0(1991) → HTML2.0(1995) → HTML3.2(1997) → HTML4.0(1997) → HTML5(2014)
하이퍼 텍스트: 웹 페이지를 다른 페이지로 연결하는 링크
- HTML은 웹 브라우저에 표시되는 글과 이미지 등 다양한 콘텐츠를 표시하기 위해 마크업을 사용
마크업 언어: 텍스트의 구조와 서식을 표시하기 위해 태그 또는 특수 기호를 사용하는 언어- 제목은 어디인지, 본문은 어디인지, 강조할 부분은 어딘지 등을 구조적으로 표시
웹 브라우저: 웹을 둘러볼 수 있게 하는 응용프로그램(구글, 크롬)
웹 크롤러: 웹 사이트를 돌아다니며 데이터를 자동을 수집하는 기술- 최신 웹 데이터를 저장하며, 검색하는 사용자들에게 검색 결과를 제공
요소
💡
여는 태그와 닫는 태그 그리고 콘텐츠로 이루어진 것
<태그> 콘텐츠 </태그>
<태그> 콘텐츠 </태그>
- HTML 요소는 태그 사용해서 문서의 다른 텍스트와 구분
태그: 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용
- HTML 요소 분석
<p> My cat is cute </p>- <p> : 여는 태그
- 요소의 이름이 구성되고, 여 닫는 꺽쇠괄호로 감싸진다.
- 요소가 시작되는 곳, 또는 효과의 시작되는 곳임을 의미
- </p> : 닫는 태그
- 요소의 이름 앞에 역방향 슬래시가 포함
- 요소의 끝을 나타낸다.
- My cat is cute : 요소의 내용 ⇒ 콘텐츠
- <p> : 여는 태그
- 요소는 속성을 가질 수 있다.
속성: 추가적인 정보를 담는다.
- 예시
<p class="pet"> My cat is cute </p>
- 요소는 중첩이 가능
<p class="pet"> My cat is <strong>cute</strong> </p>
기본 구조
<!-- HTML5의 문서형 선언 -->
<!DOCTYPE html>
<!-- 문서의 루트 요소-->
<html>
<!-- 문서의 메타데이터 집합 요소-->
<head>
<!-- meta : 다양한 문서 정보를 나타내는 것 -->
<!-- 이 문서가 사용해야 할 문자집합을 utf-8로 설정 -->
<meta charset="utf-8" >
<!-- 뷰포트의 너비에서 페이지가 렌더링하도록하며, 모바일 브라우저가 뷰포트보다 넓은
페이지를 렌더링한 후 축소하는 것을 방지 -->
<meta name="viewport" content="width=device-width">
<!-- 문서의 제목-->
<title>HTML 기본 구조 </title>
</head>
<!-- 문서의 본문 요소-->
<body>
</body>
</html>주석
💡
<!-- 주석 처리할 내용 -->
728x90
