HTML & CSS
HTML 기본 정리 ( 구조 / 요소 / 속성 / Global Attribute )
peach_h
2023. 3. 7. 20:44
HTML ( Hyper Text Markup Language )
- 웹 페이지를 작성하기 위한 언어
1. Hyper Text : HyperLink를 통해 텍스트를 이동 -> 클릭을 통해 자유롭게 이동할 수 있다. 비 선형적으로 이루어짐
2. Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어
HTML 기본 구조
1. HTML : 문서의 최상위 요소
2. HEAD : 문서 메타데이터 요소 -> 일반적으로 브라우저에 나타나지 않는 내용이 있다.
- <title> : 브라우저 상단 타이틀
- <link> : 외부 리소스 연결 요소
- <style> : CSS를 직접 작성하는 곳
3. BODY : 문서 본문 요소 -> 실제 화면에 보이는 것과 관련된 내용
HTML 요소(element)
<h1> contents </h1>
여는태그 + 내용 + 닫는 태그
HTML의 요소는 태그와 내용으로 구성된다.
HTML 속성(attribute)
<a href="https://naver.com"></a>
속성명 속성값
HTML 속성은 요소의 수정자이다.속성은 태그의 동작을 제어하기 위해 사용된다.
속성은 속성명 + 속성값으로 이루어진다.
각 태그별로 사용할 수 있는 속성이 다르다.
요소가 스스로 기능하지 못하는 특정한 요소에 기능을 제공한다.
HTML Global Attribute
태그와 상관없이 모든 HTML 요소가 공통으로 사용할 수 있는 대표적인 특성이다.
- id : 요소의 고유 식별자를 지정할 수 있다.
- class : 요소에 대한 하나 이상의 클래스를 지정할 수 있다.
- style : 요소에 대한 inline 스타일을 정의
텍스트 요소
| 태그 | 설명 |
| <a></a> | href 속성을 활용하여 다른 URL로 연결 |
| <b></b> <strong></strong> |
굵은 글씨 |
| <i></i> <em></em> |
기울임 글씨 |
| <br> | 텍스트 내에 줄 바꿈 생성 |
| <img> | src 속성을 활용하여 이미지 표현 |
| <span></span> | 의미없는 인라인 컨테이너 |
그룹 컨텐츠
| 태그 | 설명 |
| <p></p> | 하나의 문단 |
| <hr> | 주제를 분리하기 위한 수평선 ( Horizontal Rule ) |
| <div></div> | 블록 레벨 컨테이너 |