- caption : 표에 제목을 붙일 때 <table> 태그 바로 다음에 사용. 표의 위쪽 중앙에 표시
- tr("table row") : 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다. - td("table data") : 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. base style - 왼쪽정렬 (text-align:left) - th("table header") : 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다. base style - 중앙정렬(text-align:center), 두껍게(font-weight:bold)
<style>
table {
border: 2px solid red;
}
td,th {
border: 2px solid black;
width: 200px;
}
</style>
</head>
<body>
<caption>표의 제목1</caption>
<table>
<!-- 행의 시작 -->
<tr>
<!-- 열의 시작 -->
<th>제목1</th>
<th>제목2</th>
</tr>
<!-- 행의 시작 -->
<tr>
<!-- 열의 시작 -->
<td>내용1</td>
<td>내용2</td>
</tr>
<!-- 행의 시작 -->
<tr>
<!-- 열의 시작 -->
<td>내용3</td>
<td>내용4</td>
</tr>
</table>
colspan, rowspan
- 표를 만든 후 표의 행이나 열을 합치는 속성으로 셀을 만드는 <td>,<th> 태그에서 사용
🥕 colspan="합쳐지는 열의 개수" : 가로의 병합 🥕 rowspan="합쳐지는 행의 개수" : 세로의 병합
<body>
<!--header(시맨틱 태그)-->
<header>
<h1>WEB-logo</h1>
<!--nav(시맨틱 태그)-->
<nav>
<ul>
<li>menu-1</li>
<li>menu-1</li>
<li>menu-1</li>
<li>menu-1</li>
</ul>
<ul>
<li>menu-2</li>
<li>menu-2</li>
<li>menu-2</li>
<li>menu-2</li>
</ul>
</nav>
</header>
<!--본문 감싸주는 박스는 일반 선택자 박스로 지정-->
<div id="main">
<!--왼쪽 section (시맨틱 태그)-->
<section>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
<!--article (시맨틱 태그)-->
<article>
<h2>Main Article</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced. ColorZilla includes a Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
</p>
</article>
</section>
<!--오른쪽 aside (시맨틱 태그)-->
<aside>
<h2>Right aside</h2>
<p>
ColorZilla for Google Chrome is an extension that assists web developers and graphic designers with color related tasks - both basic and advanced.
</p>
<input type="email" />
<button>mailto</button>
<div class="bannerbox">
<h2>TEXT</h2>
<p>banner</p>
</div>
</aside>
</div>
<!--하단 footer(시맨틱 태그)-->
<footer>
<p>HTML5 COPYRIGHT</p>
</footer>
</body>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
GIF 보다 색상과 명암을 다양하게 표현 가능. 이미지 수정하고 저장하는 작업 반복 시 화질이 떨어질 수 있다.
PNG (portable network graphics)
네트워크용으로 개발된 파일 형식. 색상을 다양하게 표현하면서도 투명한 배경도 만들 수 있어 웹에서 가장 많이 사용
💡 src 속성
· 파일 경로를 정확하게 입력하지 않으면 이미지가 화면에 나타나지 않는다.
· 웹 문서 파일의 위치를 기준으로 파일의 경로가 정해진다.
· 웹 문서 파일과 이미지 파일이 같은 경로에 있다면 src 속성에 이미지 파일의 이름만 적으면 된다
▶️ 하위 폴더에 이미지 파일이 있다면 src 속성에 하위 폴더와 함계 이미지 파일 이름을 적어야 한다.
💡 alt 속성
· alt 속성을 지정하면 인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때 이미지 대신 텍스트가 표시
· 메뉴를 이미지로 삽입하는 경우와 같이 내용을 강조하기 위해 이미지로 처리할 때
alt 속성안에 들어갈 텍스트는 이미지를 부연설명 하는 것이 아닌 이미지 안에 포함된 텍스트를 알려줘야 한다.
💡 이미지 크기 조절 width, heigh 속성
· 웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶을 때 사용
· width는 너비, height는 높이를 지정. 둘 중 하나만 지정해도 나머지 속성 비율은 자동으로 계산하여 나타낸다.
💡 이미지 크기 표현 단위
종류
설명
%
웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정
px
이미지의 너비나 높이를 해당 픽셀 크기만큼 표시
<body>
<!--
이미지를 나타내주는 태그. 단독 태그.
글자와 같이 나열되는 성격(inline 속성)
<img src="이미지 파일의 1)경로 또는 2)url" alt="대체문자">
alt: 주석문, 이미지가 안보일 때를 대비한 대체문자, html5 기본 규칙!
이미지의 확장자(대표)
jpg -> 가장 대표적인 이미지 표현방식, 이미지의 색상을 가장 잘 표현할 수 있는 확장자!
gif -> 투명한 배경이 가능한, 색상이 256개의 표현만 가능~ 화질이 떨어져 보임 / 움짤, 움직이는 이미지
png -> 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있는 확장자!
이미지 파일의 경로 : * 작성하는 문서(html)의 기점으로부터.
-->
<!-- 경로에 맞게 불러온 이미지 -->
<img src="./img/camera01.png" alt="카메라1"><br>
<!-- 경로에 맞지 않게 불러온 이미지 -->
<img src="../img/camera02.png" alt="카메라2"><br>
<!-- 넓이 옵션을 적용한 이미지 (원 사이즈보다 크게 적용하면 이미지가 흐릿해짐) -->
<img src="img/camera03.png" alt="카메라3" width="600"><br>
</body>
📍 웹 페이지의 이미지 주소 복사로 가져온 경우
<body>
<!-- 이미지태그를 url로 연결하는 방법 -->
<img src="https://image.istarbucks.co.kr/upload/store/skuimg/2021/04/[30]_20210415144252425.jpg">
</body>
📍 figure 와 figcaption
<body>
<!-- figure : 이미지, 사진, 삽화 같은 콘텐츠를 넣을 때 사용 -->
<figure>
<img src="img/camera01.png" alt="카메라1">
<!-- figure 요소에 캡션을 넣을 때 사용하는 태그로 figure 안에서 사용, 제일 처음이나 마지막에 배치! -->
<figcaption>카메라를 올바르게 촬영하는 방법</figcaption>
</figure>
</body>
2. 하이퍼링크 삽입
1) 링크를 삽입하는 <a> 태그와 href 속성
<!-- 기본형식 -->
<a href="링크할 주소">텍스트 또는 이미지</a>
👾 한 번이라도 클릭한 링크는 자주색으로 변경
a. 텍스트 링크 만들기
👩🏻🚀 텍스트 링크는 <a>와 </a> 태그 사이에 링크로 만들 텍스트를 입력하고,
href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다.
b. 이미지 링크 만들기
👩🏻🚀 <a>와 </a> 태그 사이에 <img> 태그를 넣어 만든다.
c. 링크를 새 탭에서 열어주는 target 속성
👩🏻🚀 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다.
<body>
<!-- a 태그 : 웹페이지의 연결, url연결 시 사용
1) 다른 페이지의 전환 (메뉴 표현) 2) 글자와 같이 나열되는 성격!(inline 속성)
링크연결 시 기본 스타일 (글자색, 밑줄, 손모양의 커서) / 브라우저 내에서 바로 전환
href = h + ref : h : hypertext, ref : reference
-->
<!-- 링크 target 값의 종류 -->
<p>
<!--target 값을 지정하지 않으면 _self와 같음 -->
<a href="https://www.naver.com">네이버(none)</a>
</p>
<p>
<!-- 현재 페이지에서 바로 페이지로 이동 -->
<a href="https://www.daum.net" target="_self">다음(_self)</a>
</p>
<p>
<!-- 현재 페이지는 그대로 두고 새로운 브라우저 창이나 탭을 열어 이동 -->
<a href ="https://www.starbucks.co.kr/" target="_blank">스타벅스(_blank)</a>
</p>
</body>
<body>
<!-- 다양한 링크의 형태 -->
<p>
<!-- 같은 도메인이라도 http://와 https:// 의 홈페이지 주소가 다른 경우도 있음. 주의할 것
-->
<a href="https://www.naver.com">네이버</a>
</p>
<p>
<!-- 같은 폴더 내의 html 페이지로의 이동 -->
<a href="./04.html">메인페이지로</a>
</p>
<p>
<!-- 아웃룩 메일 계정으로 연결할 때 -->
<a href="mailto:webmaster@koreaedugroup.com">관리자</a>
</p>
<p>
<!-- 빈 링크 또는 임시 링크로 표시 -->
<a href="#">임시링크</a>
</p>
<!-- 빈 링크의 경우 문서의 탑으로 이동하는 성격이 있음 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#">임시링크</a><br>
<a href="#none">임시링크 2</a>
</body>
📍 링크 속성 변경
<style>
a { /* 태그를 먼저 선택 후 속성명과 속성을 입력 */
text-decoration: none; /* 텍스트 꾸미기 : 밑줄 사용 안함 */
color: black; /* 텍스트의 색상을 검정색으로 */
}
</style>
🍒 heading을 줄인말, n의 자리에 1~6의 숫자가 들어가며 크기별로 표시할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목 글자 태그</title>
</head>
<body>
<!-- 주석 -->
<!-- 주석문은 실행 결과에 아무런 영향을 주지 않으며, 코드 내에서 수정 및 보완을 위해 표시하여 사용. -->
<!-- 프로그래밍의 주석과 다르게 사용자가 주석을 볼 수 있으니, 민감한 내용은 적으면 안됨. -->
<!-- 주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 가독성이 좋음 -->
<!-- 공식적으로 주석의 종료는 없음. 하지만 종료 역할을 하는 태그가 있어야 코드의 시작과 끝을 알 수 있음
관습적으로 주석의 종료는 주석의 시작과 동일한 내용이고, 앞에 "//"를 붙여줌 -->
<!-- 주석 -->
<!-- 블럭 형태의 글자 태그 -> 박스처럼 작성한 순서대로 위에서 아래로 쌓이는 형태
01. 제목 태그
h1 ~ h6 : 숫자가 뒤로 갈수록 글자 사이즈가 줄어듦, 타이틀에 사용, 볼드체
-->
<h1>Header-1</h1>
<h2>Header-2</h2>
<h3>Header-3</h3>
<h4>Header-4</h4>
<h5>Header-5</h5>
<h6>Header-6</h6>
<!-- 다른 태그로도 제목 표현이 가능하나 span 태그는 단순한 텍스트가 들어가는 용도.
html5에서는 표현 뿐만 아니라 '문서 구조'도 중요하니 제목이면 h 태그를 사용 할 것. -->
<span style="font-weight: bold; font-size: 32px;">Header-1 by span</span>
</body>
</html>
2) 텍스트 단락을 만드는 <p> 태그, 줄을 바꾸는 <br> 태그
🍒 <p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어 진다.
🍒 주의할 점은 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.
but, 텍스트 단락의 내용이 길어서 웹 브라우저에 한 줄로 표시할 수 없을 경우 자동으로 줄이 바뀐다.
➡️ <br> 태그를 사용하면 원하는 위치에서 줄 바꿈 가능, 닫는 태그가 필요 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- p: 단락, 본문에서 단락을 구분하거나 나타낼 때 주로 글자를 담아서 표현 -->
<!-- p 태그는 레이아웃에 사용하지 말고 본문글의 내용의 단락을 나눌 때 사용할 것 -->
<h1>Header-1</h1>
<p>
Lorem
Ipsum is simply dummy text of dummy text of the printing and typesetting industry. <br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page
when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,
and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</p>
</body>
</html>
<body>
<!-- br : 본문 작성시 줄을 바꿔야 하는 경우에 사용
닫는 태그가 없다. <br>, <br/> 모두 사용 가능 -->
<h1>Header-1</h1>
<p>
Lorem Ipsum is simply dummy text of the <br><br><br><br><br><br><br><br><br><br><br><br> printing and
typesetting industry.
</p>
<p>
when an unknown printer took a galley of type <br/> and scrambled it to make a type specimen book.
</p>
</body>
3) 인용할 때 쓰는 <blockquote> 태그
🍒 인용문을 인식할 수 있도록 <blockquote>와 </blockquote> 태그로 감싸주어야 한다.
🍒 다른 텍스트보다 약간 들여 쓰기 된다.
<body>
<!-- blockquote : 태그는 긴 인용문을 나타낼 때 사용하며, 들여쓰기를 한 것으로 표현 -->
<blockquote>
- 존 레논 (John Lennon) - <br>
그룹 비틀스의 리더로 작가, 그래픽 아티스트, 솔로 가수로도 활동했다.
</blockquote>
</body>
들여쓰기가 된 결과
4) 텍스트 굵기 강조 <strong>, <b>
🍒 <strong>~</strong> : 경고, 주의사항과 같이 중요한 내용을 강조할 때
🍒 <b>~<b> : 단순히 글자를 굵게 표현하고 싶을 때
5) 기울인 텍스트 입력 <em>, <i>
🍒 <em>~</em> : emphasis의 줄임말로 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
🍒 <i>~</i> : italic의 줄임말로 마음속의 생각이나 용어, 관용구 등에 강조할 때 사용
6) 글자 스타일 적용 <span>
🍒 <span>~</span> : 글자를 꾸밀 때 사용. 스타일의 선택자와 함께 주로 사용. 스타일을 안주면 아무런 효과가 없다. 인라인 태그 중에 사용 빈도가 제일 높다
<body>
<!-- 글자와 같은 성격을 가진 글자 태그(inline) : 옆으로 쌓이는 태그 -->
<!-- 거의 모든 인라인 속성의 태그는 블럭 속성 안에서 사용 된다. -->
<p>
<!-- strong : 경고, 주의사항과 같이 중요한 내용을 강조할 때 -->
<strong>굵게</strong>
<!-- b : 글자를 굵게 표현하고 싶을 때 : 내용이 아니라 표현만 할 때 -->
<b>굵게</b><br>
</p>
<p>
<!-- 주위 텍스트에 비해서 강조된 부분이나 저자의 생각 강조 -->
<em>기울이기</em>
<!-- i : 이탤릭체를 표현하고 싶을 때 : 내용이 아니라 표현만 할 때 -->
<i>기울이기</i><br>
</p>
<p>
<!-- span : 글자를 꾸밀 때 사용. 스타일의 선택자와 함께 주로 사용.
스타일을 안주면 아무런 효과가 없다. 인라인 태그 중에 사용 빈도가 제일 높다 -->
<span>글자내용</span><br>
<span>글자</span>내용<br>
<span style="font-weight: bold;">글자</span>내용<br>
</p>
</body>
7) 수평줄 태그 <hr>
🍒 <hr> : 수평줄을 나타내는 태그, 닫는 태그 x
<body>
<h1>Header-1</h1>
<hr>
<p>
Lorem Ipsum is simply dummy text of the <br> printing and typesetting industry.
</p>
<hr>
<p>
when an unknown printer took a galley of type <br/> and scrambled it to make a type specimen book.
</p>
</body>
8) 기타 태그
🍒 <q>~</q> : 따옴표로 감싼 인용 문구 표현. 짧은 부분 인용할 때 사용
🍒 <mark>~</mark> : 노란 형광펜 효과. 중요한 부분 강조할 때 사용
🍒 <del>~</del> : 문서에서 삭제된 텍스트나 지워야 할 부분 강조. 취소선, 중간줄 표시
🍒 <ins>~</ins> : 문서에 나타난 텍스트에 강조하거나 밑줄 표현시 사용
🍒 <ruby>~</ruby> : 동아시아 국가들의 주석(발음) 내용을 표시하기 위해 사용
🍒 <sub>~</sub> : 글자의 아래로 붙는 아래 첨자
🍒 <sup>~</sup> : 글자의 위로 붙는 위 첨자
<p>
<q>장마</q>기간입니다.<br>
<mark>형광펜 표시</mark> <br>
</p>
<p>
<del>지울 것</del><br>
<ins>밑줄 표현</ins><br>
</p>
<p>
<ruby>
漢子<rt>한자</rt>
</ruby>
<br>
글자의 위로 붙는 <sup>위첨자</sup><br>
글자의 아래로 붙는 <sub>아래첨자</sub>
</p>
3. 목록 만들기
1) 순서 없는 목록을 만드는 태그
🍒 unordered list의 약자인 <ul>과 </ul> 태그를 목록 앞 뒤에 붙인 후 list의 약자인 <li>와 </li> 태그를 삽입한다.
🍒 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을 불릿 bullet 이라고 한다.
<body>
<!-- 순서가 없는 목록 태그 예문 -->
<!-- ul : unordered list의 약자 -->
<!-- li : list item의 약자 -->
<ul>
<li>짜장면 </li>
<li>짬뽕</li>
<li>울면</li>
<li>야끼우동</li>
</ul>
</body>
2) 순서가 있는 목록을 만드는 태그
🍒 ordered list의 약자인 <ol>과 list의 약자인 <li> 태그를 사용해 만든다.
🍒 ol의 type 속성을 사용하면 숫자 이외에도 영문자나 로마 숫자등으로 순서를 나타낼 수 있다.
