2023. 11. 11. 05:16ㆍWeb/HTML
0) <!-- -->
- 주석을 사용해야 될 때 씀.
+) 주석(comment) : 화면에 나타나지 않지만, 코드에 추가 설명이 필요할 때 넣는 구문
ex) <!-- Image1 -->
<!-- 아이디 입력 부분 -->
1) <!DOCTYPE>
- <html> 태그 정의하기 전에 있어야 됨. 즉, 제일 먼저 선언되어야 함.
- HTML 버전을 웹 브라우저한테 알려주는 역할
- HTML 태그는 아님.
2) <html>
- DOCTYPE 선언(<!DOCTYPE html>)을 제외한 나머지 HTML 요소를 포함하기 위해 사용
- 브라우저한테 HTML 문서라는 것을 알려주는 역할
- <html></html>
3) <head>
- 메타데이터(metadata, 문서에 대한 정보)의 집합을 정의할 때 사용
- <head>에 들어가는 요소들 : <meta>, <title>, <style>, <script>, <noscript>, <base>, <link>
+) <script>, <noscript> => <body> 안에도 사용 가능
- <head></head>
3-1) <meta>
- <head> 태그 안에 위치함.
+) <head> 태그 뒤에 있어도 되지만 꼭 <body> 태그 앞쪽에 위치해야 함.
- 메타데이터를 정의할 때 사용
- 다양한 종류의 메타데이터를 제공할 때 사용
- 제공된 정보는 브라우저/검색엔진/다른 웹 서비스에서 사용하게 됨.
| 속성 | 설명 | 값 | 예제 |
| charset | - 문자 인코딩 방식 | 1) UTF-8 - 전 세계 문자를 모두 하나로 통합함. - 대부분 utf-8 사용함. 2) EUC-KR - 인코딩이 통일되지 않아서 문자가 깨지는 현상이 자주 발생함. (한글+태국어를 동시에 표현할 수 없는 문제 등) … |
1) <meta charset="UTF-8"> 2) <meta charset="EUC-KR"> |
| content | - name 속성, http-equiv 속성과 관련된 값(value) | - 각각의 메타데이터에 해당하는 값 | <meta content="텍스트"> |
| name | - 메타데이터 이름 (정보 종류) - name 속성과 content 속성은 같이 써야 함. |
1) viewport - 웹 페이지에서 사용자가 볼 수 있는 영역 - 장치에 따라 달라짐. => 모바일 화면은 컴퓨터 화면보다 viewport가 더 작아짐. … |
1) <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
+) 윗 줄의 예제는 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제임.
3-2) <title>
- <head> 태그 사이에 위치함.
- 웹 페이지의 제목을 나타냄.
- 브라우저의 제목 표시줄이나 페이지 탭에서 확인 가능
- 웹 페이지 본문에는 보이지 X
- 사용자에게 문서의 제목을 알리는 용도 + 검색엔진 등에서 가장 크게 보여지는 텍스트
==> 페이지의 특성을 드러내는 제목으로 작성하기
- 2개 이상 쓸 수 X
- <title>이 없으면 HTML 유효성 검사 통과 하지 못함.
- <title></title>
3-3) <style>
- <head> 태그 사이에 위치함.
+) <body>안에서도 사용하긴 하지만 css 로딩이 늦어지게 되면 본문에 적용되지 않은 채 사용자에게 보여질 수 있어서 <head> 안에 쓰는게 좋음.
- CSS 스타일 적용할 때 사용
- <style></style>
+) CSS 적용하는 법
1) 내부 스타일 시트
- <head> 태그 사이에 <style> 태그 사용
=> 해당 HTML 문서에만 스타일 적용
2) 외부 스타일 시트
- <head> 태그 사이에 <link> 태그 사용
- 외부 스타일 시트를 포함해야만 스타일이 적용됨.
=> 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있음. CSS 확장자를 사용하여 저장
- 안정적인 장점이 있음.
3) 인라인 스타일
- HTML 요소 내부에 style 속성 사용하여 스타일 적용
- 해당 요소에만 스타일 적용 가능
3-1) 인라인 스타일 단점
- 요소마다 개별적으로 작성됨. => 스타일을 재사용하기 어려움.
- 우선순위 관련 문제 발생 가능성 O
- HTML 코드가 복잡해지고 가독성이 떨어짐.
∴ 인라인 스타일 사용은 지양하는 것이 좋음.
3-4) <link>
- CSS를 파일로 저장한 후 HTML 문서 내에서 불러올 수 있음.
ex) <link rel="stylesheet" href="파일경로.css" type="text/css">
4) <h1> ~ <h6>
- 문서의 제목을 정의할 때 사용
- h뒤에 오는 숫자가 작을수록 글자의 크기가 커짐.
=> 글자 내림차순 : h1 > h2 > h3 > h4 > h5 > h6
- 검색엔진 등이 문서를 파악하기 위해 쓰이기 때문에 상황에 맞게 잘 써주는 것이 중요함.
- 종료 태그 O
5) <div>
- Division의 약자
- 레이아웃을 나눌 때 주로 쓰임.
- 주로 CSS와 연동하여 사용함.
- 특별한 기능은 없음.
- <div></div>
6) <p>
- paragraph(문단)의 약자
- 하나의 문단을 정의할 때 사용
- 자동으로 <p> 요소의 위쪽과 아래쪽에 약간의 여백을 추가함.
=> 여백은 CSS의 margin 속성을 사용하여 조정 가능
- <p></p>
7) <b>
- bold의 약자
- 다른 부가적인 목적 X => 단순히 글자를 굵게 표시하여 서식상 글자를 강조하고 싶을 때 사용
- 종료 태그 X
7-1) <strong>
- <b> 태그와 마찬가지로 글자를 굵게 표시할 때 사용
- 브라우저가 해석할 때 페이지 내에서 중요한 부분으로 이해함.
- <strong></strong>
7-2) <em>
- 내용을 강조할 때 사용
- 내용의 중요성, 긴급 또는 심각성을 나타낼 때 사용
- 기울임체로 표시됨.
- CSS를 사용하면 더 다양한 효과를 줄 수 있음.
- <strong> 요소와 <em> 요소는 각각 중첩해서 사용 가능 => 강조하는 정도를 증가시킬 수 있음.
- <em></em>
ex) <b> vs. <strong> vs. <em>
<코드>
<p><em>[긴급공지]</em> 안녕하세요 <b>공지사항</b> 때문에 연락드렸습니다.</p>
<strong>사정상 내일 회의 시간이 변경되었음을 알립니다.</strong>
<결과>
[긴급공지] 안녕하세요 공지사항 때문에 연락드렸습니다.
사정상 내일 회의 시간이 변경되었음을 알립니다.
8) <ol>, <ul>, <li>, <dl>, <dt>, <dd>
(1) <ol>
- Ordered List의 약자
- 순서가 있는 목록을 만들 때 사용
- <ol></ol>
+) 속성
① type
- 마커(marker)의 종류을 정할 때 사용
- 디폴트 : <ol type="1">
- 값 : 1/a/A/i/I
- ex) <ol type="a">
② start
- 마커의 시작값 정할 때 사용
- 값 : 숫자
- ex) <ol start="3">
③ reversed
- 마커의 순서를 내림차순으로 바꿀 때 사용
- <ol reversed>
(2) <ul>
- Unordered List의 약자
- 순서가 없는 목록을 만들 때 사용
- <ul></ul>
(3) <li>
- List Item의 약자
- <ul>, <ol> 태그에서 목록을 나타낼 때 사용 => 최소 한 개는 써야 함.
- <li></li>
(4) <dl>
- 용어, 용어의 정의나 설명이 필요할 때 사용
- <dt> 요소와 <dd> 요소로 구성됨.
- <dl></dl>
(5) <dt>
- 용어나 이름을 나타냄.
- <dt></dt>
(6) <dd>
- 해당 용어에 대한 설명을 나타냄.
- <dd></dd>
<코드>
<ol>
<li>동물</li>
<li>과일</li>
</ol>
<ol type="i">
<li>동물</li>
<li>과일</li>
</ol>
<ol start="6">
<li>동물</li>
<li>과일</li>
</ol>
<ol reversed>
<li>동물</li>
<li>과일</li>
</ol>
<ul>
<li>강아지</li>
<li>고양이</li>
<li>샤인머스캣</li>
<li>딸기</li>
</ul>
<dl>
<dt>웰시코기</dt>
<dd>다리가 짧은 것이 특징</dd>
<dt>샴 고양이</dt>
<dd>얼굴, 발, 꼬리에 어두운 갈색 털이 특징</dd>
<dt>귤</dt>
<dd>유명 지역 : 제주도</dd>
<dt>배</dt>
<dd>유명 지역 : 나주</dd>
</dl>
<결과>
- 동물
- 과일
- 동물
- 과일
- 동물
- 과일
- 동물
- 과일
- 강아지
- 고양이
- 샤인머스캣
- 딸기
- 웰시코기
- 다리가 짧은 것이 특징
- 샴 고양이
- 얼굴, 발, 꼬리에 어두운 갈색 털이 특징
- 귤
- 유명 지역 : 제주도
- 배
- 유명 지역 : 나주
9) <img>
- 이미지 넣을 때 사용
+) 속성 (*는 필수)
① *src
- 이미지 URL
- ex) <img src="abc/img/player.png">
② *alt
- 이미지 대체 텍스트 => 이미지를 보여줄 수 없을 때 이미지를 대체할 텍스트
- ex) <img alt="검은색 롱패딩">
③ width
- 이미지 가로 너비
- 픽셀(pixel) 단위
- ex) <img width="15px">
④ height
- 이미지 세로 너비
- ex) <img height="25px">
10) <header>
- 문서나 섹션의 헤더를 정의할 때 사용
- 로고, 제목, 검색, 네이게이션 등을 포함
- 하나의 문서에 <header> 1개 사용
- <header></header>
11) <main>
- <body> 요소의 주요 컨텐츠를 정의할 때 사용
- 주요 내용 및 주제, 기능과 직접적으로 관련되어 있는 내용 등을 포함
- 반복되는 내용은 지양
- 하나의 문서에 <main> 1개 사용
- <artible>, <aside>, <footer>, <header>, <nav> 요소의 자식이 되면 X
- <main></main>
12) <footer>
- 문서나 섹션의 푸터를 정의할 때 사용
- <footer></footer>
+) 푸터에 있는 정보 종류
① 저자(author) 정보
② 저작권 정보
③ 연락처
④ 사이트맵(sitemap)
⑤ 해당 페이지 맨 위로 올라가는 Top 버튼
⑥ 관련 페이지
⑦ etc.
13) <section>
- HTML 문서의 일반적인 영역을 설정할 때 사용
- 보통 제목 요소인 <h1> ~ <h6>를 자식으로 포함함.
- <section></section>
참고 사이트
https://www.tcpschool.com/html-tags/meta
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8
HTML 입문 - ofcourse
개요 HTML이란 무엇일까요? 수학에서 덧셈 기호를 +로 나타내고, 뺄셈 기호를 -로 나타내듯 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이 HTML입니다. HTML은 HyperText Markup Language의 약자인데
ofcourse.kr
'Web > HTML' 카테고리의 다른 글
| [HTML] HTML(HTML5) 기본 구조 및 태그(Tag), 속성(Attribute) (+ 태그 vs. 요소(element)) (0) | 2023.11.10 |
|---|