'개발 ·공부/WEB' 카테고리의 글 목록

개발 ·공부/WEB

[CSS] 마진(margin), 패딩(padding) 2023.01.15
[Tailwindcss] 테일윈드 설치 및 적용 2023.01.12
[Thymeleaf] if ~ else 사용하는 방법 (if, unless) 2022.08.10
[Thymeleaf] fragment, replace 를 활용한 html include 방법 2022.08.09
[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize" 2022.07.04

[CSS] 마진(margin), 패딩(padding)

2023. 1. 15. 21:02

728x90

CSS를 하다보면 좀 어렵다고 느끼는 마진과 패딩에 대해 정리!

마진(margin)

현재 요소 주변의 여백 공간을 의미함.

마진을 조절해서 현재 요소와 다른 요소 공간을 조절 할 수 있음.

패딩(padding)

콘텐츠와 테두리 사이의 여백 공간.

사용방법은 마진과 같음

728x90

저작자표시 비영리 (새창열림)

'개발 ·공부 > WEB' 카테고리의 다른 글

[Tailwindcss] 테일윈드 설치 및 적용 (0)	2023.01.12
[Thymeleaf] if ~ else 사용하는 방법 (if, unless) (0)	2022.08.10
[Thymeleaf] fragment, replace 를 활용한 html include 방법 (0)	2022.08.09
[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize" (0)	2022.07.04

[Tailwindcss] 테일윈드 설치 및 적용

2023. 1. 12. 01:52

728x90

서비스하나를 만들어보기 위해 부트스트랩이 아닌 Tailwincss 사용해 만드려고 하는데 설치 및 적용 방법을 까먹지 않기 위해 작성

1. Tailwind 설치

- Tailwind 설치 할 폴더에 커맨드 창이나 vscode 커맨드창에 아래코드 작성

npm install -D tailwindcss
npx tailwindcss init

2. 템플릿 경로 구성

- tailwind.config.js 에 아래 코드 작성

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. tailwind 레이어를 추가하기 위한 폴더 생성 및 css 파일 생성

- 나는 src/css/tailwind.css 파일을 생성함

- tailwind.css 파일에 아래와 같이 작성

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Tailwind CLI 빌드

- 3번에 생성한 파일 경로 확인하고 작성

- 아래 명령어 실행시 빌드가 되고 /dist/ouput.css 폴더와 파일이 생성

npx tailwindcss -i ./src/css/tailwind.css -o ./dist/output.css --watch

5. HTML에서 Tailwind 사용

- src/index.html 파일 생성해서 tailwind를 빌드한 /dist/output.css 경로 link 연결

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

결과물 :

출처

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

tailwindcss.com

728x90

저작자표시 비영리 (새창열림)

'개발 ·공부 > WEB' 카테고리의 다른 글

[CSS] 마진(margin), 패딩(padding) (0)	2023.01.15
[Thymeleaf] if ~ else 사용하는 방법 (if, unless) (0)	2022.08.10
[Thymeleaf] fragment, replace 를 활용한 html include 방법 (0)	2022.08.09
[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize" (0)	2022.07.04

[Thymeleaf] if ~ else 사용하는 방법 (if, unless)

2022. 8. 10. 11:20

728x90

타임리프에서 if ~ else를 사용하는 방법

<span th:if="${session.user_id} == 'admin'"></span>
<span th:unless="${session.user_id} == 'admin'"></span>

사용방법은 정말 간단하다.

th:if 와 th:unless를 사용해주면 된다. else가 unless로 바뀌었다는거만 알면 된다.

여기서 중요한건 if조건과 unless의 조건을 동일하게 작성해야된다는 거다.

업무를 하면서 로그인 했을 때와 하지 않았을 때,

관리자와 유저에 따라 보여주는 화면을 다르게 만들때 사용했는데,

자바스크립를 사용했을 때보다 더 편했다.

각 Session 값을 주고 타임리프를 사용하는게 코드가 더 간결해지고 빠르게 작업이 가능했다.

자바스크립트와 타임리프 둘 중에 뭐가 더 맞는 방식인지는 잘 모르겠지만 서로 장단점은 있을거 같고....

거기에 대해서는 나중에 좀 더 공부해봐야겠다.

728x90

저작자표시 비영리 (새창열림)

'개발 ·공부 > WEB' 카테고리의 다른 글

[CSS] 마진(margin), 패딩(padding) (0)	2023.01.15
[Tailwindcss] 테일윈드 설치 및 적용 (0)	2023.01.12
[Thymeleaf] fragment, replace 를 활용한 html include 방법 (0)	2022.08.09
[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize" (0)	2022.07.04

[Thymeleaf] fragment, replace 를 활용한 html include 방법

2022. 8. 9. 13:47

728x90

fragment, replace 를 활용한 html include 방법

템플릿, 레이아웃 등 조각으로 나누어진 html 파일을 타임리프에서 쉽게 불러올 수 있다.

body.html에서 head.html의 내용을 불러오기 위해서는 head.html 에 타임리프 fragment를 사용하여 불러올 내용에 대해 먼저 선언해야하는데 여기에서는 head를 선언했다.

#head.html
<div th:fragment="head"> </div>

head.html에서 선언한 head를 body.html에서 호출하기 위해서는 타임리프 replace를 사용하고 head.html 경로와 선언한 head를 입력하여 호출한다.

#body html
<div th:repalce="head.html :: head"> </div>

728x90

저작자표시 비영리 (새창열림)

'개발 ·공부 > WEB' 카테고리의 다른 글

[CSS] 마진(margin), 패딩(padding) (0)	2023.01.15
[Tailwindcss] 테일윈드 설치 및 적용 (0)	2023.01.12
[Thymeleaf] if ~ else 사용하는 방법 (if, unless) (0)	2022.08.10
[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize" (0)	2022.07.04

[Mybatis] 대용량 데이터 조회 시 성능 향상 방법 "fetchSize"

2022. 7. 4. 10:48

728x90

프로젝트 중에 대용량 데이터를 조회하는 방법을 찾는 와중에 Mybatis에서 대용량 데이터 조회시 성능을 향상 시키는 방법을 찾게 됨

<select id="your_id", resultType="hashmap" fetchSize="1000">
	select * from table;
</select>

fetchSize를 잘 설정하지 않은 옵션이며 기본값은 10으로 되어 있음.

fetchSize 가 10이면 조회 데이타가 1000개 일때 100번을 조회하게 되는데 1,000을 주게 되면 1번만 조회한다.

1,000 ~ 2,000 이 적당하다고 함

728x90

저작자표시 비영리 (새창열림)

'개발 ·공부 > WEB' 카테고리의 다른 글

[CSS] 마진(margin), 패딩(padding) (0)	2023.01.15
[Tailwindcss] 테일윈드 설치 및 적용 (0)	2023.01.12
[Thymeleaf] if ~ else 사용하는 방법 (if, unless) (0)	2022.08.10
[Thymeleaf] fragment, replace 를 활용한 html include 방법 (0)	2022.08.09

PREV 이전 1 NEXT 다음

LUNA Dev 📁