-
학원 day40. 웹, HTML, 태그, 속성기록 2022. 11. 1. 17:14
웹 애플리케이션
- 멀리 떨어져 있는 웹 서버 안에서 실행된다.
- 목적 : 동적 웹 컨텐츠 제공
- 사용자는 웹 브라우저를 통해서 웹 서버에 요청을 하고 웹 애플리케이션의 실행결과를 응답받는다. 이때 사용되는 기술이 HTTP라는 통신규약(프로토콜)이다.
- 동적 웹 컨텐츠를 제공하기 위해 데이터베이스에서 데이터를 가져온다. DB엑세스를 위해 SERVICE클래스도 있어야 하고 DAO클래스도 필요하다.
- 동적 웹 컨텐츠는 HTML컨텐츠라는 걸 만들어서 제공해줘야 한다. 웹 컨텐츠는 형태가 다양하다. HTML, JSON, XML의 형태가 있다.
- 웹 애플리케이션 제작에 필요한 기술에는 Servlet과 JSP가 있다.
HTML (Hyper Text Markup Language)
- 웹용 문서를 작성할 때 사용되는 언어
- HyperText : 문서의 링크를 클릭하면 연결된 문서로 즉시 이동할 수 있는 기능
- Markup : 문서에서 어느 부분이 제목인지, 본문인지, 링크인지, 그림인지 등을 표시할 때 마크업(태그)을 사용한다.
- 마크업(태그)을 사용해서 작성된 문서이며, 링크를 클릭하면 연결된 다른 문서로 즉시 이동할 수 있는 문서를 작성할 때 사용되는 언어
- '팀 버너스리'가 world wide web을 발명하고 HTML을 만듦.
HTML의 구성요소
- 태그
- <와 >를 이용해서 만든다.
- 예) <a>, <p>, <table>, <ul>, <input>, <img>, <h1>, <body>, <html>
- 태그명은 소문자로 적는다.
- 태그는 여는 태그, 닫는 태그가 있다.
- 여는 태그 : <a> <table> <ul> <h1>
- 닫는 태그 : </a> </table> </ul>
- 태그를 작성할 때는 여는 태그와 닫는 태그를 짝을 맞춰서 정확히 입력해야 한다.
- 태그들 사이에는 부모태그, 자식태그의 관계를 가지는 태그가 있다.
- 자식태그는 부모태그 안에서만 사용할 수 있다.
- 자식태그를 부모태그 안에 적을 때는 들여쓰기 한다.
- 올바른 예)
- 부모태그(ul)태그 안에 자식태그(li)를 적었다.
<ul> <li>커피</li> <li>쥬스</li> </ul> - 올바르지 않은 예)
- 부모태그 밖에 적었다.
<ul></ul> <li>커피</li> <li>쥬스</li>- 부모태그 없이 적었다.
<li>커피</li> <li>쥬스</li>
- 올바른 예)
- 태그는 속성과 함께 사용할 수 있다.
- 속성은 태그와 관련된 부가적인 정보, 추가기능을 정의한다.
- 형식 : <태그명 속성명="속성값" 속성명="속성값">
- 속성명과 속성값은 붙여서 적고, 속성값은 ""사이에 적는다.
- 동일한 속성명을 여러 번 적을 수 없다.
- 속성명을 적을 때는 특별한 순서가 없다. (중요한 걸 앞에 두기는 한다.)
- 작성예)
<img src="images/logo.png" width="160" height="70">
- 속성
- 태그마다 고유한 속성을 가지고 있다. (예, 이미지 태그는 src라는 속성을 갖고 있다.)
- 속성은 원래 사용목적에 맞게 사용해야 한다.
- 어떤 속성은 속성값이 미리 정해진 것들도 있다. (type에는 text, password, radio, checkbox, date, number, hidden, file, button, submit, reset 이라는 속성값이 정해져 있다.)
<input type="속성값"> <!-- 속성값은 text, password, radio, checkbox, date, number, hidden, file, button, submit, reset ... -->- data-*로 시작하는 속성은 임의로 추가할 수 있다.
<img src="images/logo.png" data-title="회사로고" data-creator="홍길동" data-pubdate="2019-10-31">HTML 문서의 구조
<!doctype html> <html lang="ko"> <head> <!-- 웹브라우저가 html문서를 해석할 때 필요한 정보를 정의하는 곳, 화면에 표시되지 않음 --> </head> <body> <!-- 실제로 화면에 표시되는 내용이 정의되는 곳 --> </body> </html>- <!doctype html>
- html 문서의 유형을 선언하는 선언문이다.
- "이 문서는 html5 작성규칙을 준수하는 HTML 문서다"라는 의미를 나타냄
- <html> ~ </html>
- html 문서의 루트 태그
- 모든 html문서는 루트 태그를 오직 하나만 가질 수 있다.
- 모든 태그는 <html>와 </html>태그 안에 작성해야 한다.
- <html>태그는 <head>와 <body>태그를 자식태그로 가진다.
- <html>태그는 lang속성을 가진다.
- lang 속성은 문서에서 사용되는 언어를 지정할 수 있다.
- lang 속성에 지정된 언어와 브라우저의 기본언어가 다르면 번역옵션이 표시된다.
- 한국어:ko (kr은 한국)
- 영어:en (us는 미국) (en-US는 미국식 영어)
- 일본어:ja
- 중국어:zh
- 프랑스어:fr
- 독일어:de
- <head> ~ </head>
- 웹브라우져가 문서를 해석하는데 필요한 정보를 제공하는 태그
- 문서의 제목 : <title>문서의 제목</title>
- 문자 인코딩 방식 : <meta charset="utf-8"> (meta는 부가적인 정보를 표시할 때 사용)
- 스타일시트 : <link rel="style" href="style.css">
- 기타 : 자바스크립트소스
- <head>태그에 정의된 태그는 화면에 표시되지 않는다.
- 웹브라우져가 문서를 해석하는데 필요한 정보를 제공하는 태그
- <body> ~ </body>
- 웹브라우저에 실제로 표시될 내용을 포함하는 태그
- 앞으로 배우게 될 태그들은 대부분 <body> 태그 안에서 사용하게 될 태그
태그
- 컨텐츠를 담는 그릇이다.
- 컨텐츠는 다른 태그, 텍스트, 그림, 영상, 목록, 표, 링크 등이 컨텐츠다.
- 컨텐츠의 종류에 따라서 적절한 태그를 사용해야 된다.
html 문서
- html 태그를 사용해서 작성된 문서다.
- 문서는 보통 제목, 소제목, 내용, 목록, 표, 그림 등을 포함하고 있다.
- html문서의 각 요소를 구성하는 적절한 태그를 사용해서 html문서를 작성해야 한다.
제목을 담는 태그
- heading 태그(제목 태그)
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그는 제목을 담는 태그를 만든다.
- 숫자가 낮을 수록 더 큰 범주의 제목을 담는다.
- 웹페이지에서 웹페이지의 제목, 기사의 제목, 영화의 제목, 책의 제목
<h1>제목</h1> <h2>부제목</h2> <h3>소제목</h3> ...본문 내용을 담는 태그
- paragraph 태그(단락 태그)
- <p> 태그는 본문의 내용을 담는 태그를 만든다.
- 웹페이지에서 기사의 내용, 영화의 줄거리, 책의 소개글, 게시글의 본문, 블로그의 내용, 상품의 상세정보 등을 담을 때 사용한다.
- <p>태그와 <p>태그 사이에는 단락을 구분짓는 빈 줄이 추가된다.
< 결과 >
목록을 담는 태그
1. Unordered List 태그 (순서없는 목록 태그)
- <ul> 태그는 순서없는 목록을 만든다.
- list item 태그
- <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
- <ul>태그는 자식태그인 <li>태그를 가진다.
- <li>태그가 컨텐츠를 가진다.
- 뉴스목록, 상점에서 파는 상품목록, 부서에 근무중인 사원목록, 취미 목록
<h3>국내도서</h3> <ul> <li>소설</li> <li>시</li> <li>인문</li> <li>국어/외국어/사전</li> <li>학교교재</li> <li>과학기술</li> </ul>2. Ordered List 태그 (순서있는 목록 태그)
- <ol> 태그는 순서있는 목록을 만든다.
- list item 태그
- <li> 태그는 목록의 컨텐츠를 담는 태그를 만든다.
- <ol>태그는 자식태그인 <li>태그를 가진다.
- <li>태그가 컨텐츠를 가진다.
- 검색어 순위 목록, 음원사이트의 음원차트 목록, 요리의 레시피, 게임의 순위
<h2>순서있는 목록</h2> <h3>영화 예매 순위</h3> <ol> <li>자백</li> <li>리멤버</li> <li>고속도로 가족</li> <li>동감</li> <li>블랙아담</li> </ol>3.
description list 태그(정의 목록 태그)
: <dl> 태그는 정의목록을 만든다.
defined term 태그
: <dt> 태그는 정의 목록의 항목을 담는 태그를 만든다.
definition description 태그
: <dd> 태그는 정의 목록의 항목에 대한 데이터를 담는 태그를 만든다.
- <dl>태그는 자식태그인 <dt>와 <dd>를 가진다.
- <dt>와 <dd>가 한 쌍이다.
- <dt>와 <dd>중에서는 <dt>를 먼저 적는다.
<h2>정의 목록</h2> <h3>영화 정보</h3> <dl> <dt>제목</dt><dd>자백</dd> <dt>감독</dt><dd>윤종석</dd> <dt>출연진</dt><dd>소지섭</dd><dd>김윤진</dd><dd>나나</dd> <dt>상영일자</dt><dd>2022.10.26</dd> <dt>상영시간</dt><dd>105분</dd> <dt>관람등급</dt><dd>15세 이상 관람가</dd> </dl>
링크를 담는 태그
- <a> 태그는 링크를 생성하는 태그다.
- 형식
<a href="주소" target="어디에서 오픈할 것인지" title="풍선도움말">화면에 표시될 텍스트</a>- href는 필수 속성입니다.
- target, title은 생략가능합니다.
- <a>태그의 주요 속성
- href : 연결될 문서의 주소를 정의한다.
- 외부사이트 주소 (http://로 시작한다.)
<a href="http://www.daum.net">다음</a>- 내부문서 주소 (같은 웹 애플리케이션 내부의 다른 HTML문서와 연결되는 링크다.)
<a href="/course/best.html">베스트셀러</a>- 같은 문서내 특정 위치
<a href="#top">문서의 처음으로 이동</a> - target : 연결된 문서를 어디에서 오픈할 것인지를 정의한다.
- target="_blank" : 링크된 페이지를 새 창이나 새 탭에서 연다.
- target="_self" : 링크된 페이지를 현재 창이나 탭에서 연다.(기본값)
- title : 풍선도움말에 표시할 내용을 정의한다.
- href : 연결될 문서의 주소를 정의한다.
<h2>내부 링크</h2> <p>같은 웹 애플리케이션 내부의 다른 HTML문서와 연결되는 링크다.</p> <a href="doc-01.html" target="_blank" title="첫번째 문서입니다.">문서1</a> <a href="doc-02.html" target="_blank" title="두번째 문서입니다.">문서2</a> <a href="doc-03.html">문서3</a> <a href="doc-04.html">문서4</a> <a href="doc-05.html">문서5</a> <h2>외부 링크</h2> <p>외부 사이트와 연결되는 링크다. http://로 시작한다.</p> <a href="http://www.daum.net">다음</a> <a href="http://www.naver.com">네이버</a> <a href="http://www.google.com">구글</a> <a href="http://www.yahoo.com">야후</a>< 결과 >
'기록' 카테고리의 다른 글
학원 day42. 폼(2), id와 class, CSS (0) 2022.11.03 학원 day41. 태그(2), 엘리먼트, 폼 (0) 2022.11.02 학원 day39. 분석함수, 집합 연산, 계층형 쿼리 (0) 2022.10.31 학원 day37~38. ibatis(2), XML (0) 2022.10.30 학원 day36. ibatis (0) 2022.10.26