주제 : HTML 복습
1. HTML5 페이지의 기본 구조
<!DOCTYPE html>
<!--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.-->
<html>
<head>
/*문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터정의*/
</head>
<body>
/*문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등*/
</body>
</html>- HTML5 페이지의 필수 태그
- HTML5 문서임을 알리는 지시어
- <html>, <head>, <title>, <body> 태그
2. HTML 태그
- 태그와 속성은 대소문자 구분 없음 [밑 코드에서 HTML과 Src]
<HTML> ... </html>
<img Src="heart.jpg" width="100" height="50" alt="심장이미지">- 속성 값에 불필요한 공백 문자는 HTML5 표준에 어긋남 [밑 코드에서 " 100"]
<img Src="heart.jpg" width=" 100" height="50" alt="심장이미지">3. 기본 문서 만들기
- 타이틀 작성을 위한 코드 : <titile>
- 문단 작성을 위한 코드 : <h1> ~ <h6>
- 툴팁 작성을 위한 코드 : <h1 title="툴팁으로 쓸 문장"> (툴팁 : 마우스를 갖다대면 부가적인 설명이 나오는 것)
- 단락 구분을 위한 코드 : <p>
- 수평선을 긋기 위한 코드 : <hr>
- 줄 구분을 위한 코드 : <br>
- 문자, 기호, 심볼을 입력하기 위한 코드표현
| 문자 | 엔터티표현 | 코드표현 | 문자 | 엔터티표현 | 코드표현 |
| " | " | " | ₤ | £ | £ |
| ' | ' | ' | √ | √ | √ |
| < | < | < | ∞ | ∞ | ˞ |
| > | > | > | ↑ | ↑ | ↑ |
| & | & | & | ÷ | ÷ | ÷ |
| 빈칸 | |   | ∑ | ∑ | ∑ |
- 입력한 내용을 그대로 출력하는 코드 : <pre>
- 문자 스타일을 적용하는 코드
| 코드표현 | 사용용도 | 예시 | 코드표현 | 사용용도 | 예시 |
| <b> | 텍스트 진하게 (bold) |  |
<del> | 취소선 추가 |  |
| <strong> | 중요한 텍스트 표시 |  |
<ins> | 밑줄선 추가 |  |
| <em> | 기울임표시, 강조 |  |
<sup> | 보통 문자의 윗첨자 |  |
| <i> | 이탈릭으로 강조 |  |
<sub> | 보통 문자의 아래첨자 |  |
| <small> | 한단계 작은 문자 |  |
<mark> | 하이라이팅 |  |
- 블록태그와 인라인태그
- 블록태그 : 항상 새 라인에서 시작하여 출력, ex) <div>, <ul>
- 인라인태그 : 블록 속에 삽입되어 블록의 일부로 출력 ex) <span>, <img>
- 메타데이터 : 데이터를 설명하는 데이터
- HTML 페이지에 대한 메타 데이터를 담기 위한 태그들 : <base>, <style>, <script>, <title>
- 메타 태그들은 <head>태그 안에 작성
- 이미지를 삽입하는 코드 : <img> 태그의 src 속성에 이미지 파일의 주소 지정
- 리스트
- 순서 있는 리스트 : <ol>
- 순서 없는 리스트 : <ul>
- 정의 리스트 : <dl>
- 리스트 아이템 : <li>
'프론트엔드 웹개발 (1학년 2학기)' 카테고리의 다른 글
| 230920 프론트엔드 웹개발 3주차 (0) | 2023.09.20 |
|---|