'Front-End'에 해당되는 글 28건
-
Jquery 기본 문법
2017.10.23 -
자바스크립트가 서버 사이드로 발전
2017.08.18 -
HTML 5 시맨틱 레이아웃
2017.07.29 -
HTML5 기본 템플릿
2017.07.28 -
w3schools - templates
2017.07.06 -
jQuery Misc
2017.07.06 -
jQuery AJAX
2017.07.06 -
jQuery Traversing
2017.07.06 -
jquery HTML
2017.07.06 -
jQuery Effects
2017.07.06
Jquery 기본 문법
<script>
$(document).ready(function(){
... jQuery 메소드, 액션을 입력 ...
});
</script>
<script>
$(function(){
... jQuery 메서드, 액션을 입력 ...
});
</script>
출처 : http://theqoop.tistory.com/295
'Front-End > J-Query' 카테고리의 다른 글
w3schools - templates (0) | 2017.07.06 |
---|---|
jQuery Misc (0) | 2017.07.06 |
jQuery AJAX (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
자바스크립트가 서버 사이드로 발전
자바 스크립트는 프로그래밍 적으로 웹 브라우저를 제어한다.
onclick="alert('Hello World')"
탈 웹브라우저
웹서버를 동작하게 한다.
서버 사이드 스크립트
(자바스크립가 웹 브라우저에서 사용하는것은
클라이언트 사이드 스크립트)
웹서버 <----요청---- 웹 브라우저
웹서버 ----응답----> 웹 브라우저
PHP 웹
JAVA
PYTHON
JavaScritp
기존에는 웹 브라우저를 제어했었던 자바스크립트
현재는 웹 서버를 제어하는 자바스크립트
= 자바스크립트를 웹 서버에서 사용하게 하는 기술의 대표가
Node.js
자바스크립트가 브라우저에서 벗어나서 서버 언어로 발전 = 탈웹
출처 : 생활코딩
https://www.youtube.com/watch?v=PZIPsKgWJiw
'Front-End > JavaScript' 카테고리의 다른 글
논리연산자 (0) | 2017.03.13 |
---|---|
함수 (0) | 2017.03.11 |
while (0) | 2017.03.11 |
반복문 - for (0) | 2017.03.11 |
시간에 따라 다른 메시지 표시하기 - 논리 연산자 (0) | 2017.03.11 |
HTML 5 시맨틱 레이아웃
<!DOCTYPE HTML>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/common.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="../js/action.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="wrap"> <!-- 현재 페이지 전체 레이아웃 -->
<header class=""> <!-- 페이지의 주요 영역, 주로 아티클 헤더, 어사이드헤더에 사용 -->
<nav class=""> <!-- 헤더 및 푸터 일부는 또는 이와 상관없이 포함될 수 있음 -->
</nav>
</header>
<section class=""> <!-- 페이지의 주요 영역, 주로 아티클을 포함한 영역을 정의 -->
<article class=""> <!-- 개별 브로그 엔트리나 블로그 엔트를 추상화 한것 -->
<header class=""> <!-- 작은 헤더(부제목) -->
</header>
<figure class=""> <!-- 페이지에 임베드한 이미지, 오디오, 동영상을 포함 -->
</figure>
<footer class=""></footer> <!-- 작은 본문 하위 -->
</article>
<dialog class=""></dialog> <!-- 대화를 나타내는 <dl> 엘리먼트를 대체 -->
</section>
<aside class=""> <!-- 관련링크, 2차적인 페이지 이동, 광고 같은 페이지의 보조 콘텐츠에 사용 -->
</aside>
<footer class=""> <!-- 헤더와 비슷하지만 다른 엘리먼트의 바닥에 놓을 수 있음 -->
</footer>
</div>
</body>
</html>
<!--
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
-->
출처 : http://www.w3im.com/ko/html/html5_semantic_elements.html
<article> | 기사를 정의 |
<aside> | 페이지 내용을 제외하고 내용을 정의 |
<details> | 사용자가 보거나 숨길 수있는 추가 정보를 정의합니다 |
<figcaption> | A에 대한 자막을 정의 <figure> 요소 |
<figure> | 등 그림, 도표, 사진, 코드 목록, 같은 자체에 포함 된 내용을 지정합니다 |
<footer> | 문서 또는 섹션 바닥 글을 정의 |
<header> | 문서 또는 섹션 헤더를 지정합니다 |
<main> | 문서의 주요 내용을 지정 |
<mark> | 표시 / 강조 표시된 텍스트를 정의합니다 |
<nav> | 탐색 링크를 정의 |
<section> | 문서에 섹션을 정의합니다 |
<summary> | A에 대한 눈에 띄는 제목을 정의 <details> 요소 |
<time> | 날짜 / 시간을 정의 |
'Front-End > HTML/CSS' 카테고리의 다른 글
HTML5 기본 템플릿 (0) | 2017.07.28 |
---|
HTML5 기본 템플릿
HTML5 기본 템플릿
폴더 경로에 따른 css / js 경로 지정
<!DOCTYPE HTML>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> // 인코딩 만국어-8
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">// 반응형
<link href="../css/common.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/action.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
CSS 기본 템플릿
순서
1. charset
2. import
3. reset
4. common
5. layout
6. custom: 레이아웃 > 보더/배경 > 폰트 > 기타
CSS 전체 초기화
본인이 쓰면서 커스터 마이징 하면됨
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
'Front-End > HTML/CSS' 카테고리의 다른 글
HTML 5 시맨틱 레이아웃 (0) | 2017.07.29 |
---|
w3schools - templates
https://www.w3schools.com/w3css/w3css_templates.asp
'Front-End > J-Query' 카테고리의 다른 글
Jquery 기본 문법 (0) | 2017.10.23 |
---|---|
jQuery Misc (0) | 2017.07.06 |
jQuery AJAX (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
jQuery Misc
다른 자바스크립트 프레임워크와 충돌방지
jQuery - The noConflict() Method
jQuery and Other JavaScript Frameworks
The jQuery noConflict() Method
- js프레임워크 충돌방지
'Front-End > J-Query' 카테고리의 다른 글
Jquery 기본 문법 (0) | 2017.10.23 |
---|---|
w3schools - templates (0) | 2017.07.06 |
jQuery AJAX (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
jQuery AJAX
jQuery - AJAX Introduction
jQuery AJAX Example - AJAX 서버에서 값 가져오기
What is AJAX?
What About jQuery and AJAX?
jQuery - AJAX load() Method
jQuery load() Method
jQuery AJAX Reference
jQuery - AJAX get() and post() Methods
HTTP Request: GET vs. POST
- GET - Requests data from a specified resource // 검색결과 url 뒤에 붙음
- POST - Submits data to be processed to a specified resource // 비밀번호
jQuery $.get() Method
Tip: Here is how the ASP file looks like ("demo_test.asp"):
<%
response.write("This is some text from an external ASP file.")
%>
jQuery $.post() Method
Syntax:
$.post(URL,data,callback);
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
jQuery AJAX Reference
'Front-End > J-Query' 카테고리의 다른 글
w3schools - templates (0) | 2017.07.06 |
---|---|
jQuery Misc (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
jQuery Effects (0) | 2017.07.06 |
jQuery Traversing
핵심 특정 엘리먼트만 선택한다
jQuery Traversing - 조상으로 이동 상위로
DOM tree 내에서 종횡무진 하기
jQuery Traversing Methods
jQuery Traversing - Ancestors
- 조상으로부터 올라감
Traversing Up the DOM Tree
- parent() // 부모
- parents() // 부모들
- parentsUntil() // 유틸
jQuery parent() Method - 지정된 부모만 엘리 선택
jQuery parents() Method - 지정된 엘리 상위 모두 선택
Traversing Down the DOM Tree
- children()
- find()
jQuery children() Method
jQuery find() Method - 검색해서 선택
jQuery Traversing - Siblings -
같은 형제끼리 이동(옆으로 이동)
Traversing Sideways in The DOM Tree
- siblings() // 형제끼리 이동
- next() // 다음에 오는거
- nextAll() // 다음에 오는거 전부
- nextUntil() // 다음에 어디까지
- prev() // 그전에
- prevAll() // 그전에 모두
- prevUntil() // 그전에 어디까지
jQuery siblings() Method
jQuery next() Method - 그 다음꺼만 리턴
jQuery nextAll() Method - 그 다음꺼 전부
jQuery nextUntil() Method - 사이에꺼만 선택
jQuery prev(), prevAll() & prevUntil() Methods
The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).
jQuery Traversing - Filtering
- CSS 선택해서 골라서 이동
The first(), last(), eq(), filter() and not() Methods
jQuery first() Method
jQuery last() Method - 마지막꺼만 선택
jQuery eq() method - 숫자로 선택(0부터 순차적)
jQuery filter() Method - 필터 : 골라서 본다
jQuery not() Method - 그거 아닌것만 골라
'Front-End > J-Query' 카테고리의 다른 글
jQuery Misc (0) | 2017.07.06 |
---|---|
jQuery AJAX (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
jQuery Effects (0) | 2017.07.06 |
jQuery Tutorial (0) | 2017.07.01 |
jquery HTML
jQuery - Get
jQuery - Get Content and Attributes
jQuery DOM Manipulation
Get Content - text(), html(), and val()
속성 요소를 Get 가져온다.
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
기존에 있었던거에서 새롭게 셋팅한다.
(Set)
Set Content - text(), html(), and val()
We will use the same three methods from the previous page to set content:
- text() - Sets or returns the text content of selected elements
- html() - Sets or returns the content of selected elements (including HTML markup)
- val() - Sets or returns the value of form fields
The following example demonstrates how to set content with the jQuery text(), html(), and val() methods:
Set Attributes - attr() - href 속성 변경하기 콜백
<script>
$(document).ready(function(){
$("button").click(function(){ // 하이퍼 레퍼런스 href 속성 url 변경
$("#w3s").attr("href", "https://www.w3schools.com/jquery"); //W3Schools 변경
});
});
</script>
</head>
<body>
<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
A Callback Function for attr()
jQuery - Add Elements -
엘리먼트(컨텐츠) 추가
- append() - Inserts content at the end of the selected elements // 컨텐츠를 뒷부분에 추가
- prepend() - Inserts content at the beginning of the selected elements // 앞부분에 추가
- after() - Inserts content after the selected elements // 뒷부분 추가
- before() - Inserts content before the selected elements // 앞부분 추가
jQuery append() Method - 뒷부분 추가
jQuery prepend() Method - 앞부분에 컨텐츠 추가
Add Several New Elements With append() and prepend() - JQuery 에서 새로운 엘리먼트 추가
jQuery after() and before() Methods
Add Several New Elements With after() and before() - 각각 엘리먼트 속성에 따라 추가하는 방법
- remove() - Removes the selected element (and its child elements) // 모두 없어짐
- empty() - Removes the child elements from the selected element // 자식만 없어짐
jQuery remove() Method - 모두 없어짐
jQuery empty() Method -자식 엘리만 없어짐
Filter the Elements to be Removed - 필더
jQuery - CSS Classes (CSS 다루기)
jQuery - Get and Set CSS Classes
jQuery Manipulating CSS
- addClass() - Adds one or more classes to the selected elements // 지정된 클라스 추가
- removeClass() - Removes one or more classes from the selected elements // 지정된 클라스 제거
- toggleClass() - Toggles between adding/removing classes from the selected elements
- // 토글 할때마다 +-
- css() - Sets or returns the style attribute // 속성값 반환
Example Stylesheet
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
jQuery removeClass() Method - 클라스 색깔 제거
jQuery toggleClass() Method - On Off
jQuery - css() Method
하나 이상의 속성값을 반환하거나 변경
Return a CSS Property - 객체의 속성을 반환(보여)
css("propertyname");
Set Multiple CSS Properties - 여러게 엘리 속성 변경
css({"propertyname":"value","propertyname":"value",...});
jQuery Dimension Methods
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() and height() Methods - w,h 면적값 반환
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#div1").width() + "</br>";
txt += "Height of div: " + $("#div1").height();
$("#div1").html(txt);
});
});
</script>
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="div1"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
jQuery innerWidth() and innerHeight() Methods
jQuery outerWidth() and outerHeight() Methods
jQuery More width() and height()
'Front-End > J-Query' 카테고리의 다른 글
jQuery Misc (0) | 2017.07.06 |
---|---|
jQuery AJAX (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jQuery Effects (0) | 2017.07.06 |
jQuery Tutorial (0) | 2017.07.01 |
jQuery Effects
jQuery Effects - Hide and Show - 효과(이벤트랑 다름)
jQuery hide() and show() - btn 선택 숨김 / btn 선택 보여줌
$("p").hide(); // p태그 선택하면 숨김
});
$("#show").click(function(){ // 도큐맨트 준비되면
$("p").show(); // p태그 선택 보여줌
});
$(selector).show(speed,callback); // 보여주는 속도 조절 가능
$("p").hide(1000); // 1000 = 1초
});
jQuery toggle() - 토글
});
jQuery Effects - Fading -
시각적효과 *
부드럽게 사라지거나 보여주거나 하는 기능
jQuery Fading Methods - 종류
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeOut() Method - 사라짐
$(selector).fadeOut(speed,callback);
$("#div1").fadeOut(); //사라짐
$("#div2").fadeOut("slow"); // 느리게 옵션
$("#div3").fadeOut(3000); // 속도 지정 3000은 3초
});
jQuery fadeToggle() Method - 클릭에 따라 On Off
$(selector).fadeToggle(speed,callback);
$("#div1").fadeToggle(); // On Off
$("#div2").fadeToggle("slow"); // 느리게
$("#div3").fadeToggle(3000); //속도 지정
});
jQuery fadeTo() Method - 투명도
jQuery Sliding Methods - 종류
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() Method
$(selector).slideDown(speed,callback);
jQuery slideUp() Method - 줄 올림
$(selector).slideUp(speed,callback);
jQuery slideToggle() Method - On Off
$(selector).slideToggle(speed,callback);
jQuery Effects - Animation
- 애니메이션
jQuery Animations - The animate() Method
$(selector).animate({params},speed,callback);
jQuery animate() - Using Pre-defined Values - 사전에 정의된 벨루값을 줄수있다
jQuery animate() - Uses Queue Functionality - 애니메이션 연결
jQuery Stop Animations - 효과 중지
jQuery stop() Method - 정지
jQuery Callback Functions - 효과가 끝났을때 실행되게 하는거
jQuery Callback Functions
jQuery - Chaining - 명령어를 여러개 연결해서 사용
'Front-End > J-Query' 카테고리의 다른 글
jQuery Misc (0) | 2017.07.06 |
---|---|
jQuery AJAX (0) | 2017.07.06 |
jQuery Traversing (0) | 2017.07.06 |
jquery HTML (0) | 2017.07.06 |
jQuery Tutorial (0) | 2017.07.01 |