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

템플릿마다 폴더 구성이 다르기 때문에 먼저 main화면부터 띄워서 구성을 확인해보는 게 좋다.

보통 index.html 파일이 메인화면일 가능성이 크다.

 

  • /resources 안으로 본인의 환경과 구성에 맞게 폴더들을 생성하고 파일들을 집어 넣어주면 된다.
    • 먼저 static과 templates 폴더를 생성한다.
    • templates에 뷰화면을 띄우는 html을 집어넣는다.
    • static에 css, image, js 등의 파일들을 넣는다.
  • /resources/templates안
    • controller에 맞게 폴더들 생성(뷰 화면)
    • fragments 폴더 생성(top menu나 footer와 같은 매 뷰마다 들어가는 것들)
  • /resources/static안
    • css, js, images, font를 자신의 생각대로 구성해 넣는다.

예시

 

현재 진행하고 있는 프로젝트의 resources폴더이다.

본인이 먼저 어떻게 정리할 건지 생각하고 진행하면 좋겠다.

 

❗ fragments 파일을 생성해두면 뷰 화면의 코드를 줄일 수 있어 좋다:) ❗

저작자표시

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

[HTML, CSS] icon삽입  (0) 2021.08.02
[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

예제 도메인) https://realyun99.tistory.com:8080/mange/newpost?type=post#yj

Properties

Property Description Example
hash 주소값에 붙어있는 anchor값 반환 #yj
host URL의 도메인과 포트 반환 realyun99.tistory.com:8080
hostname URL의 도메인 반환 realyun99.tistory.com
href URL 반환 https://realyun99.tistory.com:8080
origin 프로토콜 + URL의 도메인 + 포트 https://realyun99.tistory.com:8080
pathname URL 경로 반환 /mange/newpost
port 서버포트 반환 8080
protocol 프로토콜 반환 http:
search URL에 붙은 매개변수 반환(물음표 뒤의 값) ?type=post

Methods

Method Description
assign(url) 새로운 주소 이동
reload(forceget) 현재 페이지 새로고침
replace(url) 새로운 주소 이동(세션 히스토리 없이)

예제

  • 새 페이지로 이동하기
window.location.assign("http://www.naver.com"); //or
window.location = "http://www.naver.com";

 

  • 현재 페이지 새로고침
window.location.reload(true);

 

  • replace()를 사용해 새 페이지로 이동하기
function reloadPageWithHash() {
  var initialPage = window.location.pathname;
  window.location.replace('http://www.naver.com/#' + initialPage);
}
저작자표시

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

[HTML, CSS] icon삽입  (0) 2021.08.02
[HTML] 템플릿 파일 적용 규칙  (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

500 ERROR 상황

- 서버 통신의 Timeout 시간 지연 오류
- 서버 트래픽 과부하
- 서버 언어의 구문 에러(스크립트 문법 오류)

 

❗ 나의 경우에 스크립트 쪽 오류가 계속 떴었고 이는 폴더 이름들과 연관 있었다.

templates라 코드에 선언했지만 폴더 이름은 template이어서 경로가 맞지 않았던 것이다.

폴더 이름 생성에 있어서 유의해야겠다!! ❗

저작자표시

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

[Javascript] window.location 객체  (0) 2021.07.30
[HTML] HTML 템플릿 다운로드 사이트  (0) 2021.07.30
[ERROR] static파일 적용 관련  (0) 2021.07.30
[HTML, Javascript] jQuery  (0) 2021.07.28
[Thymeleaf] 기본 문법  (0) 2021.07.27

 "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

+ Recent posts

티스토리툴바