- url 은 요청할 파일명, 여기서는 item.json 파일이 적혀있다, 나중에는 이 자리에 jsp, spring 파일등이 온다
- function() 콜백함수로 item.json 전체를 돌려받고 data 에 값이 있다
- 콜백함수로 받은 데이터 data를 each() 를 통해 하나씩 {} 단위로 가져오고 있다
+ append() 함수로 테이블에 <tr></tr> 과 <td></td> 를 추가하고 있다
+ get 방식이더라도 페이지가 바뀌지 않기때문에 url 주소창에 뭔가 나타나지는 않고 내부적인 방식이다
ajax() 함수 옵션
- url, success 는 생략해선 안된다
- type은 생략가능하고 생략시 type은 get 방식이다
- data 를 가져갈때는 json 데이터를 가져갈 수 있다, 지금은 가져갈 데이터가 없으므로 생략되어있음
- dataType 도 생략 가능하다
- success는 결과(응답)를 잘 돌려받았을때만 실행된다
- 결과 출력
- 아까의 예제와 같은 결과이다.
비동기로 서버에 요청하는 함수
$.post() 함수
- post 방식으로 비동기로 서버에 요청하는 함수
- 간단한 형식
$.post(
"요청페이지명",
"전달될값",
function (msg) { // 콜백함수
});
- 매개변수가 3개, 첫번째엔 요청할 페이지명, 두번째는 전달될 값, 세번째는 콜백함수
- 이때 전달될값에서 변수명=변수 로 보내야한다
- 데이터를 전달할 때 문자열 형식의 데이터를 보낸다
Ajax 예제 8
ajax() 함수 예제 3 / post() 함수 예제 1
- 같은 내용을 ajax() 로 먼저 구현하고 다음에 post() 부분의 주석을 풀고 설명
1. ajax() 함수로 post 방식 비동기 통신
2. post() 함수로 post 방식 비동기 통신
- example09_08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$.ajax로 jsp 파일 로드하기</title>
<style>
td {
border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- $.post() 함수는 post방식으로 서버와 통신하는 jQuery 함수이다.
- $.post() 함수는 서버의 welcome.jsp 페이지를 post방식으로 요청한다.
*/
$(function() {
$('#submit').click(function () {
var username = $('.username').val(); // 서버로 보낼 데이터를 입력창에서 얻어온다.
var sendData = 'username=' + username; // 입력창에서 입력받은 데이터를 문자열 형식으로 변환한다.
/* $.post( // 문자열 형식의 데이터를 welcome.jsp 파일로 보낸다.
"welcome.jsp", // 서버의 welcome.jsp 에서는 받은 데이터를 인사말을 덧붙여서 돌려준다.
sendData,
function (msg) { // 콜백함수는 서버에서 보내온 데이터를 매개변수로 얻어온다.
alert(msg);
$('#message').html(msg); // 서버로부터 받은 데이터를 id가 message인 엘리먼트에 설정한다.
}); */
$.ajax({
url :"welcome.jsp",
type :"post",
data : {"username": username},
success : function(msg){
alert(msg);
$('#message').html(msg);
}
});
return false;
});
});
</script>
</head>
<body>
<form>
<label> 이름을 입력하세요 : </label>
<input type="text" name="username" class="username"/> <br/>
<input type="button" id="submit" value="전송"/>
</form>
<div id="message"></div>
</body>
</html>
- 같은 내용이 ajax() 함수로도 구현되어있고, post() 함수로도 구현되어있다, 비교하기
- 요청하는 파일이 welcome.jsp 임
- 사용자 이름을 입력하고 전송버튼을 누르면 지정된 요청을 하는데, 요청하는 페이지가 jsp 페이지이다.
- 요청하면서 사용자가 입력한 이름을 서버측으로 전달한다
- 전송 버튼을 누르면 페이지가 바뀌지 않고 값을 뿌려준다
+ input type=text 에 class 속성값이 있다 -> 이 태그를 구해올 때 . 으로 구해온다
+ input type=button 이므로 click 이벤트가 발생하므로 click() 을 사용
1. ajax() 함수로 post 방식 비동기 통신 (example09_08.html 부분)
var username = $('.username').val(); // 서버로 보낼 데이터를 입력창에서 얻어온다.
var sendData = 'username=' + username; // 입력창에서 입력받은 데이터를 문자열 형식으로 변환한다.
$.ajax({
url :"welcome.jsp",
type :"post",
data : {"username": username},
success : function(msg){
alert(msg);
$('#message').html(msg);
}
});
- .username으로 input 태그를 구해와서 val() 을 통해 사용자가 입력한 값을 username 변수에 저장
- 서버측에 값을 전달할떄 JSON 형태로 값을 전달해야하기 때문에 username 변수에 따로 저장했다
- url 자리에 요청할 파일명이 들어가는데 여기선 welcome.jsp 라는 JSP 파일이 왔다, 이 welcome.jsp 파일을 요청하겠다는 의미
- data 속성은 서버측으로 값을 가져갈때만 사용되는 속성으로서 JSON 형태, 즉 키:밸류 형태로 값을 가져가야한다
- 그래서 {"username" : username} 라는 JSON 형태로 값을 저달하고 있다
- welcome.jsp 파일에서는 전달된 값을 받을때 JSP의 내장객체 중 클라이언트의 요청을 받는 객체인 request 객체의 getParameter() 로 전달된 값을 받고 표현식 형태 <%= %> 로 출력함, 브라우저에 출력되는 이 내용이 통째로 콜백함수로 돌아가는 것임
- welcome.jsp 파일에서 환영합니다 ~님 을 두번 출력한다, 그 출력하는 값을 function의 msg 매개변수로 받아서 여기서 html()로 id가 message인 태그 사이에 뿌려주는 것
* 아래에 welcome.jsp 파일 설명
콜백함수로 돌려받은 값
- alert(msg)로 출력해본 값
- welcome.jsp 파일에서 브라우저에 출력되는 내용들이 통째로 넘어왔음을 알 수 있다
- 이 내용이 msg 변수에 저장된 것
welcome.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- welcome.jsp 파일에서 브라우저에 출력되는 결과를 callback 함수로 돌려준다-->
환영합니다. <%=request.getParameter("username") %>님 <br>
환영합니다. ${param.username}님 <br>
</body>
</html>
- <%= %> = "표현식 태그" = 브라우저에 출력시킬 값
- ${} = "표현언어"
- username 은 example09_08.html 에서 json 으로 전달되었던 키값
- 이렇게 브라우저에 출력되는 값을 통째로 callback 함수로 돌려주게 되는것
- 위에선 표현식 태그로 한번 출력하고 아래에선 표현 언어로 한번 출력, 여기서 총 출력을 두번하고 있다
2. post() 함수로 post 방식 비동기 통신 (example09_08.html 부분)
- 위에서 ajax() 로 구현된 내용을 이번엔 post() 를 사용
- 위의 ajax() 함수와 같은 기능
var username = $('.username').val(); // 서버로 보낼 데이터를 입력창에서 얻어온다.
var sendData = 'username=' + username; // 입력창에서 입력받은 데이터를 문자열 형식으로 변환한다.
// $.post("요청페이지명","전달될값","콜백함수");
$.post( // 문자열 형식의 데이터를 welcome.jsp 파일로 보낸다.
"welcome.jsp", // 서버의 welcome.jsp 에서는 받은 데이터를 인사말을 덧붙여서 돌려준다.
sendData,
function (msg) { // 콜백함수는 서버에서 보내온 데이터를 매개변수로 얻어온다.
alert(msg);
$('#message').html(msg); // 서버로부터 받은 데이터를 id가 message인 엘리먼트에 설정한다.
});
- post 방식으로 welcome.jsp 를 요청하면서 값을 전달하고 있다
- sendData에서 'username=입력받은 이름' 형식으로 값을 전달
- 이렇게 값을 전달하면 jsp 파일에서는 username 이라는 변수명을 통해 값을 받는다
- 브라우저에 출력되는 결과 전체를 콜백함수로 받게 되고 그 값을 msg 변수에 저장
- 결과 캡처
$.getScript() 함수
- Javascript 파일을 불러온다, 확장자가 js 인 파일을 불러오는 함수이다
- 자바 스크립트 파일을 로드한다
Ajax 예제 9
getScript() 예제
- example09_10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스크립트 로드하기</title>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- 현재파일에서 자바스크립트 파일(test.js)을 get방식으로 요청하는 예제
- 자바스크립트 파일을 로드하기 위해서 $.getScript() 함수를 사용함.
*/
$(document).ready(function() {
$.getScript("test.js"); //자바스크립트 파일(test.js)을 $.getScript()함수로 호출한다.
$('#submit').click(function() {
var msg=call($('.username').val()); // 자바스크립트 파일(test.js)에 정의한 자바스크립트 함수 call()함수를 호출한다.
$('#message').html(msg); // call()함수 호출한 결과를 돌려 받아서 msg변수에 저장한다.
return false;
});
});
</script>
</head>
<body>
<form>
<label> 이름을 입력하세요 : </label>
<input type="text" name="username" class="username"/> <br/>
<input type="button" id="submit" value="전송"/>
<div id="message"></div>
</form>
</body>
</html>
- $.getScript() 함수로 확장자가 .js 인 파일을 불러온다
- 이 파일을 불러와야만 test.js 안의 함수 call() 을 호출 할 수 있다
- call() 함수를 호출하며 사용자가 입력한 값을 매개변수로 호출한다
- 호출된 call() 에서 return 으로 돌려받은 값을 출력한다
- test.js 파일
function call(param){
return ("Hello, " + param);
}
- 매개변수가 있으므로 이 함수를 호출할 때는 매개변수 param 을 통해서 값을 전달해야함
- 전달될 값을 return 으로 Hello 를 붙여서 돌려줌
Ajax 가 자주 사용되는 곳
- ID중복검사에서 팝업창을 띄우지 않고 비동기적인 방식으로 ID중복검사 가능
- war 파일을 import 해서 ID중복검사 구현되어있는 내용을 살펴보자 (자세한 내용은 JSP 를 공부할때)
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEM3FEmY5ecJzAkXH9TDRAs1MaXpSWtME"
type="text/javascript"></script>
<script>
var myCenter=new google.maps.LatLng(37.497975, 127.027506);
function initialize(){
var mapProp = {
center: myCenter,
zoom:18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(20);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
- marker 를 클릭시 맵이 확대가 된다
- marker 객체 생성 시 title 속성을 지정했다, 마커에 마우스를 올리면 Click to zoom 이 나타남
marker (마커) 클릭 시 줌 하기 (map04.html 부분)
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(20);
map.setCenter(marker.getPosition());
});
}
- marker 를 클릭하면 클릭이벤트가 발생하고 그 이벤트를 DOM Level 2 방식으로 처리하고 있다
- map 객체에서 setZoom(20); 을 통해 클릭시 크기를 20 으로 확대
- map 객체의 setCenter() 메소드와 marker 객체의 getPosition() 메소드로 확대가 되더라도 marker 의 position 값을 다시 center 로 지정하고 있다
+ 프로젝트 시에 혼자서 자세히 공부하기, 구글 맵 외에도 카카오 맵으로도 만들어보자
- API 관련 내용도 공부
- 웹과 앱을 따로 인증 받아야함
jQuery UI
- jQuery 에는 기능이 많다, jQuery UI 와 jQuery Mobile 등이 있다
+ '회원가입' 버튼을 누르면 member.jsp 로 값이 넘어가고, 이 양식을 사용해서 JSP 를 공부할때 한다
+ DB의 제약조건에 위배되지 않는 값만 입력되므로 프론트엔드에서 조건에 맞는 값만 전달하도록 하는 것
Ajax
- 비동기적으로 처리하는 통신 기술
- 자주 사용되는 경우가 정해져 있다
ex) ID중복검사 시 팝업창 띄우지 않고 바로 ID중복검사, 댓글달때 페이지를 바꾸지 않고 댓글달기
- ajax.war 파일 다운 후 import 하면 안에 비동기적으로 ID중복검사 하는 것들이 구현되어있음
Ajax 정리
- 새로운 언어는 아니다, 자바스크립트가 가진 기본적인 기능
- Asynchronous JavaScript + XML (비동기 자바스크립트와 XML 을 결합한 기술)
- JavaScript와 XML을 이용한 비동기 통신처리를 구현하는 기술
동기적 통신 방식
- 클라이언트가 서버측에 요청 후, 서버측에서 응답을 해야만 다음 요청 가능
- 특징 : 페이지가 바뀐다
- action 값으로 지정된 페이지로 post/get 방식으로 요청, 서버측에서는 request 객체로 요청을 받는다(응답), 변수에 저장하고 insert 시킴, 이런 작업이 완전히 끝나야만 다시 요청하고 응답 가능 우리가 쓰고 있는 방법
- 팝업창을 띄우는것도 부모창에서 팝업창으로 페이지가 바뀐 것
비동기적 통신 방식
- 클라이언트가 서버에 요청하고, 서버측에서 응답을 하기 전에 (응답이 오기 전에) 클라이언트에서 또 요청을 할 수 있다
- 특징 : 페이지가 바뀌지 않는다
- 페이지를 바꾸지 않고, 콜백함수로 결과를 돌려받아서 사용가능/사용중 메세지 뿌림
XML
- 클라이언트가 요청하면 서버측에서 결과를 돌려줄때 xml 형태로 결과를 많이 돌려줌
- 일반적인 태그와 다른 점은 태그들을 직접 임의로 만들어 쓸 수 있다는 점
- 지금은 xml 을 대신하는 포멧으로 json 을 많이 쓴다
- xml 과 json은 데이터 포멧, 저장 포멧이다
- 공공데이터는 xml 이나 json 중 하나로 많이 돌려줌
ex) 기상청 날씨정보는 xml 로 많이 돌려준다, 그걸 조작해서 필요한 형태로 바꿔서 사용하는 것
+ 직접 xml 파일을 만드는 경우는 적다, 문법은 공부할 것
JSON
- JavaScript Object Notation
- 자바스크립트 객체를 표기하기 위한 표기법 중 한가지, 새로운 언어가 아님
- JSON은 JavaScript Object Notation 의 약어로 XML 데이터를 대신하기 위해서 사용된다. - JSON은 키와 값을 쌍으로 가지는 구조이다, 자바의 Map 자료구조와 비슷
- 자바에선 Map, 파이썬에선 딕셔너리, Javascript 에선 JSON - 배열을 사용할 때는 대괄호([ ])안에 중괄호({ })를 사용하여 조합한다. - jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 때 이를 로드할 수 있는 $.getJSON()함수를 제공한다.
- 비동기적으로 서버에 요청하고, 콜백함수를 통해 결과를 돌려받을때 사용
jQUery 지원 함수
- 아래 함수 모두 비동기적으로 서버측에 요청을 하는 함수이고 콜백함수를 통해 결과를 받을 수 있는 함수이다
$.ajax() : get 방식으로 요청할지, post 함수로 요청할지 선택 가능 $.get() : get 방식으로 서버측에 비동기로 요청하는 함수 / get 방식으로 Ajax을 수행한다. $.post() : post 방식으로 서버측에 비동기로 요청하는 함수 / post 방식으로 Ajax을 수행한다. $.getJSON() : get 방식으로 서버측에 요청하고 (Ajax를 수행하고) JSON 데이터를 가져온다. $.getScript() : get 방식으로 (Ajax를 수행하고) Script 데이터를 가져온다. $(selector).load() : Ajax를 수행한 후에 선택한 문서 객체안에 응답받을 파일(문자열)을 불러온다 / load() 안에 쓰인 파일명의 문서를 한꺼번에 불러와서 앞의 선택자 자리에 출력시킴
* Ajax 를 수행 = 서버측에 요청하고 응답을 받음
- 이 함수들로 서버측에 비동기적으로 요청
- 사용 예시
$.ajax({ url : "전송 페이지", type : "전송 방식(get, post방식), data : "전송할 데이터(값 가져갈때/json 형태 키밸류형태로 전달)", dataType : "요청한 데이터 타입("html","xml","json","text"), success : function(result){ 전송 성공하면 실행될 문장; // 응답을 받는 곳 이 함수를 콜백함수라고 함 } });
- 콜백함수의 매개변수 result 로 값을 돌려받음
- 이 값을 조작해서 사용해야함 + React 등 언어가 바뀌더라도 비동기로 처리해야하는 기술들은 익혀야함
- Ajax 실습 준비
- 다 설명한 후 Ajax(6) 폴더 안의 ajax.war 파일을 다운받아 import 하면 구현 되어있다
비동기로 서버에 요청하는 함수
load() 함수
- $("출력시킬 태그").load("요청할 파일명");
- 특정 서버측의 문서를 불러옴, 안에는 특정 파일명이 들어간다
- 서버측에 비동기적으로 요청하고, 서버측의 지정된 파일의 내용을 모두 불러와서 앞의 태그에 결과 출력 시켜주는 역할
Ajax 예제 1
load() 함수 예제 1
- sample1.html
<!DOCTYPE html>
<html>
<head>
<title>sample1</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.1.js">
</script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
// sample1.txt 파일의 결과를 load 함수로 불러와서 p 태그 사이에 출력
$("p").load("sample1.txt");
});
});
</script>
</head>
<body>
<button>변경</button>
<p>변경전</p>
</body>
</html>
sample1.txt 내용
+ jQuery 라이브러리를 불러옴, 버튼이 클릭되어 click 이벤트 발생시 안의 내용 실행
- 페이지를 바꾸지 않고 load() 함수를 이용해서 서버에 sample1.txt 란 파일을 요청을 함
- 그럼 sample1.txt 파일의 내용을 모두 불러와서 앞쪽의 선택한 태그 안에 출력시켜라는 의미
- sample1.txt 가 브라우저에 출력되는 결과(내용)를 load() 로 불러와서 p 태그 안에 출력
- load() 함수 : 서버측의 지정된 파일의 내용을 모두 불러와서 앞의 태그에 결과 출력 시켜주는 역할, 비동기적으로 요청해주는 함수
+ 나중엔 sample1.txt 자리에 jsp 파일이나 html 파일 등 들어감
Ajax 예제 2
load() 함수 예제 2
- sample09_02.html
- 이전의 예제와 다른 점 : sample1.txt 대신 resource.html 파일을 불러오고 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
// resource.html 파일의 출력 결과를 load함수로 불러와서 div영역에 출력
$('#container').load('resource.html');
});
});
</script>
</head>
<body>
<button> 서버로부터 데이터 가져오기 </button>
<div id="container"> 데이터 가져오기 전 </div>
</body>
</html>
resource.html 내용
- resource.html 을 불러오면 이 resource.html 파일이 브라우저에 출력되는 내용(결과)을 load() 함수로 불러와서 id값이 container인 div 태그 영역에 출력된다.
- load() 함수로 resource.html 의 내용을 불러와서 출력해줌
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
Ajax 예제 3
load() 함수 예제 3
- 파일 내용 중 특정 태그의 내용만 불러오기
- sample09_03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style type="text/css">
div {
width: 180px; height: 80px;
margin: 3px; float: left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
- jQuery에서 제공해주는 load()함수를 사용해서 서버의 menu.html 페이지의 데이터를 가져와서 특정 엘리먼트에 추가한다.
*/
$(function() {
$('#menu1').click(function () {
$('#message1').load('menu.html'); // load()함수를 이용해서 menu.html 문서전체를 로드하여 id가 message1인
return false; // 엘리먼트에 추가한다.
});
$('#menu2').click(function () {
$('#message2').load('menu.html li'); // load()함수를 이용해서 menu.html 문서의 내용중 li 엘리먼트만 읽어서 id가
return false; // message2인 엘리먼트에 추가한다.
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>
</html>
menu.html 내용
- '메뉴 보기1' 과 '메뉴 보기 2' 를 a 태그로 링크를 걸어둠, a 태그 구분을 위해 id 값을 설정
- '메뉴 보기1' 을 클릭시 click() 함수 안에서 load() 함수를 통해 menu.html 전체 내용을 불러와서 id값이 message1 인 span 태그 사이에 출력
$('#message1').load('menu.html');
- '메뉴 보기2' 을 클릭시 click() 함수 안에서 load() 함수를 통해 menu.html 중에서 li 태그에 있는 내용만 불러와서 id값이 message2 인 span 태그 사이에 출력
$('#message2').load('menu.html li');
- menu.html 다음 한칸 띄우고 태그명을 쓰면 -> menu.html 내용 중에서 그 태그(li 태그)만 load() 함수로 불러온다
- 한칸 띄운다는 건 자손태그를 의미
+ return false; 를 통해 클릭을 해도 하이퍼링크가 실행되지 않도록 막아줌
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
- menu.html 파일의 모든 내용을 불러와서 출력
- menu.html 파일의 내용 중 일부만 불러와서 출력 (li 태그 안의 내용만 불러와서 출력)
- 비동기로 요청하거 있으므로 페이지가 바뀌지 않음
비동기로 서버에 요청하는 함수
$.ajax() 함수
- load() 함수와 다르게 많은 옵션들이 있다, 다양한 기능 쓸 수 있다
ex) 옵션들
- ajax() 함수 특징 : get 방식으로 요청할지 post 방식으로 요청할지 type : 에서 선택 가능
Ajax 예제 4
ajax() 함수 예제 1
- Ajax 요청 직접 제어하기
- ajax() 함수로 요청 하고 값을 받기
- load() 함수로 처리했던 것과 같은 결과를 ajax() 로 처리
- sample09_04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style type="text/css">
div {
width: 200px; height: 80px;
margin: 3px; float: left;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- load()를 이용했던 예제를 $.ajax() 함수를 사용해서 구현
- $.ajax()함수는 Ajax 요청을 설정하고 제어할 수 있도록 jQuery에서 제공하는 유틸리티 함수이다.i
*/
$(function() {
/*
- $.ajax()함수를 실행할 때 옵션으로 URL값(menu.html)을 지정하면 해당 URL서버로 Ajax요청을 한다.
- success 옵션에 지정한 콜백함수(function(data))는 요청이 성공했을 때 호출된다.
- 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
- $.ajax()함수는 서버에서 반환되는 데이터의 형식에 따라 다르게 동작한다.
서버측에서 html데이터를 반환하면 html을 받아와 처리하기 위해서 데이터 타입(dateType) 옵션에 html을 지정한다.
*/
$('#menu1').click(function () {
$.ajax({
url:'menu.html', // 서버의 불러올 파일명
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message1').html(data); // 콜백함수로 전달된 data를 id가 message1인 엘리먼트에 설정한다.
}
});
return false;
});
$('#menu2').click(function () {
$.ajax({
url:'menu.html',
dataType:"html",
success: function(data){ // 서버로부터 응답받은 데이터는 콜백함수의 매개변수로 전달된다.
$('#message2').html($(data).find('li')); // menu.html문서의 내용중 li엘리먼트만 읽어서 id가 message2인
} // 엘리먼트에 설정한다.
});
return false;
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a><p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a><p>
<span id="message2"></span>
</div>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<items>
<item id="1" name="레몬">
<price>3000</price>
<description> 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. </description>
</item>
<item id="2" name="키위">
<price>2000</price>
<description> 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. </description>
</item>
</items>
- 그 부모 엘리먼트 안에 child element 들이 있다
- 아이디 값을 구분하기 위해 item id 가 1,2,3,4.. 로 설정되어있다
- web.xml 파일 열어보기 ( 환경설정 파일)
- xml 주석기호는 html 주석기호와 같다
- server.xml (아파치톰캣 환경설정 파일) 열어보기
xml 파일 사용
- 직접 작성하는 일은 많지 않다
- 공공데이터 요청시 xml 형태로 결과를 돌려준다
ex) 기상청 날씨정보 요청
- 이렇게 xml 파일 형태로 돌려받은 값을 가공, 조작해서 사용해야함 (Javascript, Java, Python 등으로 조작)
비동기로 서버에 요청하는 함수
$.get() 함수
- get 방식으로만 요청 가능하다
- 형식 :
$.get('item.xml', function(data) {
});
- 처음 들어가는건 서버에 요청할 파일명
- 두번째 매개변수로 들어가는 function 이 콜백함수이다
Ajax 예제 5
get() 함수 예제 1
- XML 파일을 get 방식으로 로드하기
- XML 파일을 요청을 하면 XML 로 결과를 돌려받음
- 요청할 파일명은 item.xml, 이 파일을 콜백함수로 받아서 처리하게됨
- 돌려받은 xml 데이터를 조작해서 필요한 형태로 출력하고 있다
item.xml 내용
- sample09_07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML 파일을 GET 방식으로 로드하기</title>
<style>
td { border: 1px solid gray;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
/*
- $.get() 함수를 이용해서 item.xml 파일을 불러온다.
- $.get() 함수의 첫번째 매개변수에는 서버의 URL 주소를 지정한다.
- $.get() 함수의 두번째 매개변수인 콜백함수를 이용해서 서버에서 보내온 XML 형식의 데이터를 data 로 받늗다.
*/
$(function() {
$.get('item.xml', function(data) {
$("#treeData").append(
"<tr><td>id</td>" + "<td>name</td>"
+ "<td>price</td>" + "<td>description</td>" + "</tr>");
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
var $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
});
});
</script>
</head>
<body>
<table id="treeData"></table>
</body>
</html>
- 두번째 매개변수는 콜백함수이다
- $.get() 함수를 통해 서버에 서버측의 파일 중 'item.xml' 파일을 요청하고 'item.xml' 파일을 돌려받고 있다
- 콜백함수의 매개변수 data 로 xml 형식의 데이터를 돌려받았다
- body 태그 안에 table 태그 하나뿐, 이 table 태그의 id값만을 가지고 태그를 구해서 tr td 를 만들어서 데이터를 뿌려줄 것
- 테이블 태그를 id값으로 구해와서 append() 함수로 타이틀을 출력, id, name, pirce, descript 추가
- 타이틀이 아닌 돌려받은 데이터의 내용은 가공해야함
each() 함수
- 반복적인 작업을 수행하는 함수
- 첫번째 데이터를 가져오고 반복적인 작업을 하고 두번쨰 데이터를 가져오고 반복적인 작업을 하고..
- 더이상 데이터가 없을때까지 가져와서 반복작업
돌려받은 xml 을 원하는 형태로 가공 (sample09_07.html 부분)
$(data).find('item').each(function() { // 서버에서 얻어온 데이터에서 셀렉터로 item태그를 찾는다.
var $item = $(this); // 6개의 item태그중 현재 처리중인 item태그를 this로 접근한후에 이를
$("#treeData").append("<tr>" + "<td>" // this로 접근한 후에 이를 $(this)를 사용하여 jQuery객체를
+ $item.attr("id") + "</td>" + "<td>" //생성함
+ $item.attr("name") + "</td>" + "<td align='right'>"
+ $item.find("price").text() + "</td>" + "<td>"
+ $item.find("description").text() + "</td>" + "</tr>");
});
- 여기서는 $(data).find('item') 이므로 가져온 xml 형식 데이터에서 부모 엘리먼트인 item 태그를 한개씩 계속 구해온다
- Javascript 파일 또는 jQuery 라이브러리인 .js 파일은 함수단위로 내용이 들어간다
jQuery와 디자인
- 디자인쪽에도 많이 사용된다 (동적인 부분)
- 과거 플래시가 하던 기능들 처리 가능
동기적인 방식
- 페이지가 바뀜
- 부모페이지에서 자식 페이지로 바뀜
- ID 중복검사 시 팝업창을 띄움
비동기적인 방식
- 페이지가 바뀌지 않는다
- 팝업창 띄우지 않고도 ID 중복검사 가능 -> AJAX
- 페이지 바꾸지 않고도 댓글을 바로 쓸 수 있다
jQuery 함수 기본
jQuery(document).ready(function(){
});
- Javascript 에서의 document 객체를 의미
- document는 현재문서를 의미한다
- jQuery 대신 $ 로 바꿔쓸 쑤 있다.
- jQuery 함수는 태그를 불러오는 것에만 사용되고, 나머지 기능은 그 뒤의 함수들이 모두 처리 ex) ready(), hide()
- ready() 는 준비가 되었다면 을 의미함
jQuery 함수 간결하게 표기
$(function(){
});
jQuery 함수 안에 들어가는 것
1. HTML 태그
$('div').hide();
2. CSS 선택자
$('#sample1').hide();
- 태그가 여러개일때, id 값이나 class 속성값으로 구분
- 그 외 다양한 방법들이 있다
3. document 객체
$(document).ready();
jQuery 이벤트 처리 함수 정리
click()
클릭시에 처리를 실행한다.
submit()
submit버튼을 클릭할때 실행한다.
dblclick()
더블클릭시에 처리를 실행한다.
mousedown()
마우스의 버튼을 눌렀을 때 처리를 실행한다.
mouseup()
마우스의 버튼이 떨어졌을 때 처리를 실행한다.
toggle()
클릭될 때 마다 다른 처리를 실행한다.
mouseover()
마우스가 오버됐을 때 처리를 실행한다.
mouseout()
마우스가 아웃되었을 때 처리를 실행한다.
mousemove()
마우스가 이동될 때 처리를 실행한다.
one()
이벤트 발생에 한 번만 처리를 실행한다.
unbind()
설정되어 있는 이벤트 처리를 취소한다.
live()
앞으로 추가될 태그에 이벤트 처리를 설정한다.
change()
값의 변화가 발생할때
jQuery 예제8
다양한 형태의 선택자 응용 예제1
- sample4.html
<!DOCTYPE html>
<html>
<head>
<title>sample4</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// $(function(){
$(".first strong").css("color","red");
});
</script>
</head>
<body>
<ul>
<li class="first"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="second"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="third"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li class="fourth"><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
- 즉 class값이 first 로 되어있는 태그의 자손태그 중 strong 태그를 불러와라는 의미
* 자손태그 = 후손태그 = 자식태그를 포함한 후손의 모든 태그
+ <strong> 태그는 안의 내용을 bold 로 출력
jQuery 예제9
다양한 형태의 선택자 응용 예제2
- sample5.html
<!DOCTYPE html>
<html>
<head>
<title>sample5</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("li *").css("color","red");
});
</script>
</head>
<body>
<ul>
<li><strong> 텍스트 </strong> 텍스트 텍스트 텍스트 텍스트 </li>
<li><em> 텍스트 </em> 텍스트 텍스트 텍스트 텍스트 </li>
<li><span> 텍스트 </span> 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트텍스트텍스트텍스트 </li>
</ul>
</body>
</html>
- li는 모든 li 태그를 불러와라는 의미이고 한칸 띄워져있으므로 자손태그를 의미한다
- 'li *' 라는 선택자는 <li> 태그의 모든 자손태그를 불러와라는 의미
- 즉 <li> 태그의 자손태그인 <strong>, <em>, <span> 태그들이 해당된다 (<li> 가 아닌 <li>의 자손태그에 해당)
* 자손태그 = 후손태그 = 자식태그를 포함한 후손의 모든 태그
+ <em> 태그 안에 내용은 기울임체
- <li> 태그에만 해당하는 것은 CSS가 적용되지 않음
- <li> 태그의 자손태그에 해당하는 <strong> <em> <span> 부분의 내용만 CSS가 적용됨
jQuery 예제10
다양한 형태의 선택자 응용 예제3
- sample6.html
<!DOCTYPE html>
<html>
<head>
<title>sample6</title>
<meta charset="UTF-8">
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
$("#first,#third").css("color","red");
});
</script>
</head>
<body>
<ul>
<li id="first"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="second"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="third"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li id="fourth"> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
- #first 은 id값이 first로 되어있는 태그를 불러와라는 의미이고, #third는 id값이 third로 되어있는 태그를 불러와라는 의미
- 선택자에서 ',' 가 있을땐 양쪽 두개가 모두 동일한 적용을 받게 된다
- 즉, id값이 first로 되어있는 태그도 불러오고, id값이 third로 되어있는 태그도 불러와라는 의미
- id값이 first 인 li 태그와 id값이 third인 li 태그만 CSS의 적용을 받는다
- 위 코드에서 마찬가지로 '건물' 을 클릭시 $(this) 는 '건물' 이 이 있는 특정 <a> 태그를 구해옴
- text() 함수는 그 태그 안의 내용(값) 을 구해오는 함수이므로 $(this).text() 는 "건물" 이 된다
- 그래서 title 속성값은 "건물" 로 변경된다
jQuery 예제17
jQuery 이벤트 함수 종류 예제 1
- click() 외 또다른 이벤트 함수들
- dblclick() : 더블클릭 이벤트 함수
- sample7.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample7</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// 특정 태그(button)를 더블클릭 하여 이벤트 처리 하고 싶을때 dblclick()를 사용
$(function(){
$("button").dblclick(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
});
});
</script>
</head>
<body>
<button>화면을 변경</button>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>
- 더블클릭 이벤트를 처리하기 위한 dblclick() 함수가 있다.
- dblclick() 함수 안의 코드는 더블클릭 시 실행됨
버튼 더블클릭시이미지 변경
jQuery 예제18
jQuery 이벤트 함수 종류 예제 2
- click() 외 또다른 이벤트 함수들
-dblclick() : 더블클릭 이벤트 함수
- 버튼이 아닌 a 태그 하이퍼링크에 더블클릭 이벤트 처리를 하면 생기는 문제와 해결
- sample8.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample8</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// a 태그에 설정한 dblclick()이 동작하지 않을 경우
// a 태그에 dblclick()를 설정한 경우에는 더블 클릭(dblclick())시에는 실행하고
// 싶은 처리를 하고, 클릭(click())시에는 return false; 를 설정해서 링크를
// 무효화 시킨다.
$(function(){
/*
$("a").dblclick(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
});
*/
$("a").dblclick(function(){
$("img").attr("src",$(this).attr("href"))
.attr("title",$(this).text());
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>
- 버튼이 아닌 a 태그의 텍스트에 더블클릭 이벤트를 처리했다
- 더블클릭시 더블클릭 전에 클릭이 먼저 수행되므로 링크가 수행되어 브라우저가 이미지를 덮게 되는 문제가 발생
- 그 문제 해결을 위해 링크를 무효화 해야한다
- 하이퍼링크를 무효화 하기 위해 dblclick() 뒤에 click() 함수를 사용해서 click() 안에 return false를 사용해서 클릭시 링크가 수행되는 것을 막고 있다.
dblclick() 안에 return false; 를 쓰는게 아니라 click() 안에 return false; 를 써야하는 이유
- 이유 : 더블클릭 전에 클릭이 먼저 수행되므로, 클릭 시 하이퍼링크 실행
jQuery 예제19
jQuery 이벤트 함수 종류 예제 3
- click() 외 또다른 이벤트 함수들
-mousedown() : 마우스 버튼을 눌렀을때 이벤트 발생
- sample9.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample9</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// mousedown 이벤트 : 특정 태그위에 마우스 포인터가 있는 상태에서
// 마우스 버튼을 눌렀을 때 이벤트가 발생함.
// cf. click 이벤트는 눌러고 있던 손가락 떨어 졌을때 발생함.
$(function(){
$("a").mousedown(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
$("body").css("background","yellow");
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<div id="test"> 이미지 변경 </div><br><br>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>
- click 이벤트와 동작시점이 미묘하게 차이가 있다
- a 태그를 클릭시 body 태그에 CSS를 적용하고 있다
- 이때, 하이퍼링크에 mousedown() 이벤트를 처리했으므로, mousedown 이벤트가 먼저 발생 후 손을 떼는 순간 click 이벤트가 발생함
- 이때, click 시에 하이퍼링크가 실행되는 것을 막기 위해서 click() 을 추가해주고 안에 return false를 추가함
- 여기선 mousedown 이벤트가 먼저 발생하고 손을 떼는 순간 click 이벤트가 다음으로 실행된다
click 이벤트 vs mousedown 이벤트
- click 이벤트 : 마우스를 누른 후 뗐을때, 즉 클릭이 되었을때 발생
- mousedown 이벤트 : 마우스를 누른 직후 발생
jQuery 예제 20
jQuery 이벤트 함수 종류 예제 4
- click() 외 또다른 이벤트 함수들
-mouseup() : 마우스 버튼을 눌렀다가 뗐을때 이벤트 발생
- sample10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample10</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// mouseup 이벤트 : 특정 태그위에 마우스 포인터가 있는 상태에서
// 이미 눌러있던 버튼이 떨어지는 경우에 이벤트가 발생함.
$(function(){
$("a").mouseup(function(){
$("img").attr("src",$(this).attr("href")).attr("title",$(this).text());
$("body").css("background", "green");
}).click(function(){
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="flower.jpg">꽃</a></li>
<li><a href="sea.jpg">바다</a></li>
<li><a href="Jellyfish.jpg">해파리</a></li>
<li><a href="building.jpg">건물</a></li>
</ul>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>
- Click 이벤트는 말 그대로 어떤 컨트롤을 Click 했을때 발생하는 이벤트 - Mouse Up 은 어떤 컨트롤에서 마우스 버튼을 release 할때 발생하는 이벤트 - 마우스로 어떤 컨트롤을 클릭했을때 MouseDown-MouseUp-Click 이벤트 순으로 이벤트 발생
toggle() 함수
- 클릭할 때 마다 다른 처리를 실행하고 싶은 경우에 편리하게 사용할 수 있다 1. 괄호안에 function(){...}을 컴마(,)로 구분하며 여러가지 설정이 가능하고, 클릭한 순서대로 실행한다. 2. 설정해 놓은 처리가 마지막까지 실행되면, 처음 처리로 돌아와서 반복 실행한다
$(function(){ $(셀렉터).toggle(function(){ 처음 클릭했을 때 실행할 문장 },
function(){ 두 번째 클릭했을 때 실행할 문장 },
function(){ (중략...) },
function(){ 마지막 클릭했을 때 실행할 문장 });
jQuery 예제21
jQuery 이벤트 함수 종류 예제 5
- click() 외 또다른 이벤트 함수들
-toggle() : 요소를 클릭할 때마다 로테이션으로 다른 내용들을 실행해줌
- sample11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample11</title>
<script src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
// toggle 이벤트 : 클릭할 때 마다 다른 처리를 실행하고 싶은 경우에 편리하게
// 사용할 수 있다.
// 1.괄호안에 function(){...}을 컴마(,)로 구분하며 여러가지 설정이 가능하고,
// 클릭한 순서대로 실행한다.
// 2.설정해 놓은 처리가 마지막까지 실행되면, 처음 처리로 돌아와서 반복
// 실행한다
/* $(document).ready(function(){
// $(function(){
$(셀렉터).toggle(function(){
처음 클릭했을 때 실행할 문장
}, function(){
두 번째 클릭했을 때 실행할 문장
}, function(){
(중략...)
}, function(){
마지막 클릭했을 때 실행할 문장
});
});
*/
$(function(){
$("button").toggle(function(){
$("img").attr("src","sea.jpg")
.attr("title","바다");
},function(){
$("img").attr("src","Jellyfish.jpg")
.attr("title","해파리");
},function(){
$("img").attr("src","building.jpg")
.attr("title","건물");
},function(){
$("img").attr("src","flower.jpg")
.attr("title","꽃");
});
});
</script>
</head>
<body>
<button type=button>화면을 변경</button>
<p><img src="flower.jpg" title="꽃" /></p>
</body>
</html>
- 버튼이 하나뿐이지만 클릭할때마다 이미지들이 로테이션됨
- 달라지는 내용을 따로따로 함수형태로 추가함, 추가된 내용들이 순차적으로 로테이션 됨
- 마치 toggle() 함수의 매개변수를 여러개 넣는 것 처럼 function(){} 을 계속 추가한다
function 함수이름 (매개변수 1, 매개변수 2, ...) { 수행할 문장들... }
- function 키워드를 사용한다.
- 매개변수가 필요한 경우에만 매개변수를 쓴다.
- 매개변수에 자료형을 쓸 필요없이 필요한 개수만큼 변수명만 , 로 이어주면 된다. ex) (a,b,c)
- 돌려줄 값이 있을때만 return 구문으로 값을 돌려주면 된다.
- 자바스크립트는 인터프리터 방식이므로 함수 정의시에는 가능한 한 헤드 태그에 정의하고, 바디 태그에서 호출한다.
함수 호출 방법 2가지
1. 함수 이름을 통한 호출
2. 이벤트를 통한 호출
사용자 정의 함수 예제1
- 매개변수가 없는 함수
- 사용자 정의 함수 생성과 호출
- 함수 이름을 통한 호출과 이벤트를 통한 호출
- function01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정의 함수</title>
<script>
// 사용자 정의 함수
function check() {
alert("함수 호출 성공");
}
</script>
</head>
<body>
<!-- 방법1. 함수호출 -->
<script>
check(); // 함수 호출
// CHECK(); //함수명은 대,소문자를 구분한다.
</script>
<!-- 방법2. 이벤트를 이용해서 함수 호출 -->
<input type="button" value="함수호출" onClick="check()">
</body>
</html>
- 방법1에서 check() 함수는 매개변수가 없으므로 이름만으로 호출한다
- 방법2에서 onClick 이벤트 핸들러를 통해 함수를 호출한다.
- 클릭이벤트 발생시키기 위해 onClick="호출할 함수명" 을 적는다.
+ 변수명/함수명 대소문자를 구분한다.
+ 이벤트 핸들러 등록하는방법 중 태그에 속성으로 적는 방법이다.
+ onClick 은 이벤트 핸들러이다, 이벤트 핸들러는 대소문자를 구분하지 않는다.
방법1방법2
+ 만약 함수 선언, 정의가 호출보다 아래쪽에 있다면?
- 오류 발생, 자바스크립트는 인터프리트 언어이므로 함수 선언,정의가 호출보다 위에있어야한다.
이벤트
- 그래픽 프로그램 만들때 이벤트를 주로 사용한다.
- 언어마다 같은 행위여도 이벤트 이름이 다르다.
ex) 자바에선 버튼 클릭시 action 이벤트, 자바스크립트는 click 이벤트가 발생한다.
자바스크립트 이벤트 종류
- Click 이벤트 : 버튼을 클릭, 전송기능이 없는 버튼을 클릭하면 click 이벤트가 발생한다. - Submit 이벤트 : submit버튼을 클릭할때, 즉 전송기능이 있는 버튼을 클릭하면 submit 이벤트가 발생한다. - MouseOver 이벤트 : 컴포넌트(그림)위에 마우스 포인터를 올렸을때 - MouseOut 이벤트 : 컴포넌트(그림)위에서 마우스 포인터가 벗어났을때 - Load 이벤트 : 현재 문서가 웹브라우저에 불려질때 - Unload 이벤트 : 웹브라우저가 해당 문서를 벗어났을때 - Focus 이벤트 : 입력양식 필드로 포커스가 들어왔을 때, 즉 깜빡거릴때
- Blur 이벤트 : 입력양식에서 포커스가 벗어났을때, Focus 이벤트와 반대
- Keydown 이벤트 : 키를 누르고 있을때, 눌렀을때 - Keyup 이벤트 : 키를 눌렀다가 놓았을때, Keydown 이벤트와 반대 - Change 이벤트 : 값의 변화가 발생할때, 주로 select 옵션 메뉴중 선택을 하면 값이 변화함
이벤트 처리순서 1. 각 컴퍼넌트에 발생한 이벤트 종류를 파악
ex) Click, Focus, Blur, Load, MouseOver, MouseOut * 컴퍼넌트 : select 박스 또는 input=text 입력양식 같은 것들
2. 각 이벤트명에다 on을 붙여서 이벤트 핸들러를 생성 ex) onClick, onFocus, onBlur, onLoad... 는 이벤트 핸들러
- 대소문자를 구분하지 않지만 카멜 표기법처럼 on은 소문자, 이벤트명 첫글자는 대문자로 주로 작성
- confirm 창에서 확인을 누르면 true가, 취소를 누르면 false 가 result에 저장된다.
- true인경우 return 구문을 통해 "찬성" 이라는 문자데이터를 돌려주고있다.
<body> 안
- ask() 함수는 매개변수가 있으므로 값을 전달하면서 호출하고 있다.
- result 변수에 ask() 가 돌려준 값 ("찬성" or "반대") 가 저장된다.
- confirm 창이 뜨면서, 함수호출시 매개변수로 넘겨줬던 값이 출력되고 있다.
확인 버튼 누른경우취소 버튼 누른경우
- 함수호출 후 돌려받은 값을 <body> 안에서 alert()로 출력하고 있다.
사용자 정의 함수 예제3
- 매개변수가 2개 이상인 함수
- function03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정의 함수</title>
<script>
// 최대값과 최소값을 구하는 함수
function max(a,b) { // 최대값 구해주는 함수
if(a > b)
return a;
else
return b;
}
function min(a,b) { // 최소값 구해주는 함수
if(a < b)
return a;
else
return b;
}
</script>
</head>
<body>
<script>
a = prompt("정수1 을 입력하세요","");
b = prompt("정수2 를 입력하세요","");
var max = max(a, b); // max() 함수 호출
var min = min(a, b); // min() 함수 호출
document.write("max = " + max + "<br>");
document.write("min = " + min + "<br>");
</script>
</body>
</html>
- 키보드로 입력한 2개의 값을 함수의 매개변수로 전달하여 return 을 통해 최대값과 최소값을 돌려받는다.
+ if문이나 for문에 들어갈 코드가 1줄이면 괄호 {} 를 하지 않아도 된다.
사용자 정의 함수 예제4
- 버튼 4개를 만들어서 사용자가 키보드로 입력한 정수값 2개의 +, - , * ,/ 를 구하기
- onClick 이벤트 핸들러를 이용하여 함수 호출
- function04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정의 함수</title>
<script>
// Number("50") --> 50
var n1 = Number(prompt("정수1 을 입력하세요",""));
var n2 = Number(prompt("정수2 를 입력하세요",""));
function plus() {
alert(n1 + n2);
}
function minus() {
alert(n1 - n2);
}
function mul() {
alert(n1 * n2);
}
function div() {
alert(n1 / n2);
}
</script>
</head>
<body>
<form>
<input type="button" value="더하기" onClick="plus()">
<input type="button" value="빼기" onClick="minus()">
<input type="button" value="곱하기" onClick="mul()">
<input type="button" value="나누기" onClick="div()">
</form>
</body>
</html>
- <body> 태그 안에 입력양식을 만든다
- 전송기능이 없는 버튼이므로 클릭시 Click 이벤트 발생한다.
- onClick 이벤트 핸들러를 통해 함수를 호출한다.
- Number() 가 없다면 산술연산 중 + 기능은 연산이 되지 않고 1020으로 문자연결되어 나온다, 형변환이 필요하다.
Number() 를 쓰지 않았을때
- 입력한 값들이 모두 문자로 처리되어 n1 + n2 일때 연산이 되지 않고 연결이 되는것이다.
- Number() 함수로 prompt() 전체를 감싸주면 숫자로 형변환된다.
- 각 버튼 클릭시 두 정수값을 더하기, 빼기, 곱하기, 나누기 한 값이 alert 메세지 박스에 출력된다.
사용자 정의 함수 예제5
- 재귀함수 : 함수 안에서 자기 자신을 호출하는 함수
- 재귀함수는 Factorial 을 구할때 많이 쓴다, 메모리를 많이 사용한다.
- function05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 정의 함수</title>
<script>
// 재귀함수 : 함수안에서 자기 자신의 함수를 호출하는 함수
function factorial (n) {
if(n > 1) {
var result = n * factorial(n-1); // n1 = n * f(n-1) * f(n-2)...1
// 3! = 3 * (3-1) * (3-2) ...1
return result;
} else { // n=1, 즉 f(1) 일때
return n;
}
}
</script>
</head>
<body>
<script>
var n = prompt("팩토리얼을 구할 정수를 입력하세요");
document.write(n + "! = " + factorial(n));
</script>
</body>
</html>
- 자바스크립트는 자바와 달리 자료형을 쓰지 않기떄문에 숫자 범위가 한정되어있지 않아, 큰 팩토리얼도 구할 수 있다
한계
- 자바와 달리 자료형을 쓰지 않기 때문에 자료형의 값의 범위에 구애받지 않아 큰 수의 팩토리얼도 구할 수 있지만 어느 순간을 넘어가면 Infinity, 구해주지 않는다.
+ 나중에 자바스크립트 계산기 프로그램 만들 것
Date 객체
- 날짜 정보 처리
- 현재 년,월,일,시,분,초,요일 등을 구할 수 있다.
- 자바의 Date 클래스 객체 같은 역할
- new 연산자로 Date 객체를 생성해야한다.
today = new Date();
- 연도를 구할때는 메소드를 사용해야한다.
today.getFullYear();
Date 객체 예제1
- 현재 년,월,일,시,분,초,요일 구하기
- date01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체</title>
</head>
<body>
<script>
// 현재 년,월,일,시,분,초 요일
var t = new Date();
var y = t.getFullYear(); // 년
var m = t.getMonth() + 1; // 월 (0~11)
var d = t.getDate(); // 일
var h = t.getHours(); // 시간
var mm = t.getMinutes(); // 분
var s = t.getSeconds(); // 시
var w = t.getDay(); // 요일(0~6)
var week = ['일','월','화','수','목','금','토'];
document.write(y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s + " ");
// document.write(w); // w=5 : 금
document.write(week[w] + "요일");
</script>
</body>
</html>
- Date 객체는 내장 객체 형태로 제공되지 않기떄문에 직접 객체를 만들어서 사용해야한다. (date01.html 부분)
var t = new Date();
- getYear() 이 아닌 getFullYear() 임을 주의
- getMonth() 로 월을 구할때는 월을 0 ~ 11 까지 구해주기때문에 + 1을 해서 조정해야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date 객체</title>
<script>
function show() {
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1;
var d = t.getDate();
var h = t.getHours();
var mm = t.getMinutes();
var s = t.getSeconds();
document.write(y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s + "<br>");
// 브라우저 상태 표시줄에 출력
window.status = y + "-" + m + "-" + d + " " + h + ":" + mm + ":" + s;
// setTimeout(명령, 시간(1/1000)); 지정된 시간이 경과된 다음에 명령을 실행
w = setTimeout("show()", 1000); // 1초에 한번씩 show() 함수 호출
}
function stop() {
// setTimeout()으로 실행된 명령을 해제
ClearTimeout(w);
}
</script>
</head>
<!-- <body onLoad="show()"> -->
<body>
<input type="button" value="start" onClick="show()">
<input type="button" value="stop" onClick="stop()">
<br><br>
<img src="img/clock.jpg" onMouseOver="show()" onMouseOut="stop()">
</body>
</html>
<head>
- show() 함수안에서 자기 자신인 show() 함수를 재귀함수 형태로 1초에 한번씩 호출하고 있다.
- 최초로 show()를 한번 호출시 재귀함수를 통해 계속 1초에 1번씩 자신을 호출하게 됨.
- 위의 코드가 잘 실행되지 않기떄문에 브라우저 상태 표시줄에 출력하기위해 window.status 사용
- stop() 함수에서 시간을 멈추기 위해, setTimeout 으로 계속 실행되는 함수를 멈춰주기 위해 ClearTimeout() 사용
<body>
- input 태그로 start 와 stop 버튼을 만들어 onClick 이벤트 핸들러 사용
- 이미지를 불러와서 MouseOver, MouseOut 이벤트를 이용하고 있다.
- 마우스 포인터를 올리면 MouseOver이벤트, 벗어나면 MouseOut 이벤트 발생
- start 버튼을 클릭하거나, 이미지 위에 마우스 포인터를 올리면 실행된다
- 1초에 한번씩 출력하고 있다.
지정된 시간 뒤에 명령 수행하는 방법
// setTimeout(명령, 시간(1/1000)); 지정된 시간이 경과된 다음에 명령을 실행
w = setTimeout("show()", 1000); // 1초에 한번씩 show() 함수 호출
- setTimeout() 함수 : 정해진 일정시간 뒤에 어떤 명령(코드) 를 실행
- window 객체에서 지원되는 함수 중 하나이다.
setTimeout() 으로 실행된 명령 해제하는 방법
// setTimeout()으로 실행된 명령을 해제
ClearTimeout(w);
- ClearTimeout() 함수 : setTimeout() 으로 실행된 명령을 해제
- 매개변수에는 setTimeout 의 리턴을 받은 w를 넣는다.
- 한번의 setTimeout()을 해제하면 더이상 show()를 호출하는 것을 막게됨
- window 객체에서 지원되는 함수 중 하나이다.
브라우저 상태 표시줄에 출력
- status() 함수 : 브라우저 상태 표시줄에 출력
- window 객체에서 지원되는 함수 중 하나이다.
- 브라우저 맨 하단의 영역이 브라우저 상태 표시줄이다.
- 대부분 브라우저는 감춰져 있어 보이지 않는다.
- I.E 에서 확인 가능
- start 를 누르면 아래 부분 상태표시줄에 뜨고, stop 을 누르면 멈춘다.
Load 이벤트
- 현재 문서가 웹 브라우저에 불려질때 발생함
- <body> 태그 안에 써야한다.
<body onLoad="show()"></body>
+ body 태그 안에 onLoad="show()" 를 하면 실행 하자마자, 즉 현재 문서가 브라우저에 로딩되자마자 실행된다.
배열
자바스크립트 배열 정의/생성 방법 3가지
1.
str=new Array();
str[0]=80;
str[1]=90;
str[2]=70;
- 값이 정해지지 않았을때 사용함
- 자바와 달리 배열 공간 개수를 지정하지 않는다.
2.
str=new Array(80,90,70);
- Array 객체를 이용하여 배열 생성 3.
str=[80,90,70];
- 가장 간단하며 가장 많이 사용된다.
배열 속성, 메소드
- 배열에서 지원되는 여러 속성들이 있다.
ex) length 속성으로 배열 크기 구함
- 배열에서 지원되는 여러 메소드들이 있다.
ex) pop(), sort(), slice() 등
배열 예제1
- 3가지 형식으로 배열 정의
- array01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
</head>
<body>
<script>
// 배열
// 방법1.
var a1 = new Array();
a1[0] = 80;
a1[1] = 90;
a1[2] = 70;
// length : 배열의 크기를 구해주는 속성
for(var i = 0; i < a1.length; i++) {
document.write(a1[i] + "\t");
}
document.write("<br>");
// 방법2.
var a2 = new Array(80, 90, 70);
for(var i = 0; i < a2.length; i++){
document.write(a2[i] + "\t");
}
document.write("<br>");
// 방법3.
var a3 = [80, 90, 70];
for(var i = 0; i < a3.length; i++){
document.write(a3[i] + "\t");
}
</script>
</body>
</html>
<방법1>
- Array 객체를 통해 배열을 생성하고 있다.
- Array 객체는 new를 이용하여 직접 만들어야한다.
- 0번, 1번, 2번 원소를 반복문을 통해 출력해주고 있다.
- length 속성으로 배열의 크기를 구한다. ex) a1.length 는 3
+ 속성은 괄호가 없다
<방법2>
- Array 객체를 통한 배열 선언과 동시에 값을 할당했다.
- 0번방에 80, 1번방에 90, 2번방에 70이 들어갔다.
<방법3>
- 대괄호 [ ] 안에 원소값을 넣어주면 된다.
+ 배열은 동일한 자료형의 데이터만 저장되는데 동일하지 않은 데이터를 넣으면?
var a3 = [80, 90, 70, 3.14];
for(var i = 0; i < a3.length; i++){
document.write(a3[i] + "\t");
}
- 자바스크립트에서는 배열에 서로 다른 자료형의 자료형도 저장되고 있다!
배열의 메소드
- 배열에서 지원되는 여러 메소드들이 있다.
ex) pop(), sort(), slice() 등
배열 예제2
배열의 메소드 예제 1
- array02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
</head>
<body>
<script>
var num = ['사당','교대','방배','강남'];
document.write(num + "<br>"); //사당,교대,방배,강남
document.write(typeof(num) + "<br>");
// join() : 문자('-')를 기준으로 배열 값들을 하나의 문자 데이터로 결합
document.write(num.join('-') + "<br>"); //사당-교대-방배-강남
document.write(typeof(num.join('-')) + "<br>");
// reverse() : 배열 원소값들의 순서를 반대로 바꾸어 주는 역할.
document.write(num.reverse() + "<br>"); //강남,방배,교대,사당
document.write(typeof(num.reverse()) + "<br>");
document.write(num + "<br>") //사당,교대,방배,강남
// sort() : 배열 원소 값들을 오름차순으로 정렬 (문자 : 사전순 정렬)
// sort() 함수로 오름차순으로 정렬이 되면 원본 배열이 바뀌게 된다.
document.write(num.sort() + "<br>"); //강남,교대,방배,사당
document.write(num + "<br>"); //강남,교대,방배,사당
// 배열 원소 값들을 내림차순 정렬시켜보자 (문자 : 사전역순 정렬)
document.write(num.sort().reverse() + "<br>"); //사당,방배,교대,강남
document.write(num.sort().reverse() + "<br>"); //사당,방배,교대,강남
</script>
</body>
</html>
배열 출력 (array02.html 부분)
var num = ['사당','교대','방배','강남'];
document.write(num + "<br>"); //사당,교대,방배,강남
document.write(typeof(num) + "<br>");
- 배열 이름을 출력시 배열 원소가 전부 출력된다.
- 출력시엔 문자처럼 결합이 되어서 출력된다.
- 배열자체를 typeof() 로 출력하면 배열 객체이므로 object 형이다.
배열 원소들을 문자데이터로 결합(array02.html 부분)
// join() : 문자('-')를 기준으로 배열 값들을 하나의 문자 데이터로 결합
document.write(num.join('-') + "<br>"); //사당-교대-방배-강남
document.write(typeof(num.join('-')) + "<br>");
- 배열의 join() 함수를 사용해서 특정 문자를 기준으로 배열값들을 하나의 문자 데이터로 결합
- 또한 num.join('-') 의 자료형은 string 이다, 즉 join() 을 쓰면 문자데이터가 된다.
- 원본 배열에 영향을 주지 않는다.
배열 원소값 순서 바꾸기(array02.html 부분)
// reverse() : 배열 원소값들의 순서를 반대로 바꾸어 주는 역할.
document.write(num.reverse() + "<br>"); //강남,방배,교대,사당
document.write(typeof(num.reverse()) + "<br>");
document.write(num + "<br>") //사당,교대,방배,강남
- reverse() 함수를 사용하여 배열 원소갑슫ㄹ의 순서를 거꾸로 바꾼다.
- 배열 객체라는 의미로 object 가 출력됨
- 원본 배열에 영향을 주지 않는다.
배열 정렬 (오름차순)(array02.html 부분)
// sort() : 배열 원소 값들을 오름차순으로 정렬 (문자 : 사전순 정렬)
// sort() 함수로 오름차순으로 정렬이 되면 원본 배열이 바뀌게 된다.
document.write(num.sort() + "<br>"); //강남,교대,방배,사당
document.write(num + "<br>"); //강남,교대,방배,사당
- sort() : 배열 원소 값들을 오름차순으로 정렬 (사전순)
- reverse() 와 달리 sort() 함수는 원본 자체가 바뀐다!
- 즉 원본 num 배열이 바뀌었으므로(정렬되었으므로) num.reverse() 아니라 그냥 num() 으로 출력해도 같다.
- 오름차순 정렬되어 강남 부터 나온다.
+ 내림차순 함수는 없다, 내림차순을 하고싶으면 sort()로 오름차순 정렬 후, reverse() 로 순서 바꿔주기
// length 속성 : 문자열의 길이를 구해주는 속성
document.write("문자열의 길이 : " + str1.length + "<br>"); //6
document.write("문자열의 길이 : " + str2.length + "<br>"); //6
document.write("문자열의 길이 : " + str3.length + "<br>"); //10
document.write("문자열의 길이 : " + str4.length + "<br>"); //10
- String 객체의 length "속성"으로 문자열의 길이를 구함
- 한글, 영문 상관없이 글자수를 구함
+ 자바에서는 문자열의 길이를 length() "메소드"로 구한다.
String 객체 예제 2
String 문자열 관련 함수
- 문자열 추출 관련 함수가 substring() 외에 substr() 과 slice() 메소드 등 많은 함수가 있다
- 자바의 String 클래스의 메소드들과 유사
+ 자바는 substring() 만 지원
- string02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String 객체</title>
</head>
<body>
<script>
var t = "Hello Thank you good luck to you";
// charAt(16) : 인덱스 16번 문자를 추출
document.write(t.charAt(16) + "<br>"); //g
// indexOf('you') : 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.indexOf('you') + '<br>'); //12
// indexOf('you', 16)
// : 인덱스 16번 이후에 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.indexOf('you', 16) + '<br>'); //29
// lastIndexOf('you')
// : 끝에서 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.lastIndexOf('you') + "<br>"); //29
// match('luck') : 가장 먼저 나오는 'luck'과 일치가 되는 문자를 반환
document.write(t.match('luck') + "<br>"); //luck
// toUpperCase() : 대문자로 변환
// HELLO THANK YOU GOOD LUCK TO YOU
document.write(t.toUpperCase() + "<br>");
// toLowerCase() : 대문자로 변환
// hello thank you good luck to you
document.write(t.toLowerCase() + "<br>");
// substring(start index, end index)
// : start 인덱스부터 end-1 번 인덱스 번호의 문자를 추출
// substring(6, 12) : 인덱스 6번부터 11번 까지의 문자를 추출
document.write(t.substring(6, 12) + "<br>"); //Thank
// substr(start index, 추출할 문자열 갯수)
// substr(21, 4) : 인덱스 21번부터 4개의 문자를 추출
document.write(t.substr(21, 4) + "<br>"); //luck
// split("구분기호")
// : 구분기호를 이용해서 문자를 분리해서 배열로 리턴해주는 함수
// split(" ") : 공백문자를 기준으로 문자를 분리해서 배열로 리턴해준다.
var s = t.split(" ");
document.write(s[0] + "<br>");
document.write(s[1] + "<br>");
document.write(s[2] + "<br>");
document.write(s[3] + "<br>");
document.write(s[4] + "<br>");
document.write(s[5] + "<br>");
document.write(s[6] + "<br>");
for(var i = 0; i < s.length; i++) {
document.write(s[i] + "\t");
}
</script>
</body>
</html>
특정 인덱스의 문자 추출 (string02.html 부분)
// charAt(16) : 인덱스 16번 문자를 추출
document.write(t.charAt(16)); //g
- charAt() 함수로 특정 인덱스의 문자를 추출
- 문자열 인덱스는 0 번부터 시작
특정 문자, 문자열의 인덱스 구하기(string02.html 부분)
// indexOf('you') : 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.indexOf('you') + '<br>'); //12
- indexOf('특정 문자 또는 문자열') 함수를 사용해서 가장 먼저 나오는 그 문자 또는 문자열의 인덱스 번호를 구해준다.
특정 인덱스 이후의 특정 문자,문자열의 인덱스 구하기(string02.html 부분)
// indexOf('you', 16)
// : 인덱스 16번 이후에 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.indexOf('you', 16) + '<br>'); //29
- indexOf('특정 문자 또는 문자열', '특정 인덱스') 함수를 사용해서 특정 인덱스 이후에 가장 먼저 나오는 그 문자 또는 문자열의 인덱스 번호를 구해준다.
끝에서부터 특정 문자,문자열의 인덱스 번호 구하기(string02.html 부분)
// lastIndexOf('you')
// : 끝에서 가장 먼저 나오는 'you'의 인덱스 번호를 구해준다.
document.write(t.lastIndexOf('you') + "<br>"); //29
- lastIndexOf('특정 문자 또는 문자열') 함수를 사용해서 문자열 끝에서부터 가장 먼저 나오는 특정 문자, 문자열의 인덱스를 구해준다.
특정 문자열과 일치가 되는 문자열 구하기(string02.html 부분)
// match('luck') : 가장 먼저 나오는 'luck'과 일치가 되는 문자를 반환
document.write(t.match('luck') + "<br>"); //luck
- match() 함수는 문자열에서 정규식을 검색하여 성공 여부를 반환한다.
- 찾고자하는 문자열을 매개변수로 넣는다, luck 과 일치되는 값이 luck 이므로 luck을 출력함
+ 찾고자 하는 값이 없으면?
문자열을 대문자로 변환(string02.html 부분)
// toUpperCase() : 대문자로 변환
// HELLO THANK YOU GOOD LUCK TO YOU
document.write(t.toUpperCase() + "<br>");
- toUpperCase() : 문자열을 대문자로 변환해줌
문자열을 소문자로 변환(string02.html 부분)
// toLowerCase() : 대문자로 변환
// hello thank you good luck to you
document.write(t.toLowerCase() + "<br>");
- toLowerCase() : 문자열을 소문자로 변환해줌
문자열 추출 관련 메소드
- substring(시작인덱스, 끝 인덱스)
- substr(인덱스, 길이)
- 두가지가 기능은 비슷하지만 형식은 다르다
- 자바는 substring() 만 지원되지만 자바스크립트에서는 substring(), substr() 다 지원된다.
substring() 과 substr() 차이
- substring(strat index) 처럼 매개변수가 1개 오면 start index가 됨, 끝까지 추출
- substring(start index, end index) 처럼 매개변수가 2개 오면 start index 와 end index 가 되고, start 부터 end-1 까지 출력
- substr(start index) 처럼 매개변수 1개 오면 start index 가 됨, 끝까지 추출
- substr(start index, 추출한 문자열 갯수) 처럼 매개변수 2개 오면 start index와 추출할 문자열 개수가 되고 start 부터 문자열 개수만큼 추출
+ 즉 매개변수가 1개일때는 두 함수의 기능이 동일하다.
문자열 추출 함수1(string02.html 부분)
// substring(start index, end index)
// : start 인덱스부터 end-1 번 인덱스 번호의 문자를 추출
// substring(6, 12) : 인덱스 6번부터 11번 까지의 문자를 추출
document.write(t.substring(6, 12) + "<br>"); //Thank
- sutstring(start index, end index) 함수로 인덱스를 이용해서 특정 문자열을 추출한다.
- 인덱스 6은 T, 인덱스 11은 k 이므로 Thank 가 출력된다
- 인덱스 start 의 문자부터 인덱스 end-1 의 문자까지 출력한다.
문자열 추출 함수2(string02.html 부분)
// substr(start index, 추출할 문자열 갯수)
// substr(21, 4) : 인덱스 21번부터 4개의 문자를 추출
document.write(t.substr(21, 4) + "<br>"); //luck
- substr(start index, 추출할 문자열 갯수) 함수로 인덱스와 갯수를 이용해서 특정 문자열을 추출한다.
- 추출할 문자열의 개수가 두번쨰 매변수에 들어감
구분기호로 문자열 자르기 함수 (string02.html 부분)
// split("구분기호")
// : 구분기호를 이용해서 문자를 분리해서 배열로 리턴해주는 함수
// split(" ") : 공백문자를 기준으로 문자를 분리해서 배열로 리턴해준다.
var s = t.split(" ");
document.write(s[0] + "<br>");
document.write(s[1] + "<br>");
document.write(s[2] + "<br>");
document.write(s[3] + "<br>");
document.write(s[4] + "<br>");
document.write(s[5] + "<br>");
document.write(s[6] + "<br>");
for(var i = 0; i < s.length; i++) {
document.write(s[i] + "\t");
}
- split() 메소드로 문자들을 특정 구분기호로 잘라서 추출 가능하다.
- 구분기호를 이용해서 문자를 분리해서 배열로 리턴한다.
- 잘린 문자열들을 왼쪽의 s 배열로 리턴한다.
- 배열의 0번 인덱스부터 차례대로 저장된다.
- 차례대로 작성하여 출력할수도 있고 배열속성 length를 통해 반복문으로 출력할수도 있다.
String 객체 예제 3
- string03.html
문제 1 (string03.html 부분)
// Q1. 키보드로 영문 이름을 입력받아서 대문자로 변환하는 프로그램 작성
var name = prompt("당신의 영문 이름을 입력하세요","");
var upper = name.toUpperCase();
document.write(upper + "<br>");
- String 객체의 toUpperCase() 함수 사용
문제 2 (string03.html 부분)
// Q2. 핸드폰 번호를 입력받아서, 마지막 4자리를 보이지 않게끔 별표(*)로 처리
var num = prompt("핸드폰 번호를 입력하세요","");
// num = "01012345678"
if(num.length != 11) {
alert("핸드폰 번호 11자리를 입력하세요.")
} else {
var result = num.substr(0, 7) + "****";
document.write(result);
}
- 앞의 7자리를 그대로 추출해서 출력하고, 뒤의 4자리를 * 로 바꾸기
- sutstring() 이나 substr() 사용
- 여기선 substr(0, 7) 함수를 사용해서 처음부터 7자리를 추출하고 있다.
- length 속성으로 길이를 구해서 입력한 데이터가 11자리가 아니면 메세지를 뿌린다.
- 입력이 11자리일때 출력
- 입력이 11자리가 아닐때 출력
Math 객체
Math 객체
- 수학적 연산을 하기 위해 주로 사용되는 객체
- 내장 객체이므로 따로 객체를 만들면 안됨
- 속성을 사용시 Math.속성 으로 사용한다.
- 함수를 사용시 Math.함수() 로 사용한다.
+ 자바의 Math 클래스와 유사한 역할
+ 자바의 Math 처럼 new로 객체를 생성하면 안되고 자바 Math 클래스의 정적 필드, 정적 메소드와 유사
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가위, 바위, 보 맞추기</title>
</head>
<body>
<script>
var t = prompt("가위,바위,보 중에서 하나를 입력하세요","");
switch(t) {
case '가위' : t = 1;
break;
case '바위' : t = 2;
break;
case '보' : t = 3;
break;
default : alert("잘못 입력했습니다.");
location.reload(); // 새로고침
}
// 1 ~ 3 사이의 난수 발생
// Math.random() : 0 ~ 1 사이의 난수 발생
// var r = Math.ceil(Math.random() * 3); // 1 ~ 3 난수 발생
var r = Math.floor(Math.random() * 3) + 1; // 1 ~ 3 난수 발생
alert("난수 : " + r);
if (t == r) {
alert("맞췄습니다.");
} else {
alert("틀렸습니다.");
}
</script>
</body>
</html>
- switch~case를 이용해서 '가위'를 눌렀을땐 t에 1을 저장한다.
- location.reload() 를 통해 현재 문서를 새로고침 해준다.
- 잘못 입력했을땐 위에서 부터 다시 실행되므로 다시 입력받는 것
- 난수를 발생시켜서 t 변수에 저장된 값이 맞는지 판별
난수를 발생시키는 2가지 방법 (math02.html 부분)
// 1 ~ 3 사이의 난수 발생
// Math.random() : 0 ~ 1 사이의 난수 발생
// var r = Math.ceil(Math.random() * 3); // 1 ~ 3 난수 발생
var r = Math.floor(Math.random() * 3) + 1; // 1 ~ 3 난수 발생
- window 객체에서 wirte() 와 writeln() 와 alert() 함수가 지원된다.
document 객체
- 문서에 출력시 document 객체를 사용해야한다.
- 브라우저 관련 객체 중 하나이다.
줄바꿈
- <br> 태그나 <p> 태그를 쓸때는 write안의 ' ' 이나 " " 안에 써야한다.
콘솔창에 출력
- console.long()
- 값이 잘 리턴되었는지 등 확인하는 경우 콘솔창에 출력하는 경우가 많다.
예습
window 의 함수
alert()
- 메세지 박스를 출력
- alert() 을 쓰면 확인 버튼 1개만 만들어진다.
- alert() 은 window 의 내장객체
confirm()
- confirm()은 확인, 취소 버튼있는 창을 띄운다.
- confirm() 은 중요한 결정내릴때 한번더 물어보는 경우 사용
- ex) 정말로 삭제하시겠습니까?
- 확인누르면 true 리턴, 취소 누르면 false리턴
prompt()
prompt 창을 띄운다.
prompt() 는 사용자로부터 키보드로 입력을 받을 수 있다
+ 팝업창 열때는 window.open(), 닫을때는 window.close();
document 객체의 속성
bgColor
- 배경색 바꿀 수 있다.
fgColor
- 글자 색 바꿀 수 있다.
document 객체의 함수
wirte
- 문서에 데이터 출력
- 브라우저창에 데이터 출력
form 객체
- window 의 하위 객체
- form 의 하위객체에는 botton, submit, reset, radio 등이 있다.
window 내장 객체
confirm() 함수
- window 객체의 메소드
- 메세지박스(대화상자) 를 띄움
- 확인과 취소 버튼 2개가 제공됨
- 사용자에게 중요한 결정을 물어보고 동의를 받기위해 사용
- 확인 버튼 누르면 true 리턴, 취소 버튼 누르면 false 리턴
+ alert() 은 확인 버튼만 있는 일종의 경고창을 띄웠음
conform() 함수 예제
- confirm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>confirm함수</title>
</head>
<body>
<script>
// confirm() 함수는 사용자에게 중요한 결정을 물어볼때 주로 사용되며,
// 확인 버튼을 클릭하면 true 값을 리턴하고,
// 취소 버튼을 클릭하면 false 값을 리턴한다.
var result = confirm("정말로 삭제 하시겠습니까?");
if(result){
alert("삭제 성공");
}
else{
alert("삭제 취소");
}
</script>
</body>
</html>
- window.alert() 가 원칙이지만 window 객체는 생략이 가능하므로 alert()으로 사용 가능하다.
- 자바스크립트는 변수 만들떄 앞에 자료형을 쓰지 않고 var 등으로 선언(변수를 만들겠다는 의미)
- 정수값을 저장하면 정수형 변수, 논리값을 저장하면 논리형 변수가 된다.
확인 을 눌렀을때
취소 를 눌렀을때
- 확인과 취소 버튼 2개가 제공됨
- 사용자가 확인 버튼을 누르면 result 변수가 true를 리턴받고. 취소 버튼을 누르면 false 를 리턴받음
prompt() 함수
- 사용자가 키보드로 값을 입력받을때 사용하는 메소드
- 출력되는 메세지와 초기값, 두개의 값을 입력해야함
- 사용자가 입력한 값이 리턴값으로 온다, 그래서 값을 받는 변수에 저장된다.
- window 객체의 메소드
prompt() 함수 예제1
- prompt.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prompt함수</title>
</head>
<body>
<script>
// prompt("메세지?","초기값")
var name = prompt("이름을 입력하세요?","");
document.write("당신의 이름은 " + name + "<br>");
document.write(typeof(name) + "<br>");
</script>
</body>
</html>
- window.prompt() 가 원칙이지만 window 객체는 생략이 가능하므로 prompt()으로 사용 가능하다.
- typeof(변수명) : javascript 에서 변수 선언시 자료형 쓰지 않지만 이 변수가 어떤 자료형인지 확인할때 쓰는 메소드
- 문자 데이터끼리 연결할때 + 와 , 둘 다 가능하다.
출력
- 자료형은 소문자로 출력된다.
prompt() 함수 예제2
- prompt.html(수정)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prompt함수</title>
</head>
<body>
<script>
// prompt("메세지?","초기값")
var name = prompt("이름을 입력하세요?","");
document.write("당신의 이름은 " + name + "<br>");
document.write(typeof(name) + "<br>");
</script>
<script>
var age = prompt("나이를 입력 하세요?",""); //age = "24"
alert(typeof(age)); //string
if(age >= 20){
alert("당신은 성인입니다.");
}else{
alert("당신은 미셩년자 입니다.")
}
</script>
</body>
</html>
- prompt() 함수로 키보드로 값을 받을때는 문자로 입력이 됨
- 24 를 치면 문자 24가 입력되는 것이다.
- age 변수에 사용자가 입력한 값이 저장된다.
자바스크립트 문자와 숫자
- 자바스크립트에서는 문자와 숫자의 비교가 되므로 위의 age >= 20 이 실행 된다.
- 다만 산술적인 연산을 하려면 형변환을 해야한다.
- 아래는 순서대로의 출력
- prompt() 함수로 키보드로 값을 받을때는 문자로 입력이 됨
- 그래서 typeof(age) 가 string이 나온다.
ex) 24 를 키보드로 입력시 숫자가 아닌 문자 24가 입력되는 것이다.
자바스크립트 변수
- 변수 : 메모리상에 데이터를 저장하는 기억공간의 이름
- 형식 : var 변수형 = 값(데이터);
+ var 대신 let 로도 사용가능
+ 변수를 만들때 자료형을 쓰지 않는다.
자바스크립트 변수 예제1
숫자 데이터
- variable.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
</head>
<body>
<!--
변수 : 메모리상에 데이터를 저장하는 기억공간의 이름
형식 : var 변수형 = 값(데이터);
-->
<script>
// 1. 숫자 데이터
var num = 10;
var pi = 3.14;
document.write("num = ", num + "<br>");
document.write("pi = ", pi + "<br>");
document.write(typeof(num)+"<br>"); // number
document.write(typeof(pi)+"<br>"); // number
</script>
</body>
</html>
- 후행 연산시 result 변수에 num2 를 먼저 할당한 후 ++ 를 처리하므로 result 는 20, num2는 21이 된다.
- 선행 연산시 ++ 를 먼저 처리 한 후 result 변수에 num2를 할당하므로 result 와 num2 모두 22가 된다.
- 변수에 값을 할당하며 증감 연산자를 쓸 때는 주의해야한다.
자바스크립트 연산자 예제5
비교 연산자
- 자바와 같다
- >, >=, <, <=, ==, !=
- 참이면 true, 거짓이면 false 반환
- opper05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교 연산자</title>
</head>
<body>
<script>
// 비교 연산자 : >, >=, <, <=, ==, !=
var a = 10;
var b = 20;
var c = 10;
var f = "20" // 문자 20
var result;
result = a > b;
document.write("a > b = " + result + "<br>"); // false
result = a < b;
document.write("a < b = " + result + "<br>"); // true
console.log("a<b = " + result + "<br>");
result = b == f;
document.write("b == f = " + result + "<br>"); //true
result = a != b;
document.write("a != b = " + result + "<br>"); //true
result = b != f;
document.write("b != f = " + result + "<br>"); //false
</script>
</body>
</html>
- b는 숫자 20, f는 문자 "20" 이지만 자바스크립트에선 같은 값으로 인식하고 비교연산 == 시 true 출력
+ 자바스크립트 여러 문제 생김
document.write("a<b = " + result + "<br>"); // true
console.log("a<b = " + result + "<br>");
- a<b 출력시 a까지만 출력됨
- 콘솔로는 잘 출력되지만 브라우저에선 문제 생긴다.
- 띄워서 쓰자
자바스크립트 연산자 예제6
문제
- opper06.html
- prompt()로 받아서 n1, n2 모두 문자형 데이터가 들어간다.
- 문자끼리 크기 대소 비교 된다.
+ 문자들끼리도 비교 된다.
+ a, b를 입력하면 max = b 가 된다, 내부적으로 10진수 아스키코드로 처리된다.
- 엄밀히는 문자와 숫자를 변환해서 사용해야한다, 나중에 안되는 경우도 있음.
- opper06.html (수정)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문제</title>
</head>
<body>
<script>
// 키보드로 정수 2개를 입력 받아서 최대값과 최소값을 구하는 프로그램을 작성
var n1 = prompt("정수1 을 입력하세요.","");
var n2 = prompt("정수2 를 입력하세요.","");
document.write(typeof(n1) + "<br>"); // string
document.write(typeof(n2) + "<br>"); // string
var max, min;
// Number() : 문자를 숫자로 변환 해주는 함수
var n1 = Number(n1); // Number("30") ---> 30
var n2 = Number(n2); // Number("3.14") ---> 3.14
if(n1 > n2) { // 문자형 변수끼리 비교 연산을 할 수 있다.
max = n1;
min = n2;
} else {
max = n2;
min = n1;
}
document.write("max = " + max + "<br>");
document.write("min = " + min + "<br>");
</script>
</body>
</html>
- Number() 함수를 쓰면 문자를 숫자로 형변환 해준다.
- 문제 30을 연산가능한 숫자 30으로, 문자 3.14를 숫자 3.14로 변환해주고 있다.
- 이렇게 하는게 원칙이다
+ window 내장 함수
parseInt() : 실수형태의 문자를 정수형 숫자로 변환
parseFloat() : 실수형태의 문자를 실수형 정수로 변환
Number() : 정수형태, 실수형태의 문자를 정수나 실수로 변환
자바스크립트 연산자 예제7
조건 연산자
- 변수 = (조건식) ? 값1 : 값2;
- 조건식이 참이면 값1을 변수에 리턴, 조건식이 거짓이면 값2를 리턴
- opper07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건 연산자</title>
</head>
<body>
<script>
// 조건 연산자
// 변수 = (조건식) ? 값1 : 값2;
// 조건식이 참이면 값1을 변수에 리턴하고, 조건식이 거짓이면 값2를 리턴한다.
// 키보드로 정수 2개를 입력 받아서 최대값과 최소값을 구하는 프로그램을
// 조건 연산자를 이용해서 처리하는 프로그램 작성
var n1 = prompt("정수1 을 입력하세요","");
var n2 = prompt("정수2 를 입력하세요","");
var max = (n1 > n2) ? n1 : n2;
var min = (n1 < n2) ? n1 : n2;
document.write("max = " + max + "<br>");
document.write("min = " + min + "<br>");
</script>
</body>
</html>
자바스크립트 연산자 예제8
논리 연산자
- 논리 연산자 : &&, ||, !
- 자바와 동일하게 기호 형태로 논리 연산자를 사용
- opper08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>논리 연산자</title>
</head>
<body>
<script>
// 논리 연산자 : &&, ||, !
// 5 과목의 점수를 입력받아서 합격, 불합격을 판별하는 프로그램 작성
// 단, 과목당 과락은 40점이고, 평균 60점 이상을 받아야 합격한다.
var n1 = prompt("과목1 점수를 입력하세요",""); // string
var n2 = prompt("과목2 점수를 입력하세요","");
var n3 = prompt("과목3 점수를 입력하세요","");
var n4 = prompt("과목4 점수를 입력하세요","");
var n5 = prompt("과목5 점수를 입력하세요","");
// var total = n1 + n2 + n3 + n4 + n5 // 합이 구해지지 않는다.
// Number() : 문자를 숫자로 변환해주는 함수
var total = Number(n1) + Number(n2) + Number(n3) + Number(n4) + Number(n5);
alert(total);
var avg = total / 5;
if (n1 >= 40 && n2 >= 40 && n3 >= 40 && n4 >= 40 && n5 >= 40 && avg >= 60) {
alert("합격");
} else {
alert("불합격");
}
</script>
</body>
</html>
- prompt에서 숫자를 입력해도 문자로 처리되어 저장된다.
- 10, 20, 30, 40, 50 을 프롬프트 창에 입력하자
- n1, n2, n3, n4, n5를 그냥 + 로 더했을땐, 문자이기때문에 산술적인 연산이 안된다.
- total 은 산술적인 덧셈이 아니라 각 변수의 문자가 연결된 것임.
n1, n2, n3, n4, n5를 그냥 +
- 산술 연산 위해서 문자를 숫자로 변형시켜야한다.
- Number() 함수로 문자 -> 숫자 변환시켰다.
형변환 후 + 연산 했을때
- 10, 20, 30, 40, 50 을 프롬프트 창에 입력시 결과
+ 콘솔로 total과 avg값을 확인
- opper08.html 추가
var total = Number(n1) + Number(n2) + Number(n3) + Number(n4) + Number(n5);
console.log("total : " + total);
var avg = total / 5;
console.log("agv : " + avg);
- 개발자 도구 Console 에서 확인 가능
- 에러가 생겼다면 F12 개발자 도구에서 확인하고 에러를 잡기
+ eval 함수로 덧셈 처리
var total = eval(n1 + n2 + n3 + n4 + n5)
- eval 함수는 문자형의 수식을 연산까지 수행할때 사용한다.
- 나중에 다시 공부할 것
자바스크립트 조건문
- 자바와 거의 동일
- if문, if-else문, if-else if문
+ 자바와 제어문은 거의 동일
자바스크립트 조건문 예시1
If문
- if01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// if문
var min = prompt("당신의 하루 통화량은 몇분입니까?", "0");
if(min >= 60) {
alert("많이 사용하는 편이네요.");
}
</script>
</body>
</html>
- 초기값을 0 으로 설정했으므로 0 이 초기값으로 나타난다.
자바스크립트 조건문 예시2
If ~ else문
- 두가지중 한가지는 반드시 실행된다.
- if02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// if ~ else문
var num = Number(prompt("당신이 좋아하는 숫자는?","0"));
if(num % 2 == 0) { // 짝수
alert("당신이 좋아하는 숫자는 짝수")
} else { // 홀수
alert("당신이 좋아하는 숫자는 홀수")
}
</script>
</body>
</html>
- prompt()로 받으면 문자데이터이므로 전체를 Number()로 감싸주면 숫자 데이터가 num에 저장된다.
자바스크립트 조건문 예시3
If ~ else if ~ else 문
- 위에서 만족하면 아래쪽 조건 실행하지 않고 빠져나간다.
- if03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// if ~ else if ~ else
// 키보드로 0 ~ 100점 사이의 점수를 입력받아서 학점을 출력하는 프로그램을 작성
// A학점 : 90 ~ 100
// B학점 : 80 ~ 89
// C학점 : 70 ~ 79
// D학점 : 60 ~ 69
// F학점 : 60점 미만
var s = prompt("0 ~ 100점 사이의 점수를 입력하세요","");
if(s >= 90) {
alert("A학점");
} else if(s >= 80) {
alert("B학점");
} else if(s >= 70) {
alert("C학점");
} else if(s >= 60) {
alert("D학점");
} else {
alert("F학점");
}
</script>
</body>
</html>
- 문자 데이터도 크기 대소 비교가능하므로 실행된다.
- 위에서 만족하면 아래쪽 조건 실행하지 않고 빠져나간다.
- 그런면에서 if를 여러개 쓰는것과는 다르다
자바스크립트 조건문 예시4
switch ~ case 문 1
- 위에서 만족해도 빠져나가지 않고 아래쪽으로 내려간다
- 빠져나오기 위해서 break; 를 쓴다.
- switch01.html (수정 전 잘못된 코드)
- 이러면 82를 넣었을때 F학점이 나온다
- 자바에서는 int형과 int형을 / 연산하면 int형으로 결과가 나왔다는 점을 이용해서 이렇게 풀었다
- 하지만 자바스크립트에서는 82/10 은 8.2 이므로 default의 F가 나온다, 원하는 결과가 나오지 않는다.
- 자바스크립트의 변수에서 자료형을 쓰지 않음으로서 생기는 문제
- 이 문제 해결을 위해서 함수 중 하나를 써야한다.
- parseInt() 는 실수형에서 소숫점을 버려서 정수로 만들어준다.
+ prompt 두번째에 "" 는 초기값 설정하지 않는 것임
+ 문자데이터끼리 / (나누기) 연산 안된다. % (나머지) 연산은 되었다
+ 자바스크립트는 되는것도 있고 안되는 것도 있어서 헷갈림
- switch01.html (수정 후)
<!DOCTYPE html>+
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// switch ~ case 문
// 키보드로 0 ~ 100점 사이의 점수를 입력받아서 학점을 출력하는 프로그램을
// switch ~ case 문으로 작성하세요 (학점기준은 if03.html 참고)
var s = Number(prompt("0 ~ 100점 사이의 점수를 입력하세요",""));
// parseInt("9.5") --> 9
switch(parseInt(s/10)){
case 10 :
case 9 : alert("A학점");
break;
case 8 : alert("B학점");
break;
case 7 : alert("C학점");
break;
case 6 : alert("D학점");
break;
default : alert("F학점");
break;
}
</script>
</body>
</html>
- parseInt("9.5") -> 9 처럼 parseInt() 함수를 쓰면 실수의 소숫점을 버려서 정수로 만든다.
자바스크립트 조건문 예시5
switch ~ case 문 2
- switch02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// switch ~ case 문
var site = prompt("네이버,다음,네이트,구글 중에서 즐겨 사용하는 사이트는?","");
switch(site) {
case "네이버" : url = "www.naver.com";
break;
case "다음" : url = "www.daum.net";
break;
case "네이트" : url = "www.nate.com";
break;
case "구글" : url = "www.google.com";
break;
default : alert("보기 중에 없는 사이트 입니다.");
}
if(url) {
location.href = "http://" + url;
// location.href = "http://www.oracle.com"
}
</script>
</body>
</html>
- site 변수에 입력값이 저장되고, 그 입력값에 따라 switch ~ case 문으로 분기해서 처리
- url 변수 값이 있을경우에 if문 안에서 페이지 이동을 시킴
- location 객체를 이용해서 해당 사이트로 이동한다.
- 프로토콜 http:// 에 사이트 url 을 붙임
- 네이버로 이동한다.
+ location 객체
- window 객체 하위 내장객체 객체 중 하나이다.
- 주로 페이지를 이동시켜주는 역할을 한다. - 사용 방법 :
location.href = "이동할 url 주소";
- 이러면 해당 페이지로 이동한다.
- 프로토콜도 반드시 써야한다.
자바스크립트 반복문
- 변수 선언시 자료형 쓰지 않는것 외에는 거의 동일하다.
- for문, while문, do~while문
자바스크립트 반복문 예제1
for문 1
- for01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// for문
// for(초기값; 조건식; 증감식) {
// 반복 실행할 문장;
//}
// '사랑해요' 메세지를 10번 출력
for(var i = 1; i <= 10 ; i++) {
document.write(i + "사랑해요.<br>");
}
</script>
</body>
</html>
- 웹상이다보니 무한루프 돌면서 1000000000까지 계속 출력해주진 않고 한계가 있다. -> out of memory 뜬다.
- 클라이언트 언어 (Javascript) 로 이걸 처리시 클라이언트의 컴퓨터가 바빠짐
- Java로 이걸 처리시 서버 부하, 클라이언트에서 처리하는것이 낫다.
자바스크립트 반복문 예제2
for문 2
- for02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 1 ~ 10까지 합을 구하는 프로그램을 작성하세요
var sum = 0;
for(var i=1; i<=10; i++) {
sum += i; // sum = sum + i;
}
document.write("1 ~ 10 합 : " + sum);
</script>
</body>
</html>
자바스크립트 반복문 예제3
for문 3
- for03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 1 ~ 100 까지 홀수, 짝수의 합을 구하는 프로그램 작성
var odd = 0, even = 0;
for (var i = 1; i <= 100; i++) {
if(i % 2 == 1) { // 홀수
odd += i;
} else { // 짝수
even += i;
}
}
document.write("1 ~ 100 홀수의 합 : " + odd + "<br>");
document.write("1 ~ 100 짝수의 합 : " + even + "<br>");
</script>
</body>
</html>
자바스크립트 반복문 예제4
for문 4
- 아직 배우진 않았지만 배열 활용
- 태그는 document.write("") 의 " " 안에 들어가야함.
- "자바스크립트" 를 7번 출력하고, html의 font 태그를 이용해서 루프가 돌아갈때마다 글자크기를 다르게 설정
- 이건 속성값이 숫자이므로 i와 맞출수있다 -> 배열 쓰지 않아도 처리되는 경우이다.
- 만약 7개의 문자마다 다른 색을 쓰고 싶다면? -> 배열을 써야한다.
+ 자바스크립트 배열 생성 3가지 방법
- 1번방식은 배열에 어떤값 들어갈지 모를때 사용함
- 만약 font 태그를 이용해서 7개의 문자마다 다른 색을 쓰고 싶다면 문자데이터 이므로, 배열을 사용해아한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 배열을 활용하는 for문
var col = ['red','orange','yellow','green','blue','navy','purple'];
for(var i = 1; i <= 7; i++) {
document.write("<font size= " + i + " color=" + col[i-1] + ">자바스크립트</font><br>");
}
</script>
</body>
</html>
- 값은 " " 안에 들어가지 않으므로 속성값을 쓸때 유의
-만약 font 태그를 이용해서 7개의 문자마다 다른 글꼴을 사용하고 싶다면 문자데이터이므로, 배열을 사용해야한다
- for04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 배열을 활용하는 for문
var col = ['red','orange','yellow','green','blue','navy','purple'];
var f = ['고딕','명조','궁서','바탕','돋움','견고딕','새고딕'];
for(var i = 1; i <= 7; i++) {
document.write("<font size= " + i +
" color=" + col[i-1] +
" face=" + f[i-1] +
">자바스크립트</font><br>");
}
</script>
</body>
</html>
+ 적용되는 글꼴도 있고 적용되지 않는 글꼴도 있다.
자바스크립트 반복문 예제5
for문 5
- for05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 키보드로 원하는 단을 입력받아서 구구단 1개단을 출력하는 프로그램을 작성
var dan = prompt("원하는 단을 입력하세요","");
for(var i = 1; i <= 9; i++) {
document.write(dan + " * " + i + " = " + dan*i + "<br>");
}
</script>
</body>
</html>
- * 연산은 문자 산술연산 가능 ( +는 안됨), Javascript 에서는 이런것들이 명확하지 않다.
자바스크립트 반복문 예제6
for문 6
- for06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
// 구구단 2 ~ 9 단을 출력하는 프로그램을 작성하세요.
for(var dan=2; dan <= 9; dan ++) {
document.write("[ " + dan + "단 ]<br>")
for(var i=1; i <=9; i++) {
document.write(dan + " * " + i + " = " + dan*i + "<br>");
}
document.write("<br>"); // 각 단 줄간격 벌리기
}
</script>
</body>
</html>
- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌
- page01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">이전</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>
</div>
</body>
</html>
- CDN 방식으로 부트스트랩을 적용하고 있다, CSS파일은 link 태그로, JS파일은 script 태그로 불러오고 있다
- 기본적으로 반응형 웹으로 제공되므로 viewport 가 있다
- <ul> 태그에 class="pagination" 그리고 안의 <li> 태그마다 "page-item" 과, <a> 태그마다 class="page-link"가 적용되어있다.
- class="active" 인 것이 활성화 됨, 즉 1 이 활성화됨
- 코드에서 1 이 class="active" 가 적용되었으므로 1이 active 상태가 되어있다.
+ 페이지 관련 w3schools 페이지
부트스트랩 사용 예제7
3. Pagination
- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌
- 정렬기능을 가지고 있다, 페이지 처리하는 걸 목록페이지 하단영역에 왼쪽에 정렬할지, 가운데 정렬할지 ,오른쪽에 정렬할지 지정가능
- 기본값은 왼쪽 정렬이므로 왼쪽 정렬을 할때는 class:"pagination" 외에 따로 지정하지 않는다.
- 가운데 정렬을 위해선 class="justify-content-center 를 넣어준다.
+ 페이지 관련 w3schools 페이지
부트스트랩 사용 예제9
3. Dropdowns
- Dropdowns : 클릭시 옵션목록이 나오고 다시 클릭시 옵션목록이 없어짐
- dropdown.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="http://www.naver.com">네이버</a>
<a class="dropdown-item" href="http://www.daum.net">다음</a>
<a class="dropdown-item" href="http://www.google.com">구글</a>
</div>
</div>
</div>
</body>
</html>
- CDN 방식으로 원격서버의 라이브러리를 불러오고 있다.
- Dropdown 기능 수행하기 위해서 div class=dropdown 으로 감싸준다.
- 버튼에서 class="dropdown-toggle" data-toggle="dropdown" 를 적용해야한다
- 다음으로 버튼을 누를따 나타나는 옵션메뉴들을 div class="dropdown-menu"로 감싸준다.
- 구체적인 개별 목록들은 class="dropdown-item" 을 적용한다.
- 바꿀수 있는 부분이 있고 바꾸지 못하는 부분들이 있음, 위의 글에서 언급한 것은 바꾸지 못한다.
- 링크가 걸려있으므로 네이버 선택시 네이버로 이동한다.
+ Dropdown 관련 w3schools 페이지
부트스트랩 사용 예제10
4. Collapse
- Collapse : 클릭하면 메뉴가 나타났다가 다시 클릭하면 메뉴가 사라짐, 접혔다 펴졌다 하는 기능
- collapsible.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>
- 버튼을 만들고 data-toggle="collapse" 와 data-target="#demo" 속성을 추가한다.
- 여기서 #demo 는 펼쳐칠 div 의 id값을 의미한다!
- 그리고 펼쳐졌다 졉혀질 div 상자의 id를 "demo"로 한다.
- demo 말고도 다른 이름 사용가능, button의 data-target="#원하는이름" 으로, div의 id="원하는 이름" 으로 맞춰주면 된다.
부트스트랩 사용 예제11
5. Accordion
- Accordion : 여러개중 한가지만 펼쳐진다, 한가지가 펼쳐지면 나머지는 접힌다.
- Collapse 와 비슷한 기능 수행
- accordion.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
자바
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
파이썬
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
오라클
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 각 목록인 anchor 태그에 href="#collapseOne" 의 #collapseOne은 펼쳐질 div의 id값을 의미한다, 이름값을 맞춰야한다
- 버튼을 누르면 모달창을 띄우고 싶을때 그 버튼은 data-toggle="modal" data-target="#myModal" 로 되어있다, 이때 이 #myModal 은 모달창의 div id값과 일치해야한다.
- 모달은 모달헤드, 모달바디, 모달푸트 로 3가지 영역으로 나눠져있다. 각 영역의 div에 modal-header 등의 클래스를 적용해줘야한다.
- 모달 헤드 부분에 우측 상단의 X 버튼을 만들기위해 버튼에 class="close"를 적용시 X를 누르면 모달창을 닫아준다.
- 모달 푸트 부분에 Close 버튼을 만들기 위해 data-dismiss="modal" 를 적용한다.
- Close 를 누르거나 바깥쪽을 찍으면 모달창이 닫힌다
부트스트랩 사용 예제16
9. Scrollspy
- Scrollspy : 섹션을 누를때마다 그 내용만 나오게 한다.
ex)
- scrollspy.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
- <body> 태그 안에 data-spy="scroll" data-target=".navbar" 와 data-offset = 5 를 적용
- 상단의 바가 네비게이션 바이다, 그걸 선택시 링크를 걸어 관련 내용이 밑에 나타나도록 함, 링크 <a> 의 href= 에는 내용을 보여줄 <div>의 id값과 일치되어야한다. ex) a태그 안 href="#section1" , div 태그 안 id=section1
- 그렇게 id값을 일치시키면 그 링크(네비게이션 메뉴) 를 눌렀을때 그 div 태그안의 내용이 나타난다.
- Section 4는 다시 서브메뉴를 만들어야하므로 dropdown 을 적용함.
- <nav> 태그 안의 내용이 네비게이션 바를 만드는 역할, 여러 클래스값 적용되어있고 , <nav> 태그 안 <ul> 태그와 <li>태그를 를 통해 목록을 작성해준다.
- 클릭시 그 메뉴와 연결된 내용이 바로 아래쪽에 나온다
- Section 4는 분기를 시켜서 보여주고 있음
- 상단바는 고정되어있고 본문만 바뀌고있다.
- 스크롤바를 움직여서도 아래내용을 볼수있다.
부트스트랩 사용 예제17
10. Filters
- Filters : 일종의 검색기능 지원, 안의 데이터를 search
ex) j입력시 j가포함된 데이터를 뽑아온다.
- filter.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
- 부트스트랩만으로 구현 불가능하고 안에 jQuery 기능이 들어가야 검색기능 지원 가능
- 검색어 입력 양식 input 안에 class="form-control" 을 적용하고 있다
- 테이블에도 부트스트랩을 적용해서 테두리있는 표를 만들어준다.
jQuery 코드 간략 설명
- $ 는 jQuery 함수를 의미한다, $()대신 jQuery() 라고 써도 된다.
- jQuery 함수는 태그를 구해오는 역할을 한다.
- $(document).ready(function(){}); 는 html 문서의 로딩이 끝나 준비가 되면 안의 내용을 실행시켜라는 의미이다.
- $("#myInput") 은 id값이 myInput 인 태그를 구해와라는 의미, 즉 검색어 입력양식을 구해오는 함수이다.
- $("#myInput").on("keyup", function(){}); 은 keyup 이벤트가 발생하면 안의 내용을 실행시켜라는 의미이다.
- $(this).val().toLowerCase() 는 현재 이벤트가 발생한 태그의 값을 소문자로 변환해서 반환한다.
- $("myTable tr").filter(function(){}); 에서 filter() 함수로 필터기능을 수행한다, 검색된 내용을 테이블에 보여주는 기능을 수행함.
+ 값을 입력하고 손을 떼는 순간 keyup이벤트, 값을 입력하려 키보드를 눌렀을때는 keydown 이벤트가 발생한다.
+ 필터 관련 w3school 페이지
부트스트랩 사용 예제18
11.Tab
- 토글 탭
- w3school 에서 CSS 부분 아닌 JS Tab 으로 들어가야함
- jQuery 나 JS로 구현해야한다.
ex)
- tab.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">게시판</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Menu 3</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
- <nav> 태그 안의 네비게이션 메뉴들은 주로 ul 태그로 만든다
- <li> 태그 안 <a> 태그안에 href="#home" 으로 하면 그 탭을 눌렀을때 보여줄 내용 div 의 id값이 home 이다.
- 즉 <a> 태그의 href= 값과 타깃이 되는 div id값과 맞춰야한다.
- <li> 태그 안 <a> 태그안에 class="active" 인 탭이 가장 먼저 활성화(선택된) 상태로 나타나고, 그 관련 내용이 아래에 나타난다.
- 내용부분은 <div class="tab-content"> 로 전체를 감싸야하고 각각의 내용들은 div 태그 안에서 class="container tab-pane fade" 를 적용한다.
+ Tab은 부트스트랩으로도 만들수 있고 jQuery UI 로도 만들수있다.
부트스트랩 사용 예제19
12. Tamplate
- Template : 전체적인 레이아웃을 잡아줌
1. Bootstrap4 의 Tamplate (많이 없다)
ex) Bootstrap3 의 Template
- 템플릿을 가져와서 필요에 맞게 바꿀 수 있다.
- Simply Me 는 개인용 페이지, Company 는 회사용 페이지, Band는 밴드용 페이지 템플릿 지원
- Webpage Try it Yourself 로 들어가보자
- 이 Webpage 가져와서 만들어볼것, 코드 그대로 가져오자
- webpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
프로젝트 시작 (개요)
위의 내용을 응용을 해서 네비게이션에 나타나는 내용을 바꾸자
1. About, Projects, Contact > 게시판, 회원관리, 로그인 으로 변경
2. 각 네비게이션 메뉴를 누르면 맞는 화면이 center영역에 나타도록하자
- 회원가입 버튼을 누르면 회원가입 폼, 로그인을 누르면 로그인 폼, 게시판 누르면 게시판 폼 이 center영역에 나타나도록 하자.
- 공통적으로 들어가는 내용(네비게이션, 푸터) 부분을 고정하고, 본문내용만 바꾸자
- 그것을 위해서 header와 footer를 파일로 만들어서 따로 빼고 jsp의 include 를 통해 넣는 분리작업을 해야한다.
- 상단의 네비게이션 메뉴까지를 따로 파일로 만들자 -> header.jsp
- 하단의 footer 부분을 따로 파일로 만들자 -> footer.jsp
3. header 부분과 footer 부분을 분리
- 헤더부분
- 푸터부분
프로젝트
1. 새로운 프로젝트 myhome 프로젝트를 만들자
- File-New-Dynamic Web Project
2. myhome/WebConent 하위에 index.jsp 라는 파일 생성
- index.html 에는 webpage.html 의 내용을 모두 복붙한다. (맨 위 2줄 jsp부분 제외)
index.jsp
3. index.jsp 내용 수정
- 회원가입, 로그인, 게시판에 링크 연결
- a href= 에 # 대신 index.jsp 와 memberform.jsp, loginform.jsp, boardform.jsp 로 연결한다.
4. myhome/Webcontent 에 header.jsp 와 footer.jsp 파일 생성 후 작성
- index.jsp 파일의 header 부분을 잘라서 header.jsp 파일에 복붙
- 기존의 내용은 주석으로 막기
- header와 footer 모듈을 만드는 과정이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li><a href="memberform.jsp">회원가입</a></li>
<li><a href="loginform.jsp">로그인</a></li>
<li><a href="boardform.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
- index.jsp 에서 이 부분을 복사를 하고 , index.jsp 파일 에서는 이 부분을 주석을 막음
- 이 부분을 header.jsp 의 1,2라인을 제외한 곳에 붙여넣기 한다
- header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li><a href="memberform.jsp">회원가입</a></li>
<li><a href="loginform.jsp">로그인</a></li>
<li><a href="boardform.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
5. header.jsp 파일을 index.jsp에서 불러오기
- 마치 그 자리에 있는것처럼 포함됨
<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>
- index.jsp 파일에 이 include 코드를 넣으면 마치 이 자리에 header.jsp의 내용이 있는것 처럼 작동함
- 내용이 많이 들어있을때 스크롤링을 하게되는데, 이때 배경 이미지를 같이 움직일건지, 고정하고 내용만 움직일건지 설정
- 속성값 : scroll, fixed
스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제1
1. 배경이미지를 같이 스크롤링
- background_attachmentScroll.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll; /* 배경 이미지 스크롤링 */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 스크롤링시 배경이미지도 같이 스크롤링 된다 (움직인다)
- 스크롤을 아래로 내리면 배경이미지(산 그림) 이 없어진 것을 보고 움직였음을 알 수 있다.
스크롤링시 배경이미지 같이 스크롤링 할 것인지 고정할 것인지 설정하는 속성 예제2
2. 배경이미지를 고정
- background_attachmentFixed.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed; /* 배경 이미지 고정 */
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 배경이미지 고정하려면 background-attachment : fixed; 속성값을 준다.
- 스크롤링 해도 배경 이미지는 고정되어있다
- 아래로 스크롤링해도 산 모양이 계속 나옴을 통해 배경 이미지는 움직이지 않음을 알 수 있음.
배경 이미지 위치 설정 속성
- backgrount-position 속성으로 설정함
- 한쪽방향으로만 위치를 설정할 수도 있고, x축, y축에서 떨어진 간격을 통해 위치를 설정할 수도 있다.
- 위쪽에 배치시 top, 아래쪽에 배치시 bottom, 왼쪽에 배치시 left, 오른쪽에 배치시 right
- 반복이 안되도록 no-repeat 이어야만 위치 설정 가능함, 반복이 되면 위치 제어 불가
배경 이미지 위치 설정 속성 예제1
1. 한쪽방향으로만 위치를 설정
- background-positionBottom.html
- 배경 이미지를 브라우저 하단에 배치하는 예제
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
- 배경 이미지(산 그림)가 하단 영역에 나타난다
배경 이미지 위치 설정 속성 예제2
2.한쪽방향으로만 위치를 설정
- 방금은 한쪽 방향(y축방향)으로만 위치를 설정했지만 정교한 위치 설정을 하려면 x축, y 축 다 설정 가능
- x축 떨어진 간격, y축 떨어진 간격을 통해 위치를 설정 가능
- background_positionEach.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
font-family:
background-color: #E7E7E8;
background-image: url('BackgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Suspendisse convallis orci a justo gravida et fringilla nulla commodo. Morbi laoreet ante quis massa ullamcorper quis viverra leo semper. Donec velit mauris, sodales ut interdum eget, imperdiet vel tellus. Aenean tincidunt feugiat ipsum, sit amet placerat nunc venenatis eget. Sed iaculis ultricies enim. Praesent sed libero diam. Quisque eu ante ultrices enim vulputate laoreet. Ut vitae elit nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas gravida erat ut est rhoncus pulvinar.</p>
<p>Vestibulum mollis, ipsum eu ultrices commodo, metus mi tristique leo, at lacinia magna mi non justo. Suspendisse consequat, justo dictum scelerisque rutrum, mi massa placerat enim, in dictum dolor tellus vel justo. Suspendisse molestie dapibus augue quis cursus. Fusce volutpat, sapien eget fermentum congue, turpis est convallis urna, ac cursus diam ligula eu orci. Donec libero lacus, venenatis ac tempus sit amet, pretium in purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus aliquam nisi a venenatis. Mauris porttitor purus ut felis dapibus et adipiscing ante bibendum. Aenean rutrum leo lorem.</p>
<p>Fusce ante augue, rutrum sit amet malesuada nec, accumsan et metus. Duis eros est, fermentum sit amet posuere a, venenatis in est. Nulla scelerisque turpis a magna tincidunt placerat. Nullam vehicula arcu eu massa cursus scelerisque. Sed vitae volutpat elit. Sed tincidunt est at ipsum porttitor ut luctus metus accumsan. Cras sollicitudin eros quis quam adipiscing quis tempus tortor lacinia. Vestibulum sit amet odio tortor, ut molestie dolor. Aliquam erat volutpat. Integer malesuada sem non velit molestie sed adipiscing risus feugiat. Ut ullamcorper, velit sed facilisis lacinia, ante odio laoreet mauris, nec tempor lectus ipsum non dui. Suspendisse porta convallis sem, in consectetur risus porta a. Cras dignissim velit eu urna aliquam varius. Nullam tempus scelerisque metus non ultrices.</p>
<p>Duis non orci erat. Mauris at dolor dolor. Nam porta placerat magna at posuere. Mauris at metus nisi, ut sodales nulla. Duis felis eros, lacinia id ultricies at, rhoncus non mi. Proin est arcu, vehicula nec tempus vel, cursus ac neque. In nec mauris velit. Sed tincidunt dapibus nibh, quis accumsan dui rhoncus vitae. Quisque convallis convallis lacus ut tempor. Duis vehicula ligula sit amet eros vestibulum tempor sit amet et leo. Praesent pellentesque accumsan iaculis. Fusce quis libero nisl, nec cursus nisi. Praesent auctor venenatis pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet odio vel nisi scelerisque sagittis sit amet a dui. Nullam scelerisque libero at nibh placerat hendrerit.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_arial { font-family: Arial; }
.font_roman { font-family: 'Times New Roman'; }
</style>
</head>
<body>
<h1 class="font_arial">Lorem ipsum</h1>
<p class="font_roman">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Font Property</title>
<style>
.font_big { font-size: 2em; }
.font_italic { font-style: italic; }
.font_bold { font-weight: bold; }
.font_center { text-align: center; }
.font_right { text-align: right; }
</style>
</head>
<body>
<p class="font_big font_italic font_bold font_center">Lorem ipsum dolor amet</p>
<p class="font_bold font_right">2019.07.10</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada felis id massa adipiscing eget pellentesque ipsum lacinia. In orci massa, venenatis quis ultrices ac, accumsan vitae nunc. Sed eget pellentesque enim. Maecenas eros risus, hendrerit eget lacinia nec, mollis nec velit. Mauris sem mi, molestie sed bibendum eu, blandit et ante. Pellentesque vel mauris et mauris ornare pharetra. Etiam scelerisque pulvinar diam posuere ultrices. Duis et enim at velit ultricies cursus a at felis. Phasellus sit amet est hendrerit lorem convallis consequat ac ut massa. Aliquam luctus porttitor lacus id hendrerit. Nulla facilisi. Aliquam dictum tempus augue, eu tempor dui varius et. In pretium ultricies dapibus.</p>
</body>
</html>
- 레이아웃을 잡을 때, 이렇게 가운데 부분에서 맨 왼쪽은 left, 가운데는 left로 해서 맨 왼쪽 다음에 오도록 배치하고, 가장 오른쪽은 right로 배치
- 전체적인 레이아웃을 배치할때 float 속성을 많이 사용한다.
float 속성 예제1
+ float값을 설정하지 않았을때 예제
- float_basic.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
</style>
</head>
<body>
<img src="hanbit.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>
- float 속성을 쓰지 않고 이미지를 출력했다.
- 로고이미지가 가장 위에 배치되고 나머지 텍스트 내용들이 줄이 바뀌어서 아래쪽에 나타난다.
float 속성 예제2
float 값을 설정했을때 위치
- float : left; 설정해서 왼쪽에 배치시키기
- float_image.html
<!DOCTYPE html>
<html>
<head>
<title>Float Style Property</title>
<style>
img {
float: left;
}
</style>
</head>
<body>
<img src="hanbit.jpg"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis enim vitae est elementum euismod. Duis lobortis euismod nunc a dapibus. Proin nulla enim, adipiscing ac pharetra quis, vehicula a mauris. Maecenas nec tellus metus. Fusce sollicitudin facilisis orci, vel fringilla nisi molestie lobortis. Suspendisse dapibus dapibus semper. Duis ac purus nulla. Quisque elementum nibh non ipsum feugiat placerat. Cras tristique urna non urna hendrerit lacinia. Pellentesque porta velit ut felis faucibus in mollis purus malesuada. Duis porta, nulla sed suscipit elementum, arcu mi consectetur enim, id auctor risus enim a metus. Phasellus lorem quam, suscipit a congue vel, viverra eu nisi. Mauris ac felis lorem.</p>
</body>
</html>
- float : left; 가 되어 이미지가 왼쪽에 배치되고, 나머지 본문 내용들은 이미지의 오른편에 배치되어 나타난다.
float 속성 예제3
float 값을 설정했을때 위치
- float : right; 로 수정해서 오른에 배치 (코드 수정)
- 수평방향으로 배치할때 주로 float : left , float : right 를 쓴다.
- 공통적인 속성은 div.container를 이용해 적용하고 개별은 div.item 으로 적용하고 있다.
- div.container 는 "div 태그에서" class=container 불러와야만 적용이 된다!
- div.item 은 "div 태그에서" class=item 불러와야만 적용이 된다!
- overflow 는 부모인 container 에 적용함, 이 container를 넘어가는 값이 있으면 보여주지 않도록 hidden 으로 설정
- 각 item들은 float : left; 에 의해 수평 배치, 메뉴 - 1 이 먼저 나오므로 가장 먼저 적용되어 가장 왼쪽에 배치된다.
- 나머지는 메뉴 - 2, 메뉴 - 3, 메뉴 - 4 순으로 왼쪽부터 오른쪽으로 배치되고 있다.
+ margin : 0 3px ; (위쪽과 아래쪽이 0px, 왼쪽과 오른쪽이 3px)
중앙 정렬
- margin : 0 auto ; 로 설정시 전체 내용이 브라우저 가운데 배치된다.
- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.
- 전체 내용을 브라우저 가운데 배치할때 사용하는 속성
- 많이 쓰는 속성이다.
중앙 정렬 예제1
- example_2.html
<!DOCTYPE html>
<html>
<head>
<title>Margin Width</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body {
margin: 0 auto; /* 중앙 정렬 */
width: 700px;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<h2>Neque porro quisquam est qui...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat vehicula erat vel hendrerit. Etiam in est dolor, non pretium justo. Aliquam eu ipsum diam, sed dictum ante. Nunc pellentesque semper cursus. Nam aliquet consequat sapien id porttitor. Proin quis pharetra urna. Nam risus arcu, tincidunt quis imperdiet in, ullamcorper in sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vestibulum enim gravida sapien vehicula id consectetur ipsum gravida. Nulla porta consequat velit vitae elementum.</p>
<p>Nullam neque quam, blandit eget venenatis at, viverra vitae metus. Pellentesque quis ligula turpis. Nulla at justo est, id egestas mauris. Phasellus nec nunc egestas magna iaculis rhoncus. Praesent ut risus tellus. Ut pretium hendrerit vehicula. Donec id felis quis neque ornare facilisis. Praesent dictum orci quis metus vestibulum vitae vulputate sapien luctus. Aliquam pellentesque urna id nunc aliquam aliquam quis sed nunc. Sed rhoncus accumsan dolor, ut interdum quam ultricies in. Morbi venenatis nisi a nunc porta tempus. Vestibulum hendrerit posuere consequat. Nam eleifend malesuada est at dictum. Mauris sit amet nisi lobortis dolor consequat ullamcorper.</p>
</body>
</html>
- * (all tags) 모든 태그에 대해 margin : 0; padding : 0;을 준다 -> 모두 왼쪽 위에 배치됨
- body 에 대해 margin : 0 auto; 를 주면 body 태그 모든 내용이 가운데 배치가 됨.
- 주로 가장 바깥쪽의 div에 margin : 0 auto; 설정해서 전체가 중앙 정렬시킨다.
- 제목 및 본문이 모두 가운데 정렬되어있다.
+ margin : 0 auto; 를 없애면?
- 좌측 상단부터 출력됨
중앙 정렬 예제2
- 3-layout.html
- #container는 가장 바깥쪽의 div에 적용되었음
- margin : 0 auto; 로 인해 container 안의 모든 내용이 가운데 나타남
- 가운데 배치되어있다
One True 레이아웃
- 포털사이트에서 많이 쓰는 메인 페이지 레이아웃
- 행을 독립적으로 생각해서 공간을 나눔
One True 레이아웃 예시
One True 레이아웃 예제
- example_3.html
<!DOCTYPE html>
<html>
<head>
<title>One True Layout</title>
<style>
body {
width: 500px;
margin: 10px auto; /* 중앙 정렬 */
}
#middle { overflow: hidden; }
#left { float: left; width: 150px; background: red; }
#right { float: left; width: 350px; background: blue; }
#top { background: green; }
#bottom { background: purple; }
</style>
</head>
<body>
<div id="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
<div id="middle">
<div id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut.</div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus.</div>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum.</div>
</body>
</html>
- 전체 폭 width는 500px 으로 했고 margin: 10px auto; 가 중앙정렬 해주고 있다
- 상단에 나타날 내용을 id=top, 하단에 나타날 내용을 id=bottom으로 했다, 배경색 외 따로 설정 안함
- 가운데 영역 middle은 왼쪽 left 와 오른쪽 right 두가지로 나눠져 있다
- middle의 overflow : hidden; 이므로 넘쳤을때 보이지 않도록 하겠다
- left 선택자에서 float : left; 이므로 먼저 왼쪽에 배치됨, width값이 150px
- right 선택자에서 float : left;이므로 쌓여서 배치됨, width값이 350px
-> #middle 의 left , right 박스에는 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.
- 상단에 글 , 좌측에 사이드, 우측에 본문, 하단에 글 이 출력됨
- top과 bottom 은 전체가 꽉 찬 형태로 출력
- 가운데 왼, 오른쪽은 hidden에 의해 글자들이 넘치더라도 보여주지 않음, 글이 잘리고 있다.
- 가장 바깥쪽 div에 적용할 #container 는 position : relative; 로 설정한다
-> container 는 상대적인 위치로 위치 설정됨, 상대적인 위치의 기준은 바로 위의 Dummy Text 텍스트
- .circle에서 width=100px; height=100px로 가로길이와 세로길이가 동일하므로 정사각형이 되고, border-radius : 50% 50%으로 하면 원이 된다.
- .circle의 position은 바로 바깥쪽 div를 기준으로, 즉 container를 기준으로 왼쪽에서 얼마, 위에서 얼마 떨어질지 결정한다
+ position 속성 추가
position : relative;
- 그자체로는 특별한 의미가 없다.딱히 어느 위치로 이동하지는 않고 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
position : absolute;
- 요소에 적용하면 특정 부모에 대해 절대적으로 움직이게 된다. 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여한다.
요소의 중앙 배치
- example_5.html
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
/* 초기화 */
* { margin: 0; padding: 0; }
/* 주제 */
body { background: red; }
#container {
/* 색상 및 크기 적용 */
width: 500px; height: 250px;
background: orange;
/* 위치 설정 */
position: absolute;
left: 50%; top: 50%;
margin-left: -250px;
margin-top: -125px;
}
</style>
</head>
<body>
<div id="container">
<h1>요소의 중앙 배치</h1>
</div>
</body>
</html>
- 안의 div 박스의 width : 500px, hegith : 250px, 오랜지색
- position : absoulute; 이고 left : 50%, top : 50% 에 의해 왼쪽에서 50%, 위에서 50% 떨어져서 정가운데(정중앙) 배치가 된다.
- margin-left 는 왼쪽에서 부터 떨어진 간격을 의미하는데 음수값이다. 음수값은 방향을 의미하기때문에 음수값을 넣으면 왼쪽으로 이동함
- margin-top 은 위에서부터 떨어진 간격을 의미하는데 음수값이므로 위쪽으로 배치가 올라감
margin-left 와 margin-top 을 빼면?
- 기준점 기준으로 left : 50%; right : 50% 되므로 요소를 정 가운데로 이동하고 싶다면 margin-left 와 margin-top 음수값을 이용해야한다.
요소 고정 (고정바 배치)
- 특정 div 박스의 position 값을 fixed로 하면 고정이 된다
- 고정이 되면 스크롤링이 되어도 움직이지 않음
- example_6.html
<!DOCTYPE html>
<html>
<head>
<title>Fixed Bar</title>
<style>
.container {
margin-top: 50px;
margin-left: 50px;
}
.top_bar {
background: red;
position: fixed;
left: 0; top: 0; right: 0;
height: 50px;
}
.left_bar {
background: blue;
position: fixed;
left: 0; top: 50px; bottom: 0;
width: 50px;
}
</style>
</head>
<body>
<div class="top_bar"></div>
<div class="left_bar"></div>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elit elit, ornare non elementum ut, imperdiet nec felis. Proin leo felis, congue vitae facilisis id, ullamcorper vitae ipsum. Integer a risus sed libero imperdiet lacinia vel vel massa. Vestibulum tempus ullamcorper tellus vitae gravida. Donec cursus, enim at porta auctor, purus sapien luctus erat, vitae placerat ante nibh eget lectus. Integer a leo sit amet neque suscipit commodo sed et mauris. Nullam a turpis nunc. Ut metus risus, scelerisque ac dignissim non, faucibus ac metus. Vivamus molestie ultrices luctus. Cras pellentesque malesuada magna interdum feugiat. Nam condimentum massa et lectus elementum ac congue nibh mollis. Proin adipiscing nisi et neque fermentum ornare.</p>
</div>
</body>
</html>
- 상단의 .top_bar 는 상단바를 만들어주며 position : fixed; 가 적용되므로 고정이 되어 스크롤링 해도 움직이지 않는다
- 상단의 .top.bor 의 height가 50px이므로 두께(세로높이)가 50px
- 좌측의 .left_bar는 좌측바를 만들어주며 position :fixed; 가 적용되어 고정이 되어 스크롤링 해도 움직이지 않는다.
- 좌측의 .left_bar 의 weight가 50px이므로 두께(너비)가 50px
- 좌측의 .left_bar 의 top : 50 px 을 통해서 위에서 50px떨어진 곳 부터 바가 시작한다.
- 또한, .container의 margin-top : 50 px, margin-left : 50px을 통해 바가 있는 곳이 아닌 곳부터 본문을 출력함
- 상단바(red), 좌측바(blue)
- 스크롤바를 움직여도 좌측바와 상단바는 움직이지 않
내용이 넘쳤을때 ... 으로 생략 표시해주는 속성
- text-overFlow : ellipsis; 하면 글자를 ... 으로 생략해줌
내용이 넘쳤을때 ... 으로 생략 표시해주는 속성 예제
- example_7.html
<!DOCTYPE html>
<html>
<head>
<title>Ellipsis</title>
<style>
h1, p {
width: 300px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1 class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>
- white-space : nowrop; 내용이 많을때 줄을 바꾸지 않게 하는 속성
- overflow : hidden; 이므로 넘칠때 보여주지 않게 설정, 넘치는 내용을 아예 나타나지 않게함
- text-overflow : ellipsis; 하면 넘친 내용을 ... 으로 보여줌
- 글의 내용이 영역을 넘치고 있다.
- text-overflow : ellipsis;에 의해 넘친 부분이 ... 으로 표시되고 있다.
text-overflow : ellipsis; 가 없다면?
overflow : hidden; 이 없다면?
- 그냥 출력시킴
2단 레이아웃
- 2단으로 레이아웃을 잡음
- 2-layout.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 레이아웃</title>
<style>
div {
border: 1px solid #ccc; /* 모든 영역에 테두리 표시 */
}
#container {
width:960px; /* 컨테이너 너비 */
padding:20px; /* 패딩 */
margin:0 auto; /* 화면 중앙에 배치 */
}
#header {
padding:20px; /* 패딩 */
margin-bottom:20px; /* 아래 요소들과의 간격(마진) */
}
#contents {
width: 620px; /* 너비 */
padding: 20px; /* 패딩 */
float: left; /* 왼쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
}
#sidebar {
width: 220px; /* 너비 */
padding: 20px; /* 패딩 */
float: right; /* 오른쪽으로 플로팅 */
margin-bottom: 20px; /* 아래 요소와의 간격 */
background:#eee;
}
#footer {
clear:both; /* 양쪽 플로팅 해제 */
padding:20px; /* 패딩 */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="sidebar">
<h2>사이드 바</h2>
<ul>
<li>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.</p>
<p>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>
</div>
<div id="footer">
<h2>푸터</h2>
<p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
</div>
</div>
</body>
</html>
- 공통적으로 적용할 내용은 div 태그 전체에 대해 적용할 div 태그 선택자에 넣었다.
- container id를 보면 전체적인 배치를 가로 960px, padding : 20px, margin : 0 auto 이므로 전체를 가운데 정렬
- #header 부분은 헤더 아래쪽의 마진을 20px로 설정
- 사이드바가 float : right; 로, 본문은 float : left;로 지정되어있기 떄문에 사이드바가 먼저 나온다고 해도 사이드바가 오른쪽에 무조건 배치됨
- footer에서는 위에서 float 속성을 썼으므로 clear 속성으로 양쪽을 해제해야만 따로 아래에 만들어짐, clear해주지 않으면 딸려서 올라감
- 제목 본문과 20px만큼 떨어져있다
- 이렇게 div 태그로 레이아웃을 잡을수도 있고, 시맨틱 태그로 레이아웃을 잡을 수도 있다.
- HTML4까지는 전부 <div id=header> 이런식으로 레이아웃을 잡았었다, HTML5로 오면서 따로 <header> 라는 시맨틱 태그가 추가됨
- <header> <footer> <article> <section> 등이 시맨틱 태그, 하지만 태그만으로는 효과가 없다.
- div태그나 시맨틱 태그 중 어느걸 써도 상관 없다
3단 레이아웃
- 3단으로 레이아웃을 잡음
- 3-layout.html
<!doctype html>
<html lang="ko">
<head>
<title>CSS 레이아웃 - 2단 레이아웃</title>
<meta charset="utf-8">
<style>
div {
padding:20px;
border:1px solid #ccc;
}
#container {
width:960px;
margin:0 auto;
}
#header {
padding:20px;
margin-bottom:20px;
}
#contents {
width: 490px;
float: left;
margin-bottom: 20px;
}
#left-sidebar {
width: 150px;
float: left;
margin-bottom: 20px;
margin-right: 20px;
}
#right-sidebar {
width: 150px;
float: right;
margin-bottom: 20px;
}
#footer {
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="left-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="contents">
<h2>본문</h2>
<p>예비비는 총액으로 국회의 의결을 얻어야 한다. 예비비의 지출은 차기국회의 승인을 얻어야 한다. 이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>
<p>국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.</p>
<p>모든 국민의 재산권은 보장된다. 그 내용과 한계는 법률로 정한다. 대한민국의 국민이 되는 요건은 법률로 정한다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는 법원은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.</p>
</div>
<div id="right-sidebar">
<h2>사이드바</h2>
<ul>
<li>항목1</li>
<li>항목2</li>
<li>항목3</li>
<li>항목4</li>
</ul>
</div>
<div id="footer">
<h2>푸터</h2>
<p> 저작권 정보 </p>
<p> 연락처 등 </p>
</div>
</div>
</body>
</html>
- 왼쪽 사이드바 float : left; 본문 float : left;, 오른쪽 사이드바 float : right; 로 해줘야 이렇게 3단으로 배치된다.
- #continaer에서 width: 960; 하고 margin:0 auto;를 통해 전체 내용을 전부 가운데 배치한다, 브라우저를 늘리든 줄이든 가운데 배치된다.
- 본문 #content 에서 float : left;지만 left side bar가 먼저 나왔기떄문에 먼저 왼쪽에 배치되고 거기에 이어서 본문이 상대적으로 오른쪽으로 배치됨
- css 잘 적용되었는지, margin 과 padding을 확인 하기 위해 개발자 도구(F12)에서 확인해볼 수 있다
+ 파이썬 크롤링할때도 F12를 눌러서 어떤 선택자로 되어있는지 확인해야함
chapter_8 공부
반응형 웹 관련
반응형 웹
- 반응형 웹 페이지 : 접속하는 단말기에 맞게끔 다르게 보여주는것
- 한개의 페이지를 잘 만들어 놓고 사용자가 PC로 접속할때나 모바일로 접속할때에 맞춰서 보여주는 웹
+ 반응형 웹인지 아닌지는 확대나 축소를 시켜보면 안다
+ 네이버는 반응형 웹을 만들지 않고 모바일 접속시m.naver.com 처럼 모바일용 웹 따로 만들었다.
+ 네이버는 반응형 웹이 아니다
네이버 페이지(PC)네이버 모바일 페이지
+ 오라클 웹페이지는 반응형 웹
+ 부트스트랩은 기본적으로 반응형 웹 지원
- 확대나 축소시 화면이 변한다
반응형 웹 만들기
- 일반적인 페이지를 만들때 쓰지 않는 속성들을 설정해야만 반응형 웹 만들 수 있다.
- 이 두가지를 반드시 설정해야함
1. head 태그 안의 meta 태그를 이용해서 viewport를 설정
2. 미디어 쿼리 설정
1. head 태그 안의 meta 태그를 이용해서 viewport를 설정
- viewport 설정시 속성들 설정해야 반응형 웹 만들 수 있다.
- name : viewport 를 해야하고 단말기에 맞게끔이 코드가 들어가야함
- 기본적으로 자주 쓰는 속성들 정해져 있다.
2. 미디어 쿼리 설정
- 해상도 등 설정할떄 미디어 태그로 설정함
- 해상도 설정시 미디어태그를 써야만 그걸 이용해서 반응형 웹에서 해상도 설정 가능
- 모니터와 프린터 구분 등도 가능하다.
- 화면 출력시 red로, 프린트 단말장치로 출력시 green으로 출력하라는 의미
반응형 웹 만들기 예제
미디어 쿼리 예제1
- 반응형 웹 만들때 반드시 설정해야하는 속성 중 미디어 쿼리 예제
- media_feature.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Web Basic</title>
<style>
@media (max-width: 499px) {
body { background: red; }
}
@media (min-width: 500px) and (max-width: 799px) {
body { background: green; }
}
@media (min-width: 800px) {
body { background: blue; }
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>
- @media 는 미디어 태그라고 한다
- max-width : 499px일때 배경색은 red로 설정
- 또한 500 px ~ 799 px 일때 배경색은 green으로 설정
- min-width : 800px일때 배경색은 blue
- 그냥 실행시 (100%화면에서) 해상도가 800px이 넘어가므로 배경색이 blue
- 250%까지 확대되어 해상도가 799px보다 작고 500px보다 클떄는 배경색이 green
- 해상도가 499px 이하일때 배경색이 red
- 모바일로 접속시 해상도가 작아서 이렇게 빨간색으로 뜸
- 단말장치 크게에 따라서 다른 속성을 적용할때 @media (미디어 태그)를 사용한다
+ 모바일 장치처럼 실행해보자
- localhost 자리에 자기 컴퓨터 ip주소로 접속해보기
- 모바일로 접속시 배경이 빨간색으로 뜸
@media 의 operation 속성
- @media 에서 스마트폰은 세로로 길게 볼수도 있고 옆으로 눕혀 볼수도 있고 가로로 볼수도 있다
<!DOCTYPE html>
<html>
<head>
<title>Media Feature</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
/* 세로 방향 */
@media screen and (orientation: portrait) {
body {
background-color: red;
}
}
/* 가로 방향 */
@media screen and (orientation: landscape) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus hendrerit nunc at consectetur. In hac habitasse platea dictumst. Ut a luctus neque, et tempor erat. Aliquam quis arcu id lectus fringilla volutpat id tempor lorem. Duis vitae odio vehicula dui vulputate mollis et sit amet mauris. Nulla facilisi. Praesent non sapien ac sapien malesuada ornare eget at libero. Aenean et faucibus arcu, id maximus mi. Curabitur tincidunt mi vitae orci porttitor, quis laoreet justo iaculis.</p>
</body>
</html>
- viewport 속성을 넣고 화면에 맞게끔 출력하겠다고 표시함
- orientation 은 방향을 의미하고
- orientation : portrat 는 세워져있을때를 의미, 배경색 red
- orientation : landscape는 눕혀져 있을때를 의미, 배경색 green
- PC로 접속시 가로 방향 기준으로 나온다
- 스마트폰 단말장치로 접속
스마트폰 : 세로방향스마트폰 : 가로방향
반응형 웹 패턴
1. 데스크톱에서는 메뉴가 왼쪽에 있고, 모바일 장치에서는 메뉴가 위쪽에 있는 패턴
ex)
- 왼쪽은 PC로 접속했을때, 오른쪽은 모바일 장치로 접속했을때dlek
- 왼쪽의 창에서는 메뉴가 좌측에 나타나고 오른쪽의 창에서는 메뉴가 상단에 나타남.
반응형 웹 패턴 예제
- pattern1.html
<!DOCTYPE html>
<html>
<head>
<title>패턴1</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />
<style>
* {
margin:0;
padding: 0;
}
body {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#menu {
width: 260px;
float: left;
}
#section {
width: 700px;
float: right; /* left로 입력해도 상관 없습니다. */
}
@media screen and (max-width: 767px) {
/* 스마트폰 사이즈에서는 전부 해제합니다. */
body { width: auto }
#menu { width: auto; float: none; }
#section { width: auto; float: none; }
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>메뉴A</li>
<li>메뉴B</li>
<li>메뉴C</li>
</ul>
</div>
<div id="section">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed turpis luctus laoreet. Fusce auctor maximus finibus. Nam ac dictum velit. Donec sit amet bibendum erat. Sed varius arcu est. Nullam maximus, libero id sollicitudin malesuada, nunc nunc varius neque, eu rhoncus dui nunc ac felis. Integer sit amet turpis metus. Nam id efficitur velit. Mauris suscipit, odio et dictum fermentum, nulla orci fermentum quam, a condimentum magna justo dictum leo. Aenean et odio mattis, maximus elit sed, fringilla est. Sed eget purus sit amet arcu elementum aliquet in eu mi. Donec dui tortor, viverra in fermentum ut, aliquam ac ipsum.</p>
</div>
</body>
</html>
- PC 접속시 #menu가 float : left 이고, #section이 float : right ; 이므로 본문이 수평으로 오른쪽에 배치됨
- 최대 해상도가 max-width : 767px 인 경우에는, 즉 767px보다 작은 경우엔 속성들을 전부 auto, none으로 해제함으로서 PC화면의 배치 (메뉴는 왼쪽에, 본문은 오른쪽에) 를 해제함
- 모바일 화면일때는 width값이 auto이므로 내용이 부족하면 아래쪽으로 내려오게 되는 것임.
- PC로 봤을때 : 메뉴가 좌측에 있음
- 스마트폰으로 봤을때 : 메뉴가 상단으로 올라감
+ 프론트엔드는 신경쓸게 많다
- 브라우저 종류에 따라서도 보여주는 내용이 달라짐
- 스마트폰 기종에 따라서도 보여주는 내용이 달라짐
부트스트랩
부트스트랩 (Bootstrap)
- CSS 라이브러리를 제공하는 CSS 프레임워크
- CSS를 쉽게 쓸 수 있도록 외부 CSS 파일을 만들어서 제공함
- Bootstrap은 2010년 중반에 트위터 개발자 중 @mdo와 @fat을 사용하는 개발자가 만든 오픈소스 프레임워크 - 프레임워크란 "짜여있는 작업" 이란 뜻으로, 부트스트랩은 HTML, CSS, JavaScript 및 다양한 UI 컴퍼넌트로 구성
- <head> 태그 안의 내용이 정해져있다 - style 태그로 CSS의 시작을 표시해야 브라우저가 이게 CSS 코드임을 인식함
- 위 예제에서 h1태그는 css적용되지 않았으므로 기본적인 형태로 나타남
구조
- 2개의 속성 연결할때는 세미콜론으로 구분
- h2 : 선택자 자리, 지금은 태그 h2를 의미 - 그리고 {} 안에 속성 : 값; 들이 있다
- body 태그안의 모든 h2태그에 대해서 이 속성들이 적용됨
- 선택자 자리에 이상한 기호가 오거나 여러개 오는등 선택자를 잘 이해해야함
속성 - font-family : 글꼴 - font-size : 글자 크기 설정 - color : 글자 색
+ html 의 font태그와 비슷한 역할 하고 있다, css를 쓰면 한꺼번에 효과 낼 수 있다
+ /* */ 이 주석, 주석 해제는 잘 안됨 + Ctrl + Shift + / : 주석 처리
CSS 예제2
- css02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 선택자가 컴마(,)로 분리되어 있으면 모두(h2,p) 동일한 CSS의 적용을 받는다.-->
<style type="text/css">
h2, p {
font-family: "arial black";
font-size: 18pt;
color: gold;
}
</style>
</head>
<body bgcolor="#990099">
<center>
<h2>
css에 대한 예제
<hr>
</h2>
<h2>The Fun Corner</h2>
<br>
<p>The Street Fair</p>
</center>
</body>
</html>
css02.html 출력
- 선택자두개가 , 로 연결되어있다 (순서 무관) - h2태그와 p태그가 , 로 연결
-> h2태그, p태그 모두 동일한 css 적용
- 중괄호 열고 적용할 속성 쓰기
- 이 h2태그에 대해 css가 적용되어서 컬러 gold, 18pt ,글꼴 arial black으로 나타남
- 모든 내용은 <center> 안에 들어가있으므로 가운데 배치됨
- : 추가한 것과 비례해서 공백이 벌어짐, 소문자여야만 함
배경색
<body bgcolor="#990099">
</body>
- body 태그 안에서 html 속성으로 배경색 적용
CSS 예제3
- css03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type=text/css>
h3 {
color: #ff1aff
}
h5 {
color: skyblue
}
h5 em { /* h5(부모) em(자식) */
color: white
}
</style>
</head>
<body bgcolor="blue">
<h3>
개봉 앞둔 애니메이션 <em>"포켓몬 3“</em>
</h3>
<hr>
<h5>
애니메이션 영화<em>“포켓몬 3”</em>의 홍보 인쇄물에 등장한 애쉬, 피카추 그리고 미스티의 모습입니다
</h5>
</body>
</html>
css03.html 출력
- h5와 em 사이가 , 가 아니라 띄어쓰기가 되어있다 -> 의미가 달라짐
h5 em { /* h5(부모) em(자식) */
color: white
}
- h5가 부모태그, em태그가 자식 태그 - 바깥쪽에 감싸주는 태그가 부모태그고 안에 있는게 자식 태그 이다 - 지금처럼 띄어쓰기가 있는경우에는 h5가 바깥쪽에 있는 em 태그만 컬러값을 white로 적용시켜라는 의미임 - h3안의 em 태그의 내용은 white가 적용되지 않는다
CSS 예제4
- css04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
점(.)으로 된 선택자를 불러올때는 class 속성으로 불러와야 된다.
ex) <h1 class=java>
<h1 class=script>
-->
<style type="text/css">
.java {
color: pink
}
.script {
color: skyblue
}
</style>
</head>
<body bgcolor="black" text="white">
<h3>css의 클래스 정의를 이용한 예제입니다</h3>
<h4 class=java>태그에 상관없이</h4>
<h4 class=script>class 속성으로 태그이름을 설정할 수 있습니다</h4>
<h2 class=java>태그에 상관없이</h2>
<h2 class=script>원하는 부분에 스타일을 적용합니다</h2>
</body>
</html>
css04.html 출력
- 선택자가 .java처럼 .으로 되어있다
- .(점) 으로 선택자 지정해서 css적용할때는 클래스 속성으로(class=) 불러야함 - 특정 태그들만 선택하여 적용했던 이전의 코드들과 다르게 한가지 태그가 아니라 .java가 적용된 태그는 모두 적용 가능하다 - 적용하고자 하는 body 태그 안의 모든 태그에 모두 적용 가능
+ 부트스트랩에선 대부분 . 으로 선택자들이 만들어져 있으므로 적용할때 class속성으로 적용해야한다.
- anchor 태그의 4가지 상태에 따라 나눠서 세부적인 CSS를 다르게 적용할 수 있다
ex) A:Link : anchor 태그의 상태 중 Link 상태일때 적용
- : 을 찍고 상태를 적어서 서로 다른 CSS를 적용시킴
위 예제 설명
1. 코드에서 link 상태일때 : none
2. 코드에서 hover 상태일때 : underline
3. 코드에서 visited 상태일때 : none
text-decoration 속성
- none : 선을 그리지 않음
- underline : 텍스트 밑에 선을 그려줌
- line-through : 텍스트 가운데 취소선을 그려줌
- overline : 텍스트 위에 선을 그려줌
+ 주로 anchor 태그에 적용을 많이 시킨다
anchor 태그의 4가지 상태
1. link 상태
- 기본으로 링크가 걸려있을때
- A : link { 속성 : 속성값 } 으로 적용
네이버 참고 (link 상태)
2. active 상태
- 링크가 걸린 라인을 마우스 왼버튼으로 "누르고" 있는 상태
- A : active { 속성 : 속성값 } 으로 적용
3. hover상태
- 누르진 않고 마우스 포인터가 올라간 상태 (손모양)
-A : hover{ 속성 : 속성값 } 으로 적용
네이버 참고 (hover 상태)
4. visited 상태
- 한번 방문하고 돌아왔을때
- A : visited{ 속성 : 속성값 } 으로 적용
네이버 참고 (visited 상태)
text-decoration 속성 예제2
- textdecoration.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<TITLE> 텍스트에 선 그려주기 </TITLE>
</HEAD>
<BODY BGCOLOR="white">
<H2> 텍스트에 선 그려주기 </H2>
<P STYLE="text-decoration: none"> 선을 그려주지 않습니다 </P>
<P STYLE="text-decoration: underline"> 텍스트 밑에 선을 그려줍니다 </P>
<P STYLE="text-decoration: line-through"> 텍스트 가운데 취소선을 그려줍니다 </P>
<P STYLE="text-decoration: overline"> 텍스트 위에 선을 그려줍니다 </P>
<P STYLE="text-decoration: underline overline"> 텍스트에 밑과 위 모두 선을 그려줍니다 </P>
</BODY>
</HTML>
- 인라인 방식을 사용하고 있다
textdecoration.html 출력
정리
- text-decoration 속성 : 하이퍼링크 밑줄 여부 제어
교재 학습
+ HTML/source/chapter_5, chapter_6, chapter_7 이 CSS 관련 내용이다
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
* { color: red; }
</style>
</head>
<body>
<h1>제목 글자 태그</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
</body>
</html>
- 선택자 자리에 * 가 온다
- 모든 태그, 즉 all tags 에 적용
default_wildcard.html 출력
- <body> 태그 안의 모든 태그들에 CSS 가 적용되어 red 로 나타나고 있다
선택자 예제3
- default_tag.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic Page</title>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>제목 글자</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
<p>Etiam lacus felis, ornare non lobortis ac, vehicula non diam. Integer pellentesque neque eget eros pulvinar pharetra. Maecenas gravida mi dui, at sollicitudin justo. Vestibulum pretium lacus lobortis arcu egestas dapibus. Sed nunc dui, adipiscing vitae mattis in, accumsan in neque. Sed pellentesque leo quis lorem posuere consequat. Duis sapien risus, rutrum ut ullamcorper et, accumsan a lorem. Ut metus est, varius eget molestie vitae, rutrum vitae ante. Quisque eu quam leo, et hendrerit lorem. Nullam nec risus sapien. Phasellus ut mauris eget justo mollis dictum. Nullam consectetur nibh at sem luctus mollis.</p>
</body>
</html>
- input[type="text"] : input type= 이 text인 "모든" 태그들을 불러와라는 의미 -> background : red
- input[type="password"] : input type= 이 password인 "모든" 태그들을 불러와라는 의미 -> background : blue
- type 이 있는 태그에서 특정 양식을 불러올때 사용되는 선택자다
attribute_basic.html 출력
후손 태그
- 부모태그, 자손태그(자식태그), 후손태그 가 있다
- 자식태그는 바로 아래의 태그들만 의미함
- 자식도 후손 태그에 포함됨
- 상속관계와는 관계 없다
선택자와 자식/후손태그
- 선택자A 선택자B : 왼쪽의 선택자 A태그가 부모태그가 되고, 오른쪽의 선택자 B태그가 후손태그 의미
- (자식태그 or 후손태그) 다 된다
- 만약 부등호기호(화살표)가 있을땐 자식태그만을 의미
자식태그와 후손태그 구분
선택자 예제6
후손 선택자/자손 선택자 예제1
- desc_decendants.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Selector Basic</title>
<style>
#header h1 { color: red; }
#section h1 { color: orange; }
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi risus, sollicitudin eget vehicula sed, eleifend suscipit neque. Proin rhoncus, ante vitae mattis consequat, libero nunc posuere justo, ut laoreet dolor nunc at dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum, lectus vestibulum laoreet tincidunt, nisi augue blandit risus, ut vestibulum erat dolor sit amet risus. Praesent semper consectetur mi eget auctor. Nulla facilisi. Duis bibendum massa in dui interdum sed tincidunt massa eleifend.</p>
</div>
</body>
</html>
