[HTML/CSS] 기초 태그 정리

👩🏼‍💻 HTML 기본 태그

제목 태그 (<h1> ~ <h6>)

• 문서의 제목 및 소제목에 사용
• 숫자가 작을수록 글자 크기가 큼 (<h1>이 가장 큼)

<h1>가장 큰 제목</h1>
<h6>가장 작은 제목</h6>

---

문단과 줄바꿈

<p>단락 예시</p>
문장1<br>문장2
<hr color="blue">

• <p>: 문단 (기본 여백 포함)
• <br>: 줄바꿈
• <hr>: 수평선 (스타일 지정 가능)

---

특수문자

기호	마크업
<	&lt;
>	&gt;
&	&amp;
공백	&nbsp;

---

블록 요소 vs 인라인 요소

구분	태그 예시	특징
블록 요소	div, p, section, article, h1	한 줄 전체 차지, 줄바꿈 발생
인라인 요소	span, a, em, strong, i	한 줄에 여러 요소 나란히 배치 가능

---

✅ CSS 적용 방식

Inline Style

<p style="color:red;">텍스트</p>

Internal Style

<style>
  p { color: red; }
</style>

External Style

<link rel="stylesheet" href="style.css">

/* style.css */
div {
  font-size: 17px;
  font-weight: 600;
}
.web {
  color: tomato;
}

💡 외부 스타일시트를 연결하면 코드 관리가 쉬워지고 여러 페이지에서 재사용 가능하다.

---

선택자 예시

/* 태그 선택자 */
div { color: blue; }

/* 클래스 선택자 */
.web { color: tomato; }

/* 아이디 선택자 */
#java { background: yellow; }

---

✅ 속성 및 기능

<div title="툴팁 표시">마우스를 올려보세요</div>
<div contenteditable="true">내용 입력 가능</div>
<li data-subject="java">자바</li>
<div draggable="true">드래그 가능</div>

• title: 마우스를 올렸을 때 툴팁 표시
• contenteditable: 내용 직접 편집 가능
• data-*: 사용자 정의 데이터 속성
• draggable: 드래그 가능 여부

---

✅ 여백과 정렬

Padding (안쪽 여백)

padding: 10px;              /* 모든 방향 */
padding: 10px 20px;         /* 위아래 10, 좌우 20 */
padding: 10px 15px 20px 25px; /* 위 오른 아래 왼 */

Margin (바깥 여백)

margin: 20px;     /* 모든 방향 */
margin: 0 auto;   /* 수평 가운데 정렬 */

box-sizing

box-sizing: content-box;  /* 기본값: width는 콘텐츠 크기 */
box-sizing: border-box;   /* padding과 border 포함 */

---

✅ 레이아웃 구성

float & clear

<div style="float: left;">왼쪽</div>
<div style="float: right;">오른쪽</div>
<div style="clear: both;">플로트 해제</div>

---

display 속성

속성	설명
block	한 줄 전체 차지
inline	줄바꿈 없이 나란히 배치
inline-block	인라인처럼 배치되면서 크기 조절 가능

---

vertical-align

vertical-align: top | middle | bottom | baseline;

• 인라인 요소의 수직 정렬

---

✅ 시맨틱 태그

태그	의미
<header>	머릿글 영역
<nav>	내비게이션 영역
<main>	주요 콘텐츠
<section>	콘텐츠 구역
<article>	독립적인 콘텐츠
<aside>	보조 콘텐츠
<footer>	바닥글 영역

---

✅ 포맷팅 태그

태그	설명
<b>	굵은 글씨
<i>	이탤릭체
<em>	강조 (보통 이탤릭)
<strong>	강조 (보통 굵게)
<pre>	서식 있는 텍스트 (공백 유지)
<sub>	아래 첨자
<sup>	위 첨자
<address>	저자 정보 표시

---

✅ 실전 레이아웃 예시

<div style="width: 1200px; margin: 0 auto;">
  <div style="height: 100px; background: black;"></div>

  <div>
    <div style="float: left; width: 250px;">
      <div style="height: 50px; background: orange;"></div>
      <div style="height: 100px; background: red;"></div>
      <div style="height: 550px; background: purple;"></div>
    </div>

    <div style="float: left; width: 950px;">
      <div style="height: 50px; background: yellow;"></div>
      <div style="height: 650px; background: silver;"></div>
    </div>
  </div>

  <div style="clear: both;"></div>
  <div style="background: blue; height: 100px;"></div>
</div>

---