날짜, 시간 설정하기(setter) / 년, 월, 일, 요일, 시, 분, 초 출력하기(getter)

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="today"></p>
<p id="Mydate"></p>
<p id="year"></p>
<p id="month"></p>
<p id="date"></p>
<p id="day"></p>
<p id="hour"></p>
<p id="min"></p>
<p id="second"></p>

<script type="text/javascript">

let day = new Date();
document.getElementById('today').innerHTML = "오늘날짜 : " + day;
let d = new Date();// 현재년월 현재시간 
d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter
document.getElementById('Mydate').innerHTML = "설정날짜 : " + d;
document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();
document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);	 
document.getElementById('date').innerHTML = "일 : " + day.getDate();		
document.getElementById('day').innerHTML = "요일 : " + day.getDay();		 // 요일(일:0~토:6)			
document.getElementById('hour').innerHTML = "시 : " + day.getHours();	
document.getElementById('min').innerHTML = "분 : " + day.getMinutes();	
document.getElementById('second').innerHTML = "초 : " + day.getSeconds();	

</script>
</body>
</html>

 

실행화면

 

 

 

 

 

 

 

 

 

 

 

 

 

설명

d = new Date(2021, 1 - 1, 23, 01, 30, 10);	// setter (월 -1)
d = new Date("Jan 23, 2021 1:30:10");		// setter

날짜 설정시 2가지 방법이 있습니다.

다만, d = new Date(2021, 1 - 1, 23, 01, 30, 10); 이 방법으로 진행 시 월 = 월 -1 해주어야 합니다.

document.getElementById('year').innerHTML = "년도 : " + day.getFullYear();

getFullYear() : "년"을 반환

getElementById(id명)으로 연결되어 (Id=year)의 문자열을 "년도 : day.getFullYear()"으로 변경

document.getElementById('month').innerHTML = "월 : " + parseInt(day.getMonth()+1);

getMonth() : "월-1"을 반환 , 정확한 월을 구하기 위해선 +1을 해주어야 합니다. getMonth()의 반환형이 문자형이라 parseInt를 사용하여 숫자형으로 변환해 주어야 연산이 가능합니다.

getElementById(id명)으로 연결되어 (Id=month)의 문자열을 "월 : parseInt(day.getMonth()+1)"으로 변경

document.getElementById('date').innerHTML = "일 : " + day.getDate();

getDate() : "일"을 반환

getElementById(id명)으로 연결되어 (Id=date)의 문자열을 "일 : day.getDate()"으로 변경

document.getElementById('day').innerHTML = "요일 : " + day.getDay();

getDay() : 해당 "요일"에 해당하는 숫자를 반환 ( 일=0, 월=1, 화=2, 수=3, 목=4, 금=5, 토=6 ) 

getElementById(id명)으로 연결되어 (Id=day)의 문자열을 "요일 : day.getDay()"으로 변경

document.getElementById('hour').innerHTML = "시 : " + day.getHours();

getHours() : "시"을 반환

getElementById(id명)으로 연결되어 (Id=hour)의 문자열을 "시 : day.getHours()"으로 변경

document.getElementById('min').innerHTML = "분 : " + day.getMinutes();

getMinutes() : "분"을 반환

getElementById(id명)으로 연결되어 (Id=min)의 문자열을 "분 :  day.getMinutes()"으로 변경

document.getElementById('second').innerHTML = "초 : " + day.getSeconds();

getSeconds() : "초"을 반환

getElementById(id명)으로 연결되어 (Id=second)의 문자열을 "초 :  day.getSeconds()"으로 변경

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 사진 클릭 시 경고창 띄우기/alert  (0) 2021.06.06
[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04

1초당 갱신되는 시계 만들기

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>시계는 똑딱똑딱</h2>
<p id="demo"></p>
<script type="text/javascript">
function displayDate() {
	document.getElementById("demo").innerHTML = Date();	// 현재시각이 나옴.
}
// timer -> 초당 시간이 흘러가게 하는법 (1초마다 값이 갱신된다.)
setInterval("displayDate()", 1000); // 호출할함수, 1000 <- 1초 
</script>
</body>
</html>

 

실행화면

시계는 똑딱똑딱

 

 

 

설명

document.getElementById("demo").innerHTML = Date();

Date() : 현재 날짜의 정보를 제공하는 객체

getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 Date()로 변경

setInterval("displayDate()", 1000);

setInterval(호출할 함수,시간간격(ms)) : setInterval는 일정한 시간간격으로 값을 갱신해 주는 함수

ms 단위로 1000 = 1초이다.

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

Dom (Document Object Model) : 문서 객체 모델

웹페이지를 핸들링하기 위한 프로그램 인터페이스(문서 구조)이다.

javascript는 Dom을 통해 html을 제어한다.

 

 

Dom을 이용한 getElementById/onclick 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="demo">안녕하세요!</p>		<!-- 일반태그 -->

<input type="text" id="text" value="버튼 클릭!" size="20">	<!-- form태그 -->
<br>

<input type="button" value="클릭" onclick="btnClick()"> <!-- 버튼눌릴때 btnClick() 호출 -->

<script type="text/javascript">
function btnClick() {
	document.getElementById("demo").innerHTML = "반갑습니다.";
	
	document.getElementById("text").value = "잘 클릭하셨네요";
}
</script>
</body>
</html>

 

실행화면

Insert title here

안녕하세요!


 

 

설명

<p id="demo">안녕하세요!</p>

p태그에 id="demo" 설정

<input type="text" id="text" value="버튼 클릭!" size="20">

form태그에 id="text" 설정

<input type="button" value="클릭" onclick="btnClick()">

onclick="btnClick()" 사용자가 클릭을 할 경우 이벤트가 발생하여  btnClick() 메서드로 이동

document.getElementById("demo").innerHTML = "반갑습니다.";

getElementById(id명)으로 연결되어 (Id=demo)의 문자열을 "반갑습니다."으로 변경

innerHTML = (p 태그)의 문자열 변경

document.getElementById("text").value = "잘 클릭하셨네요";

getElementById(id명)으로 연결되어 (Id=text)의 문자열이 "잘 클릭하셨네요"으로 변경

value = (input type="text")의 문자열 변경

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

변수 선언 방식

var : 초기화 후 변수 선언 가능, 재선언 가능

참조

 얼핏보면 편하겠다는 생각이 들겠지만, 다수가 동시에 같은 작업 시 변수 충돌이 우려된다.

 

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="num">p</p>
<script type="text/javascript">

// 초기화 후 변수 선언
v = 1;
var v;
document.getElementById('num').innerHTML = v; // 출력을 위한 코드(dom)

//재선언 가능
var v = 2;
document.getElementById('num').innerHTML = v;

</script>
</body>
</html>

 

실행화면 : 초기화를 먼저 진행하여도 에러가 발생하지 않고, 재선언 부에도 에러가 발생하지 않는다.

 

p 태그입니다

let : 변수 선언 후 초기화, 재선언 불가, 재할당 가능

 

예시 

// 변수 선언
let i = 2;

// 재할당 가능
i = 4;

/* 불가능
i = 5;
let = i;

let i = 5;
*/

 

실행화면

 

p 태그입니다

 

 

데이터 타입의 종류

문자형 : String 

   "", '' 안에 들어 있는 문자이다. 연산시 우선순위가 높다.

숫자형 : number

논리형 : boolean

object형 : array [] , class

 

예시

// JavaScript는 변수타입 지정 없이도 선언이 가능하다.

var str = 'hello';
var str = "hello";

// 에러
// var str = 'hello";

var num = 123;
var pi = 3.141592;
var answer = true;
var cars = [ "saab", "volvo", "bmw" ];

var strNum = "5" + 3 + 1; // -> 531 문자열로 통합된다.
var numStr = 3 + 2 + "3"; // -> 53

 

typeof : 데이터 타입 확인

예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

변수(variable)

<p id="demo">p tag</p>

<script type="text/javascript">	
  
    document.getElementById('demo').innerHTML 
		= 		"홍길동 : " + typeof "홍길동" + "<br>"
			+ 	"325 : " + typeof 325 + "<br>"
			+	"3.14 : " + typeof 3.14 + "<br>"
			+ 	"true : " + typeof true + "<br>"
			+	"array : " + typeof [1,2,3] + "<br>"
			+	"object : " + typeof { num:1, name:'abc'};
</script>
</body>
</html>

 

실행화면

 

 

p tag

 

 

주석

형식

 // : 한줄 주석처리

 /* */ : 여러 줄 주석처리

 

예제

// 한줄 주석처리
/*
여러줄
주석처리
*/

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 자바스크립트 정의/작성 위치  (0) 2021.06.04

JavaScript

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 

 

 

사용 목적

웹에 접근하기 위해서이다.

tag들을 접근하기 위한 스크립트.
보조 프로그래밍 언어이다.
컴파일을 하지 않기 때문에 빠르고 가볍다.
Java Script 간략화, 경량화 시킨 것이 JQuery 이다.

 

예) 회원가입 -> 빈칸을 조사, ID 글자수 조사. PW를 숫자 + 문자, 대소문자포함
    CSS를 제어, 구현
    Timer를 설정해서 특수효과 같은 처리가 가능

 

 

JavaScript 작성방식

Internal 방식 : body 내부 선언

내부 작성 방식 :  head 내부 선언

extarnal 방식 : head 내부에서 선언하여 js파일을 불러오는 방법 

 

<html>
<head>

<script type="text/javascript" src="myJS.js"> 
// extarnal 방식
</script> 

<script type="text/javascript"> 
// 내부 작성 방식
</script> 

</head>
<body>

<script type="text/javascript">
// Internal 방식
</script>

</body>
</html>

 

'IT > JavaScript' 카테고리의 다른 글

[Html+JavaScript] 진수 변환하기/10진수를 2진수, 8진수, 16진수 변환하기/toString(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]Date()사용법/날짜,시간 설정하기(setter)/년,월,일,요일,시,분,초 출력하기(getter)(feat.Dom)  (0) 2021.06.06
[Html+JavaScript]1초당 갱신되는 시계 만들기(feat.Dom)/setInterval()/Date()  (0) 2021.06.06
[Html+JavaScript] getElementById()/onclick사용법(feat.Dom)  (0) 2021.06.06
[JavaScript] 변수 선언 방식/데이터 타입의 종류/데이터 타입 확인/ 주석  (0) 2021.06.04

html 파일 예제

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>www 닷컴 회원가입</h1>
<form action="NewFile.jsp">
아이디<br>
<input type="text" name="id" title="여기에 아이디 기입" size="52" placeholder="ID 입력"><br>
비밀번호<br>
<input type="password" name="pwd" title="여기에 비밀번호 기입" size="52" placeholder="비밀번호 입력"><br>
비밀번호 재확인<br>
<input type="password" name="repwd" size="52" ><br>
이름<br>
<input type="text" name="name" size="52"><br>
생년월일<br>
<input type="month" name="month" hspace="1">
<input type="text" name="day"  size="30" placeholder="일"><br>
성별<br>
<select style="width:401px" name="human">
	<option value="성별">성별</option>
	<option value="남자">남자</option>
	<option value="여자">여자</option>
</select><br><br>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;
<input type="submit" value="가입하기" >
</form>
</body>
</html>

 

 

 

jsp파일 예제

 

<!-- NewFile.jsp -->   


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보</title>
</head>

<body>

<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
String repwd = request.getParameter("repwd");
String name = request.getParameter("name");
String month = request.getParameter("month");
String day = request.getParameter("day");
String human = request.getParameter("human");


if(!pwd.equals(repwd)){
	out.println("pwd와 재확인 pw가 일치하지 않습니다"+"<br>");
}else{
	out.println("아이디 : "+id+"<br>");
	out.println("비밀번호 : "+pwd+"<br>");
	out.println("재확인 비밀번호 : "+repwd+"<br>");
	out.println("이름 : "+name+"<br>");
	out.println("생년월일 : "+month+" "+day+"<br>");
	out.println("성별 : "+human+"<br>");
}
%>

</body>
</html>

 

실행화면

www 닷컴 회원가입

아이디

비밀번호

비밀번호 재확인

이름

생년월일

성별


                                                         

 

 

설명

 

form action="NewFile.jsp" : 사용자에게 입력 받은 값을 NewFile.jsp로 전달 하여 가입하기 클릭시 jsp파일이 실행하여 입력 값을 보여준다.

입력 값을 전달 받기 위해선 name명을 지정해 주어야 한다.

비밀번호와 비밀번호 재확인 값이 다를 시 회원 정보가 나오지 않고 "pw와 재확인 pw가 일치하지 않습니다"란 문구가 나오도록 조건문을 걸어 주었다.

 

jsp : java와 html 합쳐논 영역

jsp파일에서 <%  %> 안은 Java의 영역이다.

request (연결 객체)를 사용하여 값을 전달 받는다.

 

&nbsp; : 공백 문자

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 값이 다를 때

jsp 실행화면

 

jsp 실행화면 : 비밀번호와 비밀번호 재확인 같을 때

jsp 실행화면

 

 

 

'IT > Html' 카테고리의 다른 글

[Html] form 태그/입력양식태그/ input type/ action /textArea/ select /submit /checkbox /radio/search/id/class/name  (0) 2021.06.03
[Html] 이미지 태그/scr/alt /외부 이미지 파일의 접근 경로  (0) 2021.06.03
[Html] 테이블 태그/bgcolor/rules/caption/col width  (0) 2021.06.03
[Html] 목록 태그(List)/ul/ol/li/dl/dt/dd  (0) 2021.06.03
[Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank  (0) 2021.06.03

식별자

id

사용목적 : 고유한 식별을 목적으로 하는 경우, javascript에서 접근하기, 한 개의 문서당 한 개만 유효(중복 불가)


class

사용목적 : 재사용을 목적으로 하는 경우, CSS에서 디자인적인 요소, 다중 설정이 가능(중복 허용) 


name

사용목적 :  form 컨트롤 요소의 값(value)을 서버로 전송하기 위해 필요한 속성, 다중 설정 가능(중복 허용)

 

form 태그 : 이동 목적(연결)

입력 양식에 데이터를 입력하고 쿼리 전송 버튼을 누르면 데이터가 지정된 장소에 지정된 방법으로 전달된다.

 

참조

 body 태그 안에서 쓰인다.

 

form 속성

 action : 입력 데이터의 전달 위치를 지정

 input : 사용자에게 정보를 입력받는 기능을 수행함.

 value :  input 태그의 내부에 들어가는 글자

 textArea : 여러 줄의 글자를 입력할 때 사용

 select : 여러 개의 목록에서 몇 가지를 선택할 때 사용

 

 input type 속성 값

 submit : 제출 버튼 생성, form당 1개만 생성 가능

 text : 글자 입력 양식 생성

 password : 비밀번호 입력 양식 생성

 

예시

<!-- web페이지 -> web페이지이동 -->
<form action="NewFile.jsp">

ID:<input type="text" name="id" title="여기에 id 기입" size="10" placeholder="id 기입">
<br><br>
PW:<input type="password" name="pwd" size="10">
<br>

<!-- 버튼만들기 -->
<input type ="submit" value="NewFile.jsp 이동">
</form>

 

실행화면

ID:



PW:

 

checkbox : 체크박스 생성

 

참고

checkbox는 다중선택이 가능하다.

checked="checked"  : 체크되어 있는 상태로 실행된다.

 

예시

<input type="checkbox" value="패션" checked="checked">패션<br>
<input type="checkbox" value="음악">음악<br>
<input type="checkbox" value="게임">게임<br>

 

실행화면

패션

음악

게임

 radio : 라디오 버튼 생성

 

참고

 name으로 묶어 어주야 1개만 선택 가능하다.

 

예시

<!-- name="car"로 묶어 주어야 1개만 선택 가능하다 / name묶기 전 다중선택 가능 -->
<input type="radio" name="car" value="벤츠">Benz
<input type="radio" name="car" value="아우디">아우디
<input type="radio" name="car" value="BMW">BMW

 

실행화면

Benz

아우디

BMW

 

 

HTML5 입력 양식 태그

number : 숫자 선택 양식 생성

date :  일 선택 양식 생성

color : 색상 선택 양식 생성

range :  범위 내 슬라이스를 생성

search :  검색창 생성

 

예시

<!-- 1~5 까지 선택할 수 있는 거 생김..  -->
number : <input type="number" max="5" min="1">
<br>

<!-- 달력 생성 -->
<!-- 달력이 2개면 언제부터 언제까지 ! -->
date : <input type="date">
<br>


<!-- 컬러 선택 할 수 있음  -->
color : <input type="color" value="#ff0000">
<br>

<!-- 슬라이드 생성  -->
range : <input type="range" max="10" min="0">
<br>

<!-- 검색창 생성 -->
search : <input type="search">

 

실행화면

number :

 

 

date :

 

color :

 

range :

 

search :

 

 

textArea 

속성

 rows : 태그의 너비 지정

 cols : 태그의 높이 지정

 

예시

<textarea rows="10" cols="30">초기문자열</textarea>

 

실행화면

 

 

select

속성 값

 multiple="multiple" : 컨트롤 키 눌러서 다중 선택 가능

 

예시

<select multiple="multiple">
	<option value="apple">사과</option>
	<option value="pear">배</option>
	<option value="banana">바나나</option>
	<option value="grape">포도</option>
</select>

 

실행화면

 

'IT > Html' 카테고리의 다른 글

[Html] form태그를 사용하여 jsp파일에 값 전달 받기  (2) 2021.06.04
[Html] 이미지 태그/scr/alt /외부 이미지 파일의 접근 경로  (0) 2021.06.03
[Html] 테이블 태그/bgcolor/rules/caption/col width  (0) 2021.06.03
[Html] 목록 태그(List)/ul/ol/li/dl/dt/dd  (0) 2021.06.03
[Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank  (0) 2021.06.03

이미지 태그 : 이미지를 삽입할 때 사용

참조

 body 태그 안에서 쓰인다.

 

image 파일종류

  jpg png gif bmp tiff tga
용량(작은순서) 1 3 2 6 4 5
압축율 1     x    

 

bmp : 압축을 할 수가 없고, 투명처리(sprite)를 직접 해주어야 하는 번거로움 때문에 잘 사용하지 않는다.
png : 투명처리가 들어가 있다.

 

 

img 속성 & 속성 값

 scr : 이미지의 경로 지정

 alt : 이미지가 없을 때 나오는 문구

 width : 이미지의 너비 지정

 height : 이미지의 높이 지정

 placehold.it : 이미지가 없을 때 이미지의 크기에 맞는 더미 이미지를 제공해줌

 

참조 

 이미지 크기 지정 시 width, height 둘 중 하나만 사용하면 원본 비율이 유지된다.

 

 

예시

<img alt="이미지 없음" src="./image/bird.png" width="240"><br>
<img alt="이미지 없음" src="d:\\image\\bird.png"> <br>
<img alt="이미지 없음" src="pic.jpg"> <br>

 

실행화면

 

 

 

 

이미지 파일의 접근 경로

 

이미지 파일은 단순히 컴퓨터 내 저장되어 있다고 생각하면 안 되고,

서버 내에 있다고 해야 한다.

이미지 파일은 절대 경로로 지정할 수 없다.

 

 

 

 

 

 

 

 

 

 

 

 

 

외부 이미지 파일의 접근 경로

 

예시 : 외부 이미지 파일의 경로의 시작은 이미지가 있던 홈페이지 주소 값으로 시작된다.

<img alt="" src="이미지가 있던 홈페이지 주소
          /wp-content/uploads/2015/09/googles-new-logo-03.png" width="240"><br>

 

실행결과

'IT > Html' 카테고리의 다른 글

[Html] form태그를 사용하여 jsp파일에 값 전달 받기  (2) 2021.06.04
[Html] form 태그/입력양식태그/ input type/ action /textArea/ select /submit /checkbox /radio/search/id/class/name  (0) 2021.06.03
[Html] 테이블 태그/bgcolor/rules/caption/col width  (0) 2021.06.03
[Html] 목록 태그(List)/ul/ol/li/dl/dt/dd  (0) 2021.06.03
[Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank  (0) 2021.06.03

테이블 태그 : Table을 만들어 주는 Tag

 

Table : row(행), column(열)

 

 

참조

 body 태그 안에서 쓰인다.

 

 

table 요소 

tr : 행
th : 행의 타이틀(해더 선언), 굵은 글씨, 가운데 정렬
td : 열 테이블의 일반 데이터

caption : 표 제목

col width: 테이블 크기 지정

 

table 속성

border : 테이블  테두리

bgcolor : 테이블 배경 색 지정

style="width: 값" : 화면 비례 테이블 크기 지정

rules="rows" : 로우줄만 나오게 하기

 

td, tr, th 속성

rowspan : 로우 합치기
colspan :  컬럼  합치기

 

 

예제

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<table border="4"  bgcolor="bbcc00"  style="width: 50%" 
	   cellpadding="5" rules="rows">
		<caption>Type1</caption>
		<col width="100"><col width="100"><col width="70">
		<tr>
		
			<th>No.</th>
			<th>Name</th>
			<th>age</th>
		</tr>
		<tr>
			<th>1</th>
			<td>Kim</td>
			<td>33</td>
		</tr>	
		<tr>
			<th>2</th>
			<td>Lee</td>
			<td>35</td>
		</tr>	
	</table>
	<br>
	<table border="1" style="width: 50%">
		<caption>Type2</caption>
		<tr bgcolor="#f0ffff">
			<td col width="100">No.</td>
			<td col width="100">Name</td>
			<td col width="70">age</td>
		</tr>
		<tr>
			<td>1</td>
			<td>Kim</td>
			<td rowspan="2">33</td>
		</tr>	
		<tr>
			<td>2</td>
			<td>Lee</td>
		</tr>	
	</table>
</body>
</html>

 

실행화면

'IT > Html' 카테고리의 다른 글

[Html] form 태그/입력양식태그/ input type/ action /textArea/ select /submit /checkbox /radio/search/id/class/name  (0) 2021.06.03
[Html] 이미지 태그/scr/alt /외부 이미지 파일의 접근 경로  (0) 2021.06.03
[Html] 목록 태그(List)/ul/ol/li/dl/dt/dd  (0) 2021.06.03
[Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank  (0) 2021.06.03
[Html] HTML정의 / 기본 용어 정리 / Html 문서 형식  (0) 2021.05.26

목록 태그 : 목록(List)을 만들 때 사용

 ul(unordered list) : 순서없는 목록

 ol(ordered list) : 순서 있는 목록

 li : 목록 요소, 목록의 내용, 들여쓰기 및 줄 바꿈 기능

 dl : 정의 목록

 dt : 용어의 제목, 줄바꿈 기능

 dd : 용어의 설명, 줄바꿈 기능

 

참조

 body 태그 안에서 쓰인다.

 목록 태그 안에 목록태그를 사용할 수 있다.

 

 

ul(unordered list) : 순서 없는 목록

형식

 <ul>    
   <li>문자열</li> 
 </ul>

 

예시 

 <ul>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ul>

 

실행화면

 

 

ul 속성 & 속성 값

 style="list-style-type: disc"

 style="list-style-type: circle"

 style="list-style-type: square"

 style="list-style-type: none"

 

예시

<ul style="list-style-type: disc">
 	<li>disc : 기본값</li> 	
</ul>

<ul style="list-style-type: circle">
	<li>circle : 빈 동그라미</li> 
</ul>

<ul style="list-style-type: square"> 
	<li>square : 네모</li> 
</ul> 

<ul style="list-style-type: none">
	<li>none : 글자만</li>  
</ul>

 

실행화면

 

 

 

ol(ordered list) : 순서 있는 목록

형식

 <ol>    
   <li>문자열</li> 
 </ol>

 

예시

 <ol>    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
 </ol>

 

실행화면

 

 

ol 속성 & 속성 값

 start : 시작 번호 지정 (html5 / html4 type으로 시작번호 지정)

 type : type지정

 type 속성 값 : 1, a, A, i, I

 

예시

<!-- html5 시작번호 지정 start -->
<ol start="100">    
	<li>coffee</li> 
	<li>tea</li> 
	<li>milk</li> 
</ol>
 
<!-- type지정 : 1, a, A, i, I --> 
<ol type="1">       
	<li>type="1"</li> 
</ol> 

<ol type="a">       
	<li>type="a"</li> 
</ol> 

<ol type="A">      
	<li>type="A"</li> 
</ol> 

<ol type="i">      
	<li>type="i"</li> 
</ol> 

<ol type="I">      
	<li>type="I"</li> 
</ol>

 

실행화면

 

 

 

dl : 정의 목록 dt: 정의 용어 dd : 정의 설명

예제 

<dl>
	<dt>html tag</dt>
	<dd>제목 태그</dd>
	<dd>본문 태그</dd>
	<dd>글자 태그</dd> 
</dl>

 

실행화면

'IT > Html' 카테고리의 다른 글

[Html] form 태그/입력양식태그/ input type/ action /textArea/ select /submit /checkbox /radio/search/id/class/name  (0) 2021.06.03
[Html] 이미지 태그/scr/alt /외부 이미지 파일의 접근 경로  (0) 2021.06.03
[Html] 테이블 태그/bgcolor/rules/caption/col width  (0) 2021.06.03
[Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank  (0) 2021.06.03
[Html] HTML정의 / 기본 용어 정리 / Html 문서 형식  (0) 2021.05.26

+ Recent posts

티스토리툴바