뭐든지 한번으로 끝나는 건 없다
알고 있다고 생각했지만 볼 때마다 새로운 기분이다.
1 HTML의 전체 구조
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title> 제목을쓰시오. </title>
</head>
<body> </body>
</html>| <!DOCTYPE html> | html문서의 선언 html5 버전의 문서를 사용하겠다고 선언하는 것 |
| <html lang=“en”> | HTML 속성을 나타냄 해당 요소(html)가 시작할 때 속성 or 추가옵션(lang_언어) 선택 *lang(언어)속성에 대한 웹 접근성에 대한 명시 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공할 수 있도록 함 (한국어=“ko”) |
| <meta charset=“UTF-8”> | <head>태그에 정보를 추가하기 위한 태그 1) charset 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할을 지정 2) 우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만, 다국어로 인코딩 하기 위해서는 UTF-8 문자셋 사용을 권장함 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일로 최적화된 사이트에 포함하는 META 속성 |
|
2 서식태그
| <strong> | html5에 추가된 내용, 웹 접근성이 좋다 텍스트를 굵게 표현하고 싶을 때 사용 (<b>와 동일한 기능) |
| <em> | html5에 추가된 내용, 웹 접근성이 좋다 텍스트를 이탤릭체로 표현하고 싶을 때 사용 (<i>와 동일한 기능) |
| <mark> | 텍스트에 하이라이팅(형광) 효과를 적용합니다 |
| <del> | 텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 줌 |
| <ins> | =인사이드 태그 / 텍스트 밑에 선을 그어 텍스트의 강조 효과를 줍니다 |
| <sup> | =슈퍼스크립트 태그 / 위 첨자 표현할 때 사용 |
| <sub> | =서브스크립트 태그 / 아래 첨자 표현할 때 사용 |
3 목록태그
| <u1> <li> |
순서가 없는 목록 태그 만들 때 · 김사과 · 반하나 |
<ul> <li>김사과</li> <li>반하나</li> </ul> |
| <ol> <li> |
순서가 있는 목록 태그 만들 때 1. 김사과 2. 반하나 |
<ol> <li>김사과</li> <li>반하나</li> </ol> |
| ** ul > li *4 (엔터) -> 자동완성 가능 | ||
| <hr> | 내용 구분 ------------ 줄 추가 | |
| <dl> <dt> <dd> |
설명,정의 목록 문단태그 김사과 반하나 |
<dl> <dt>설명 목록 문단태그</dt> <dd>김사과</dd> <dd>김사과</dd> </dl> |
| ** <dl>요소 안에 위치해야 적용 // 자동들여쓰기 느낌>? | ||
'개발공부_Blog > HTML-CSS' 카테고리의 다른 글
| CSS - 선택자 (0) | 2021.11.27 |
|---|---|
| HTML - input 2 (0) | 2021.11.27 |
| HTML - input (0) | 2021.11.27 |
| HTML - image / video파일 넣기 (0) | 2021.11.27 |
| 클라이언트와 서버의 통신 (0) | 2021.11.27 |
댓글