Spring - [HTML,CSS,Thymeleaf] 이미지 넣기, 눈누 글씨체 사용하기

 

 

 

[ 로또, 버튼 눌러 랜덤한 숫자 6개 출력하기 ]

 

Spring - [intelliJ,Thymeleaf] 로또, 버튼 눌러 랜덤 숫자 6개 출력하기(2)

 

 

---

 

 

네잎클로버 이미지 넣고,
글씨체 바꾸기

 

 

 

 

 

1. 이미지와 전체코드

 

 

이미지

 

 

 

코드

 

GitHub - hyeong-ing/LuckyLotto: 로또 번호가 출력되는 웹사이트입니다.

 

 

 

 

 

---

 

 

 

 

 

 

2. 이미지 넣기

 

타임리프를 사용 중이라면, HTML 이미지 넣는 기본적인 방법과 다르다. 

 

 

□ 원하는 이미지 다운받기.

클로버 아이콘, 로고, 기호 – PNG, SVG 무료 다운로드

 

 

 

□ 해당 이미지는 static.css에 넣기.

 

본인은 처음에 이미지를 css에 경로를 넣거나, 다른 클래스를 이미지를 넣는 방법을 했었다. 하지만 계속해서 이미지가 제대로 출력되지 않았다. 고민을 하다가 타임리프와 연관이 있나 싶어 검색해보니, 타임리프를 사용 중일 경우 일반적인 방법이 통하지 않는다는 것을 알았다.

 

이렇게 static.css에 이미지를 넣어준다.

 

.lucky {
    display:inline-block;
}

 

해당 사진을 나열하기 위해 style.css에 display(화면에 어떻게 보이고 싶은지)에 inline-block;(나열되도록)을 적었다.

 

 

<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">
<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">
<img th:src="@{/css/lucky.png}" alt="Lucky" class="lucky">

 

원하는 위치에 th:src="@{/css/lucky.png}"를 넣어주면 된다. 여기서 alt는 이미지가 보여지지 않을 경우 나타나는 이미지 대체 정보이며, class는 style.css에 저장된 속성을 가져온다.

 

 

 

 

 

---

 

 

 

 

 

3. 글씨체 바꾸기

 

글씨체는 다양한 사이트에서 가져올 수 있다. 아래 사이트 외에도 어도비 등 다양하게 있다. 여기 중요한 것은 글씨체마다 공유될 수 있는 범위가 다르니 잘 확인해보고 가져와야 하는 것이다. 또 사이트마다 글씨체 적용되는 방법이 다를 수 있다.

 

 

눈누

눈누

 

 

산돌구름

 

저작권 걱정없는 무료폰트 | 산돌구름

 

 

네이버

네이버 글꼴 모음

 

 

 

□  프로젝트에 사용한 글씨체는 눈누에서 가져온 것이다.

 

눈누 - 학교안심 둥근미소

눈누

 

 

 

□  우측에 보면 웹폰트로 사용이 있다. 옆에 네모난 걸 눌러 복사 후, style.css에 붙여넣기 한다.

 

 

 

□ 폰트를 사용하고 싶은 부분에 적용하기.

body {
    font-family: 'HakgyoansimDunggeunmisoTTF-B';
}

 

body의 글씨체를 바꾸기 위해 style.css에 위의 코드로 작성했다.

 

 

 

□ 버튼도 글씨체 바꿔주기.

.btn {
    background-color: #AC72E5;
    color: white;
    border: none;
    border-radius:20px;
    width:200px;
    height:60px;
    font-size:40px;
    text-align: center;
    cursor: pointer;
    font-family: 'HakgyoansimDunggeunmisoTTF-B';
}

 

body 안에 버튼이 있긴 하지만, 버튼 글씨체는 바뀌지 않았다. 그래서 font-family를 추가하여 버튼도 글씨체를 바꿔주었다.