제목 태그
대 제목을 표현하는 h1부터 h6까지 존재 (기본이 볼드 스타일)
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>문단 태그
p태그 안에 문장을 작성하면 문장이 사이트의 크기에 맞게 나열됨
단, 중간의 문장의 줄바꿈을 원하면 `<br />`태그를 사용해주면 됨
<!-- 줄바꿈 없음 -->
<p>
문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자.
오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩 하기 너무 귀찮음
</p>
<!-- 출력값 -->
<!-- 문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자. 오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩
하기 너무 귀찮음 --><!-- 줄바꿈 사용 -->
문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자. <br />
오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩 하기 너무 귀찮음 <br />
<!-- 출력값 -->
<!-- 문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자.
오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩 하기 너무 귀찮음 -->
주의 사항
p태그 안에 블럭 태그를 넣으면 블럭태그가 p태그 밖에 있는 것으로 됨!
<p>
<span>안녕하세요!</span>
<!-- <h1>안녕하세요!</h1> 이렇게 사용하면 안됨!-->
</p>텍스트 포맷, 서식
<!-- 볼드 -->
<b>hello</b>
<!-- 브라우저에 강조하는 느낌까지 줌 -->
<strong>hello</strong>
<!-- 기울임 -->
<i>hello</i>
<!-- 브라우저에 강조하는 느낌까지 줌 -->
<em>hello</em>
<!-- 밑줄 -->
<ins>hello</ins>
<!-- 글자에 중앙선(삭제선) -->
<del>hello</del>
<!-- 인용문 // 짧은건 q 긴건 blockquote -->
<q>안녕하세요 개발하는 이도서 라고 합니다.</q>
<blockquote>
에베베베베ㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔㅔ베베베벱베베베베베베베벱베베베베베베베베베베베베베베베베베베베베베베베베베베벱베베베베베베베베베베베베베베베베베베베
</blockquote>리스트 태그
<!-- 순서가 없는 리스트 -->
<ul>
<li>청소하기</li>
<li>빨래하기</li>
</ul>
<!-- 순서가 있는 리스트 -->
<ol>
<li>청소하기</li>
<li>빨래하기</li>
</ol>링크 태그
<!-- 링크 태그-->
<!-- 바로 이동 -->
<a href="www.naver.com">바로 네이버로 이동하기</a>
<a href="www.nave.com" target="_blank">새 탭에서 네이버로 이동하기</a>
<!-- 하이퍼링크 -->
<!-- 여기 스타일 부분은 각 간격을 나누기 위한 예시일뿐 신경 ㄴㄴ -->
<style>
div {
padding-top: 500px;
height: 500px;
}
</style>
<body>
<ul>
<li><a href="#first">첫 번째 하이퍼 링크</a></li>
<li><a href="#second">두 번째 하이퍼 링크</a></li>
<li><a href="#third">세번 째 하이퍼 링크</a></li>
</ul>
<div id="first">첫 번째 하이퍼링크로 왔음</div>
<div id="second">두 번째 하이퍼링크로 왔음</div>
<div id="third">세 번째 하이퍼링크로 왔음</div>
<a href="#top">맨 위로 바로가기</a>
</body>이미지 태그
<!-- 이미지 태그 -->
<!-- src = 경로, alt = 화면에 이미지가 출력되지 않을 때 대신의 출력할 것 -->
<img src="./img/cat.jpeg" alt="Cat" />
<!-- width, height 지정 가능 -->
<!-- + 웹 브라우저가 이미지를 불러오는 방식을 지정힐 수 잇는 loading 가능 -->
<!-- + 이미지의 툴팁을 지정하는 title 속성 가능 -->
<img width="200px" height="300px" ; src="./img/cat.jpeg" alt="Cat" />멀티 미디어 태그
<!-- 멀티미디어 태그 -->
<!-- 브라우저에서 지원하는 비디오 컨트롤러를 사용하기 위해서는 controls속성을 사용 -->
<!-- 비디오 -->
<video
controls
width="200px"
height="300px"
src="./video/video.mp4"
></video>
<!-- 오디오 -->
<audio controls src="./video/video.mp4"></audio>'React > HTML & CSS' 카테고리의 다른 글
| [HTML/CSS] 자기소개 페이지 꾸며보기 (0) | 2025.11.26 |
|---|---|
| [HTML] form태그와 input태그 (0) | 2025.11.21 |
| [HTML] div, span 태그 & 클래스와 아이디 (0) | 2025.11.21 |
| [HTML] 간단한 자기소개 페이지 만들어보기 (0) | 2025.11.20 |
| [HTML] 웹 문서의 기본 구조 (0) | 2025.11.20 |