반응형
HTML
Hyper Text Markup Language의 약자로 하이퍼링크를 통해 사용자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트를 사용한 마크업 언어, 웹사이트의 모습을 기술하기 위함
<!-- ! 에밋을 사용할 경우 아래와 같은 가장 기본적인 HTML의 틀이 나타난다 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML의 요소 구조
- HTML 요소는 여러 속성을 가질 수 있으며, 속성은 해당 요소에 대한 추가적인 정보를 제공하는 형태, HTML 요소는 시작 태그로 시작하여 종료 태그로 끝나는 형태
- 요소 ⊃ 속성(태그와 내용을 포함한 전체) ⊃ 태그 (열기와 닫기 태그 그자체)
HTML 태그(tag)
<!-- 다음과 같은 구조의 형태를 갖는다. -->
<태그이름> 시작 태그
</태그이름> 종료 태그
<!-- 예시 -->
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<p>단락</p>
HTML의 기본 구조
- html
- 문서의 최상위 요소
- <title> 태그 (상단 타이틀)
- <link> 태그 (외부 리소스 연결)
- <style> 태그 (CSS 작성)
- head
- 문서의 메타 데이터 요소
- 문서 제목, 외부 파일 로딩, 인코딩, 스타일 등이 위치
- 일반적으로 브라우저에는 나타나지 않음
- body
- 실제 화면 구성과 관련된 내용
HTML의 기본 요소
- HTML 요소는 여러 속성을 가질 수 있고, 시작 태그와 종료 태그, 태그 사이에 위치한 내용으로 구성
- 특수한 기능을 수행하는 태그들 존재 (br, hr, img, input 등)
- 요소의 중첩을 통해 하나의 문서를 구조화 할 수 있음
HTML의 속성
- 속성을 통해 태그의 부가적인 정보 설정
- 요소는 속성을 가질 수 있으며, 경로 · 크기와 같은 추가적 정보 제공
- 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
HTML 요소의 타입
- 블록(block) 타입의 요소
- 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지
- <p>, <div>, <h>, <ul>, <form>, <ol> 태그가 대표적
- 인라인(inline) 타입의 요소
- 새로운 라인에서 시작하지 않음
- 요소의 너비는 해당 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지
- <span>, <a>, <img> 태그가 대표적
- 인라인-블록(inline-block) 타입의 요소
- inline과 block의 속성 모두 보유
- 줄 바꿈 없이 한 줄에 다른 요소들과 배치 가능(inline 속성)
- width, height, margin-top, margin-bottom 설정 가능 (block 속성)
텍스트 요소
<a href="링크"></a> href 속성을 활용하여 다른 URL로 연결하는 링크 생성
<b></b> 굵은 글씨로 강조하고자 하는 요소
<strong></strong>
<i></i> 기울인 글씨로 강조하고자 하는 요소
<em></em>
<br> 텍스트 내 줄바꿈
<img src="이미지주소" alt="대체문자열"> 이미지를 표현하는 요소
<span></span> 주로 특정 부분에 따로 스타일을 적용하기 위해 사용하는 인라인 요소
기타 요소
<p></p> 하나의 문단을 나타내는 요소
<hr> 주제를 분리하기 위한 수평선
<div></div> 의미 없는 블록으로, 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
<form action="처리할페이지주소"></form> 사용자로부터 입력을 받아 처리하는 요소
<input type="타입"> 여러 속성을 사용하여 사용자의 입력을 제어하는 요소
반응형
'개발 > html & CSS' 카테고리의 다른 글
| CSS의 기본 개념 - 정리 3 (0) | 2023.03.19 |
|---|---|
| CSS의 기본 개념 - 정리 2 (0) | 2023.03.10 |
| CSS의 기본 개념 - 정리 1 (0) | 2023.03.09 |
댓글