-------------------------------------------
HTML 태그의 종류
7. HTML Lists
- 순서 있는 목록, 순서 없는 목록. 블럭 요소.
- <ul>, <li>
- <ol>, <li>
- <ul>, <ol> 내부에는 <li> 태그만 가능. 콘텐츠 추가는 <li> 태그 내부에 작성.
예를 들어, 강사의 강의 가능 과목 리스트 출력시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample10</title>
<style type="text/css">
/* 선택자 { 속성:값; .... } */
/* font-size 속성은 글자 크기 지정 */
h1 { font-size: 17pt; }
li { font-size: 14pt; }
</style>
</head>
<body>
<div>
<h1>[홍길동] 강사 강의 가능 과목</h1>
<!--
목록 콘텐츠 표현 태그
ol, ul 태그 안에 li 태그를 나열
-->
<ol style="list-style-type: upper-roman;">
<li>Java SE</li>
<li>Oracle
<!--
ol, ul 안에 또다른 ol, ul 표기하는 경우
들여쓰기 지정
-->
<ul style="list-style-type: square;">
<li>User Schema</li>
<li>DML</li>
<li>DDL</li>
<li>DCL</li>
</ul>
</li>
<li>JDBC</li>
<li>HTML, CSS, Javascript</li>
</ol>
</div>
</body>
</html>
--------------------------------------
8. HTML Blocks
- <div> : 블럭 요소. 항목 여러개를 그룹으로 묶어주는 역할. 범위 지정시 사용. 화면상의 레이아웃 구성시 사용.
- <span> : 인라인 요소. 범위 지정시 사용.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample10</title>
<style type="text/css">
/* 선택자 { 속성:값; .... } */
/* font-size 속성은 글자 크기 지정 */
h1 { font-size: 17pt; }
li { font-size: 14pt; }
</style>
</head>
<body>
<div>
<h1>[홍길동] 강사 강의 가능 과목</h1>
<!--
목록 콘텐츠 표현 태그
ol, ul 태그 안에 li 태그를 나열
-->
<ol style="list-style-type: upper-roman;">
<li>Java SE</li>
<li>Oracle
<!--
ol, ul 안에 또다른 ol, ul 표기하는 경우
들여쓰기 지정
-->
<ul style="list-style-type: square;">
<li>User Schema</li>
<li>DML</li>
<li>DDL</li>
<li>DCL</li>
</ul>
</li>
<li>JDBC</li>
<li>HTML, CSS, Javascript</li>
</ol>
<!--
인라인 스타일.
특정 태그에만 스타일 지정시 style="속성:값;..." 속성 추가.
background-color 속성은 배경색 지정.
color 속성은 전경색 지정.
padding 속성은 내부 여백 지정.
width 속성은 블럭의 너비 지정.
절대적, 상대적 크기 지정 가능.
-->
<div style="background-color:black; color:white; padding:20px; width: 500px;">
<h2>자기소개</h2>
<p>홍길동 강사의 자기 소개 내용....</p>
</div>
</div>
</body>
</html>
http://m.naver.com 사이트 에서 블럭요소 분석.
---------------------------------------
9. HTML Layouts
레이아웃은 화면의 구성 요소를 적당한 크기로 나눠서 지정하는 것.
화면상단부, 메뉴부, 콘텐츠부, 화면하단부 등으로 구분하는 것.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample11</title>
<style type="text/css">
/* 선택자 { 속성:값; ... } */
/* #menu 은 id="menu" 속성을 가진 태그를 접근하는 추가 속성 */
/* height 속성은 블럭의 (절대적)높이 지정 */
/* min-height 속성은 블럭의 (상대적)높이 지정. 최소 높이 지정. */
/* text-align 속성은 정렬 위치 지정 */
/* margin:auto; 속성은 블럭 요소를 가운데 정렬 시켜준다 */
div#menu { margin:auto; min-height:100px; text-align: center; background-color: gray; width:80%; }
div#content { margin:auto; min-height:300px; width:80%; }
div#copyright { margin:auto; min-height:50px; text-align: center; width:80%; background-color: gray;}
</style>
</head>
<body>
<!-- 전체 영역 지정 -->
<!-- id 속성은 영역에 대한 식별자 지정. 스타일 지정시 사용 예정. -->
<div id="main">
<!-- 상단 영역 지정. 주메뉴 출력. 페이지에 상관없이 고정. -->
<div id="menu">
<h1>[홍길동] 강사 강의 가능 과목</h1>
</div>
<!-- 콘텐츠 영역 지정. 내용 출력. 페이지별로 작성. -->
<div id="content">
</div>
<!-- 하단 영역 지정. 회사소개 출력. 페이지에 상관없이 고정. -->
<div id="copyright">
회사소개
</div>
</div>
</body>
</html>
---------------------------------------------
10. ***HTML Forms and Input
- 입력 폼 구성 태그.
- 이름, 전화번호 등을 입력 받는 화면 구성시 사용.
- <form> : 입력 폼 태그 전체의 부모 요소. 블럭 요소.
- <input> : 사용자의 데이터를 입력 받는 입력 폼 태그. type="" 속성 종류가 다양하게 준비되어 있다. text, password, checkbox, radio, .... 인라인 요소.
- <select> : 사용자로부터 미리 정해진 데이터 중에 하나를 선택하도록 하는 태그. 인라인 요소.
- <textarea> : 사용자로부터 다량의 문자 데이터를 입력받는 입력 폼 태그. 인라인 요소.
- <input type="submit"> : 입력 폼에 입력된 데이터를 서버에 전송하는 역할을 하는 버튼. 입력 폼의 필수 구성 요소.
예를 들어, 사용자로부터 이름, 전화번호, 이메일 등을 입력받는 화면을 구성한다면
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<h1>회원가입</h1>
<!-- 폼 태그 부모 요소 지정. <form> 태그로 지정. -->
<form>
<!-- 하위 요소로 <input>, <select>, <textarea> 태그 추가 -->
<!-- 입력 받고자 하는 항목을 하위 요소로 표현. -->
<!-- 제출(submit) 버튼 추가 되어야 액션 진행 가능 -->
<!-- 제출 액션이 정상적으로 진행되려면
서버 측에서 액션 전용 프로그램 추가 필요 -->
<!-- 일반적인 텍스트 자료는 <input type="text">로 입력 받는다. -->
이름 <input type="text">
전화 <input type="text">
이메일 <input type="text">
<input type="submit">
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 선택자 { 속성:값; ... } */
/* .msg 선택자는 특정 태그에 class="msg" 식별자가 있는 경우 접근 */
.msg { font-size:10pt; color:gray; }
/* 선택자, 선택자 표기는 두 개 이상의 선택자 동시 지정하는 경우 */
th, td { padding:3px; }
</style>
</head>
<body>
<div>
<h1>회원가입</h1>
<form>
<table>
<tr>
<!-- <th> 태그는 제목 지정시 사용 -->
<!-- <td> 태그는 콘텐츠 지정시 사용 -->
<th>이름</th>
<td>
<!-- 글자수 제한 지정. maxlength="" 속성 추가 -->
<input type="text" maxlength="20">
<!-- <span></span> 태그는 인라인 요소 지정 전용 태그 -->
<!-- class="msg" 스타일 지정을 위한 전용 식별자 -->
<!-- id="" 속성은 고유한 이름 지정 -->
<!-- class="" 속성은 같은 이름 사용 가능. 그룹 지정. -->
<span class="msg">(20자 이내)</span>
</td>
</tr>
<tr>
<th>전화</th>
<td><input type="text" maxlength="20"><span class="msg"> (20자 이내)</span></td>
</tr>
<tr>
<th>이메일</th>
<td>
<!-- 폼의 너비 지정. size="글자수" 속성 또는 style="width:너비;" 지정. -->
<input type="text" size="50" maxlength="50">
<span class="msg"> (50자 이내)</span>
</td>
</tr>
<tr>
<th>입사일</th>
<td>
<!--
type="date" 속성은 HTML5 전용.
년-월-일 서식 강제 지정 및 달력 출력 가능.
범용적인 상황이 아닌 속성은 권장하지 않는다.
- jQuery 권장
-->
<input type="date"> (YYYY-MM-DD)
</td>
</tr>
<tr>
<th>지역</th>
<td>
<!--
특정 범위 내에서 선택하는 경우
라디오(단일선택)
, 체크박스(다중선택)
, 선택목록(단일선택, 다중선택) 태그 사용.
라디오 태그 사용시 name="식별자" 속성 필수 지정.
-->
<input type="radio" name="city">서울
<input type="radio" name="city">부산
<input type="radio" name="city">인천
</td>
</tr>
<tr>
<th>부서</th>
<td>
<!-- 선택목록(단일선택, 다중선택) 태그 사용. -->
<select>
<option>개발부</option>
<option>마케팅부</option>
<option>총무부</option>
</select>
</td>
</tr>
<tr>
<th>취미</th>
<td>
<!-- 다중 선택인 경우 체크박스 지정 -->
<input type="checkbox" >영화
<input type="checkbox">독서
<input type="checkbox">스포츠
<input type="checkbox">게임
</td>
</tr>
<tr>
<th>
자기 소개
<br><span class="msg">(100자 이내)</span>
</th>
<td>
<!--
많은 양의 텍스트를 입력받는 경우 <textarea> 태그 사용.
<textarea> 태그는 </textarea> 끝 태그 지정 필수.
<textarea> 태그에서의 maxlength="" 속성은 HTML5 전용.
-->
<textarea cols="50" rows="5" maxlength="100"></textarea>
<!-- 입력되는 글자의 수를 출력하는 부분 추가. Javascript 이용. -->
<span style="font-size:10pt; color:red;">(0/100)</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
-----------------------------------------------
11. HTML Iframes
브라우저 영역 내에서 독립적인 브라우저 영역을 만드는 태그.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div>
<h1>[홍길동] 강사 강의 스케줄</h1>
<p><a href="Sample12.html" target="schedule">예정</a>
<a href="Sample11.html" target="schedule">진행</a>
<a href="Sample10.html" target="schedule">완료</a></p>
<iframe width="500" height="300" name="schedule"></iframe>
</div>
</body>
</html>
----------------------------------------------
CSS (Cascading Style Sheets)
1. HTML 태그만으로는 표현 부분이 부족하기 때문에 CSS를 이용해서 출력 형태를 지정하게 된다.
2. CSS 기본 형식
"CSS 속성명 : 값" 형태의 명령을 특정 대상에 적용하면 지정된 속성에 따라 출력 형태가 달라진다.
예를 들어, "color:red" 명령을 이용하면 특정 대상의 전경색이 빨간색으로 출력된다.
3. CSS 적용 방법
- 인라인 단위 적용 방법 : 특정 태그에만 적용되는 CSS. 웹페이지 내에서 특정 부분에만 적용하는 스타일 지정시 사용.
- 페이지 단위 적용 방법 : 특정 페이지에만 적용되는 CSS. 웹페이지 전체의 스타일 지정시 사용.
- 파일 단위 적용 방법 : 특정 파일 단위로 적용되는 CSS. 웹사이트 전체의 스타일 지정시 사용.
4. 인라인 단위 적용 방법
<태그명 style="CSS속성:값; CSS속성:값; ...">데이터</태그명>
5. 페이지 단위 적용 방법
<style type="text/css">
선택자 { CSS속성:값; CSS속성:값; ... }
</style>
-> 선택자는 여러가지 표현에 의해 특정 태그를 찾는 명령이다. 한 개 이상의 태그를 동시에 찾을 수 있다.
6. 파일 단위 적용 방법
<link rel="stylesheet" type="text/css" href="파일명.css">
-> 별도의 .css 파일을 만들어서 그 안에 스타일 내용을 작성한다.
-----------------------------------------
CSS Selectors
- CSS 적용 대상을 찾는 방법
1. The element Selector
- 태그이름을 기준으로 CSS 적용 대상을 찾는 방법.
CSS 내용 -> p {속성:값;}
예를 들어, 아래와 같은 CSS를 만들게 되면
p /*모든 p 태그가 영향을 받는다.*/
{
text-align:center; /*정렬 옵션*/
color:red; /*전경색 지정*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 엘리먼트 선택자는 태그 이름을 지정한다. */
/* 태그이름 { 속성:값;.... } */
h1 { font-size:15pt; }
p { text-align:center; color:gray; }
</style>
</head>
<body>
<div>
<h1>The element Selector</h1>
<p>The element selector selects elements based on the element name.</p>
<p style="color:black;">You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)</p>
</div>
</body>
</html>
2. id Selector
- 특정 태그에 id="" 속성이 지정된 경우 id명을 이용해서 CSS 적용 대상을 찾게 된다.
- id명은 현재 페이지 내에서 유일한 이름을 가져야 한다.
CSS -> #식별자 {속성:값}
태그 -> <태그명 id="식별자"></태그명>
예를 들어,
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
h1 { font-size:15pt; }
p { text-align:center; color:gray; }
#style01 { color:black; }
</style>
</head>
<body>
<div>
<h1>The element Selector</h1>
<p>The element selector selects elements based on the element name.</p>
<p id="style01">You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color)</p>
</div>
</body>
</html>
3. class Selector
- 특정 태그에 class="" 속성이 지정된 경우 class명을 이용해서 CSS 적용 대상을 찾게 된다.
- class명은 현재 페이지 내에서 중복된 이름을 가질수 있다.
- 여러개의 적용 대상을 같은 class명을 지정하면 한꺼번에 적용할 수 있다.
CSS -> .식별자 {속성:값}
태그 -> <태그명 class="식별자"></태그명>
예를 들어, 특정 태그가 여러개 있는 경우, 부분적으로 CSS 적용을 한다면
p {속성:값1}
p#id1 {속성:값2}
p.class1 {속성:값3}
<p id="id1">적용대상1</p> -> 값2
<p class="class1">적용대상2</p> -> 값3
<p class="class1">적용대상3</p> -> 값3
<p>적용대상4</p> -> 값1
<p>적용대상5</p> -> 값1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td.title { background-color: #FFCCCC;}
</style>
</head>
<body>
<div>
<h1>회원 가입 화면</h1>
<form>
<table>
<tr>
<td class="title">이름</td><td><input type="text" placeholder="이름
"></td>
</tr>
<tr>
<td class="title">전화</td><td>
<select>
<option>010</option>
<option>011</option>
<option>017</option>
<option>018</option>
</select>-
<input type="text" placeholder="전화
"></td>
</tr>
<tr>
<td class="title">이메일</td><td><input type="text" placeholder="이
메일"></td>
</tr>
<tr>
<td class="title">생년월일</td><td><input type="date"></td>
</tr>
<tr>
<td class="title">성별</td><td><input type="radio" name="gender"
value="male">Male <input type="radio" name="gender"
value="female">Female</td>
</tr>
<tr>
<td class="title">취미</td><td><input type="checkbox" value="1">운
동 <input type="checkbox" value="2">여행 <input type="checkbox" value="3">감
상</td>
</tr>
<tr>
<td class="title">자기 소개</td><td><textarea style="width: 400px;
height:100px;" placeholder="간단한 자기 소개를 부탁합니다."></textarea></td>
</tr>
<tr>
<td></td><td><input type="submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
----------------------------------------------------
'HTML/CSS' 카테고리의 다른 글
| 4일차_CSS (0) | 2015.06.21 |
|---|---|
| 2일차_HTML 태그의 종류 (0) | 2015.06.21 |
| 1일차_웹어플리케이션개요, HTML개요, CSS개요.txt (0) | 2015.06.21 |
| 09일차_거품정렬,선택정렬,삽입정렬 (0) | 2015.06.21 |
알 수 없는 사용자