[HTML/CSS] html 태그 정리

head 태그

문서의 메타 데이터(다른 데이터를 설명해주는 데이터)를 나타내는 구역이다. 
문서에서 사용되는 여러가지 데이터들의 정보를 표기해두는 데이터에 관한 내용들을 작성해준다. 

meta 태그

문서의 여러가지 정보들을 담는 태그이다. 대표적으로는 문자 인코딩 방식을 작성할 때 사용한다. 

<meta charset="utf-8">

브라우저에 따라 인코딩 방식으로 인하여 한글 폰트가 깨지는 경우가 존재한다.
이때 meta 태그를 통하여 한글을 지원하는 인코딩을 설정해준다. 

title 태그

문서의 제목(이름)을 설정한다. 

<title>title 태그</title>

다음과 같이 title 태그를 설정하면

브라우저의 탭에서 설정한 문서의 이름이 보이는 걸 확인할 수 있다. 

link 태그

외부 파일들을 연결하는 역할을 해준다. 

대표적으로 웹폰트를 이용할 때 작성하여 준다. 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

구글 웹폰트에서 제공해주는 웹폰트의 코드이다. 해당 코드를 head 태그에 작성하여 주면 된다. 

style 태그

문서의 style을 설정할 수 있다. 

<style>
  h2{
    color:#5b2eb0;
  }
</style>

다음과 같이 style 태그 내부에 css 속성들을 작성해주면 된다. 
다만 이렇게 할 경우 문서 전체에 각 태그에 대한 스타일이 적용되어 코드가 길어질 경우 스타일을 각각 따로 설정하거나 스타일 파일을 나누어 관리하는 것도 좋은 방법이다. 

script 태그

javascript 코드를 사용할 때 쓰인다. 

<script>
  console.log('hi');
</script>

js 문법을 사용한 코드를 script 태그 내부에 작성하거나

//text.js
console.log('hi!');

//index.html
<script src="./text.js"></script>

src 속성으로 js 파일 경로를 작성해주면 된다. 

 

자주 사용되는 태그들

h 태그

보통 제목을 작성할 떄 사용한다.

h4

h5

h6

h1부터 h6 까지 설정할 수 있으며, h1이 가장 크고 h6은 가장 작은 글씨이다. 

 

p 태그

본문을 작성할 때 많이 사용한다. 

작성하고 싶은 텍스트를 p태그 안에 작성해주면 된다.

 

a태그

텍스트에 외부 링크를 연결할 수 있다. 

<a href='주소'></a>

href 속성에 연결할 주소의 경로를 작성해주면 된다. 
href는 hyperReference(하이퍼 참조)의 의미를 지닌다. 

 

br태그

줄바꿈 태그이다. 

p태그 내부에 여러 줄을 작서하다 줄바꿈이 필요할 경우, 문장 마지막에 br태그를 작성하여 준다. 따로 닫는 태그는 작성해주지 않아도 된다. 

<p>
  줄바꿈을 <br>
  합니다.
</p>

줄바꿈을
합니다.

 

img 태그

이미지를 삽입할 때 사용된다. 

<img src="이미지 경로">

src 속성으로 이미지의 경로를 작성하여주면 된다. 파일의 경로나 외부 주소를 지정해주면 된다. 

 

div 태그

영역을 나눌 때 사용한다. 

여러 태그들을 div 태그로 묶어 하나의 영역으로 설정하고, css로 스타일을 알맞게 설정할 수 있다. 

 

span 태그

span 태그는 div 태그와 마찬가지로 아무 의미도 가지지 않는 태그이다.
div 태그와의 차이점은 기본 display가 div 태그는 block인 것에 반해 span 태그는 inline으로 설정되어 있다. 또, span 태그는 줄바꿈이 불가능하다. 

div 태그는 주로 레이아웃을 나눌 때 사용되고, span 태그는 텍스트나 단순한 설정들, 인라인 요소들을 묶고 정의할 때 사용된다. 

<div style="background-color: #8fde2a;">
  <span style="color: #9ea231;">
    안녕
  </span>
  <span style="width: 75px; color: #1e2a11; background-color: #4e23aa;">
    안녕
  </span>
</div>

안녕 안녕

div 태그가 span 태그를 감싼 구조이다. 

2번째 span 태그에서 width  값을 설정하여 주었지만 주어진 텍스트의 길이만큼만 공간이 할당된 모습을 볼 수 있다. 

이처럼  span 태그는 데이터의 크기만큼만의 공간이 할당된다. 만약  width 값을 주고 싶다면 display 속성을 block으로 바꾸면 된다.