매번 보는게 html인데, 항상 태그들을 쓸 때 뭐가 정확하게 무엇인지 모르고 그냥 다른 html 파일을 베껴가며 대충 때려넣기로 작성을 했다. 그래도 정말 기본은 알아야하지 않을까 싶어서 기본 태그들을 정리해 둘까 한다. 우선 기본적으로 알아야 할 것은 html 작성시 head와 body가 존재하고 그 두 개의 태그를 html태그로 감싸야 한다는 것이다.
html 기본 태그
<h1> ~ <h6> : 글쓸 때 '제목'과 같은 역할. 숫자가 클수록 소제목이다.
<p> : 문단을 의미한다.
<br> : 한 줄 띄기.
<img> : 사진을 첨부한다.
<ol> : ordered list. 목록을 만드는데, 앞에 숫자를 자동으로 붙인다.
<ul> : unordered list. 목록을 만드는데, 앞에 숫자가 따로 안 붙는다.
<li> : 목록의 항목들. 리스트.
<title> : 웹페이지의 제목 설정
<strong> : 글씨 굵게
<meta> : 해당 문서에 대한 정보인 메타데이터(metadate)를 정의.
<head> : 본문(body)를 설명하는 태그들을 묶음.
<body> : 본문 내용인 태그들을 묶음.
<html> : HTML이 작용하는 범위를 지정하는 태그. DTD를 제외한 전체를 이 태그로 둘러싼다.
<!DOCTYPE> : 마크업 언어용 DTD 태그이다. HTML5의 경우 맨 위에 '<!DOCTYPE html>'와 같이 써 주면 된다. 참고로 소문자로 작성해도 상관없다. ('DTD : Document Type Definition)
<a> : 링크 생성 태그. 속성으로 ' href="링크" '를 사용해서 링크를 생성한다.
<div> : 'division'의 약자로 문서를 분할할 때 쓰는 태그. 특정 스타일이나 레이아웃을 적용하기 위해 사용되며, 특별한 의미가 없는 컨테이너 역할을 한다. div는 display 속성이 block level element다.
<span> : div 태그와 비슷한 역할로, display 속성이 inline element다.
임시 작성한 html 코드
<!DOCTYPE html>
<html>
<head>
<title>BLOG - http</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">BLOG</a></h1>
<ol>
<li><a href="1.html">http</a></li>
<li><a href="2.html">API & REST API</a></li>
<li><a href="3.html">Git & Github</a></li>
</ol>
<h2><a href="https://zerofootblog.tistory.com/5" target="_blank" title="http specification">http란 무엇인가?</a></h2>
<p>: <strong>인터넷에서 정보를 주고 받는 <u>규칙</u></strong>이다. 인터넷에서 클라이언트와 서버가 서로 소통할 때 쓰는 언어라고 봐도 좋다. 사람과 사람이 대화할 때 언어가 다르다면 의사소통이 어려워지는 것을 생각하면 이해하기 쉽다. 클라이언트와 서버가 같은 언어를 사용해서 요청과 응답을 이어나간다고 생각하자. (클라이언트와 서버 간의 Request와 Response를 위한 메세지)</p>
<p style="margin-top:40px">웹브라우저에서 개발자도구(F12)를 클릭하고 Network를 클릭하면 웹브라우저와 서버가 어떤 통신을 하고 있는지 모니터링 가능하다. Network 탭의 일부분을 알아보자.</p>
<h2>Headers(헤더)</h2>
<p>: http 요청과 응답의 메타데이터를 보여주는 부분. 쉽게 말하면, 클라이언트(브라우저)와 서버가 주고받는 '추가정보'를 담은 편지 봉투라고 생각하자.</p>
<img src="https://blog.kakaocdn.net/dna/chDQTc/btsLMKLxJy7/AAAAAAAAAAAAAAAAAAAAAEa5lcmZHpcENTxlU9Q4DNJ5-vuykUbGnxewhXbR1VmR/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=L6gjx%2FOyVILTwu7GMvFRvsOLGF4%3D">
</body>
</html>
결과 화면
'공개 글' 카테고리의 다른 글
| CSS 기본 - 1 (1) | 2025.03.12 |
|---|---|
| @GetMapping? @PostMapping? (0) | 2025.02.19 |
| API와 REST API (0) | 2025.01.20 |
| HTTP(HyperText Transfer Protocol) (1) | 2025.01.16 |
| Git과 GitHub (0) | 2025.01.13 |