안녕하세요. 코드 서핑입니다.
저도 HTML/CSS 를 공부하고 있는 입장으로서 정리 겸 공부한 내용을 포스팅해보려 합니다.
오늘은 첫 번째로 자주쓰이고 인기 있는 HTML TAG에 대해 알아보겠습니다.
제가 이해했던 느낌적인 느낌으로다가 문과 감성으로 설명하도록 하겠습니다.😀
우리가 보는 '웹 페이지'는 <html> 태그로 시작해서 </html>로 끝납니다.
'HyperText Markup Language'라는 단어에서 볼 수 있듯이, 차례차례 마크업 해나가면서
웹페이지를 만들어가는 과정입니다.
처음 코딩시 <!DOCTYPE html>선언하고 시작하는데 이는 지금 코딩하는 문서의 유형이
html이라고 선언하는 것이죠.
<head>
html의 정보를 나타내는 태그들이 들어갑니다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>웹 페이지 제목</title>
<link rel="stylesheet" href="style.css" />
</head>
<meta>
웹 페이지에서 사용하는 문자들의 인코딩 방식을 나타냅니다.
<meta charset="utf-8">*UTF-8은 Universal Coded Character Set + Transformation Format – 8-bit의 약자
내가 '한글'로 작성한 웹 페이지를 미국에서 어떤 사람이 본다고 가정할 때,
컴퓨터의 기본 문자 표기는 영어권에서 만들어졌기 때문에 한글이 깨져 보일 수 있습니다.
이러한 문제를 해결하기 위해, '유니코드'가 탄생했고 유니코드 방식 중 지금 가장 많이
쓰이는 방식이 'UTF-8' 이죠.
<title>
웹 페이지의 제목을 나타냅니다.
검색 시 노출되는 페이지의 제목이 여기에 해당하죠.
<link>
외부 문서를 연결하는 태그입니다.
<link rel="stylesheet" href="style.css" />나중에 다루겠지만 <html>에서 작성한 내용을 꾸미는 css문서를 연결할 때 사용합니다.
'바디'태그는 말 그대로 웹 페이지의 '몸'부분에 해당합니다.
그럼 '헤드'태그는 머리 부분이냐라고 하실 수 있겠지만 맞아요. 웹 페이지의 정보를 머리로 담고
몸에서 보여주는(?) 겁니다. <body>태그에서 작성한 내용이 실제로 웹 페이지에 방문한 사람들에게
보이게 되는 부분인 거죠.
<h1>
<hn> 태그는 h1 ~ h6까지 있는데요. 제목을 쓸 때 보통 사용하고 h1이 크기가 가장 크고 h6가 가장 작습니다.
<div>
<div> 태그는 의미 없는 '박스'라고 이해하시면 편한데요. 어떤 내용들을 담고 있는 하위 태그들을 묶을 때
사용합니다.
<a>
anchor의 a 인데요 웹 페이지에서 <a>태그를 사용하면 다른 웹페이지를 '링크'할 수 있습니다.
<a> 태그의 속성으로 'href'를 사용합니다.
<a href="https://code-surfing.tistory.com />
<script>
스크립트 태그는 주로 javascript를 넣을 때 사용합니다.
<script src="javascirpt.js"></script>
<img>
이미지 태그입니다. 웹 페이지에 이미지를 넣고 싶을 때 사용합니다. 이미지의 주소 값을 넣어줘야 하는데,
https:// 를 포함한 절대 경로를 넣는 방식과 local 주소 값인 상대 경로를 넣는 방식이 있습니다.
<img src="https://code-surfing.tistory.com" width="너비" height="높이"
alt="이미지 설명 대체 텍스트" title="마우스 hover시 뜨는 설명">
<p>
Paragraph의 약자입니다. 문단인데요. 지금 쓰고 있는 포스팅의 이 부분도 p태그를 사용하고 있습니다.
<p>Paragraph 의 약자입니다. 문단인데요.
지금 쓰고있는 포스팅의 이 부분도 p태그를 사용하고 있습니다.</p>
<span>
<div>태그와 비슷한 <span>태그는 의미없는 묶음임에는 동일하나 inline 요소입니다.
inline 요소는 내용 크기만큼만 너비를 차지하고 block 요소는 전체 너비만큼 부피를 차지합니다.
위에 태그를 눌러보세요
<li>
'리스트'의 li 입니다. 내용을 항목별로 리스트화 할 때 주로 사용합니다. <li>태그는 <ul>, <ol>태그와 함께
사용합니다. 여기서 <ul>태그는 unoldered list 즉, 순서가 없는 리스트이고 <ol>태그는 ordered list 순서가 있는 리스트입니다.
<ul>
<li>리스트</li>
<li>리스트</li>
<li>리스트</li>
</ul>
<ol>
<li>리스트</li>
<li>리스트</li>
<li>리스트</li>
</ol>
<style>
마지막으로 '스타일'태그입니다. <style>태그는 html에서 작성한 내용을 '꾸미는'태그인데요.
적용하는 방법은 크게 3가지가 있습니다. inline 스타일, 내부 스타일시트, 외부 스타일시트인데요.
예시를 살펴보겠습니다.
inline 스타일
<div style=" width: 100px; height: 100px; background-color: black;">
내부 스타일시트
<head>
<style>
div{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>위처럼 내부 스타일시트를 사용할 때는 <head>태그 안에서 작성해야 합니다.
외부 스타일시트
<link rel="stylesheet" href="style.css" />앞서 <link>태그에서 살펴봤듯이, 외부 스타일시트를 연결해서 사용하는 방식입니다. 이 경우 css파일을 열어서
그 안에서 스타일에 대한 내용만을 따로 코딩하기 때문에 작업 시 좀 더 깔끔하게 작업할 수 있습니다.
위 방식들을 혼합해서 작업한다면 우선순위는
inline 스타일 > 내부 스타일시트, 외부 스타일시트 > 웹 브라우저의 기본 스타일입니다.
자, 여기까지 인기 있는 [HTML TAG]에 대해 알아보았는데요. 어떠셨나요?
코딩에 관한 첫 포스팅이라 아직 깔끔하지 못한 점 인정합니다.😅
다음에는 좀 더 보기 편한 포스팅으로 찾아오겠습니다!
읽어주셔서 감사하고, 도움이 되셨다면
댓글과 공감은 언제나 환영입니다!
'코딩 > HTML' 카테고리의 다른 글
| HTML [button] tag - 클릭할 수 있는 버튼 태그 (0) | 2020.11.12 |
|---|---|
| #2 HTML [img] - 이미지 삽입 태그 (0) | 2020.11.05 |