HTML 시작 </>

유광진·2023년 8월 2일

1. 📌 html이란

HTML은 웹 페이지를 만드는 데 사용하는 언어이다.

태그 및 속성 집합을 사용하여 웹 페이지에서 텍스트, 이미지 및 기타 미디어의 구조를 만들 수 있다.

아주 기본적인 html 코드 구조이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>학습연습</title>
</head>
<body>
    <h1></h1>
</body>
</html>

<!DOCTYPE html>: 이 문서가 HTML5로 작성되었다.

<html lang="ko">: HTML 문서의 시작을 나타내며, 문서 언어가 한국어(Korean)임을 지정한다.

<head>: 문서의 메타데이터(정보)를 담는 부분을 시작한다. 이 부분에는 문서 제목, 문자 인코딩 등이 포함될 수 있다.

<meta charset="UTF-8">: 문서의 문자 인코딩 방식을 UTF-8로 설정함으로서 한국어가 깨지는걸 방지할 수 있다.

<title>학습연습</title>: 문서의 제목을 "학습연습"으로 설정 브라우저의 탭에 표시될 문서 제목이다.

<head>:</head> 브라우저 화면에 직접적으로 보이지 않으며 css같은 style을 정의할 수 있다.

<body>: 문서의 본문 내용을 담는 부분을 시작한다.

<h1></h1>: 레벨 1 제목(Heading 1)을 정의하는 태그이다.

</body>: <body> 부분의 끝을 나타낸다.

</html>: HTML 문서의 끝을 나타낸다.

기본적으로 body태그 안에 들어가는 목록들은 다음과 같다.

<br>, <p>, <b>, <i>, <h1>, <a>, <img>, <table>, <div>, <span>, <ul>, <li>, <form>

Body 태그에서 중요한 몇 개만 짚고 넘어가자

먼저 <br>은 html에서 텍스트를 강제로 줄바꿈 할 때 사용한다.

<p>는 문단의 약자로, 하나의 문단을 만들 때 쓰인다.

<h>은 이 태그들은 섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자의 크기가 커진다.

<img> 은 이미지를 삽입하는 태그로, src 속성을 통해 이미지 경로를 지정할 수 있다.

<div> 웹 화면의 레이아웃을 나누는데 주로 쓰이는 중요한 태그이다.

<form> 은 로그인 창이나, 회원가입 등을 만들 때 사용하는 태그이다.

텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하는 기능을 구현할 수 있다.

head라는 태그안에는 <title> 태그 사용해서 웹 브라우저의 제목을 설정할 수 있다.

또한 <style> 태그를 사용해 .css 파일을 분리하여 HTML 문서에 연결할 수도 있다.

마지막으로 <script> 자바 스크립트를 이용해서 정적인 웹 페이지를 동적인 웹 페이지로 만들 수 있는 중요한 태그를 배치할 수 있다.

백엔드 개발자 유광진 입니다.

2023년 8월 4일

알찬 개념정리 잘 보고 갑니다~

1개의 답글