1. HTML 개요
HTML이란?
마크업 언어로, 웹 문서를 작성하며 태그를 사용해서 문서의 구조 등을 기술하는 언어.
■ 각각의 HTML 태그는 문서 내에서 다른 내용을 기술한다.
■ 보통 HTML 태그는 시작 태그와 종료 태그로 둘러싸여 표현되며, <br>과 같은 단독 태그도 존재한다.
■ HTML 문서는 웹 브라우저에서 실행한다.
■ 어느 태그에나 넣을 수 있는 글로벌 속성 종류
| 1. class | 태그에 적용할 스타일의 이름 지정 |
| 2. dir | 내용의 텍스트 방향 지정. |
| 3. id | 태그에 유일한 ID를 부여함. 자바스크립트 제어에서 주로 사용 |
| 4. style | 인라인 스타일 시트를 적용하기 위해 사용 ex. <p style="color:red;text-align:center">하하하</p> |
2. HTML 기본 태그
-1) <head> 태그 : html 문서에 대한 정보를 써 놓은 곳. 메타 데이터에 해당한다.
■ <title>, <style>, <meta>, <link>, <script>, <base> 등의 태그들로 구성
- <title> : 문서 제목
- <link> : 웹 페이지와 외부 자원 간의 관계 정의. 주로 스타일시트(CSS 파일) 링크에 사용
- <meta> : 문서에 대한 메타데이터. 페이지 설명, 키워드 등
-2) <body> 태그 : html 문서의 본문 시작과 끝을 알려주고, 웹 브라우저 화면에 보이는 내용들을 작성하는 부분
-3) <p> 태그 : 문단과 문단 사이를 구분할 때 사용. 특별한 지시가 없을 시 시작 태그와 종료 태그 사이에 있는 문단은 한 문장으로 취급한다.
-4) <br> 태그 : 줄 바꿈을 하는 태그. 종료 태그가 존재하지 않는다.
-5) 글꼴 속성 태그 <i>, <b> : 글자를 강조할 때 사용.
- <i> 태그 : 글꼴을 기울임
- <b> 태그 : 글꼴을 진하게
-6) <img> 태그 : 웹 페이지에 이미지 삽입 시 사용.
-7) 리스트 태그 : 목록을 만들 때 사용.
- <ul> : 순서 없는 리스트
- <ol> : 순서 있는 리스트
- <li> : 목록의 내용 입력
■ 보통 <ul> 태그와 <a> 태그를 네비게이션 메뉴를 만드는데 같이 사용한다.
-8) <a> 태그 : 하이퍼링크를 사용해서 이동할 페이지 또는 이동할 위치를 지정
■ href 속성과 함께 사용한다.
-9) 테이블 관련 태그
(1) table 태그 : 표를 작성하는 태그. 표 영역만을 설정한다. 반응형 웹 사이트와 같이 유동형 구조에는 잘 사용되지 않는다.
(2) <tr> 태그 : 표의 행을 정의하는 태그. 정의하지 않은 속성은 상위 태그 <table> 태그에서 지정한 것을 이어 받는다.
(3) <td> 태그 : 표의 열, 즉 하나의 셀을 정의하는 태그. 그 이후 내용은 tr 태그와 같다.
-10) <div> 태그 : html 문서에서 영역 또는 구역을 정의
■ 주로 문서를 구역 별로 나누거나, 스타일 시트를 적용할 그룹 영역으로 사용하거나, 문서 전체에 스타일 시트 적용을 할 때 사용
■ 각 div 태그는 id속성을 사용해서 구분하고, 스타일 시트를 적용할 때는 class 속성을 사용하여 적용한다.
https://dev-k-h.tistory.com/53
https://dev-k-h.tistory.com/54
https://dev-k-h.tistory.com/55
https://dev-k-h.tistory.com/57
이미 작성해 놓은 HTML 정리들 참고!
'IT > Frontend' 카테고리의 다른 글
| [쉽게 배우는 H.C.J] Chapter 4 - CSS 개요 및 기본 사용법 (0) | 2025.02.25 |
|---|---|
| [쉽게 배우는 H.C.J] Chapter 3 - HTML 문서 구조 및 주요 태그 (0) | 2025.02.24 |
| [쉽게 배우는 H.C.J] Chapter 2 - Section 02 클라우드 기반 코드 학습 및 테스트 사이트를 사용한 웹 프로그래밍 (0) | 2025.02.24 |
| [쉽게 배우는 H.C.J] Chapter 2 - Section 01 자바, 톰캣, 이클립스 기반의 웹 개발 환경 (0) | 2025.02.24 |
| [쉽게 배우는 H.C.J] Chapter 1 (1) | 2025.02.19 |