HeidiSQL은 MariaDB, MySQL, Microsoft SQL Server, PostgreSQL, SQLite 등에서 사용할수 있는 GUI 데이터베이스 관리 프로그램입니다.오픈 소스입니다. 

1.설치

2.세션관리자 설정

3.작업

1.설치

Download HeidiSQL

에서 사용하는 os 버전에 맞게 다운 받아 설치합니다

2.세션관리자 설정

- heidiSQL 실행

- 파일 > 세션관리자 클릭

- 세션관리자 창에서 > 하단 “신규” 버튼 클릭 후

접속할 db의 Ip ,사용자 ,암호, 포트 3306(기본)를 설정합니다. 현재 mysqld로 접속설정 후

"열기" 버튼을 사용해서 서버에 접속합니다.

3.작업

1번 부분에서 연결된 dbms관련 탐색

2번 부분에서 정보및 쿼리 실행(탭 부분)

3번에는 실행한 쿼리가 로깅됩니다.

display: flex;로 설정된 부모 컨테이너 내부의 자식 요소들을 정렬하는 데 사용됩니다.

tailwindcss에서 display: flex; 는 flex

<div>
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex속성을 이용해서 Flexible Box Layout으로 만듭니다. 기본이 row인지 바로 옆으로 이동합니다.

<div class="flex">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex박스 안쪽 item들이 주축에서 공간을 나누도록 justify-between을 추가 합니다.

<div class="flex justify-between">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

<article className="flex flex-col w-full shadow my-4">
  <a href="#" className="hover:opacity-75">
    article &gt; a
  </a>
  <div className="bg-white flex flex-col justify-start p-6">
    <a href="#" className="hover:opacity-75"> 
      article a
    </a>
  </div>
</article>

1.요소의 바로 아래 있을경우 > 를 사용합니다.

article > a {
    color: blue;
}

결과

2.article 안쪽 전체의 a 요소 색상을 변경할 경우입니다.

article a {
    color: blue;
}

결과

구글 아이콘에 hover 속성을 줘서 색상을 바꿔보려고 합니다.

1.구글 아이콘을 검색후 svg 로 다운 받습니다.

2.tailwindcss의 fill속성을 이용해서 색상을 변경합니다.

1.구글 아이콘 svg 얻기

Material Symbols and Icons - Google Fonts

<svg height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

처음 다운정보에는 xmlns정보가 있으나 삭제했습니다.

2. tailwindcss의 fill 속성을 이용해서 색상 변경하기

<svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>

class="fill-black hover:fill-blue-500"  기본 검정, 마우스 hover일때 원하는 색상을 선택합니다. 현재 blue-500

처음에 stroke 속성인줄 알았으나 fill 이었습니다.

Fill - Tailwind CSS

개발환경에서 vite의 서버를 ssl로 시작해야할 경우입니다.

1.플러그인 설치

2.vite.config.ts 수정

1.플러그인 설치

 npm install -D @vitejs/plugin-basic-ssl

2.vite.config.ts수정

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),
    basicSsl()  //추가
  ],
})

설정 후 시작화면 입니다.

Server Options | Vite (vitejs.dev)

ssl - Vite https on localhost - Stack Overflow