Frontend - HTML (1)

박지원 ·2023년 5월 23일

html 프론트엔드

혼자 공부한 HTML에 대해서 정리한 게시글입니다.

1. HTML

하이퍼텍스트 마크업 언어 (HyperText Markup Language)로
네트워크가 연결괸 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 체계

프론트엔드에서는 주로 구조를 짤 때, HTML을 사용

2. 태그

하나의 약속된 명령어 이며, 고유한 기능을 가지고 있음
시작태그 + 내용 + 종료태그로 구성된 한줄을 HTML element라고 부름

1. 문자를 꾸며주는 태그

// html                        
<strong>Hello World</strong> <!--두꺼움 -->

<u>Hello World</u>  <!--밑줄-->

<h1>Hello World</h1>  <!--큰사이즈의 제목. h1부터 h6까지 (점점 작아짐)-->

2. 빈 태그

종료 태그 없이 사용되는 사용되는 태그

<br />     // 다음 줄로 내려가는 태그
<hr />     // 수평선을 그려주는 태그

3. 기능이 있는 태그

// 기능이 있는 태그*

<button>버튼</button>                <!-- 버튼 생성 -->
<textarea>입력창</textarea>          <!-- 여러줄 텍스트 입력창 생성 -->


<input type="text" />               <!-- 한줄 텍스트 입력창 생성 -->
<input type="password" />           <!-- 비밀번호 입력창 생성 -->
<input type="color" />              <!-- 색상 선택창 생성 -->
<input type="checkbox" />           <!-- 체크박스(여러개선택) 생성 -->
<input type="radio" name="group"/>  <!-- 라디오버튼(1개선택) 생성 -->
                    => name이 동일한 radio 버튼 중 1개만 선택됨

<label>라벨</label>  <!-- 체크박스, 라디오버튼 등에 라벨 생성 -->

<a href="<http://google.com>">구글로 가기</a>                 <!-- 현재창에서 이동-->
<a href="<http://google.com>" target="_blank">구글로 가기</a> <!-- 새창에서 이동 -->

정말 자주 쓰이는 태그라서 정리해보았음.

특히 게시판 같은 기능을 구현할 때, 게시판 내용이 들어가는 부분을 input 태그를 이용하는 경우가 있는데 게시판 내용은 textarea 태그를 이용해주어야 함.

4. 이미지와 동영상 태그

<!-- 일반이미지 -->
<img src="/이미지경로/이미지.확장자" />

<!-- 배경이미지 -->
<div style="background-image: url('/이미지경로/이미지.확장자')" />

<!-- 동영상 -->
<video muted="muted" autoplay="autoplay" loop="loop">
	<source src="동영상위치.mp4">                    <!-- muted: 음소거 -->
</video>                                         <!-- autoplay: 자동재생 -->
                                                 <!-- loop: 반복재생 -->

3. HTML 기본개념

1. 태그의 특징

html 태그는 block 태그과 inline태그로 나뉨

block : 페이지의 가로 넓이 전체를 차지하는 요소
inline: 자신의 크기만큼만 차지하는 요소

block 태그

<h1 />
<div />
<p />

inline 태그

<span />
<input />    
<a />
<button />
<label />

2. HTML 문서구조 설명

<!DOCTYPE html>
<html>
	// 검색엔진을 위한 영역
	<head>
		<title>사이트 이름</title>
		<meta name="description : 사이트 소개"/>
		<meta property="og:image" />           <!-- 다른 사이트(카톡 등)에 이미지 알리기 -->
		<meta property="og:title" />           <!-- 다른 사이트(카톡 등)에 사이트명 알리기 -->
		<meta property="og:description" />     <!-- 다른 사이트(카톡 등)에 사이트상세 알리기 -->
	</head>

	// 브라우저에서 보여지는 영역
	<body>
		<header></header>           <!-- 웹페이지의 상단(또는 상단메뉴) 부분 -->
		<nav></nav>                 <!-- 웹페이지의 좌측(또는 우측메뉴) 부분 -->
		<section></section>         <!-- 웹페이지의 독립적인 섹션 부분 -->
		<article></article>         <!-- 웹페이지의 블로그, 뉴스, 기사 등 -->
		<footer></footer>           <!-- 웹페이지의 하단 기업정보 부분 -->
	</body>
</html>