jQuery

  • HTML 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리
  • MIT 라이선스를 가진 자유 오픈 소프트웨어
  • 사용 이유
    • 페이지 내부 요소에 접근하기 쉽다
    • 페이지의 보여지는 모습을 변경하기 쉽다
    • 상호작용 처리가 쉽고 애니메이션 사용 가능
    • AJAX의 사용이 쉽다

jQuery의 시작

 

$(document).ready(function(){
   // process.. 
});

제이쿼리가 자바스크립트보다 더 빨리 실행되는 이유는 document문서가 로드되었을 때(text문서만 로딩) 제이쿼리는 실행된다. 하지만 자바스크립트의 window.onload는 모든 내용을 로드 한 뒤 실행된다.

 

jQuery 선택자(selector)

 

$("p") element selector
$("#id") id selector
$(".class") class selector

[출처] https://www.w3schools.com/jquery/jquery_ref_selectors.asp

 

❗ 이밖에도 jQuery문법은 다양하다. https://www.w3schools.com/jquERy/default.asp 를 참고하도록 ❗

저작자표시

'Web > Front' 카테고리의 다른 글

[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] Thymeleaf  (0) 2021.07.27
[HTML] 기본 태그  (0) 2021.07.27

표현식

  • 변수 : ${...}
  • 선택 변수 : *{...}
  • 메시지 : #{...}
  • Link URL : @{...}

text operation

  • 문자열 연결 : +
  • 문자 대체 : |이렇게 묶어주세요|

boolean 연산

  • Binary : and, or
  • 부정 : !, not

조건 연산

  • if-then : (if) ? (then)
  • if-then-else : (if) ? (then) : (else)
  • Default : (value) ?: (defaultValue)

 

저작자표시

'Web > Front' 카테고리의 다른 글

[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[HTML] Thymeleaf  (0) 2021.07.27
[HTML] 기본 태그  (0) 2021.07.27

Thymeleaf

  • "웹(Servlet)환경과 웹이 아닌 환경 모두애서 작동할 수 있는 Java XML/XHTML/HTML5 template engine"
  • spring MVC구조에서 View 담당
  • src/main/resources/templates 경로를 기본 경로로 인식(의존성 추가하면)

 

간단한 사용법

 

Maven Dependencies 추가(pom.xml)

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

 

application.yml에 추가

<!--application.yml-->
thymeleaf:
    prefix: classpath:templates/
    suffix: .html
    cache: true
    
<!--application-local.yml-->
  thymeleaf:
    cache: false

 

.html에 추가해서 사용

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Test</title>
</head>
<body>
<p th:text="'타임리프 테스트 '" />
</body>
</html>

 

저작자표시

'Web > Front' 카테고리의 다른 글

[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] 기본 태그  (0) 2021.07.27

<a>: 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의

href= “javascript:void(0)” 는 링크기능을 무효화

 

<body>: 해당 html문서의 텍스트, 하이퍼링크, 이미지, 리스트 등과 같은 모든 콘텐츠를 포함하는 영역(문서 안에 하나만 가능)

 

<div>: html문서에서 특정 영역이나 구획을 정의, css와 함께 자주 쓰임

 

<form>: 사용자로부터 입력을 받을 수 있는 html 입력 폼을 정의

 

<input>: 사용자로부터 입력을 받을 수 있는 입력필드를 정의

 

<nav>: 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합

 

<ul>: 순서가 없는 html 리스트를 정의

 

<li>: html리스트에 포함되는 아이템을 정의

 

<span>: html문서에서 인라인 요소들을 하나로 묶을 때

 

<script>: client-side scripts를 정의

 

&nbsp; 공백(진짜 공백과 기호를 번갈아가면서 써라)

&it; 부등호(<)

&gt; 부등호(>)

&amp; 앰퍼샌드

&quot; 쌍따옴표(“)

 

저작자표시

'Web > Front' 카테고리의 다른 글

[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] Thymeleaf  (0) 2021.07.27

+ Recent posts

티스토리툴바