1. 테이블 태그
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>1.테이블 태그.html</title>
</head>
<body>
<center>
<!--
border=n(픽셀수), width,height(표의 크기)=>픽셀수 or 상대적인 단위 %
cellspacing->쉘과쉘사이의 거리 ,cellpadding->쉘과 문자열사이의 거리
align="left|center|right"
-->
<table border="2" width="70%" height="100%" cellspacing="0" cellpadding="0">
<!--
첫행이 타이틀 제목역할(table heading) 정가운데배치,글자가 굵게표시(강조)
색깔->bgcolor=green,blue,yellow,,,#16진수
-->
<tr>
<!-- <td align="center"><b>월</b></td> <td>수</td> <td>금</td> -->
<th>월</th>
<th>수</th>
<th>금</th>
</tr>
<tr>
<td align="left" bgcolor="yellow">왼쪽</td>
<td align="center" bgcolor="green">가운데</td>
<td align="right" bgcolor="#00cccc">오른쪽</td>
</tr>
</table>
</center>
</body>
</html>
2. 테이블태그를 이용한 병합
<!doctype html>
<!---html5 태그선언문-->
<html>
<!--문서의 시작태그 -->
<head>
<!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>2.테이블태그를 이용한 병합.html</title>
</head>
<body>
<table align="center" width="70%" height="70%" border="1" cellspacing="0" cellpadding="0">
<caption>참가자 목록</caption>
<!--(caption)표의 제목
테이블(가로로 병합(colspan="병합의 갯수")
세로로 병합(rowspan="병합할 갯수(세로로 합치는 수")
가로로 정렬=>align=left or center or right
세로로 정렬=>valign=top or middle or bottom
--->
<tr bgcolor="yellow">
<!-- <th>이름</th>
<th>나이</th> -->
<th colspan="2">회원</th>
<th>성별</th>
</tr>
<tr>
<td>홍길동</td>
<td> </td><!-- 공백 -->
<td rowspan="2" align="center" valign="top">남</td>
</tr>
<tr>
<td>테스트</td>
<td>35</td>
<!--<td>남</td>-->
</tr>
</table>
</body>
</html>
<!--문서의 종료태그>
3. 입력양식기본
<!doctype html>
<!---html5 태그선언문-->
<html>
<!--문서의 시작태그 -->
<head>
<!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>3.입력양식기본.html</title>
</head>
<body>
<h3>웹프로그래밍을 하기위한 입력양식</h3>
<!--
method=>데이터를 전송하는 방식을 지정(Get or Post)
get->사이트 접속(기본),방문->url창에 노출때문에 보안에 문제가 생김
post->데이터 입력(회원가입,로그인,게시판의 글쓰기)->url창에 노출이안됨
파일첨부
action->전송되는 페이지이름(~jsp or do),~php,~asp -->
<form name="frm" method="post" action="register.jsp">
<!--각각의 입력받을값을 어떻게 구분해주는 고유의 속성명(name)(변수)-->
이름:<input type="text" size="10" name="name"><br>
암호:<input type="password" size="8" name="password"><br>
메일:<input type="text" size="15" name="email"><br>
<p>
<!--성별(둘중의 하나값만 선택)-->
<input type="radio" name="gender">남자
<input type="radio" name="gender" checked="checked">여자
</p>
<p>
<!--다중선택(동시에 여러개를 선택하는 경우)-->
취미<input type="checkbox" name="ckk">바둑
<input type="checkbox" name="music">음악
<input type="checkbox" name="baseball">야구
<p>
<!--정해져 있는 값중에서 하나를 선택(select)태그
selected(디폴트로 선택할 항목을 지정할때 필요)-->
취업희망:<select name="job">
<option>웹프로그래머</option>
<option selected>빅데이터(파이썬)</option>
<option>DB전문가</option>
<option>보안 전문가</option>
</select>
<p>
<!-- 여러줄을 입력을 받을때 textarea -->
<textarea name="career" rows="8" cols="40">
</textarea>
<p>
<input type="file" name="file">
<p>
<!-- 파일 첨부 -->
<!-- 버튼(일반버튼,전송버튼) value(버튼의 겉의 이름을 부여)-->
<input type="button" value="전송">
<input type="submit" value="회원가입"><!-- 전송버튼(action="register.jsp"로 전달 -->
<input type="reset" value="다시입력"><!-- 자동으로 입력받은값이 지워진다. -->
</form>
</body>
</html>
<!--문서의 종료태그>
4. html5에서 추가된 속성
<!doctype html><!---html5 태그선언문-->
<html><!--문서의 시작태그 -->
<head><!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8">
<title>4.html5에서 추가된 속성.html</title>
</head>
<body>
<form name="frm"method="post"action="register.jsp">
<!--
input type="email"=>이메일전용
input type="url" =>블로그,개인 홈페이지
input type="date"=>날짜
input type="time"=>시간
1.placeholder="툴팁문자열 표시"(미리보기 기능)
2.required(필수입력)
-->
ID:<input type="text"size="10"name="ID"required><br>
암호:<input type="password"size="8"name="pw"size ="10"required><br>
메일:<input type="email"size="15"name="email"
placeholder="test@naver.com"required><br>
웹주소:<input type="url" placeholder="http://www.abc.com/test" name="web"
size="10">
원하는 날짜와 시간을 설정해 주세요<br>
<input type="date"><br><!-- firefox (X) chrome 기준 -->
<input type="time"><br><!-- firefox (X) chrome 기준 -->
<input type="datetime"><br><!-- firefox (X) chrome(X) -->
<input type="submit"><br>
</form>
</body>
</html>
5. html5에서 추가된 속성(2)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>5.html5에서 추가된 속성(2).html</title>
</head>
<body>
<form name="frm">
원하는 주문갯수를 설정해주세요<br>
<!-- min="최소값" max="최대값" step="증가또는 감소" value="현재값" -->
<input type="number" min="1" max="20" step="2" value="1"><br>
<!-- range(bar를 움직이는 이용) -->
<input type="range" min="1" max="20" step="2" value="1"><br>
<input type="search"><br><!-- 입력한 값을 취소(x)를 클릭 -->
원하는 색깔을 선택하세요<br>
<input type="color">
<p>
<!-- 콤보박스의 변형 3. autofocus="autofocus"(자동으로 커서입력)-->
과목:<input type="text" placeholder="과목을 반드시 입력하세요" autofocus="autofocus" list="choice">
<!--
텍스트박스에 연결시켜서 보여줄 컴포넌트(datalist)태그를 사용
똑같은 태그를 어떻게 구분해서 처리 name(입력을 받아서 전달) or id로 구분
list->상대방의 연결시킬 id값을 부여"
id=> 1)css에서의 id선택자로써 사용(디자인을 하기위해 필요)
2)자바스크립트, jQuery에서 사용=>언어로써 사용
-->
<datalist id="suggest">
<option value="자바">
<option value="웹프로그래밍">
<option value="화면구현">
</datalist>
<datalist id="choice">
<option value="파이썬">
<option value="빅데이터">
<option value="DB설계">
</datalist>
<p>
<!-- 진행과정-->
<progress id="p" value="20" max="100"></progress>
<p>
<!--백분율 표시(min,max,value)적용 -->
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<input type="button" value="전송" id="test">
<input type="button" value="전송2" id="test2">
<input type="button" value="" onclick="">
<!--버튼을 눌렀을때 처리해주는 옵션 -->
</form>
</body>
</html>
6. video,audio태그
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>6.video,audio태그.html</title>
</head>
<!--
video(영상)
width,height->동영상의 크기
controls=>동영상화면에 컨트롤 막대를 추가
source태그에 src="동영상 파일의 경로를 지정"
type="video/확장자(ex mp4)
autoplay=>동영상을 자동으로 재생->모바일에서 잘 적용X (IE는 사용가능) Chrome X
poster->동영상이 화면에 나오지 않을때 대신 표시할 그림을 지정하고 싶을때 사용
audio(음악파일)
-->
<body>
<video width="640" height="368" controls>
<source src="../screen/spring.mp4" type="video/mp4">
</video>
<p>
<video src="../screen/ThankYou.mp4" width="480" height="320" controls autoplay></video>
<p>
<video src="../screen/ThankYou.mp4" width="480" height="320" controls autoplay
poster="../images/poster.jpg">
<p>
<!--음악파일 -->
<img src="../screen/landscape.jpg" width="500" height="380">
<p>
<audio controls autoplay>
<source src="../screen/old_melody.mp3">
</source>
</audio>
</body>
</html>
7. CSS의 개요및 작성법
<!doctype html>
<html>
<head>
<!-- html,xml주석,jsp주석 -->
<meta charset="UTF-8">
<title>7.CSS의 개요및 작성법.html</title>
<style type="text/css">
/*
2.Embedded방식 웹문서에 공통으로 사용하는 색깔,이미지,글꼴등을 head영역에
선언해서 사용하는 방식 형식) 스타일 적용대상자(=선택자) { 속성명:속성값;~}
똑같은 스타일을 적용시키는 경우=>우선순위는 인라인 방식
단점=>페이지가 많아질수록 똑같은 부분을 계속 반복해서 사용
h4,h3 {font-family:돋움체;color:red;font-size:27pt} */
</style>
<!-- 3.파일로 불러오는 경우
rel(스타일시트) type(텍스트형태의 css)
href="경로포함해서 불러올 스타일시트의 파일명.css"
-->
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<header>
<h4>CSS의 개요 및 특징</h4>
</header>
<section>
<header>
<!-- 1.인라인방식 style속성=>속성명:값;속성명2;값2,,,-->
<h3 style="font-family:궁서체;background:yellow">스타일시트의 장점</h3>
</header>
<article>
</article>
<article>
<ol>
<h3>용어정리</h3>
<li>스타일:문서의 글꼴,크기,간격등의 출력형태(레이아웃)에 영향을 미치는 요소</li>
<li>스타일시트:스타일의 내용만을 별도로 모아서 head태그 영역에 선언된 형태</li>
</ol>
</article>
</section>
</body>
</html>
}
장점
1.HTML의 제약성에서 탈피한다.
2.홈페이지 전체에 통일감과 일관성을 유지한다.
3.홈페이지 제작 시간을 감소시키고 문서의 용량을 줄여준다.
4.기존 홈페이지의 개념을 넘는 DHTML, XML의 기초가 된다.
동적인 홈페이지=>DOM
test2.css
외부에서 자주 사용이 되는 스타일시트 적용문서를 따로 작성
h4,ol {
font-family:돋움체; /* 글자체 */
font-size:14pt; /* 글자크기 */
color:green; /* 글자색*/
font-weight:bold /* 글자 굵게 표시 bolder,100,200~ */
}
'KIC > HTML-CSS-JS' 카테고리의 다른 글
| [HTML/CSS/JS] DAY6 (0) | 2020.10.12 |
|---|---|
| [HTML/CSS/JS] DAY5 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY4 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY3 (0) | 2020.10.12 |
| [HTML/CSS/JS] DAY1 (0) | 2020.10.12 |