찾아보기 귀찮아서 적는 메모
1. firewall install
yum install -y firewalld
2. firewall port open
firewall-cmd --permanent --zone=public --add-port=8080/tcp
firewall-cmd --reload
3. port open list
netstat -tnlp
| [데이터베이스] mariadb 11.2.6 ubuntu jammy install (0) | 2024.12.06 |
|---|---|
| elasticsearch install logtash (0) | 2022.05.19 |
| CUBRID 11.2 설치 (0) | 2022.05.16 |
jQuery.com 사이트에서 다운 받기
버전 3은 최신 버전인데 아직 국내에서는 메인으로 사용하기 부담감이 있음
( 개발하기 위해서는 블로그에 IE 6/7/8을 위한 버전 1을 사용한다.)
<scripttype="text/javascript">
alert("상단");
</script>
이렇게 하여 상단 중앙 하단을 나눠준다.
<scripttype="text/javascript">
$(document).ready(fuction(){
alert("상단");
})
</script>
코드는 위에서 아래로 호출(실행)이 되는데
$(document).ready(fuction(){})
ready 사용함으로써 마지막에 뜨게 됨.
jQuery 밑에 javascript를 선언하게 되면 실행이 되지않는다.
html에서 f12를 눌러 확인하면 오류가 뜨게 됨.
$(document).ready(fuction(){})가 길다면
$(function(){})를 사용하여도 위와 같은 작동을 하게 된다.
<input type="text" id="txt1" value="text1" />
<input type="hidden" id="hdn1" value="hidden1" />
$(function(){
alert(document.getElementById("txt1").value);
})
일반 자바스크립트로 작성했을때 이렇게 위와 같이 작성하면 나온다.
text1의 값이 출력이 된다.
$("#txt1").val();
jquery는 위와 같이 바꿔서 사용한다.
위의 두가지 방법은 같다.
위의 내용을 변수로 저장한다면
var txt1 = $("#txt1").val();
이렇게 해주면 된다.
function 안의 값은 set이라고 보면되고
그냥 script안에 적은 값은 get이라고 보면된다.
속성값에 대한 get set을 보자면
$(function(){
$("#div1").attr("style","color:red;);
div1의 안의 글자의 색이 빨강으로 변함.
alert($("#div1").attr("style"))
div1인 styled의 속성을 가져온다라는 뜻
alert($("#div2").attr("class"))
div2인 클레스의 값을 가져온다라는 뜻
})
<div id="div1" style="display:block;"> 테스트1
<div id="div1" class="testDiv"> 테스트1
$("#div1").attr("태그의 속성 KEY명");
현재 적용되어 있는 스타일을 가져오는 것으로 get이다.
$("#div1").attr("태그의 속성 KEY명","스타일");
뒤에 스타일 값이 들어가면 set이다.
$("#node2").html("<h1>테스트</h1>");
을 하면 특정영역에 있는 html을 뽑아와서 적용시키고 뽑아낸다.
$("#node2").text("<h1>테스트</h1>");
을 하면 텍스트로 그냥 뽑아낸다.
1.input, select = val("SET값");
2.태그의 속성값을 알기 위한 함수는 = attr("속성명") => get
= attr("속성명","속성값") => set
3. 특정 html 영역의 html 값을 알고 싶다면 화면에 html()
html 코드자체를 화면에 출력시키고자 한다면 text() 사용하면 된다.
크롬에서 f12를(개발자모드) 누르고 별도의 창을 띄워서 오류를 확인하고
수정할 수 있다.
$(function(){
before(엘리먼트), after(엘리먼트), prepend(엘리먼트), append(엘리먼트)
특정 지정한 태그 전에 붙는건 before
특정 지정한 태그 이후에 붙는건 after
var html = '<div><h1>삽입된 레이아웃</h1></div>';
${"#layer1").before(html);
layer1 전에 html의 내용이 들어간다.
${"#layer1").after(html);
layer1 이후에 html의 내용이 들어간다.
prepend를 주면 최상단에 내용이 들어간다.
${"#layer2").prepend(html);
layer2에서 첫번째 레이아웃 앞에 삽입된 레이아웃 이라고 들어간다.
append를 주면 최하단에 내용이 들어간다.
${"#layer2").append(html);
layer2에서 세번째 레이아웃 뒤에 삽입된 레이아웃 이라고 들어간다.
})
<div id="layer1">
<h2> 첫번째 레이아웃 </h2>
</div>
<div id="layer2">
<h2> 첫번째 레이아웃 </h2>
<h2> 두번째 레이아웃 </h2>
<h2> 세번째 레이아웃 </h2>
</div>
셀렉터(선택자) 알아보기
JQuery 사이트에 들어가면 APIDocumentation들어가면
왼쪽에 selector 탭에 지정된 연산자들이 나온다.
$(function(){
$(".xxx") = class
$("#xxx") = id
위와 같은 방식으로 값을 가져 오는 것이다.
Var txt1 = $(".text1").val(); or var txt1=$("input[class=text1]").val();
두가지 방법을 사용 할 수있다. 클래스이기에 앞에 ( . ) 을 붙여서 사용할 수 있다.
Val()로 값을 가져온다.
Console.log(txt1); => system.out.println 과 같은 기능이다.
브라우저에서 값을 출력해 보기 위한 함수이다.
f12에서 console 탭에 가면 나오게 된다.
$("input[name=xxx]") => name으로 찾는 방식이다. 태그의 속성값 tag[속성키=속성값]
Var txt1 = $("input[name=textName1]").val();
Console.log(txt1);
})
<input type="text" name="textName1" class="text1" value="텍스트입니다." />
$(function(){
$("input[name=xxx]:cheched")
Var chechedRadio = $("input[name=rdo]:cheched").val();
Console.log(chechedRadio);
cheched가 붙은 특정 속성이 붙은 값을 선택하여 출력을 한다.
})
<input type="radio" name="rdo" cheched="cheched" value="첫번째" />
eq에 대한 설명
단일 값이 아닌
$(function(){
Console.log($(".class2").html());
밑에 값을 출력하여 본다.
})
<body>
<div class="class2">
<h2>값입니다1</h2>
</div>
<div class="class2">
<h3>값입니다2</h3>
</div>
</body>
이렇게 출력하면 첫번재인 값입니다1 을 출력하게 된다.
하지만 두번째 값을 출력하고 싶을때는
Var class2 = $(".class2:eq(1)").html();
Console.log(class2);
eq는 0부터 순차적으로 늘어나기 때문에 1을 줘야 2번째가 나온다.
class2인 태그에 두번째 속하는 html값을 가져온다는 뜻
input으로도 사용이 가능하다.
$(function(){
Var text = $("input[type=text]:eq(1)").val();
=> value이기 때문에 위에서 처럼 html을 주는게 아닌 val을 준다.
Console.log(text);
})
<input type="text" value="텍스트1" />
<input type="text" value="텍스트2" />
총 정리
Var id = $("#idText").val(); => 아이디 값을 가져오는 것이다.
<input type="text" id="idText" value="아이디입니다." />
답 : 아이디입니다.
Var cls = $(".classText").val(); => 클래스 값을 가져오는 것이다.
<input type="text" class="classText" value="클래스입니다." />
답 : 클래스입니다.
Var name = $("input[name=nameText]").val(); => name 값을 가져오는 것이다.
<input type="text" name="nameText" value="네임입니다." />
답 : 네임입니다.
Var radioCheck = $("input[name=chechedRadio]:cheched").val();
=> checked속성을 가지고 있는 라디오 값을 가져오겠다는 것이다.
<input type="radio" name="checkedRadio" value="라디오1" />
<input type="radio" name="checkedRadio" value="라디오2" check="checked" />
<input type="radio" name="checkedRadio" value="라디오3" />
답 : 라디오2
Var eqRadio = $("input[name=checkedRadio]:eq(2)").val();
또는$("input[name=checkedRadio]").eq(2).val(); 함수로 주어도 같은 방식이다.
=> name이 checkedRadio 중에 eq(2) 즉 3번째 값을 가져온다.
<input type="radio" name="checkedRadio" value="라디오1" />
<input type="radio" name="checkedRadio" value="라디오2" check="checked" />
<input type="radio" name="checkedRadio" value="라디오3" />
답 : 라디오3
확인 방법은
Console.log(값); 즉
Console.log(id);
Console.log(cls);
Console.log(name);
Console.log(radioCheck);
Console.log(eqRadio);
이렇게 주면 답과 같이 답이 나오게 된다.
스타일 제어하기
$(function(){
//css() 함수를 이용하여 스타일 제어하기
$("div:eq(0)").css("color","red");
=> 스타일 제어1 의 글자색이 빨간색으로 변하게 되고
html에서는 style="color:red"; 로 값이 들어가게 된다.
$("div:eq(0)").css("font-weight","bold");
=> 스타일 제어1 의 글자를 진하게 해주는 값이 적용된다.
위와 같은 방법으로는
$("div:eq(0)").attr("style","color:red; font-weight:bold;")
이렇게 주어도 위의 두가지가 같이 적용이 된다.
특정스타일을 바꿀때는 이렇게 사용하는게 편하고
소스가 많아 질 경우 정의하고 코딩하는 것이 편하다.
})
<div>스타일 제어1</div>
<div>스타일 제어2</div>
다른 방법으로는
<style type="text/css">
.sample1{
Color:red;
Font-weight:bold;
}
.sample2{
Color:green;
Font-weight:bold;
}
</style>
<script type="text/javascript">
$(function(){
클래스명을 지정된 셀럭터에 추가한다.
AddClass()
$("#sampleDiv1").addClass("sample1");
=> sampleDiv1이라는 아이디로 부터 sample1이라는 클래스를 추가한다라는 의미
없는 클래스를 추가하기 위해서 사용되는 것이다.
클래스명을 지정된 셀렉터로부터 지운다.
RemoveClass()
$("#sampleDiv2").removeClass("sample2");
=> sampleDiv2라는 아디이의 sample2라는 클래스를 제거 한다는 의미
클래스명이 지정된 셀럭터로부터 존하는지 여부를 판단한다.(true/false)
HasClass()
Var flag = $("#sampleDiv1").hasClass("sample1");
=> 내가 선택한 영역에 내가 지정한 클래스 명이 존재하는 지 판단하는 것
Console.log("클래스존재여부",flag);
위의 내용을 if문으로 응용을 한다면
If( $("#sampleDiv1").hasClass("sample1")){
$("#sampleDive1").removeClass("sample1");
}else {
$("#sampleDiv1").addClass("sample2");
}
=> sampleDiv1 아이디에 sample1 클래스가 있다면 sample1클래스가 지워질
것이고 없다면 sample2 클래스가 추가되는 조건식이다.
})
<div id="sampleDiv1">스타일 제어1</div>
<div id="sampleDiv2" class="sample2">스타일 제어2</div>
정리
트레벌징 이라는 함수에 대해 설명
내가 찾고자하는 테이블을 찾는 기능을 말한다.
$(function(){
Parent(), find(), prev(), next() 4가지의 대표적인것이 있다.
자식값들을 찾고자 할때 = find()
Var txt = $("table").find("#txt").val();
동일한 방법으로는
Var txt = $("table").find("tr:eq(0)").val();
Console.log("txt",txt);
=> table의 기준으로 그안의 아이디 값이 txt인 것을 찾는다.
부모 값들을 찾고자 할때 = parent()
Var html = $("#txt").parent().next().html()
Console.log(html);
=> 아이디가 txt인 태그의 상위 td에서 바로 직후의 값들을 뽑아내는 것이다.
즉 텍스트값1 부터 텍스트값4까지 출력이 된다.
여기서 두번째 값을 찾으려고 하면
Var html = $("#txt").parent().next().html().find(".txt:eq(1)").val();
=> class가 txt인 곳의 두번째 값 즉 텍스트값2 를 찾아내는것이다.
Var txt = $(".txt:eq(2)").prev().val();
=> class가 txt인 곳의 3번째 값의 바로 직전 값을 찾겠다는 것이다.
즉 텍스트값2 가 나온다.
Var txt = $(".txt:eq(2)").next().val();
=> class가 txt인 곳의 3번째 값의 바로 직후의 값을 찾겠다는 것이다.
즉 텍스트값4가 나온다.
Prev().prev() 를 두번 쓰면 그위로위로 값을 찾아오게 된다.
Var radioValue = $("#txt"),parent().parent().next().find("input[name=rdo]:checked").val();
Console.log(radioValue);
=> id가 txt인것부터 위로 부모 부모 즉 tr의 직후인 다음 tr에서 찾는데
input값이 rdo인 값에서 checked로 되어있는 값을 찾아내는 것이다.
또는 parent(). Parent(). Parent()를 세번써서 table까지 올라가서 거기서
Find() 하여서 값을 찾아가도 되는 방법이다.
})
<table>
<tr>
<td>
<input type="text" id="txt" value="텍스트값" />
</td>
<td>
<input type="text" id="txt" value="텍스트값1" />
<input type="text" id="txt" value="텍스트값2" />
<input type="text" id="txt" value="텍스트값3" />
<input type="text" id="txt" value="텍스트값4" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="radio" name="rdo" value="라디오 첫번째 값" />
<input type="radio" name="rdo" value="라디오 첫번째 값" checked="checked" />
</td>
</tr>
반복문 each문에 대해 설명
$(function(){
각각의 값을 뽑아낼때는
$("input[type=text]:eq(0)").val();
$("input[type=text]:eq(1)").val();
$("input[type=text]:eq(2)").val();
$("input[type=text]:eq(3)").val();
이렇게 각각의 값을 적어서 뽑아낸다.
그래서 쉽게 반복문을 사용하게 되는데
$("div").each(function(index){
Var txt = $("div").eq(index).find("input[type=text]").val();
다른방식으로는
Var txt = $(this)
$(this) = $("div").eq(index) 와 같은 의미를 가지고 있다.
즉
Var txt = $(this).find("input[type=text]").val();
이렇게 사용 할 수가 있다.
$(this) 는 div 영역을 가리키고 있는 것이다.
Console.log(txt);
$(this)가 제대로 가리키는지 확인을 하기 위해서는
Console.log($(this).html());
이렇게 html로 출력하여 확인할 수 있다.
만약 내가 두번째 값까지 출력하고 싶을때는
If(index == 1) { // 0이 첫번째이니까 두번째는 1까지 적어야 된다.
Return false; //return true or return 이라고 줄 경우 모두 출력한다.
}
위와 같이 반복문을 적어준다.
동적 태그
Var textTag = "<input type='' value='임시값입니다.' />";
$(this).append(textTag);
각각 영역에 맨 하위단에 임시값입니다 라고 추가가 된다.
});
})
<div>
<input type="text" value="첫번째 값" />
</div>
<div>
<input type="text" value="두번째 값" />
</div>
<div>
<input type="text" value="세번째 값" />
</div>
<div>
<input type="text" value="네번째 값" />
</div>
정리
여러개의 동일한 셀럭터일 경우 each 문을 쓴다.
기본적인 구조
$("셀렉터").each(function(index){
$(this).추가함수를 붙여서 사용하면 됨.
});
마우스 + 키보드 이벤트 함수 사용하기
Click, dbclick, keydown, keypress, keyup, on
클릭 이벤트
Input type="button" value="클릭"
이렇게 사용을 했었다.
$(function(){
$("#alertButton").click(function(){
Alert("클릭!")
})
})
<input type="button" id="alertButton" value="클릭" />
예제
$(function(){
검색버튼을 클릭시, select 태그의 값 _ text태그의 값을 console. Log 출력해보아라
$("#searchButton").click(function(){
Var searchKey = $("#searchKey").val();
Var searchValue = $("#searchValue").val();
Console.log("searchKey",searchKey);
Console.log("searchValue",searchValue);
})
SearchValue 태그에 엔터 입력 시, select 태그의 값 + text 태그의 값을
Console.log 출력해보아라
키보드 관련 되서 사용되는 것
$("#searchVaule").keypress(function(event){
//keyCode =13 (엔터)
If(event.keyCode == 13) {
Var searchKey = $("#searchKey").val();
Var searchValue = $("#searchValue").val();
Console.log("searchKey",searchKey);
Console.log("searchValue",searchValue);
}
})
dbclick은 빠르게 두번 클릭을 해야지 결과값이 뜬다.
1번에 click부분에 넣어서 사용하면 된다.
})
<select id="searchKey">
<option value="first">첫번째 값</option>
<option value="second">두번째 값</option>
<option value="third">세번째 값</option>
</select>
<input type="text" id="searchValue">
<input tyep="button" id="searchButton" value="검색">
클릭이벤트는 꼭 버튼에만 적용되는것이 아니다.
$("#ptag").click(function(){
Alert("클릭했습니다.");
})
<p id="ptag"> 클릭해보세요 </p>
이렇게 하여도 클릭해보세요라는 글에 클릭을 하면 alert창이 뜬다.
$("#addButton").click(function(){ //id가 addButton일때 클릭을 했을시 하는 행동
Var textTag = " <input type='text' value = '임시로 추가된 값입니다.' />"; //추가할 내용을 적어준다.
$("#addLayer").append(textTag); //addLayer안에 append(자식에게 추가)한다는 것
})
<div>
<input type="button" id="addButton" value="추가">
</div>
<div id="addLayer">
</div>
이전,이후 추가하기
// 이전 추가 버튼 클릭시 addLayer 직전에 html삽입
Var textTag = "<h2>임시로 추가된 h2태그 입니다.</h2>";
$("#beforeAddButton").click(function(){
$("#addLayer").before(textTag);
})
// 이후 추가 버튼 클릭시 addLayer 직후에 html삽입
$("#afterAddButton").click(function(){
$("#addLayer").after(textTag);
})
<div>
<input type="button" id="beforeAddButton" value="이전 추가">
<input type="button" id="aterAddButton" value="이후 추가">
</div>
<div id="addLayer">
<h2>기준!!</h2>
</div>
버튼을 추가하는 버튼과 alert창을 띄우는 버튼
하지만 추가한 버튼은 동적이기 때문에 첫번째 alert창을 띄우는 버튼만
alert이 뜨고 그다음에 추가되는 버튼들은 alert창이 뜨지 않는다.
//추가 버튼을 클릭하면 클릭이라는 버튼이 생성됨
$("#addButton").click(function(){
Var tag = '<input type="button" class="alertBoutton" value="클릭">';
$("#addLayer").append(textTag);
});
// 클릭이라는 버튼을 클릭하면 alert창이 뜸 대신 추가된 클릭버튼은 적용이 안됨
$(".alertButton").click(function(){
Alert("클릭");
})
//on 이벤트를 사용하면 추가된 클릭 버튼을 클릭하여도 alert창이 생성이 된다.
$(document).on("이벤트","셀렉터",function(){ })
이렇게 사용된다 즉
$(document).on("click",".alertButton",function(){
Alert("클릭");
})
<input type="button" id="addBoutton" value="추가">
<div id="addLayer">
<input type="button" class="alertAddButton" value="클릭">
</div>
Ajaxs로 받을 수 있는 데이터 타입 html인 방식에 대해 강의
목록조회 데이터 처리(서버페이지) => 리스트페이지 =>
등록페이지 => DB에 데이터 등록(서버페이지) =>
목록조회 데이터 처리
이렇게 순환한다.
$(function(){
$("#submitButton").click(function(){
Document.getElementById("frm").submit(); // 자바스크립
$("#frm").submit(); // jquery
})
})
<form action=:/insert.jsp" metjod="post" id="frm">
<input type="text" name="content">
<input type="button" id="submitButton" value="전송">
</form>
<table width="100%" border="1"></table>
위 방법이 기본방식
이제 ajax방법
$(function(){
//form action = url (호출하고자 하는 url)
//type = method
//form은 알아서 input 태그들을 전송하지만 ajax는 data을 주어야 한다.
$.ajax({
Url : '/list_ajax.jsp',
Type : 'GET',
DataType : 'html ',
Success : function(data=파라미터라 변수를 아무렇게 주어도 됨){ //결과는 페이지를 통째로 가져오는 역할을 하는 부분이다.
//html 텍스트 태그
Console.log(data); //data가 html인걸 볼수있다.
즉 이렇게 출력하면된다.
$("table").html(data);
}
});
$("#submitButton").click(function(){
$.ajax({ //댓글이나 쉽게 말해 페이스북같은 화면이 ajax이다.
Url : '/insert_ajax.jsp',
Type : 'post',
DataType : 'html ',
// 파라미터 부분 추가됨 내가 보내고자하는 파라미터 값을 줄때는 data
//입력을 각각 파라미터를 주는법
Data : { content : $("input[name=content]").val()},
//여러개의 form이 있을때 한번에 주는 방법
Data : $("form").serialize(),
Success : function(data){
$("table").html(data);
}
});
})
});
<form action=:/insert.jsp" metjod="post" id="frm">
<input type="text" name="content">
<input type="button" id="submitButton" value="전송">
</form>
<table width="100%" border="1"></table>
form은 insert페이지 갔다가 list페이지로 오는 형식이지만
가지고 오려는 태그만 ajax통으로 넣어놓고 불러오기만 하면 된다.
jason에 대해서 알아보는 강의
{
}
[
]
jason은 두가지 가로로 표현을 한다.
{
"title" : "안녕하세요" //키안에 들어가있는 변수값을 표현하는 것
키 : 변수
"subject" : "반갑습니다"
단일건의 값은 이렇게 뽑을 수가 있다.
"list" : [{
"subject" : "제목입니다1"
"content" : "내용입니다1"
},{
"subject" : "제목입니다2"
"content" : "내용입니다2"
},{
"subject" : "제목입니다3"
"content" : "내용입니다3"
}]
//배열일 때 나타내는 방법 [이거 안에 여러개의 { 이것을 사용으로 여러개의 키 값을 넣을 수 있다.
}
예제
$(function(){
});
<div id="titleLayer"><h2>안녕하세요</h2> </div>
<div id="subjectLayer"><h1>반갑습니다.</h1> </div>
<table width="100%" border="1"> </table>
<tr>
<td>제목입니다1</td>
<td>내용입니다1</td>
</tr>
<tr>
<td>제목입니다2</td>
<td>내용입니다2</td>
</tr>
<tr>
<td>제목입니다3</td>
<td>내용입니다3</td>
</tr>
이렇게 만드는 것을 코딩을 이용하여 내용을 가져오는 것을 하겠다.
jason방식은 동일한 데이터를 웹이나 앱이나 api방식으로 내려줄때 사용한다.
$(function(){
$("#loadButton").click(function(){
#.ajax({
Url : "/dummy.json",
Type : 'GET',
DataType : "json",
Success : function(data){
//콘솔 확인 방법
Console.log(data.title);
Console.log(data.subject);
Console.log(data.list);
// data안에있는 변수를 출력하는 방법이다.
$("#titleLayer").html("<h2>" + data.title + "</h2>");
$("#subjectLayer").html("<h1>" + data.subject + "</h1>");
//각각의 변수값들을 출력하는 것
배열
Var list = data.list;
Var tableTag = "";
For(var i = 0 ; i<list.lenght; i++) {
TableTag += "<tr><td>" + list[i].subject + "</td><td>" +
List[i].content + "</td></tr>"; //변수에 문자열을 답고
}
$("table").html(tableTag); // 담은 변수를 통째로 set한다.
//jquery의 반복문
$.each(list,function(index,data){
TableTag += "<tr><td>" +data.subject + "</td><td>" +
data.content + "</td></tr>";
})
}
})
});
<input type="button" value="로드" id="loadButton">
<div id="titleLayer"> </div>
<div id="subjectLayer"> </div>
<table width="100%" border="1"> </table>
Jsonp - get방식( 해당 데이터를 가져올 수 있다.) = 조회용 / 대신 다른 도메인쪽에서 jsonp 통신형식에
맞춰서 json 데이터를 낼 줄때만 가능하다.
Cors - 서버에서 설정을 해줘야 접근이 가능 하다. Get, post 방식으로 값을 전송한다.
Show/hide 함수에 대해 설명
$(function(){
$("showButton").click(function(){
//css에서 display:block;과 같은 기능
$("#showhide").show();
$("#showhide").fadeIn(); //스무스하게 나타나고 스무스하게 사라진다.
$("#showhide").slideDown({
Duration : 100 // 시간을 옵션으로 줘서 속도를 나타내준다
}); //스르륵 내려갔다가 올라오는 기능
});
$("hideButton").click(function(){
//display:none;과 같은 기능
$("#showhide").hide();
$("#showhide").fadeOut();
$("#showhide").slideUp();
});
})
<input type="button" id="showButton" value="show">
<input type="button" id="hideButton" value="hide">
<div id="showhide">
안녕하십니까 jquery 강의입니다.<br>
안녕하십니까 jquery 강의입니다.<br>
안녕하십니까 jquery 강의입니다.<br>
</div>
Trim 공백제거
$(function(){
$("#trimButton").click(function(){
Var txt = $("#trimText").val();
Txt = $.trim(txt);
// Console.log("("+txt+")");
$("#trimText").val();
// 양 옆의 공백만 제거 될뿐 중간 공백은 제거가 안된다.
});
})
<input type="text" id="trimText" value=" 공백입니다.">
<input type="button" id="trimButton" value="trim">
Remove / empty 함수
$(function(){
$("#button").click(function(){
// 영역 비우기 = empty()
$("#showhide").empty(); //안에 있는 모든 값들이 지워진다.
//레이어 삭제 함수
$("#showhide").remove(); // 영역을 삭제하여 console에서 삭제가 된다.
});
})
<input type="button" id="button" value="비우기">
<div id="showhide">
안녕하십니까 jquery 강의입니다.<br>
안녕하십니까 jquery 강의입니다.<br>
안녕하십니까 jquery 강의입니다.<br>
</div>
두개를 삭제할 때는
$(function(){
$("#button").click(function(){
$(".btn").click(function(){
$(this).parent().remove();
});
});
})
<div id="showhide">
안녕하십니까 jquery 강의입니다.<br>
<input type="button" class="btn" value="삭제">
</div>
<div id="showhide">
안녕하십니까 jquery 강의입니다.<br>
<input type="button" class="btn" value="삭제">
</div>
index값 찾기
$(function(){
$(".btn").click(function(){
Var index = $(".btn").index(this);
Console.log("index",index);
각 버튼을 누르면 해당되는 index의 레이어를 출력시켜라.
단, 다른영역들은 닫혀야하고 클릭된 영역만 보여주어야 한다.
$(".layer").hide(); //먼저 하이드를 주고 그다음에 누르는 버튼값을 나오게 출력하고 다시
버튼을 누르면 다시 하이드가 되고 버튼 출력값이 나오게 된다.
$(".layer").eq(index).show(); //버튼을 누르는데로 계속 추가되면서 나온다. 그래서 이전에
Hide 함수를 먼저 준다.
});
})
<input type="button" class="btn" value="버튼1">
<input type="button" class="btn" value="버튼2">
<input type="button" class="btn" value="버튼3">
<div class="layer" stylte="display:none;">
레이어 1입니다.<br>
레이어 1입니다.<br>
</div>
<div class="layer"stylte="display:none;">
레이어 2입니다.<br>
레이어 2입니다.<br>
</div>
<div class="layer"stylte="display:none;">
레이어 3입니다.<br>
레이어 3입니다.<br>
</div>
Ajax 파일업로드 알아보기
제이쿼리 플러그인
해외 국내 등 배포한 파일을 플러그인 이라고 한다.
존재하고 있는 플러그인을 가져다가 쓰는 것을 사용 방법 등을 강의
$function(){
//전송 버튼을 클릭하면 입력한 값이 전송되는 것을 작성
$("#sendButton").click(function(){
$("#frm").sumbit();
})
//action 값이 뜨면 전송이 된것이 확인이 되는것
//getFileName.jsp에 전송가능하게 코딩을 해놓은 파일이다.
//별도의 내용
$("#sendButton").click(function(){
FormData(); //ajax fileupload 가능하다.
//대신 IE 6, 7, 8, 9 불가능
Var frm=$("#frm")[0];
//파라미터를 설정해야됨 0번째를 설정해줘야 한다.
Var formData=new formData(frm);
$.ajax({
Url : '/getFileName.jsp',
Type: 'POST',
ProcessData : false,
ContentType:false,
Data : fromData,
Succes : funtion(){
Alert("전송성공");
}
// 위의 모양이 보통 ajax 전송하는 코딩이다.
});
}
<form id="frm" action="/getFileName.jsp" method="post"
Enctype="multipart/form-data">
<input type="text" name="textName">
<input type="file" name="fileName">
<input type="button" name="sendButton" value="전송">
</form>
// 하위버전의 문제는 jquery.malsup.com
에서 모듈을 사용하면된다.
강의에서는 form모듈을 사용한다.
크롬에서는 다운이 안되기 때문에
url을 치고 익스에서 다운을 받아야한다.
플러그인들은 항상 jquery밑에 불러와야된다.
$function(){
$("#sendButton").click(function(){
$("#frm").ajaxForm({
BeforeSubmit : function(){
If($("#textName").val() == "") {
Alert("tesx값을 입력하세요");
Return false;
}
Return true;
//validation 체크를 여기서 한다.
Return false; //통과안됨
Return true; //전송이 됨.
},
Success : function(){
Alert("업로드 성공");
}
});
$("#frm").submit(); // submit을 안주면 반응을 볼수가 없다.
// 화면을 전환하지 않고 바로 볼수가 있다.
$("input[name=fileName]").change(function(){
//파일 전송을 하였을때 파일 변경이 있을때 반응을 볼수 있는것
})
파일업로드 > default form submit 이 있다.
페이지 전화이 되면서 다시 글쓰기 폼이나 목록폼으로 이동이 된다.
간혹하다 ajax로 파일업로드 기능을 넣어주세요. -요구사항이 존재하게됨
이럴때는 예를 들어서 IE 6,7,8,9를 배제하겠다 라고 가정할 경우
New FormData() 객체를 사용하면 된다.
IE 6,7,8,9도 지원할 경우
Jquery.form 플러그인을 이용하여 ajax 파일 업로드 기능을 구현할 수 있다.
하지만 ajax fileupload 관련 플러그인은 다양하다.
그중 선택하는 결정은 사용자 몫임.
Table dnd를 이용한 테이블정렬 순서 변경하기
구글에 table dnd라고 치면 관련된 플러그인이 나온다.
.blueStyle{
Background-color:blue;
Color:white;
}
$(function(){
$("table").tableDnD();
//1차적인 default 함수
//이렇게 실행하면 html에 십자가 표기사 테이블에 뜨는데
// 클릭하여 움직이면 td가 바뀐다.
//옵션
$("table").tableDnD({
OnDragClass : 'blueStyle' //마우스를 드레그할때 색이 변하는것
OnDragStart : function(table,row) {
Console.log("드래그 시작");
Console.log(table,row); //클릭시 어느부분에 대한 클릭인지 내용이 나온다.
},
OnDragStop : function(table,row) {
//Console.log("드래그 중지");
//tr은 순서가 바뀌지만 앞에 순서는 다시 재배열이되어서 돌아오는 코딩
$("table").find("tr").each(function(index,data){
$("this").find("td").eq(0).html(index+1)
Console.log(index,data);
})
}
});
})
<table>
<tr>
<td>1</td>
<td>첫번째</td>
<td>첫번째 타이틀입니다.</td>
</tr>
<tr>
<td>2</td>
<td>첫번째</td>
<td>첫번째 타이틀입니다.</td>
</tr>
<tr>
<td>3</td>
<td>첫번째</td>
<td>첫번째 타이틀입니다.</td>
</tr>
<tr>
<td>4</td>
<td>첫번째</td>
<td>첫번째 타이틀입니다.</td>
</tr>
</table>
// li로 지정된 화면이면 jquery ui에 sortable을 사용하면 되고
// table로 지정된 화면이면 jquery tableDnD를 사용하면됨
Jqgrid 소개 및 사용법
페이징이 기본적으로 지원이 되고 스크롤 페이징이 지원이 된다.
리스트 내에서 알아서 페이징 처리가 되고 서버내에 영역을 받아서
알아서 처리하는 것을 스크롤 페이징이라고 한다.
Jqgrid 플러그인의 데모를 사용하면된다.
Bootstrap, jqgrid 두개가 있다.
연동 방법은 다운로드 페이지에서 다운을 하고
압축을 푼다음 4개 폴더를 프로젝트 내에 복사 붙인다.
이어서 bootstrap 홈페이지에 들어가서 다운을 받는다.
압축을 풀고 3개의 디렉토리를 프로젝트내에 폴더를 만들고
복사 붙여넣어준다.
가장 쉬운방법은 데모 홈페이지에서
css부분을 긁어서 붙이고
테이블 태그랑 div태그를 붙여서 바디에 붙여준다.
jqgrid도 붙여서 넣어준다.
그리고 각각의 css경로를 위에 붙여넣은 경로로 바꿔준다.
$(function(){
$("#jqgrid").jqgrid({
Url :
Mtype :
StyleUI :
Datatype :
ColModel : [
Label//컬럼명을 뜻함 :
]
Viewrecords : true
Height :
RoeNum :
Pager :
})
})
<table id="jqgrid">
JqPlot 소개 및 샘플을 이용한 빠른 개발하기
차트 플러그인에 대한 소개
Jqplot 다운로드에서 최신 버전을 다운 받는다.
압축을 풀어주고 인클루드 해준다.
참고는 docs에 들어가서 include파일을 복사하여
html에 파일을 만들고 타이틀 밑에 넣어주고
경로를 맞춰 준다.
샘플을 이용하여 작업을 해본다.
Creat plot에 올라온 소스를 가지고 사용하여 준다.
#(function(){
$.jqplot('chartlayer', [[1,2],[3.12],[5,13.1]]);
})
<div id="charlayer"></div>
jqplot에서 첫번째는 chart에 id값이다.
예제를 이용할때 앞에 나오는 값을 id로 생각하고 주면된다.
JsTree를 이용한 tree 만들기
jsTree에 들어가서 플러그인을 다운 받는다.
overView를 들어가서 예제를 사용해 본다.
다운받은 것을 압축 풀고 필요한 부분을 인클루드해 준다.
예제의 div를 그대로 긁어가져와 준다.
셀렉터를 가져와서 붙여준다.
명령어 하나로 ul li li가 jstree 구조로 생성되는 것이 보여진다.
ul구조에서 li별로 구성이 되는 것을 볼수가 있다.
샘플코드를 만져보면서 분석을 해야된다.
다운받은 파일에 데모나 샘플을 이용하여 확인해 준다.
홈페이지의 예제를 보면서 각 속성을 주는 것을 봐준다.
그걸 이용하여 열려있는 상태로 보이던가 아니면 클릭시 열리는 그러한
속성을 줄 수 가 있다.
json으로 트리구조 만드는 법
또한 홈페이지의 json방법을 가져와서 넣어준다.
$('#jstree').jstee({
//json형식으로 줘도 들어간다.
Core : {
Data : [
{
Text : 'simple root node'
},
{
Text : 'root node 2',
Children : [{
Text : 'child1'
},
{
Text: 'child2'
}]
}
]
},
Plugins : ["checkbox"],
Chechbox : {
Keep_selected_style : flase
}
})
배열 형태로 tree구조로 들어가는 것도 볼 수가 있다.
그리고 플러그인을 홈페이지에서 확인하여 그대로 복사하여 사용 할 수도 있다.
1강
1. Web이란?
사전적 의미로는 거미줄이라고 한다.
( 전 세계의 컴퓨터들을 연결하여 정보를 공유하는데 목적을 두고 있다. )
1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한가지 형태를 말한다.
도메인
= 프로토콜 + IP + PORT + Information path
프로토콜 : 네트워크상에서 약속한 통신규약
( 종류 : http, ftp, smtp, pop, dhcp )
IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
DNS : IP 주소를 인간이 쉽게 외우도록 맵핑한 문자열
Port : IP 주소가 컴퓨터를 식별할수있게 해준다면, Port번호는 해당컴퓨터의 구동되고 있는
프로그램을 구분할 수 잇는 번호
2. HTML이란?
Hyper Text Markup Language의 약자로 웹 문서를 기술하는 언어
웹문서를 표현하기 위해 태그들로 구성되어 있다.
3. CSS이란?
Cascading Style Sheets의 약자로 HTML문서를 디자인적으로 예쁘게 만들어
정보 전달을 좀더 효율적으로 하기 위해 만들어진 문서
HTML은 정보를 가지고 있고, CSS는화면상의 레이아웃 등을 컨트롤 하는 문서
1. 태그란?
HTML 태그들은 기본적으로 시작 태그와 종료태그가 쌍을 이루고 있다.
Ex) <div> </div>
HTML은 태그로 구성되어 있다.
태그에는 이름과 속성이 있다.
( 태그 = 이름 + 속성 + 값 )
H1 : 글씨 크기 태그
P : 문단을 구성하기 위한 태그
Br : 줄바꿈 태그
A : 페이지를 이동하고 싶을때 쓰는 태그
I : 글씨 기울임 태그
Sup : 위쪽으로 글씨 작게 해주는 태그
Ins : 글씨 밑줄 태그
Del : 글씨 가운데 줄 그어지는 태그
1. 리스트 태그 ( ul, li, ol )
Ul : 점으로 리스트를 나타내는 리스트 태그
Li : 리스트를 나타내는 하나하나의 아이템 태그
Ol : 앞에 숫자가 매겨 지는 리스트 태그
Dl : 리스트 타입의 문서 레이아웃을 생성
Dt : 리스트의 상단 타이틀 역할을 함
Dd : 리스트 아이템을 만들때 사용
2. 표를 나타내는 태그
Table : 표형식의 레이아웃을 만드는 태그
Tr : 하나하나의 행을 나타낸다
Tb : 하나하나의 열을 나타낸다
Rowspan : 행을 합쳐주는 태그
Colspan : 열을 합쳐주는 태그
3. 이미지를 나타내는 태그
Img : 웹사이트에서 이미지를 출력해 주는 태그
( ex) Img src="경로" )
Alt : 해당 경로에 이미지가 없는 경우 글 문구를 나타내주는 태그
4. 사운드를 출력하는 태그
Audio : 웹사이트에서 사운드를 출력해 주는 태그
Ex) audio src="경로"
Controls : 컨트롤러가 보이게 할 수 있는 태그
Autoplay : 자동 실행 시키는 태그
Loop : 반복시키는 태그
Ex) controls="controls"
( 태그를 실행 시키고 싶다면 그대로 값을 넣어주면 된다. )
1. Video : 동영상을 출력하는 태그
Ex) 방법은 두가지가 있다.
<video controls="controls">
<source src="1.mp4" type="video/mp4" />
</video>
<video src="1.mp4" type="video/mp4"controls="controls" >
</video>
한번에 작성을 하거나 나누어서 작성하는 방법이 있다.
2. Form 태그
Action : 서버쪽의 주소를 적어주는 태그
Method : 정보가 가는 방식을 정하는 태그
get방식 ( 도메인 주소 뒤에 내가 입력한 값이 붙어서 서버로 전송 되는 방식 )
post방식 ( 정보가 암호화가 되어서 서버로 가는 방식 )
Input type을 적어서 각 속성에 맞는 방식을 사용한다.
( Text, password, radio, checkbox, file )
Name : 각 속성에 따른 이름을 정하여 준다.
Radio, chechbox = name이 같다. value를 다르게 주어서 구분한다.
Textarea : 자기소개 같은 긴 글을 작성할때 사용함
Select : 드롭다운으로 선택할 수 있는 태그
Option : 하나하나의 아이템 태그
( select에 multiple 속성을 넣을 경우 다중 선택가능 )
3. 레이아웃 구성 태그
Div : block으로 잡히는 태그
Span : line으로 잡히는 태그
Table의 한계를 느껴 나온 Div태그
1. Div태그를 이용한 방법
Div 기본 속성은 블럭이다.
거의 홈페이지는 Div를 4개를 사용하여
헤더, 메뉴, 본문, 포터(회사 정보가 들어가는 부분)
이렇게 나뉘어서 만들어진다.
2. 시멘틱(semantic)을 이용한 레이아웃
Header, Nav, Section, Footer
이렇게 네가지로 나뉘어서 작성을 한다.
Div를 사용하지 않고 네가지의 태그를 사용하여 첫번째 방법과 같이
사용을 한다.
CSS : 특정 레이아웃의 모양을 준다거나 속성 값을 주어 변경하는 것
선택자란?
특정 태그를 선택하여, 해당 태그의 속성을 변경하는 목적으로 사용 된다.
html문서에 같이 녹여져 있을 수도 있고 css 언어를 별도로 뽑아서
html에 링크를 걸어서 사용할 수도 있다.
Head 태그 안에 style태그를 만들고 그안에 선택자와 속성값을 넣어서
사용 할 수 있다.
Tag선택자란?
특정태그를 선택하여 CSS속성을 적용함.
전체 속성을 주고 특정 태그를 사용하여
개별적으로 속성을 주어 혼합하여 사용 할 수가 있다.
Id(#)와 class(.)
태그의 id와 class를 이용하여 CSS속성을 설정 할 수 있음
id를 이용하여 header,content,footer을 나눠준다.
div를 두개 사용하면 block형태이기에 바로 밑으로 나와야되지만
Float:left를 사용하면 공간이 있을때 div 두개가 옆으로 두개 붙어서 나온다
대신 겉에 감싸는 div에는 overflow:hidden을 줘야된다.
Tag, id, class 혼합 사용
Tag, id, class를 혼합하여 CSS에서 속성을 설정 할 수 있음
예를 들어 ul안에 li에 class="menu" 인 것들에 대해서 속성을 주려면
Ul li.menu{
}
이런식으로 전체적으로 속성값을 줄 수 가 있다.
속성 선택자
Tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있음
예를 들어 input에 속성을 주려면
Input{ } 을 주면 되지만
input안에 text나 password같은 타입을 각각 주려면
Input[type=text]{ } 이런식으로 주려고 하는 타입에
속성값을 줄 수 가 있음
대괄호를 이용하여 구분지을 수가 있음
후손 및 자손 선택자
Tag의 속성을 선택하여 CSS의 속성을 설정 할 수 있음
예를 들어 div li { }를 보면
div안에 모든 li들을 선택한 것을 의미한다.
이것을 후손 선택자라고 한다.
예를 들어 div >h1 { }를 보면
div안에 바로 밑에 있는 것을 표현 할때는 > 이렇게 표현해 준다.
그러면 div안에 모든 h1이 아닌 바로 밑에 있는 h1만 선택하여 준다.
이것을 자손 선택자라고 한다.
동위 선택자
태그의 동등한 위치를 판단하여 CSS 속성을 설정 할 수 있음
동위 선택자( +, ~ )
예를들어 h3이랑 div가 같은 위치에 있을때
H3~div{ } 를 사용하면 h3과 div가 같은 위치에 있으면 전부 선택이 되어
속성값들이 적용이 된다.
H3+div{ } 를 사용하면 동등한 위치에서 바로 아래에 있는 div만 선택이
되어 속성값들을 적용 하게 된다.
이러한 방법도 있지만
Id="title"을 준 상태에서도 사용이 가능하다.
예를 들어 #title~div를 사용하면 title과 동등한 div들에게 속성 값을
적용 할 수가 있다.
반응 선택자
마우스의 반응에 따른 속성을 설정 할 수 있음
예를 들어 li:hover{ color:blue; } 라고 속성값을 주게 되면
li에 마우스를 올리게 되면 파란색으로 글씨가 바뀌는 것을
볼수가 있음
Margin: 0 0 0 0; 이렇게 값을 주면 순서대로
위 오른쪽 아래 왼쪽 이런식으로 값을 주는것이 된다.
상태 선택자
상태에 따라서 CSS 속성이 변하는 설정을 할 수 있음
Focus, enabled,disabled가 있으며
예를 들어 input : focus{ } 이렇게 사용을 할 수가 있다.
구조 선택자
구조에 따라서 CSS속성이 변하는 설정을 할 수 있음
Li:nth-child(2n+1){ } 이렇게 사용되는데 n=0이라서
1번째부터 값이 들어간다.
Li:firtst-child, li:last-child는 처음과 끝을 지정하는 것이다.
Border-radius는 테두리의 둥근값을 주는 것으로
Border-radius: 0 0 0 0; 이렇게 주면
좌상단 우상단 우하단 좌하단 이런식으로 값을 줄 수가 있음
Li:first-of-type, li:last-of-type 라고도 표현을 할 수가 있음
Float:left 속성을 위쪽에서 주었을 경우
그대로 그값이 남아서 밑에도 적용이 될 수 있기 때문에
Float:left가 없이 깔끔하게 사용하기 위해
Clear:both;를 사용하여 깔끔하게 정리하고 자리를 배치 하면 된다,
문자 선택자, 링크 선택자, 부정 선택자
문자 선택자
특정 문자 또는 문자열을 선택하여 CSS속성을 설정 할 수 있다.
first-letter or first-line 같은 것이다.
first-letter 첫번째 글자 예를들어 2012면 2가 된다.
first-line 다음 행으로 넘어가기 전의 그줄이다. 2012면 2012 전부 됨.
링크 선택자
문서에서 링크 되어 있는 문자를 선택하여 CSS속성을 설정 할 수 있다.
#content a:after{
content: '='attr(hred);
}
를 사용하면 a를 뒤에 붙인다는 뜻이다.
content 뒤에 위의 내용 즉 하이퍼링크를 붙여준다.
부정 선택자
나를 제외한 모든 태그에 CSS 속성을 적용한다.
#content li:not(.fa){
backgroud:black;
}
li에서 class가 fa가 아닌것들에 대해 색깔을 black을 준다는 것이다.
CSS3 단위
CSS3에서 자주 사용되는 단위
px과 % , em 을 사용한다.
기본 16px을 가지고 있고 em으로 환산하면 1.0em이다
font-size: 3가지를 뒤에 줄 수 있는데 ( 16px; , 50%, 1.0em )
이렇게 줄수가 있다.
url() 속성
background-img 속성의 속성값으로 많이 사용된다.
이경우 배경의 이미지 경로를 나타 낸다.
background-image:url('경로');
중요한 속성
display 속성
화면에 어떻게 보이는지를 설정하는 속성이다.
다양한 속성값이 있다.
block => div ( div를 쌓아가면 다음 행으로 자동으로 내려간다.)
inline => span ( 별도의 p, div, li를 주지 않으면 옆으로 붙여간다.)
inline-block 옆으로 정렬이 되기도 하지만 블럭이 가지고 있는 높이의
속성의 값을 가지고 있는 것이다.
inline 속성을 주면 높이 값이 들어가지 않는다.(상 하 값이 적용 안됨)
visibilty 속성
display 속성의 none속성값과 비교
display에 none을 두면 아예 사라지지만
visibilty에 hidden을 두면 자리는 그대로 가지고 있지만
보이지만 않을 뿐이다.
opacity속성
투명도를 조절하는 속성이다.
opacity:0.4;
이런식으로 값을 주어서 투명도를 조절해 준다.
margin 및 padding 속성
margin
바깥으로 주는 속성은 margin으로 여백을 준다.
padding
안으로 주는 속성으로 padding으로 여백을 준다.
box-sizing속성
box-sizing속성을 이용하면 전체 사이즈의 크기를 변경할 수 있다.
높이 너비 크기를 준거에 border값을 주면
border값만큼 사이즈가 늘어나게 된다.
하지만 box-sizing : berder-box;
를 주면 박스 안에 태두리가 들어간다. 박스 사이즈 밖에
테두리가 설정되지 않는다.
border의 속성
width, style, color의 속성을 주는데
이것을 border: 크기 속성 컬러
이런식으로 사용을 한다.
background-img 속성
이미지를 불러 왔을때 size속성에 %를 주면 크기가 줄어든다.
줄어든 상태에서 나열이 된다.
repeat속성을 사용하여서 no-repeat;를 주면
한번만 이미지가 나오게 된다.
사용하지 않으면 자동으로 반복으로 나오게 된다.
font-family, font-size속성
글꼴 및 폰트 사이즈 관련 속성
font-family: 글꼴, 글꼴, 글꼴;
이렇게 여러가지를 주는 이유는 내가 개발한 것에 글꼴이
사용자가 없을 경우 1 2 3 순위로 적용하도록 하게 하기 위해서
여러가지의 글꼴을 미리 설정하여 준다.
style, weight, line-height속성
font의 style을 적용시킬 수있다.
weight는 bold나 수치를 줌으로써 두껍게 할 수 있다.
line-height는 행간격을 조절하는 속성이다.
height와 line-height를 같이주면
박스안에 글자를 세로(높이)가운데 정렬 시킬수가 있다.
position속성
absolute속성값을 줌으로써 위치를 설정할 수 있다.
왼쪽위를 기준으로 absolute를 주고 그상태에서 top과 left를 줌으로써
박스를 가져다가 놓을 위치를 잡아 줄 수 있다.
static속성
기본적으로 absolute를 주지 않으면 static속성을 가지고
block형태로 떨어져서 밑으로 쌓여져서 간다.
relative속성
바로 위의 박스에 영향을 받는 것이다.
z-index:값;
깊이를 주는 것으로 겹칠때 어떤것을 더 위로 올려 보여줄 것인지
설정 할 수 있는 속성이다.
Float 속성
Positon 속성과 함께 요소의 위치를 설정하기 위한 속성입니다.
Div를 두개를 썼을때 두개를 float:left를 주면 공간이 있다면
옆으로 두개가 붙어서 생성이 된다.
대신 앞 강의에서 써놨던거 처럼 이 두개의 div를 묶고있는 div에는
Overflow:hidden을 주어야 값이 먹힌다.
Float:right를 줄때는 첫번째 right를 준 div가 오른쪽에 붙고 다음
div가 붙는다. 즉 div2 div1 이렇게 붙는다.
첫 div에 margin: 0, auto;를 줄어서 가운데 정렬을 시킬수가 있다.
안의 글자를 가로 세로 가운데 놓기 위해
height와 같은 값을 line-height를 같게 준다.
Gradient 속성
2가지 이상의 색을 표현할때 사용되는 속성
사이트에서 원하는 색상을 조합해서 사용 할 수가 있다.
그라데이션을 넣을때 background 뒤에 밴터프리픽스를 넣어주어야 한다.
사이트에서 나온 값을 복사하여서 그대로 붙여놓고 사용하면 된다.
그러면 원하는 그라데이션 색을 배경으로 줄수가 있다.
웹 페이지 개요
다양한 웹사이트를 경험하고 있다.
하지만 수많은 웹사이트의 레이아웃도 전체적으로 거의 비슷한 레이아웃을
가지고 있다.
기본적으로 배너가 들어가는 헤더 부분
컨텐츠가 들어가는 중간부분
회사의 내용이 들어가는 푸터 부분
이렇게 3가지로 크게 나뉘어 질수가 있다.
Yahoo 홈페이지를 통한 예시
body로 전체적으로 폰트와 margin:0;을 준다.
header를 만들고 역시 이곳도 margin:0을 줌으로써
불필요한 간격을 없애준다.
그리고 width:99%로 잡아준다.
반복이 되는 메뉴들은 대부분
Ul li // ol li 로 만들어 준다.
Content 에서 여러개의 div를 사용해서 만들게 된다.
그렇게 될때에는 구조 선택자로 사용하여
하나씩 속성 값을 준다. Nth-child(1)부터 하나씩 숫자를
늘려가면서 값을 넣어준다.
이렇게 큰덩어리를 먼저 만들어 놓고 그안에 원하는 것을
만들어서 주면 된다.
일반적인 쇼핑몰 레이아웃
Gnb 와 lnb로 이루어져 있다.
gnb는 최상위 메뉴이고
lnb는 중간 메뉴바 이다.
기본적으로 모든 태그에 대해서
속성값을 0으로 줘서 초기화 해준다.
예를 들어 * { margin:0; padding:0; }
이런식으로 정리하기도 한다.
하이퍼링크를 할때는 li 목록에 속성을 주는 것이 아니라
A 태그에 속성 값을 주는데 display:block을 주고
페딩을 줌으로써 마우스를 가져 놓았을때
손가락 모양이 글씨위에 놓은게 아닌 근처에 갔을때
나타날수 있게 해주는 방법이다.
Box-sizing : border-box;를 줘서 선 테두리를
안쪽으로 주면 딱맞게 설정이 가능하다.
웹폰트
인터넷만 연결되어 있다면, 다양한 폰트를 웹사이트 방문자에게 제공할 수 있도록
고안된 폰트가 웹폰트 이다.
시작할때는 style 안에
가장 먼저 * { margin:0; padding:0 }을 주면서 시작을 한다.
Float:left 속성을 주기 전에는 그 위에 부모에 overflow:hidden을
주어서 초기화 시킨다음에 준다.
하이퍼링크를 주기 위해서는
<a href="#none">목차</a>
이거에 다른 값은 a 에다가 값을 넣어주면 적용이 된다.
구글에서 지원하는 글꼴의 주소를 가지고 와서
하이퍼 링크를 통해서 적용 시킨다.
대신 네트워크가 된다는 가정하에 사용 할 수가 있다.
스마트폰 레이아웃 보기1
Viewport
웹브라우저의 html 문서에 특정한 정보를 나타내기 위한 태그로 meta태그가 있다.
모바일 웹브라우저에서는 브라우저의 화면 설정과
관련된 정보를 제공하기 위한 방법 뷰포트 meta 태그를 사용한다.
뷰포트 속성들
Width : 너비
Height: 높이
Initial-scale : 초기 확대 비율
User-scalable : 확대 및 축소 가능 여부
Minimum-scale : 최소 비율
Maximum-scale : 최대 비율
Width = device-width : width는 디바이스의 가로 싸이지를 그대로 가져간다는 뜻이다.
Initial-scale = 1.0 : 화면 처음 사이즈를 설정한다.
User-scalable = no : 손가락으로 화면 사이즈 조절 가능 여부를 적어준다.
이러한 것을 맨위에 meta 태그로 작성하고 시작을 해야 된다.
Zpat.info => 무료 호스팅 사이트 주소
Header 제작
toggle을 사용하여 메뉴를 숨기고 꺼내는 기능을 사용한다.
Display : none;으로 처음에 안보이게 한다.
토글을 선택할때는
Toggle:checked => 토클이 체크가 되어 있을때는 display:bolck;으로 보이게 한다.
토글을 사용하기에 누르는 버튼에 다가
For=="toggle" onclick="" 이렇게 준다.
모바일 헤더는 토글과 라벨을 이용해서 작업하는 부분이라서 힘들고 어렵다.
스마트폰 레이아웃 보기2
html에서는 content라 명을 하지만 스마트폰에서는
section이라고 명을 하여 내용을 넣어주는 부분을 만들어준다.
Background-repeat을 사용하여 배경을 이미지로 넣었을때
반복되지 않게 만든다.
Background-position-x:-600px;
배경 이미지를 x축을 기준으로 이동시켜주는 방법이다.
Id 값안에 class가 있을때 속성 값을 주려면
#id값 .class값 {} 이렇게 주면 된다.
스마트폰 레이아웃 보기3
FTP서버를 이용하여 스마트폰에서 보이는 자료를 올려주고
업,다운로드를 이용하여 수정할때마다 즉시 고쳐준다.
강의에서는 파일질라를 사용함.
앱페이지를 만들때도 초기화 코드를 이용하여
처음에 설정을 하고 시작 하면 된다.
Display:inline-block은 inline이면서 block의 속성을 가진 것을 뜻한다.
absolute를 주려면 바로 위에 감싸고 있는 태그에
relative를 먼저 준다.
relative를 기준으로 거기서 좌우 px만큼 거리를 떨어 뜨릴수가 있다.
a태그에 이미지를 줄 때 사용 하면 된다.
White-space:nowrap; overflow:hidden; text-flow:ellipsis;
내용이 폭보다 길때는 점점점.. 처리를 해주는 속성이다.
테블릿 레이아웃
헤더 제작 및 네비 제작
Min-width 값을 주면 최소값을 지정해 주기 때문에 웹페이지를 줄여도 내려가거나 겹치지 않는다.
Line-height를 이용하여 text 중앙 정렬 시키기
링크 영역을 확장하기 위해서 display : block을 준다.
레이아웃이 깨지기 않기 위해서 배너를 만들때 min-width값을 주는것을 기억하기
태블릿 레이아웃
컨텐츠 부분의 내용을 작성하는 방법
전체에 width값을 100%으로 주고 시작을 한다.
왼쪽 div에서 width 250px을 사용하기에 컨텐츠에서 margin-right: -250으로 안쪽으로 내용물을
땡겨 100%을 맞추는 방법이 있다.
비율을 이용하여 만들어서 사용해야 된다.
그런데 글자가 브라우저 밖으로 나가게 하지 않게 하기 위해서 다시
Padding-right:250px을 준다. 그러면 글자가 나가는 것을 막아줄 수 있다.
이미지에도 float:left를 주면 그다음 태그가 바로 옆으로 붙어준다.
li안에 이미지들을 넣고 마지막 li에 div를 넣어서
4개가 수평구조로 내용이 나오게 하는 방법을 사용함.
대신 ul에서 overflow:hidden을주고
li값이 float:left를 주면 수평이 된다.
이미지들이 가지고있는 width 값 만큼 글자div에 margin-right: - width값을 준다
페이지를 줄였을때 글자가 밖으로 튕겨나가 안보이게 하는 것을 방지하기 위해서 그렇게
주는 것이다. 브라우저가 넓을때는 상관이 없지만 좁을때는 문제가 되기 때문이다.
푸터에서는 글자를 가운데 정렬하기위해
Text-align : center을 줄어서 가운데 정렬을 하고
위와 아래의 간격은 padding을 이용하여 알맞게 준다.
고정 바에 대한 강의
Position : fixed를 주어서 어디서든 고정되게 설정을 한다.
여기에 속성으로는 top left right height를 줌으로써 고정될 높이를
지정하여 준다.
중점 내용으로는 많은 ul li가 있기 때문에 > 이걸 이용하여 css을 주어야
여기저기 속성값들이 먹히지 않는다.
A herf의 target속성에는 blank => 새로운 창이 뜨는 속성
Selft => 내가 보고있는 창에서 링크 창이 뜨는것
Top => 나를 감싸고 있는 프레임에서 떠주는 것
Parent => 내 부모 프레임에 떠주는 것
Css 변형
변형 기본
html태그 요소의 속성(형태, 색상) 등이 변경될 때, CSS3 변형 속성을 적용하여 변화하는 단계에
움직임(애니메이션)을 적용 할 수 있다.
Transition-duration: 3s
변형되는 시간을 주는 속성이다.
Hover 마우스 올렸을 시
Active 마우스로 클릭하였을 시
Border-radius를 주면 테두리에 둥근 모양을 px단위로 줄수있다.
Transition-delay : 2s 마우스를 대고 2초 뒤에 변형이 되게 하는것
Transition-timing-function : ease-in/out => 점점 빠르게/느리게 하는 효과를 준다.
애니메이션
키프레임과 애니메이션 속성 알아보기
키프레임을 이용한 애니메이션
@keyframes ani1{
From{width:100px;}
To{width:500px;}
}
width가 100에서 500으로 늘어나는 애니메이션
@keyframes ani1{
From{ left:0px; top:110px;
Transform:rotate(0deg);}
To{ left:500px; top:610px;
Transform:rotate(360deg);}
}
왼쪽에서 오른쪽 밑으로 360도 회전하면서 내려오는 애니메이션
Animation-name:
Animation-duration:2s;
Animation-iteration-count:infinte;
Animation-directio:alternate;
속성에는 위의 4가지가 있다
밴더프리픽스 태그는 모든 브라우저에서 볼수 있게 해주는 태그이다.
스타일에 매번 태그를 넣어줘야되는데 그러면 코드가 많아지기 때문에
Prefixfree.min.js라는 파일을 다운받고 폴더에 넣어서 링크걸어 불러와서 사용하면 된다.
CSS 변환 ( transform )
변환 속성
과거 javascript에서만 구현이 가능한 변환 기능을 이제는 css3에서도 구현이 가능하다.
Translate(x,y) 이동
Scale 크기
Skew 기울기
Rotate 회전
Transform : scale, skew, rotate 등 한번에 속성을 줄수가 있다.
From {
}
To {
Transform : scale, skew, rotate
}
위와 같이 주면 된다.
CSS3 규칙
Css 파일 분리
@import 규칙
@media 규칙
Css 파일 분리
CSS를 html 문서에서 분리하여 별도로 관리할 수 있습니다.
<link rel="stylesheet" href="title.css" />
이러한 링크 방법으로 여러개로 나누어서 분리할 수 있다.
@import 규칙
CSS3에서 '@' 시작하는 키워드들을 규칙이라고 합니다.
이전에 @keyframe 규칙을 살펴본 적이있다.
1.link를 대신 할 수 있습니다.
2.<style> 태그 내부에 위치해야 합니다.
3.<style> 태그 상단에 위치해야 합니다.
link와 @import의 다른점은 style태그 안에 있냐 없냐이다.
link는 밖에 있어야된다.
<link rel="stylesheet" href="title.css" />
이것을
<style>
@import url('title.css');
</style>
이렇게 사용 할 수 있다.
@media 규칙
link태그에 media 속성을 이용하여 상황에 따른 CSS를 적용 할 수 있다.
미디어 종류
All , aural , braille , handheld , print , projection , screen , tv , embossed
<link rel="stylesheet" href="print.css" media="print" />
브라우저에 사용하다가 print를 할때는 위의 링크를 사용한다고 지정하여 쓸수 있다.
반응형 웹
Media 규칙을 이용하여 반응형 웹을 만든다
@media 규칙
link태그에 media 속성을 이용하여 상황에 따른 CSS를 적용 할 수 있다.
@media screen and (max-width:767px;){
#wrap { width:100%; }
#content_wrap #content p { font-size:3em; font-weight:blod; }
}
위와 같은 방법으로 width 사이즈가 변경될때
다른 속성들을 주면서 반응형 웹을 만들수 있다.
스마트 폰 , 테블릿 , pc 이렇게 여러 종류로 속성값들을 줄 수 있다.
그리드 레이아웃 -1
플러그인을 이용한 그리드 시스템
전체적인 레이아웃을 개발자가 청므부터 만들어야 했다.
수고를 조금 줄여주고자 개발된 플러그인이 잇다.
몇가지 계산과 규칙만 알고 있다면 개발자는 쉡게 전체
레이아웃을 만들수 있다.
다운 받는 사이트 주소
Column grid와 width 값을 주어
전체 width 값, 실제 사용되는 width값 등을
눈으로 보고 작성할 수 있다.
나눠진 column들을 이용하여 합쳐서 필요한 부분을
사용하여 준다.
사용방법에 대해서는 여러번 강의를 봐야 될듯
그리드 레이아웃 -2
가변형 그리드 시스템 제작
28강 처럼 width를 딱 정해서 몇 px로 정하는게 아닌
%로 줄이거나 늘리고 할때 값이 자동으로 변해서 맞춰지게
하는 그리드 이다.
간격을 %로 계산을 하여 width에 80%면 각 간격을 2%로 주고
나뉜 칸에 계산을 해서 더해주면 된다.
그리드가 실제 10개를 나누면 하나당 10%가 아닌 하나당8%로
나눠주고 간격을 2%로 해서 작성을 해주면된다.
Margin-left : 2%; 이런식으로 값을 줄수가 있다.
웹문서 제작 팁
웹문서를 제작하면서 반드시 알아야할
내용은 아니지만 알고 있으면 편해지는 툴
편집툴
하위 버전 브라우저 테스트 툴
많은 양의 더미 텍스가 필요한 경우
단위 변환
전체적인 레이아웃을 제작할 때
필요한 가상 이미지
W3C (월드와이드 웹 컨소시엄, 활동사항, 기술동향 등의 정보 제공)
다양한 디바이스 환경에 어울리는 미디어쿼리
웹 접근선 관련 권고되는 사항
W3schools
Html 정보 사이트로 html, xml, 브라우저, 서버 스크립트에 대한
정보 제공
색상 정보 제공 ( colorpicker.com )