HTML

Now, Sophia·2021년 8월 25일

TIL html

TIL-HTML

목록 보기

1/3

▶︎ HTML

Hyper Text Markup Language

웹페이지를 만드는데 사용하는 기본적이고, 요소(element)로 구조적으로 작성된 마크업 언어.
태그를 사용하여 웹페이지의 디자인이나 기능을 구현한다.

☞ HTML 요소 구조

< > 으로 열리는 태그를 시작하여, </> 닫히는 태그로 종료

기본문법

	<태그이름> 내용 </태그이름>
	<태그이름 속성이름 = "속성값"> 내용 </태그이름>
	// 속성은 시작태그 내에서만 정의된다.
	// 속성의 이름은 기본적으로 영어 소문자로, 속성값은 "" or '' 로 반드시 감싸준다.

☞ HTML 기본 구조

<!DOCTYPE html> : HTML 문서를 선언
<html>: HTML 문서의 루트. <head> 와 <body>로 구성
<head>: 문서의 메타데이터 정의. 웹 브라우저에는 직접적으로 표현되지 않은 문서에 대한 정보설명
<title>: HTML의 제목. 웹 브라우저의 툴바 및 즐겨찾기 추가 시, 제목으로 표시
<body>: 웹 브라우저를 통해 보이는 내용

- 메타데이터(metadata)란? 검색엔진의 탐색, 타이틀, 부가설명 등 페이지에 대한 정보를 가진다.

✶ block / inline

HTML 요소는 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가지고 있다. display 값으로 block & inline 이 있다.

block 은 가로폭 전체의 넓이를 가지는 직사각형 형태로 width, height, margin, padding 을 사용하여 레이아웃을 수정할 수 있다.
즉, 해당 라인의 모든 너비를 차지한다.
그렇기 때문에 block 요소 다음에는 줄 바꿈이 된다.
block 요소는 inline 요소를 포함 할 수 있고, 다른 block요소 일부 포함 가능하다.
- block인 요소 :
<p>, <div>, <h>, <ul>, <ol>, <address>, <article>, <pre>, <section>, <video>, <footer>, <header>, <table>...

inline 은 해당 요소의 내용(text)만큼만 차지한다.
그리고 text-align 으로 내용 정렬을 좌,우,중앙으로 할 수 있다.
인라인은 줄바꿈 없이 바로 이어서 표시가 된다.
볼록 요소 안에 포함되어 있으며, 인라인 요소 안에 다른 인라인 요소가 포함 될 수 있다.
- inline인 요소 :
<a>, <br>, <em>, <button>, <map>, <script>, <span>, <sup>, <strong>, <img>...

✶ id / class

id 는 숫자로 시작 할 수 없으며, 공백/탭을 포함할 수 없다. 대소문자를 구분한다.
class 또한 숫자로 시작할 수 없고, 대소문자를 구분한다. 그러나 한 태그에 여러 class가 들어 갈 수 있으며, class 구분은 공백으로 한다.

id 는 html 안에서 고유의 값으로 부여하여 특정 스타일 선언에 포인트로 사용.
CSS에서 적용 할 때는 # 으로 표기한다.

id 속성으로 책갈피를 만들 수 있다.

	<p id="html"> HTML </p>
// id 속성으로 책갈피를 만든다.
	<p> CSS </p>
	<p> Java </p>
	<p> PHP </p>
	<a href="#html">go to HTML</a>
// 같은 페이지 내에서 id 값이 "html"인 책갈피에 대한 링크를 추가한다.

class는 요소(태그)들을 그룹으로 묶어서 스타일을 지정할 때 쓴다.
다른 요소가 동일한 class를 공유할 수가 있다.
CSS에서 적용할 때는 . 으로 표기한다.

	<style> 
	  .favorite {
		display: inline;
 		color: yellow;
		background-color: black;
		margin: 20px;
		padding: 10px;
	  }
	  .main {
		display: block;
 		text-align: center;
	  }
	</style>
	<body>
	  <h1 class = "favorite main"> Marvel hero </h1>
	  <p class = "favorite"> Thor </p>
	  <p class = "favorite"> Hulk </p>
	  <p class = "favorite"> Black widow </p>
	</body>

✶ Semantic tag (의미론적인 태그)

Semantic tag : 의미있는 태그를 뜻하는 것으로 HTML5에 도입

의미있는 태그를 사용함으로써 HTML의 구조나 내용의 의미를 유추할 수 있다는 것이다.
유추함으로써 가독성도 높이고, 컴퓨터가 html 문서를 분석할 때도 정확하게 컨텐츠를 식별할 수 있다.
또한 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때
의미론적 마크업을 푯말로 사용할 수 있다.

기존에는 header를 표현하기 위해 div 태그에 id 나 class를 사용하여 하기와 같이 개발자 마음대로 정의하였다.

<div id = "header"> or <div class = "head">

그러나 HTML5에 도입된 Semantic tag를 사용함으로써 컴퓨터에서도 HTML 구조를 명확하게 알 수 있고, 내용의 의미도 유추할 수 있다.

<header>, <table>, <footer>, <section>, article..

✶ div / section / article

div
Non-semantic 태그로써 의미를 지니지 않은 block
단순 스타일링 목적일 때 사용하는 것이 좋다.

section
semantic 태그로써 문서의 구역
예를 들면, 한 쇼핑몰의 상의/하의/신발 구역에 section을 사용할 수 있다.
문서 요약에 해당 구획이 논리적으로 나타나야할 때 사용하는 것이 좋다.

article
semantic 태그로써 독립적으로 구분하여 배포하거나 재사용 할 수 있는 구획
예를 들면, 한 쇼핑몰의 게시글 영역에 공지사항/Q&A에 article을 사용할 수 있다.
외부와 구분하여 단독으로 묶는 것이 나을 때에는 article 사용하는 것이 좋다.

Whatever you want