fontawesome 아이콘 삽입

https://fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

위의 사이트에서 원하는 아이콘을 찾는다! (pro 붙어있는 것은 유료이다)

 

HTML파일 안에 script 추가

<!DOCTYPE html>
<html>
  <head>
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
  </head>
  <body></body>
</html>

 

사이트에서 원하는 아이콘을 찾으면 <i>태그를 복사한 후 HTML파일에 붙여 넣는다.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
  </head>
  <body>
    <div style="font-size: 30px;">
      <i class="fas fa-smile"></i>
    </div>
  </body>
</html>
저작자표시

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

[HTML] 템플릿 파일 적용 규칙  (0) 2021.07.30
[Javascript] window.location 객체  (0) 2021.07.30
[HTML] HTML 템플릿 다운로드 사이트  (0) 2021.07.30
[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30

1. https://html5up.net/

 

HTML5 UP

Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.

html5up.net

템플릿이 많지는 않지만 퀄리티가 좋음!(무료)

 

2. https://themewagon.com/theme_tag/free/

 

1000+ Free Bootstrap HTML5 CSS3 Website Templates | High Quality Web Templates

Searching for high-quality free demo HTML5 website templates? Download responsive HTML5 CSS3 website templates & Bootstrap themes. Free for commercial use.

themewagon.com

생각보다 다양한 템플릿들 존재!(무료)

 

3. https://bootstrapthemes.co/items/free-bootstrap-templates/

 

Html Free Bootstrap Templates and Free Bootstrap Themes

Download High-Quality Html free bootstrap themes, free bootstrap templates for your website. All are free for commercial use.

bootstrapthemes.co

다운 받으려면 sns에 공유하기를 해야만 한다. 하지만 좋은 반응형 템플릿들이 있음(무료)

 

4. https://themeforest.net/

 

WordPress Themes & Website Templates from ThemeForest

Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates.

themeforest.net

자주 구매하는 곳(유료)

저작자표시

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

[HTML] 템플릿 파일 적용 규칙  (0) 2021.07.30
[Javascript] window.location 객체  (0) 2021.07.30
[ERROR] 500에러 관련  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28

 "template을 자꾸 찾을 수 없다"는 오류가 떴다.

이는 handler 선언을 하지 않았기 때문에 뜬 오류이다! 경로를 설정해줘야 한다.

 

config 폴더를 생성해 안에 MvcConfig.java 파일을 생성하고 안에 핸들러를 선언해줘야 한다.

 

@Configuration
public class MvcConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/static/**")
        .addResourceLocations("classpath:/static/")
        .setCachePeriod(3600000);
  }

}

위와 같이 WebMvcConfigurer를 implements 하고 addResourceHandlers 선언하고 경로를 찾아준다.

저작자표시

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

[HTML] HTML 템플릿 다운로드 사이트  (0) 2021.07.30
[ERROR] 500에러 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27
[HTML] Thymeleaf  (0) 2021.07.27

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

Template Engine(템플릿 엔진)

  • 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어
  • web template engine은 웹 문서가 출력되는 템플릿 엔진
  • view code(html)와 data logic code(DB connection)를 분리해줌

[출처] https://gmlwjd9405.github.io/2018/12/21/template-engine.html

종류

Layout Template Engine vs Text Template Engine

  • Layout Template Engine : 중복되는 include 코드를 사용하지 않고도 지정된 페이지 레이아웃에 따라 페이지 타일을 조합하여 완전한 페이지로 만들어줌
  • Text Template Engine : 템플릿 양식에 적절한 특정 데이터를 넣어 결과 문서를 출력(Thymeleaf, JSP)

ServerSide Template Engine vs ClientSide Template Engine

  • ServerSide Template Engine : 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 html을 그려 클라이언트에 전달
  • ClientSide Template Engine : html 형태로 코드를 작성할 수 있으며, 동적으로 DOM을 그리게 해주는 역할

 

필요성

  • 많은 코드를 줄일 수 있다.
  • 재사용성이 높다
  • 유지보수에 용이하다
저작자표시

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

[배경] JPA  (0) 2021.07.27
[배경] Maven  (0) 2021.07.27
[배경] Spring Security  (0) 2021.07.27
[배경] Spring 실행 순서  (0) 2021.07.27
[배경] MVC Pattern  (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

+ Recent posts

티스토리툴바