[HTML]
(1) HTML 기본 문법
<1> HTML 기본 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>1. DOCTYPE 선언
- 만들어진 HTML파일을 어떤 버젼의 HTML로, 어떤 방식을 따라 만들어졌는지 브라우저에 전달하는 것.
2. <html> 요소
- HTML문서의 최상위 요소로, 문서내용을 시작함을 알린다. lang 속성을 통해 언어 코드를 지정할 수 있다.
3. <head> 요소
- HTML문서의 메타 데이터(페이지 제목, 문자코드, 키워드 등)을 지정한다.
4. <body> 요소
- HTML문서의 내용이 작성되는 공간이다.
<2> <head> 요소 안에 기술되는 속성
<head>
<title>홈페이지 타이틀<title>
// 이하 meta속성 예시
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content ="키워드1, 키워드2, 키워드3">
<meta name="description" content="문서 설명">
<link href="style.css" rel="stylesheet">
</head>| <title> | 웹 페이지의 타이틀을 지정한다. | |
| <meta> | 화면에 드러나지 않는 부가 정보 (언어 코드, 뷰포트, 키워드, 검색엔진 크롤러 지시어 등)를 지정할 때 사용한다. | |
| <link> | 외부 파일로 저장된 스타일 시트와 연결해준다. | |
(2) <body> 요소에 기술되는 기본 속성
<1> <p>
<p>단락 나누기</p>
<p align="center">중앙 정렬</p>- 본문의 단락을 나눠준다.
<2> <h1> ~ <h6>
<h1>대제목</h1>
<h2>그다음</h2>
<h3>그다음다음</h3>- 見出し(제목)을 의미하며, h다음 숫자가 작을수록 중요한 제목으로 표시된다.
<3> <br>
개행<br>
또 개행<br>- 다른 의미 없이 개행처리만 해주는 태그이다.
<4> <div>
<div>내용</div>- 다른 의미없이 콘텐츠를 묶어주는 역할을 한다.
- CSS나 JavaScript를 통한 처리를 위해 요소를 묶는 용도로 쓴다.
- <p>와 마찬가지로 자동적으로 개행처리를 해주지만, <p>는 단락을 나누기 위해, <div>는 콘텐츠를 나누기 위해 쓰이며, <p>와 달리 위 아래로 한 줄을 추가로 개행처리를 해주지 않는다는 점에서 구별된다.
<5> <span>
<span>내용</span>- <div>와 마찬가지의 역할을 하지만, <div>와 달리 인라인 요소이기 때문에 개행처리를 하지 않는다.
(3) 리스트와 테이블
<1> 리스트 - <ul>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>- 내용 앞에 번호를 매기지 않는 리스트로, ・와 같은 기호가 들어간다.
<2> 리스트 - <ol>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>- 내용 앞에 번호를 매겨주는 리스트이다.
- 속성들을 통해 앞에 번호를 붙이는 방식을 바꾸어줄 수 있다.
<ol start="10"> // 10부터 시작
<ol reversed> // 숫자를 반대로
<ol type="a"> // a, b, c, ...
<ol type="I"> // I, II, III, ...
<3> 테이블 기본 구조
<table border="1">
<caption>표 설명</caption>
<tr>
<th>대빵셀1</th>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
</table>- <caption> 으로 표 제목을 붙일 수 있다. 있어도 되고 없어도 된다.
- <tr>은 행, <td>는 행 안의 일반적인 데이터 셀을 의미한다.
- <th>는 데이터 셀 중에 가장 강조되는 셀로, 있어도 되고 없어도 된다.
<4> 테이블 셀 길이 늘리기
<table border="1">
<caption>표 설명</caption>
<tr>
<td colspan="2">셀1</td>
<td>셀2</td>
</tr>
<tr>
<td rowspan="2">셀3</td>
<td>셀4</td>
</tr>
</table>- colspan 속성은 가로 길이, rowspan 속성은 세로 길이를 의미한다.
'개발일기 > HTML & CSS' 카테고리의 다른 글
| [CSS] (1)~(4) CSS 기본 문법, 폰트와 텍스트의 스타일링, CSS 레이아웃, CSS 레이아웃 2 (0) | 2025.04.14 |
|---|---|
| [HTML] (4)~(7) 하이퍼링크, 미디어(이미지, 동영상, 오디오), 폼, 세멘틱 코딩 (1) | 2025.04.14 |