HTML5
웹 특징
- HTTP(Hyper Text Transfer Protocol) 사용
- HTML(Hyper Text Markup Language)로 작성된 문서 연결
- 텍스트, 그래픽, 오디오, 비디오, 프로그램 파일 등 멀티미디어 서비스 제공
반응형 웹
- 웹 서버에서 제공되는 정보가 다양한 기기에 맞춰 제공되는 환경
웹 처리 과정
- 네트워크를 통해 서로 연결된 컴퓨터들 간에 서버와 클라이언트의 역할을 나누고
HTML이라는 마크업(Markup) 언어를 통해 자료를 주고 받음
HTML5 구성요소
HTML5 주의사항
- 태그는 대 · 소문자를 구분하지 않으나 소문자를 권장함
- 시작태그로 시작하면 반드시 종료태그로 종료
- 파일 확장자는 반드시 html 또는 htm으로 설정
- 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로
공백을 추가하기 위해서 특수기호 를 이용해야 함
HTML 기본구조
- body에 script 사용 가능!
<!doctype>
HTML5 : <!doctype html> HTML4 & XHTML 엄격모드 : 표준문법 엄하게 준수 html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ “http://www.w3.org/TR/html4/strict.dtd"> xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 호환모드 : 표준문법 조금 벗어나도 허용 html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“ “http://www.w3.org/TR/html4/loose.dtd"> xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 프레임세트모드 : 호환모드에서 프레임셋 허용 html4 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN“ “http://www.w3.org/TR/html4/frameset.dtd"> xhtml : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<.html><./html> ( . 점 무시!)
html문서 시작, 끝 표시
lang은 이 페이지가 어느 나라 언어로 되어있는지를 의미
-> 검색엔진이 페이지 검색 시에 참고, 검색 사이트에서 특정 언어 제외할 때 사용
속성
html 뒤에 붙는 lang을 속성이라고 함
ex. <html lang=“ko”>
속성 값
속성에 대한 값을 설정한 것이 속성 값
lang의 속성 값으로는 “설정 언어“가 올 수 있음
<!-- -->
- HTML에서 사용하는 주석
- 코드 작성내용에 대해 설명하는 곳에 사용
- 브라우저는 주석 부분을 해석하지 않고 넘어감
글자 관련 태그
<!DOCTYPE html> 문서 형식을 지정하는 태그 <html lang="ko"> html 태그 : html 문서의 내용을 정의하는 태그 (이 안쪽에 HTML 코드를 작성) lang 속성 : html 문서가 어떤 언어로 되어있는지 표시, 검색 엔진이 참고하는 용도 <head> head 태그 : html 문서를 정의하는 태그 문서의 제목, 스타일시트(CSS), 스크립트(JS), 메타데이터(문서 정보) 등 <meta charset="UTF-8"> meta 태그 charset : html 문서의 문자 형식(문자 인코딩)을 선언 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 반응형 웹 디자인을 위한 기본 설정 width=device-width : 화면의 가로 너비를 사용자의 디바이스 너비에 맞춤 initial-scale=1.0 : 초기 배율값을 100%로 설정 <title>01_글자 관련 태그</title> ex) 크롬 탭 이름 </head> <body> body 태그 : 화면에 보여질 html 문서 내용을 작성하는 태그 h1 ~ h6 (heading tag) : 제목을 입력할 때 사용하는 태그 1 ~ 6 단계 폰트 크기가 지정되어 있음 <h1>HTML 입니다.</h1> <h2>HTML 입니다.</h2> <h3>HTML 입니다.</h3> <h4>HTML 입니다.</h4> <h5>HTML 입니다.</h5> <h6>HTML 입니다.</h6>
<hr> : (horizon : 수평선) tag
가 나 다 라 마 바 -> HTML의 연속되는 띄어쓰기는 1칸 띄어쓰기로 인식, 엔터는 인식하지 않는다
<h3 style="color:red">* 띄어쓰기, 엔터를 html에 표시하는 방법</h3> <!-- --> 1. 띄어쓰기 : 가 나 다 <!-- br(line BReak) tag --> <br> 2. 줄바꿈 <br>가<br>나<br>다
p 태그 : 문단, 단락 - 글 작성용 태그 - 문단을 구분 (앞, 뒤 태그와의 간격이 생김) <p>1번 입니다.</p> <p>2번 입니다.</p> <p>3번 입니다.</p> <p> 1번 입니다. 2번 입니다. 3번 입니다. </p>
pre 태그 - 글 작성용 태그 - 문단을 구분 + 시작, 종료태그 사이에 작성된 문자열의 형식을 그대로 화면에 호출 <pre> 1번 입니다. 가 2번 입니다. 3번 입니다. </pre>
<!-- b, i 와 strong, em의 차이 * 웹 접근성 일반인 뿐만 아니라 장애인, 고령자를 위해 웹 사이트에서 제공하는 서비스를 모두 이용할 수 있도록 보장하는 것 (의무 사항!!) (strong, em은 스크린리더가 더 강조하면서 읽음) --> <b>b 태그 </b> : 단순히 글자를 굵게 표시하는 태그<br> <i>i 태그 </i> : 단순히 글자를 기울이는 태그<br> <b><i>ABC(태그는 중복 적용 가능하다)</i></b> <strong>strong 태그</strong> : 중요성, 심각함 등을 표현하는 강조 태그 <em>em 태그</em> : 문장 일부분의 중요성을 강조할 때 사용 <mark>mark 태그</mark> : 형관펜 효과를 나타내는 태그<br> <u>u 태그</u> : under line (밑줄)을 나타내는 태그<br> <s>s 태그</s> : 취소선(잘못됨을 표시) <br> <del>del 태그</del> : 삭제선(없어진 텍스트) <br> <small>small 태그</small> : 작은 글자 표시 <br> sup 태그 (윗첨자) : x<sup>2</sup> sub 태그 (아랫첨자) : log<sub>10</sub> abbr 태그 : 마우스 오버 시 툴팁 출력 <br> <abbr title="Hyper Text Transfer Protocol">HTTP</abbr>
<mark>태그</mark>들은 해당 태그 내에서 중첩으로 사용 가능하다.<br> <b>굵은</b>글자를 사용할 수도 있고, <i>기울이거나</i> <s>취소선</s>을 넣는 등<br> 다양하게 사용할 수 있다.
목록 관련 태그
ul(Unordered List) 태그 : 순서가 없는 목록 ol(Ordered List) 태그 : 순서가 있는 목록 li(List item) 태그 : ul, ol 태그 내부에 들어가 목록의 요소를 나타내는 태그 <ul> 여기다가<br> 이렇게<br> 써봤자 목록으로 인식이 안됩니다. <li>김밥</li> <li>서브웨이</li> <li>햄버거</li> </ul> <!-- li는 자식으로 항상 있어줘야 함 -->
* ol 태그의 type 속성 <br> type="a" -> 소문자 알파벳 <br> type="A" -> 대문자 알파벳 <br> type="i" -> 소문자 로마숫자 <br> type="I" -> 대문자 로마숫자 <br> type="1" -> 숫자 (기본값) <br> start 속성 : 시작 번호 지정 <br> reversed 속성 : 순서 반대로 <br> </p> <ol type="1" start="5" reversed> <li>김밥</li> <li>서브웨이</li> <li>햄버거</li> </ol>
<ul> <li>대분류1</li> <li>대분류2 <ol> <li>소분류1</li> <ul> <li>리스트</li> </ul> <li>소분류2</li> <li>소분류3</li> </ol> </li> <li>대분류3</li> </ul>
<ul> <li>프로그래밍 언어</li> <ul> <li><del>Java</del></li> </ul> </ul> <ul> <li>데이터베이스</li> <ul> <li><del>Oracle</del></li> </ul> </ul> <ul> <li>화면구현</li> <ol type="1"> <li><mark>HTML5</mark></li> <li>CSS3</li> <li>Javascript</li> <li>Ajax</li> </ol> </ul> <ul> <li>서버개발기술</li> <ol type="i"> <li><del>JDBC</del></li> <li>Servlet</li> <li>JSP</li> </ol> </ul> <ul> <li>프레임워크</li> <ol type="a"> <li>Spring</li> <li>MyBatis</li> </ol> </ul>
표 관련 태그
table 태그
- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell) 이라고 함.
- table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함.
tr 태그
- Table Row의 약자로 한 행을 나타내는 태그
td 태그
- Table Data의 약자로 한 행의 한 컬럼(== 셀)을 나타내는 태그
th 태그
- Table Header의 약자로 컬럼명을 표시하는 용도의 태그
- 기본 성질은 td태그와 같으나, 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐.
- thead 태그 / tbody 태그 / tfoot 태그
표의 머리글 / 표의 본문 / 표의 푸터(요약, 합계)border 속성
- table 태그와 내부에 작성되는 td, th 태그에 검정 테두리 추가
지정된 값에 따라 테두리 굵기(px) 지정<table border="1"> <tr><!-- 1행--> <th>브라우저</th> <!-- 1행 1열--> <th>제조사</th> <!-- 1행 2열--> <th>제조사 홈페이지</th> <!-- 1행 3열--> </tr> <tr><!--2행--> <td>Chrome</td> <td>Google</td> <td>www.google.com</td> </tr> <tr><!--3행--> <td>Edge</td> <td>MS</td> <td>www.microsoft.com</td> </tr> <tr><!--4행--> <td>Safari</td> <td>Apple</td> <td>www.Apple.com</td> </tr> </table>
행 명합(rowspan), 열 병합(colspan), 속성
- td / th 태그에만 작성 가능한 속성
- 행병합(rowspan) : 상하 병합
- 열병합(colspan) : 좌우 병합
<table border="1"> <tr> <th width="70px">이름</th> <td width="210px"></td> <th width="140px" height="140px" rowspan="2">사진</th> </tr> <tr> <th>연락처</th> <td>010-1111-1111</td> </tr> <tr> <th height="35px">주소</th> <td colspan="2"></td> </tr> <tr> <th height="140px">자기소개</th> <td colspan="2"></td> </tr> </table>
테이블 구조 설정 태그
- thead : 테이블의 상단 부분 영역(컬럼명)
- tbody : 테이블의 중단 부분 영역(실제 값, 내용)
- tfoot : 테이블의 하단 부분 영역(요약, 합계)
<table class="tb3"> <thead> <tr> <th>이름</th> <th>나이</th> <th>주소</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td>20</td> <td>서울시 도봉구</td> </tr> <tr> <td>고길동</td> <td>40</td> <td>서울시 강북구</td> </tr> <tr> <td>김영희</td> <td>15</td> <td>서울시 중구</td> </tr> </tbody> <tfoot> <tr> <th colspan="2">총인원</th> <td>2명</td> </tr> </tfoot> </table>
<!-- HTML 문서의 스타일(크기, 모양, 색상 등)을 지정하는 태그 --> <style> .tb3 { border: 2px solid black; border-collapse: collapse; } .tb3 thead { background-color: aquamarine; } .tb3 tbody { background-color: gold; } .tb3 tfoot { background-color: tomato; color: red; } .tb3 th, .tb3 td { border : 3px solid blue; } </style>
연습문제
<body> <table border="1", class="t1"> <thead > <tr> <th colspan="5">하수정 컬렉션</th> </tr> </thead> <tbody> <tr> <th rowspan="5">제품리스트</th> <th>코드</th> <th>분류</th> <th>가격</th> <th>구매가능개수</th> </tr> <tr> <td>01-468</td> <td>봄</td> <td>200,000원</td> <td>1068</td> </tr> <tr> <td>01-223</td> <td>여름</td> <td>200,000원</td> <td>976</td> </tr> <tr> <td>01-626</td> <td>가을</td> <td>200,000원</td> <td>1205</td> </tr> <tr> <td>01-245</td> <td>겨울</td> <td>200,000원</td> <td>537</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">총합</th> <td>800,000원</td> <td>3786</td> </tr> </tfoot> </table>
<style> .t1 thead { background-color: aqua; } .t1 tbody { background-color: orange; } .t1 tfoot { background-color: yellow; } .t1 tbody th, .t1 tfoot th { background-color: orangered; } </style>
<table border="1"> <tr> <td>1</td> <td>2</td> <td rowspan="2">3</td> <td>4</td> </tr> <tr> <td colspan="2">5</td> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td colspan="2">8</td> </tr> </table>
인생은 변수