Gapus Dev Blog

[HTML] 웹페이지의 HTML에 대해 본문

프론트엔드/HTML,CSS

[HTML] 웹페이지의 HTML에 대해

Gapus 2023. 1. 4. 22:04

HTML 이란?

  • 하이퍼텍스트 마크업 언어 (HyperText Markup Language)로 프로그래밍 언어는 아니고, 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해서 만들어진 마크업 언어이다.
  • HTML은 Element(요소)로 이뤄져 있으며 데이터 항목, 텍스트, 이미지 등을 담거나 담지 않을 수도 있다.

 

태그 란?

  • 하나의 약속된 명령어이며 고유한 기능을 가지고 있다.
  • <p>내용</p> 처럼 시작태그 + 내용 + 종료태그로 구성된 한 줄을 HTML Element라고 부른다.
  • <> 안에 내용에 따라 기능이 달라 질 수 있다.
  • 일부 단독으로 사용되는 태그도 존재한다.

 

태그의 종류

  • 문자를 꾸며주는 태그
    • <strong>굵게</strong>
    • <u>밑줄</u>
    • <h5>제목</h5>
  • 빈 태그
    • <br /> 다음 줄로 내리는 태그
    • <hr /> 수평선을 그려주는 태그
  • 특정 기능이 있는 태그와 속성(attribute, value)
    • 특정 태그는 속성과 속성의 값을 주어 더 구체적인 기능을 구현 가능하다.
    • 기능이 있는 태그
      • <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> 새창에서 이동 
    • 이미지와 동영상 태그
      • 이미지를 보여주는 태그
        • <img src="/이미지경로/이미지.확장자" /> 일반 이미지
        • <div style="background-image: url('/이미지경로/이미지.확장자')" /> 배경 이미지
      • 동영상을 보여주는 태그
<video muted="muted" autoplay="autoplay" loop="loop">
<source src="동영상위치.mp4">
</video>

 

태그의 특징

  • Block, Inline
    • Block
      • 페이지의 가로넓이 전체를 차지하는 요소
      • <h1 />, <div />, <p /> 등 해당
    • Inline
      • 자신의 크기만큼만 차지하는 요소
      • <span />, <input />, <button /> 등 해당
  • 종속 태그
    • 종속 태그란 다른 태그와 상호작용을 해서 작동하는 태그
    • <ol></ol> 번호를 매겨 순서가 있는 리스트(ordered list)를 만들 때 사용
    • <ul></ul> 순서 없이 모양의 리스트(unordered list)를 만들 때 사용
  • 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>

'프론트엔드 > HTML,CSS' 카테고리의 다른 글

[CSS] CSS에 대해 2 - 정렬  (0) 2023.01.05
[CSS] CSS에 대해 1  (0) 2023.01.05
'프론트엔드/HTML,CSS' Related Articles more