HTML 수업을 들어가기 전에 강사님께서 웹 구조와 역사에 대해서 먼저 강의해주셨다. 자세히 몰랐던 내용들을 배우니 신기하고 재미있었다.
눈으로만 보고 머리로 익혀서 HTML 내용만 일단 블로깅하였다 ㅠㅠ 뭐라도 써놨으면 좋았을텐데 .. ~ 아쉽다.
HTML이란
Hyper Text Markup Language의 약자로, 웹 페이지를 만드는 표준 마크업 언어
간단 예시
<!DOCTYPE html> // HTML5 문서임을 정의
<html> // HTML 페이지의 루트 요소, 전체 HTML 문서 정의
<head> // HTML 페이지에 대한 메타 정보 포함
<title>Title</title> // HTML 페이지의 제목 지정
</head>
<body> // 문서의 본문 정의, 표시되는 모든 콘텐츠의 컨테이너
<h1>Heading</h1> // 큰 제목 정의
<p>Paragraph</p> // 문단 정의
</body>
</html>
HTML 요소
시작 태그, 콘텐츠, 종료 태그로 정의되며, 시작 태그부터 종료 태그까지의 모든 것을 의미
<태그 이름>내용</태그 이름>
| 시작 태그 | 콘텐츠 | 종료 태그 |
| <h1> | Heading | </h1> |
| <p> | Paragraph | </p> |
HTML 속성
HTML 요소에 대한 추가 정보를 제공
- 항상 시작 태그에 지정
- 이름=값(ex: name="value") 쌍으로 표현
- href 속성
링크가 이동하는 페이지의 URL을 지정
<a href="https://www.tistory.com">티스토리</a>- src 속성
표시할 이미지 경로를 지정
<img src="img_tistory.jpg">- alt 속성
대체 텍스트 지정
<img src="img_tistory.jpg" alt="티스토리">- style 속성
색상, 글꼴, 크기 등의 스타일을 요소에 추가
<p style="color:blue;">티스토리</p>- lang 속성
웹 페이지의 언어 선언, 검색 엔진과 브라우저 지원하기 위함
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>- title 속성
요소에 대한 추가 정보 정의, 요소에 마우스를 올리면 툴팁으로 표시됨
<p title="tooltip">티스토리</p>
HTML 태그 정리
| 태그 | 의미 | 사용법 | 결과 |
| <h1> ~ <h6> | 제목 | <h2>제목2</h2> <h3>제목3</h3> <h6>제목6</h6> |
제목2제목3제목6 |
| <p> | 문단 | <p>문단<p> | 문단 |
| <br> | 줄바꿈 | <p>제목<br>문단</p> | 제목 문단 |
| <b> | 굵은 텍스트 | <b>굵은 텍스트</b> | 굵은 텍스트 |
| <strong> | 중요한 텍스트 | <strong>중요한 텍스트</strong> | 중요한 텍스트 |
| <i> | 이탤릭체 텍스트 | <i>이탤릭체 텍스트</i> | 이탤릭체 텍스트 |
| <em> | 강조된 텍스트, 기울임체로 표시 | <em>강조 텍스트<em> | 강조 텍스트 |
| <mark> | 표시된 텍스트, 텍스트에 형광 표시 | <mark>표시 텍스트</mark> | 표시 텍스트 |
| <small> | 작은 텍스트 | <small>작은 텍스트</small> | 작은 텍스트 |
| <del> | 삭제된 텍스트, 텍스트에 줄 그어 표시 | <del>삭제 텍스트</del> | |
| <ins> | 삽입된 텍스트, 텍스트에 밑줄 그어 표시 | <ins>삽입 텍스트</ins> | 삽입 텍스트 |
| <sub> | 아래 첨자 텍스트 | <p>이것은 <sub>아래 첨자 텍스트</sub> 입니다.</p> | 이것은 아래 첨자 텍스트 입니다. |
| <sup> | 윗 첨자 텍스트 | <p>이것은 <sup>윗 첨자 텍스트</sup> 입니다.</p> | 이것은 윗 첨자 텍스트 입니다. |
| <q> | 짧은 인용문 정의, 인용문에 따옴표 삽입 | <p>인용문: <q>짧다.</q></p> | 인용문: 짧다. |
| <img> | 이미지 | <img src="url" alt="대체 텍스트"> | |
| <a> | 하이퍼링크 | <a href="링크 url">하이퍼링크</a> |
728x90
반응형
'LG 유플러스 유레카 SW > HTML+CSS' 카테고리의 다른 글
| [#48] 화면 구조/스타일링 잡기 (2) | 2025.04.07 |
|---|---|
| [#4] BS5(부트스트랩) (1) | 2025.01.23 |
| [#3] CSS 더 알아보기 + BS5(부트스트랩) 시작하기 (1) | 2025.01.22 |
| [#2] HTML & CSS 살펴보기 (2) | 2025.01.21 |