visual studio code 설치
! 자동완성
『코딩 자율학습 HTML + CSS + 자바스크립트』
Chap.2
HTML 문서작성을 위한 기본 내용
2-1. HTML의 기본 구성요소
1) 태그
- HTML 문법을 이루는 가장 작은 단위
- 웹 페이지를 구성하는 다양한 구성요소(텍스트, 이미지, 버튼 등)를 정의하는 역할
- 기본 형식은 홑화살괄호(< >) 사이에 태그명을 넣는 형태
<태그명>
2) 속성
- 태그에 어떤 의미나 기능을 보충하는 역할(옵션)
- 태그 없이 단독으로 사용불가
- 속성명과 속성값으로 구성
- 속성명은 따옴표 없이 작성 / 속성값은 큰따옴표(") 안에 작성하며 여러 개일 경우 쉼표(,)로 구분
<태그명 속성명='속성값'>
<html lang="ko">
3) 문법
- HTML 문법은 태그와 속성으로 구성
- 속성을 생략하거나 여러 개의 속성을 같이 사용가능
- 태그 없이 속성 단독 사용불가
● 콘턴츠가 있는 문법
- 콘텐츠 앞뒤를 태그로 감싸기
- 앞에 넣는 태그를 시작 태그(open tag), 뒤에 넣는 태그를 종료 태그(close tag)라고 함
- 종료 태그는 태그명 앞에 슬래시(/)
- 시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 함.
<title>My First Web Page!</title>
● 콘텐츠가 없는 문법
- 시작 태그만 사용
- 내용이 비어 있다는 의미로 빈 태그(empty tag)라고도 함
- 시작 태그가 곧 요소
//br태그, br요소
<br>
4) 주석
- 코드에 메모나 설명을 남기고 싶을 때 사용
- 웹 브라우저의 소스 보기로 주석이 노출되므로 보안에 주의
<!-- 주석 내용 -->
5) 기본구조
<!DOCTYPE html>
<html lang="ko">
<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>문서의 제목</title>
</head>
<body>
</body>
</html>2-2. HTML의 기본 구조
1) 문서형 정의 DTD (Documen Type Definition)
- 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려 주는 것
- HTML 문서를 작성할 때 항상 처음에 넣어야 함
<!DOCTYPE html>
2) html 태그
- HTML 문서의 시작과 끝을 의미
- 모든 태그는 html 태그 안에 작성해야 함
3) head 태그
- HTML 문서의 메타데이터(metadata)를 정의하는 영역
- 메타데이터란 HTML 문서에 대한 정보(data)로, 웹 브라우저에는 직접 노출되지 않음
- 보통 meta, title, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의
● meta 태그
- 메타데이터를 정의
<!--문자 집합(charset)을 정의하는 메타데이터 태그-->
<meta charset="UTF-8"><!--인터넷 익스플로러(이하 IE)의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
● title 태그
- HTML 문서의 제목을 지정하는 데 사용
- 모든 HTML 문서는 반드시 1개의 문서 제목을 지정해야 함
- 제목은 HTML 문서마다 중복되지 않도록 주의(웹 사이트가 신뢰성이 떨어진다고 판단해서 검색 엔진 노출 시에 불이익)
4) body 태그
- 웹 브라우저에 노출되는 내용을 작성하는 영역
- 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성
2-3. HTML의 특징 파악하기
1) 블록 요소와 인라인 요소
- 블록요소: 사용할 때마다 줄바꿈이 되는 태그(hn, p 등)으로 작성된 코드
- 인라인 요소: 공간이 부족할 때만 줄 바꿈되는 태그(a, span)로 작성된 코드
2) 부모, 자식, 형제 관계
- HTML은 태그의 사용 위치에 따라 부모, 자식, 형제 관계를 맺음
3) 줄 바꿈과 들여쓰기
- 줄 바꿈과 들여쓰기는 코드의 가독성을 높일 수 있는 가장 쉬운 방법
- 읽기 좋은 코드는 나중에 다시 코드를 확인하거나 수정해야 할 때 코드 전체 내용을 금방 파악할 수 있음
chap3.
실무에서 자주 사용하는 HTML 필수 태그 다루기
3-1. 텍스트 작성하기
텍스트는 일반적인 설명일 수도 있고, 글의 제목이나 부제목일 수도 있고, 다른 인물의 말이나 글을 인용한 것일 수도 있습니다.
이처럼 다양한 텍스트를 웹 브라우저가 제대로 구분하게 하려면 텍스트의 목적에 맞는 태그를 사용해야 합니다
1) hn태그
- 제목이나 주제를 나타내는 텍스트를 표현할 때 사용
- h1부터 h6 태그까지 6개가 있는데, 여기서 h는 heading을 의미하고 n에 들어가는 숫자는 중요도를 나타냄
- h1 태그가 가장 중요하며 h6 태그가 상대적으로 가장 덜 중요함
- 중요도가 가장 높을 수록 크고 굵으며 뒤로 갈 수록 크기가 작아지고 가늘어짐
- 검
색 엔진은 h1 태그부터 단계적으로 검색하므로 중간에 숫자를 건너뛰지 말고 h1 태그부터 단계적으로 사용해야 함
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
2) p태그
- 본문의 문단(paragraph)을 작성할 때 사용
- 제목이나 주제를 나타내는 것 외에 대부분 본문
<p>내용</p>
3) br 태그
- 문단에서 줄 바꿈할 때 사용
<p>
안녕하세요,<br>
코딩 공부하기 좋은 날입니다.
</p>
4) blockquote 태그
- 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용
- 이때 출처가 확실한 인용문은 cite 속성으로 출처 경로를 명시해야 함
- 반드시 한 개 이상의 p 태그를 포함해야 함(p 태그 내용에 blockquote 태그는 포함할 수 없음)
<blockquote cite="출처 URL">문단 단위 인용문</blockquote>
5) q 태그
- 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용
- q 태그를 사용한 콘텐츠는 큰따옴표("")로 묶임
<q cite="출처 URL">짧은 인용문</q><p>차세대웹기술지원센터의 데이터에 따르면
<q cite="https://www.koreahtml5.kr/front/stats/browser/browserUseStats.do">
2021년 대한민국에서 가장 점유율이 높은 웹 브라우저는 구글의 크롬입니다.
</q>
</p>
<!-- 차세대웹기술지원센터의 데이터에 따르면 "2021년 대한민국에서
가장 점유율이 높은 웹 브라우저는 구글의 크롬입니다." -->
6) ins와 del 태그
● ins 태그
- 새로 추가된 텍스트임을 나타낼 때 사용
- ins 태그를 사용한 콘텐츠에는 밑줄이 생김
● del 태그
- 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용
- del 태그를 사용한 콘텐츠에는 취소선이 생김
<ins>추가 텍스트</ins>
<del>삭제 텍스트</del>
7) sub와 sup 태그
● sub 태그
- 아래 첨자에 해당하는 텍스트를 작성할 때 사용
● sup 태그
- 위 첨자에 해당하는 텍스트를 작성할 때 사용
<p>공기의 원소 기호는 H<sub>2</sub>O</p>
<p>4<sup>2</sup>은 16입니다.</p>
3-2 . 그룹 짓기
공간분할?
관련 있는 요소끼리 그룹 짓는 작업을 다른 영역과 분리한다는 의미
웹 페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기가 쉬워지고 HTML 페이지의 구조를 더 깔끔하게 작성할 수 있음. HTML에서는 이런 그룹 짓기 작업을 div 태그와 span 태그로 수행함.
1) div 태그
- 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
<div class="movie">
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을 소개하는 페이지입니다.</p>
</div>
2) span
- 인라인 요소를 그룹으로 묶을 때 사용
* 하나의 태그 안에 작성된 텍스트 일부만 디자인을 다르게 적용하려면 태그 안에서 공간을 분할해야 합니다. 이럴 때 span 태그를 사용합니다. 텍스트도 인라인 요소이기 때문에 다음 코드처럼 내부 콘텐츠를 span 태그로 그룹 지을 수 있습니다.
<p>영화 소개</p>
<p>이번 영화의 <span>하이라이트</span> 장면은 바로 여기입니다.</p>
3-3. 목록만들기
1) ul태그(unordered list)
- 순서가 없는 비순서형 목록을 생성할 때 사용
- 이때 목록 내용은 li(list item) 태그로 구성
-목록 내용마다 글머리 기호(bullet point)가 붙음
<h1>판매 중인 과일</h1>
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
</ul>2) ol태그l(ordered list)
- 순서형 목록을 생성할 때 사용
- ul 태그와 마찬가지로 li 태그로 목록 내용을 구성
- 목록 내용에 번호가 붙음
<h1>오늘 할일</h1>
<ol>
<li>아침 먹기</li>
<li>점심 먹기</li>
<li>저녁 먹기</li>
</ol>
3) dl태그(description list)
- 정의형 목록을 만들 때 사용
- 정의형 목록은 용어와 용어 설명을 나열한 형태의 목록
- dt(description term) 태그로 용어를, dd(description details) 태그로 용어 설명을 작성
<dl>
<dt>HTML</dt>
<dd>HTML은 Hyper Text Markup Language의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다.</dd>
<dt>CSS</dt>
<dd>CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다.</dd>
</dl>
3-4. 링크와 이미지 넣기
링크(link)는 문서와 문서 간 연결을 의미하며, 기본으로 a 태그를 사용합니다.
사진과 같은 이미지 객체를 삽입할 때는 img 태그로 작성
1) a 태그
- a 태그는 HTML에서 내부나 외부 링크를 생성
- a 태그는 대상 경로를 의미하는 href 속성을 필수로 사용해야 하고, 그 외에 target, title 속성을 선택해서 사용할 수 있음
● href 속성
- href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용
- 속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수 있음
* 대상 경로가 명확하지 않을 때
- a 태그를 사용할 때 연결해야 하는 대상의 주소가 불분명한 경우 href 속성값에 "#" 사용
- 추후 올바른 대상 경로로 변경해야 함
● target 속성
- target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정
- target 속성은 생략할 수 있음
- 주로 새 창으로 열리는 방식인 _blank 사용
● title 속성
- title 속성에는 링크를 설명할 수 있는 텍스트를 작성
- a 태그의 콘텐츠만으로 표현하지 못한 설명을 작성
<a href="https://www.gilbut.co.kr" target="_blank" title="도서출판 길벗">길벗 홈페이지</a>
2) img 태그
- HTML에서 이미지 객체를 삽입하고 싶을 때는 img 태그를 사용
- img 태그는 src 속성(경로)과 alt 속성(설명)으로 구성
● src 속성
- src(source)는 삽입하려는 이미지의 경로를 입력하는 속성
- HTML에서 이미지 경로는 항상 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
<img src="../images/beach.jpg">| 기호 | 설명 |
| ./ | 현재 폴더 (생략가능) |
| ../ | 상위 폴더 |
● alt 속성
- alt 속성에는 삽입한 이미지 객체를 설명할 수 있는 텍스트를 작성
<img src="./beach.jpg" alt="아름다운 여름 해변">
3) 이미지 링크
- img 태그를 a 태그 안에 사용하면 이미지를 클릭했을 때 특정 링크로 이동 가능
<a href="대상 경로">
<img src="이미지 경로" alt="대체 텍스트">
</a><a href="https://www.google.com" target="_blank">
<img src="./google_logo.png" alt="구글 로고">
</a>
3-5. 텍스트 강조하기
텍스트에서 특정 내용을 강조해 표현하고 싶을 때 strong 태그와 em 태그를 사용
1) strong 태그
- 텍스트의 의미를 강조하고 싶을 때 사용
- 스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하는 것뿐 아니라,
웹 브라우저에 중요한 부분임을 알려 주는 역할을 함.
- strong 태그가 중첩된 텍스트는 실행결과에서 강조 효과는 동일하지만, 구조적으로 더 중요한 부분임을 의미
<p>이 시설은 <strong>관계자 외 출입금지</strong>입니다.</p>
2) em 태그(emphasis)
- 텍스트의 의미를 강조하고 싶을 때 사용
- 텍스트가 기울어져 보이면서 강조 효과를 낼 수 있음
- 중첩하면 중첩된 태그는 실행결과에서 강조 효과는 동일하지만, 구조적으로 더욱더 강조하는 의미가 됩니다.
<p>여기서부터는 위험하니까 <em>절대로</em> 지나가지 마세요.</p>
3-6. 폼 구성하기
폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식
1) form 태그
- form 태그는 폼 양식을 의미하는 태그
- action과 method 속성을 함께 사용
<form action="서버 url" method="get 또는 post"></form>
● action 속성
- 폼 요소에서 사용자와 상호작용으로 입력받은 값들을 전송할 서버의 URL 주소를 작성
● method 속성
- 입력받은 값을 서버에 전송할 때 송신 방식을 작성
- 속성값으로 get 또는 post 사용 가능
- 폼 요소의 전송은 서버에서 처리하므로 서버 영역을 담당하는 개발자가 method의 속성값 작성
- action 속성값은 "#"으로 적고, method 속성값은 보안이 요구되는 정보라면 "post", 아니라면 "get"으로 적으면 됩니다.
2) input 태그
- 로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용
- type 속성은 필수로 사용해야 하고, name과 value 속성은 선택해서 사용
<input type="종류" name="이름" value="초깃값">
● type 속성
- type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정 (콤보박스, 파일 업로드, 체크박스, 라디오버튼 등)
| 속성값 | 설명 | 속성값 | 설명 |
| text | 한 줄 텍스트를 입력할 수 있는 요소를 생성합니다. | image | 이미지로 버튼 요소를 생성합니다. 따라서 img 태그처럼 src 속성을 사용해야 합니다. 단, alt 속성은 사용하지 않습니다. |
| password | 비밀번호를 입력할 수 있는 요소를 생성합니다. | hidden | 사용자 눈에 보이지 않는 입력 요소를 생성합니다. |
| tel | 전화번호 형식을 입력할 수 있는 요소를 생성합니다. | date | 날짜(연, 월, 일)를 선택할 수 있는 입력 요소를 생성합니다. |
| number | 숫자만 입력할 수 있는 요소를 생성합니다. | datetime-local | 사용자 시간대에 맞는 날짜(연, 월, 일, 시, 분)를 선택할 수 있는 입력 요소를 생성합니다. |
| url | URL 주소 형식을 입력할 수 있는 요소를 생성합니다. | month | 날짜(연, 월)를 선택할 수 있는 입력 요소를 생성합니다. |
| search | 검색용 텍스트를 입력할 수 있는 요소를 생성합니다. | week | 날짜(연, 주차)를 선택할 수 있는 입력 요소를 생성합니다. |
| 이메일 형식을 입력할 수 있는 요소를 생성합니다. | time | 시간을 선택할 수 있는 입력 요소를 생성합니다. | |
| checkbox | 체크박스 요소를 생성합니다. | range | 숫자 범위를 선택할 수 있는 슬라이드 요소를 생성합니다. |
| radio | 라디오버튼 요소를 생성합니다. | color | 색상을 선택할 수 있는 요소를 생성합니다. |
| file | 파일 업로드 요소를 생성합니다. | submit | 폼 전송 역할을 하는 버튼 요소를 생성합니다. |
| button | 버튼 요소를 생성합니다. | reset | 폼 요소에 사용자가 입력한 값을 초기화하는 버튼 요소를 생성합니다 |
● name 속성
- 입력 요소의 이름을 작성
- 입력 요소가 form 태그에 의해 서버로 전송될 때, name 속성에 적힌 값이 이름으로 지정
- 서버에서는 지정된 이름으로 입력 요소를 식별 가능
● value 속성
- 입력 요소의 초깃값을 작성
- 입력 요소는 보통 사용자에게서 수동으로 값을 입력받지만, 상황에 따라 초깃값을 설정해야 하는 경우가 있음
3) label 태그
- form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용
- label 태그 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있음
- 시각 장애인이 웹을 탐색할 때 사용하는 보조 도구인 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상
● 암묵적인 방법:
- label 태그에 상호작용 요소를 포함하는 방법
<label>
아이디
<input type="text"> ①
</label>
① 상호작용 요소
● 명시적인 방법:
- label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법
<label ① for="userpw">비밀번호</label>
<input type="password" ① id="userpw">
① for 속성값과 id 속성값이 같아야 함
4) fieldset와 legend 태그
- fieldset 태그를 사용해 form 태그 안에 사용된 다양한 상호작용 요소 그룹 지을 수 있음
- fieldset 태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생김
- 그룹 지은 요소들은 legend 태그로 이름을 붙임
<form>
<fieldset>
<legend>기본 정보</legend>
<p>
<label for="userid">아이디</label>
<input type="text" id="userid">
</p>
<p>
<label for="passwd">비밀번호</label>
<input type="password" id="passwd">
</p>
</fieldset>
<fieldset>
<legend>선택 정보</legend>
<p>
<label for="age">나이</label>
<input type="number" id="age">
</p>
<p>
<label for="recommender">추천인</label>
<input type="text" id="recommender">
</p>
</fieldset>
</form>
5) textarea 태그
- 여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용
- 웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성
- input 태그와는 다르게 닫는 태그가 있음
- 그래서 input 태그로 생성한 입력 요소의 초깃값은 value 속성으로 정의하지만
- textarea 태그로 생성한 여러 줄의 입력 요소는 콘텐츠 영역에 초깃값을 정의함.
<textarea>초깃값</textarea><form action="#" method="post">
<fieldset>
<legend>블로그 글쓰기</legend>
<p>
<label for="title">제목
<input type="text" id="title" name="title">
</label>
</p>
<p>
<label for="desc">내용
<textarea id="desc" name="desc"></textarea>
</label>
</p>
</fieldset>
</form>
6) select, option, optgroup 태그
- select 태그를 사용하면 콤보박스(combobox)를 생성할 수 있습니다.
- 콤보박스에 항목 하나를 추가할 때는 option 태그를 사용하고
- 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용
<select>
<optgroup label="그룹 이름">
<option value="서버에 전송할 값">웹 브라우저에 표시할 값</option>
</optgroup>
</select>
- size 속성
size 속성은 콤보박스에서 화면에 노출되는 항목 갯수를 지정하는 속성입니다. 속성값으로 숫자를 적으면 되고, 생략할 경우 기본으로 1개 항목이 표시
- multiple 속성
select 태그로 생성하는 콤보박스는 기본으로 1개 항목만 선택할 수 있습니다. 그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있습니다.
- selected 속성
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있습니다.
7) button 태그
버튼 요소는 앞에서 살펴봤듯이 input 태그에서 type 속성값을 submit, reset, button으로 지정해 생성
별도의 button 태그로 생성할 수도 있습니다. button 태그도 마찬가지로 type 속성을 가집니다.
submit : type 속성값은 폼을 서버에 전송할 목적
reset : 상호작용 요소에 입력된 내용을 초기화하는 버튼이면
button : 단순한 버튼이면 으로 지정합니다.
input vs button 태그
button 태그는 시작 태그와 종료 태그가 있어서 콘텐츠를 작성할 수 있습니다. 또한, 단순한 텍스트 외에도 이미지, 태그 같은 것들을 포함할 수 있어서 버튼 요소를 꾸미기가 더 수월하다는 장점이 있습니다.
8). 폼 관련 태그에서 사용할 수 있는 추가 속성
- disabled 속성
disabled 속성은 상호작용 요소를 비활성화하며, input, textarea, select, button 태그에 사용할 수 있습니다. 태그가 비활성화되면 입력 요소는 텍스트를 입력할 수 없고, 목록 상자는 항목을 선택할 수 없으며, 버튼 요소는 버튼을 클릭할 수 없습니다.
- readonly 속성
readonly 속성은 상호작용 요소를 읽기 전용으로 변경합니다. 읽기 전용으로 변경되면 입력 요소에 텍스트를 입력할 순 없지만, 요소를 선택하거나 드래그해서 내용을 복사할 순 있습니다
* disabled 속성과 readonly 속성은 둘 다 상호작용 요소를 사용하지 못하게 한다는 점에서 비슷해 보입니다. 그러나 disabled 속성은 form 태그로 서버에 값을 전송할 때 값이 아예 전송되지 않지만, readonly는 값이 전송된다는 차이가 있습니다.
- maxlength 속성
maxlength 속성은 입력할 수 있는 글자 수를 제한합니
-hecked 속성
checked 속성은 요소를 선택된 상태로 표시합니다. 선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할
-placeholder 속성
placeholder 속성은 입력 요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도로 사
7. 표 만들기
표(table)는 웹 페이지에서 흔하게 볼 수 있는, 2차원 격자 형태로 구성된 데이터를 의미합니다. 표는 다음 그림처럼 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell)로 구성됩니다.
1) 1 table 태그
HTML에서 표를 생성할 때는 table 태그를 사용합니다. 폼과 마찬가지로 표 관련 태그는 모두 table 태그 안에서 사용합니다.
2) caption 태그
HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정합니다. 표 제목은 caption 태그로 지정하므로 표를 만들 때는 반드시 caption 태그를 사용 table 태그 안에 첫 번째로 작성해야 하는 태그입니다.
3) tr 태그
tr(table row) 태그는 표에서 행을 생성합니다. tr 태그 하나는 행 하나를 생성하므로 행을 여러 개 만들고 싶다면 tr 태그를 여러 번 사용하면 됩니다.
4) th, td 태그
th(table header) 태그와 td(table data) 태그는 표에서 열을 생성할 때 사용합니다. th 태그는 표에서 제목을 나타내는 열을 생성할 때, td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용합니다.
5) rowspan과 colspan 속성
표 관련 태그에서 행을 의미하는 tr 태그 안에 열을 의미하는 th, td 태그를 사용하면 행과 열이 만나 셀이 생성됩니다. 이렇게 생성된 셀은 병합할 수 있는데, 행과 행을 병합할 때는 rowspan 속성을, 열과 열을 병합할 때는 colspan 속성을 사용합니다.
다음과 같은 형태로 표를 만든다고 할 때, rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적습니다. 단, 병합한 셀의 개수만큼 다음 행 또는 열은 비워야 합니다
6) thead, tfoot, tbody 태그
thead, tbody, tfoot 태그를 사용하는 가장 큰 이유는 웹 접근성을 향상하는 데 있습니다
표에서도 행을 묶어 그룹화할 수 있는데, thead, tfoot, tbody 태그를 사용하면 됩니다. thead 태그는 헤더 영역에 해당하는 행을, tfoot 태그는 푸터 영역에 해당하는 행을, tbody 태그는 본문 영역에 해당하는 행을 그룹 짓습니다.
용한다면 반드시 thead, tfoot, tbody 순서여야 합니다. thead와 tfoot 태그는 한 번만 사용할 수 있고, thead 태그로 그룹화한 행은 th 태그로 열을 생성해야 합니다.
<table>
<thead>
<tr>
<th>번호</th>
(중략)
</tr>
</thead>
<tfoot>
<tr>
<td>총 금액</td>
(중략)
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>콜라</td>
(중략)
</tr>
(중략)
</tbody>
</table>
7) col과 colgroup 태그
표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용합니다. col 태그는 하나의 열을 그룹화하고, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화합니다.
형식
<col>
<colgroup span="그룹화할 열의 개수"><table>
<col style="width:80px">
<colgroup span="2" style="width:150px"></colgroup>
<col style="width:100px">
<tr>
<th>번호</th>
<th>상품명</th>
<th>수량</th>
<th>가격</th>
</tr>
(중략)
</table>8) scope 속성
표를 생성할 때 사용할 수 있는 속성 중에서 순전히 웹 접근성 향상을 목적으로 사용하는 scope 속성이 있습니다. scope 속성은 제목을 나타내는 셀의 범위를 지정합니다. 그래서 표에서 제목을 나타내는 th 태그에서만 사용할 수 있습니다.
8. 멀티미디어 설정하기
멀티미디어와 관련한 요소로 웹 페이지에서 가장 많이 볼 수 있는 것은 오디오와 비디오입니다. HTML에서는 각각 audio 태그와 video 태그로 작성할 수 있습니다.
1) audio 태그
audio 태그는 항상 src 속성과 함께 사용하며, src 속성값에는 삽입하려고 하는 오디오 파일의 경로를 적어 줍니다. 그리고 오디오 컨트롤 패널이 웹 브라우저에 노출되도록 controls 속성을 설정해야 합니다
문법 형식
<audio src="오디오 파일 경로" controls></audio>
| MP3 | audio/mpeg |
| WAV | audio/wav |
| OGG | audio/ogg |
2) video 태그
video 태그도 비디오 경로를 입력하는 src 속성을 필수로 사용해야 합니다. 그리고 controls 속성을 추가해 사용자가 제어할 수 있는 컨트롤 패널도 표시해야 합니다
<video src="비디오 파일 경로" controls></video>| 포맷 | 미디어 타입 |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
3) source 태그
source 태그는 audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는 데 사용합니다.
9 .웹 페이지 구조를 설계하는 시맨틱 태그
시맨틱은 사전적으로 ‘의미론적’이라는 뜻이므로 시맨틱 웹은 ‘의미론적인 웹’ 정도로 직역할 수 있습니다. 요컨대, 시맨틱 웹은 더 의미 있게 웹 페이지를 설계하는 트렌드
태그의 이름만으로 태그의 용도나 역할에 대한 의미가 명확한 태그를 말합니다.
시맨틱 태그에 able, form, a 태그 등은 속하고
div, span 태그 등은 논 시맨틱 태그에 속합니다.
1) header 태그
header 태그는 웹 페이지에서 헤더 영역을 구분하는 데 사용합니다.
웹 사이트의 최상단이나 좌측에 위치하고, 로고, 검색, 메뉴와 같은 요소들을 포함
2) nav 태그
nav(navigation) 태그는 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 링크 영역을 구분하는 데 사용
내부나 외부를 연결하는 링크가 전부 nav 태그일 필요는 없고, 웹 사이트의 주요 탐색 링크 영역만 포함하면 됩니다.
3) section 태그
section 태그는 웹 페이지에서 논리적으로 관련 있는 내용 영역을 구분할 때 사용합니다. 그래서 보통 section 태그는 내용의 제목을 나타내는 hn 태그 중 하나를 포함합
4) article 태그
article 태그는 웹 페이지에서 독립적인 영역을 구분할 때 사용합니다.
section 태그는 웹 페이지 안에서 관련 있는 내용을 구분하고, article 태그는 어떤 웹 페이지에서든 독립적으로 사용될 수 있는 영역을 구분한다는 점에서 차이가 있습니다.
5) aside 태그
aside 태그는 웹 페이지 안에서 주력 내용이나 독립적인 내용으로 보기 어려워서 article 태그나 section 태그로 영역을 구분할 수 없을 때 사용
6) footer 태그
footer 태그는 웹 페이지에서 푸터 영역을 구분할 때 사용합니다. 푸터 영역은 일반적으로 웹 페이지의 최하단에 있고, 저작권 정보, 연락처, 사이트 맵 등의 요소들을 포함합
7) main 태그
main 태그는 웹 페이지의 주요 내용을 지정할 때 사용하는 태그입니다. main 태그에는 문서에서 반복해서 등장하는 요소를 포함해선 안 됩니다. 그리고 main 태그를 article, aside, footer, header, nav 태그의 하위에 포함할 수도 없습니다. 그래서 사용하기가 조금 까다로운 태그
10. 태그 종류에 상관없이 사용하는 글로벌 속성
HTML 언어에서 태그는 각 태그에서 사용할 수 있는 속성이 정해져 있기
태그 종류 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 있는데, 이것이 바로 글로벌 속성입니다.
| 속성 | 값 | 설명 |
| class | value | 요소에 클래스 값을 지정합니다. 클래스 값은 CSS에서 클래스 선택자로 활용합니다. |
| id | value | 요소에 아이디 값을 지정합니다. 아이디 값은 CSS에서 아이디 선택자로 활용합니다. |
| style | style | 요소에 인라인 스타일을 지정합니다. |
| title | text | 요소에 추가 정보를 지정합니다. 마우스를 요소 위에 올리면 툴팁(tooltip)으로 추가 정보가 표시됩니다. 툴팁은 요소에 마우스 커서를 올렸을 때 추가 설명이 뜨는 말풍선 형태의 그래픽 요소를 말합니다. |
| lang | language code | 요소에 사용한 텍스트의 언어 정보를 지정합니다. |
| hidden | hidden | 요소를 화면에서 감춥니다. |
| data-* | value | 사용자가 임의의 속성을 만들 수 있습니다. |
'MLOps 개발자 양성과정 > web' 카테고리의 다른 글
| [Day- 35] JavaScript③ 객체 다루기 (0) | 2023.02.10 |
|---|---|
| [Day-34] JavaScript② (0) | 2023.02.09 |
| [Day-33] CSS ③ , JavaScript① (0) | 2023.02.08 |
| [Day-32] CSS② (0) | 2023.02.07 |
| <Day-31> html 실습 / CSS이론 (0) | 2023.02.06 |
