[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기

  HTML에서 icon을 클릭했을 때  다른 icon으로 변경하는 예제입니다. 

아이콘은 Font Awesome를 이용합니다.

 

1. 참고 페이지

▶ Font Awesome icon 사용하는 방법 

 

[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기

[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기 Font Awesome은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. Font Awesome 6버전까지 출시가 되었어도 아

happyldh.tistory.com

▶ 이미지 동적으로 변경하는 방법

 

[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법

[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  HTML에서 버튼을 클릭했을 때 이미지를 동적으로 변경하려면 JavaScript를 사용하여 이미지의 src 속성을 업데이트하면 

happyldh.tistory.com

 

2. icon 클릭시 다른 icon으로 변경하기 

▶ 전체 소스 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      #box {
        cursor: pointer;
      }
      .boxOpen::before {
        content: "\f0c9"; /* f0c9은 fontawesome에서 .fa-bars의 유니코드 */
        font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
      }
      .boxClose::before {
        content: "\f00d";  /* f00d fontawesome에서 .fa-times의 유니코드 */
        font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
      }
    </style>
    <script>
        // changeImg 함수는 div 요소의 클래스를 변경합니다.
        function changeImg() {
            // id가 "box"인 div 요소를 가져옵니다.
            var div = document.getElementById("box");
            // div 요소에 "boxOpen" 클래스가 있는지 확인합니다.
            if (div.classList.contains("boxOpen")) {
                // "boxOpen" 클래스가 있으면 "boxOpen" 클래스를 제거하고 "boxClose" 클래스를 추가합니다.
                div.classList.remove("boxOpen");
                div.classList.add("boxClose");
            } else {
                // "boxOpen" 클래스가 없으면 "boxClose" 클래스를 제거하고 "boxOpen" 클래스를 추가합니다.
                div.classList.remove("boxClose");
                div.classList.add("boxOpen");
            }
        }
    </script>
  </head>
  <body>
    <div id="box" class="boxOpen" onclick="changeImg()"></div>
  </body>
</html>

♠ 결과 

 

 

 

 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] CDN URL 모음  (1) 2025.01.16
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기  (2) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01

[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법

  HTML에서 버튼을 클릭했을 때 이미지를 동적으로 변경하려면 JavaScript를 사용하여 이미지의 src 속성을 업데이트하면 됩니다. 

  
document.getElementById("img").src = "image.jpg";

 

1. 예제 html 문서 

bg01.jpg
0.29MB
bg02.jpg
0.50MB

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        text-align: center;
      }
      #img {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="img" src="bg01.jpg" />
      <br />
      <button>이미지 변경하기</button>
    </div>
  </body>
</html>

>>> 결과 <<<

2. Button를 클릭하면 이미지 변경하기

  1) javascript 함수를 생성합니다. 

    이미지를 바꾸는 기능을 수행하는 함수를 생성합니다.

<script>
      // changeImg 함수는 img 요소의 이미지를 변경합니다.
      function changeImg() {
        // img 요소를 id로 가져옵니다.
        var img = document.getElementById("img");
        // img 요소의 src 속성을 "bg02.jpg"로 변경합니다.
        img.src = "bg02.jpg";
      }
</script>

 2) 이벤트 핸들러와 함수 연결

    button의 onclick 이벤트 핸들러에 changeImg() 함수를 전달해 주면 됩니다.

<button onclick="changeImg()">이미지 변경하기</button>

 

 3) 전체 소스보기 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        text-align: center;
      }
      #img {
        width: 300px;
        height: 300px;
      }
    </style>
    <script>
      // changeImg 함수는 img 요소의 이미지를 변경합니다.
      function changeImg() {
        // img 요소를 id로 가져옵니다.
        var img = document.getElementById("img");
        // img 요소의 src 속성을 "bg02.jpg"로 변경합니다.
        img.src = "bg02.jpg";
      }
    </script>
  </head>
  <body>
    <div class="container">
      <img id="img" src="bg01.jpg" />
      <br />
      <button onclick="changeImg()">이미지 변경하기</button>
    </div>
  </body>
</html>

>>> 결과 <<<

3. Button를 클릭하면 이미지 토글하기

    버튼을 클릭할때마다 2개의 이미지가 번갈아 가면서 보이게 합니다.
    javascript 함수를 다음과 같이 변경하면 됩니다. 

    <script>
      // changeImg 함수는 img 요소의 이미지를 변경합니다.
      function changeImg() {
        // img 요소를 id로 가져옵니다.
        var img = document.getElementById("img");
        // img 요소의 src 속성이 "bg01.jpg"를 포함하고 있는지 확인합니다.
        if (img.src.includes("bg01.jpg")) {
          // "bg01.jpg"를 포함하고 있으면 "bg02.jpg"로 변경합니다.
          img.src = "bg02.jpg";
        } else {
          // "bg01.jpg"를 포함하고 있지 않으면 "bg01.jpg"로 변경합니다.
          img.src = "bg01.jpg";
        }
      }
    </script>

  전체 소스입니다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        text-align: center;
      }
      #img {
        width: 300px;
        height: 300px;
      }
    </style>
    <script>
      // changeImg 함수는 img 요소의 이미지를 변경합니다.
      function changeImg() {
        // img 요소를 id로 가져옵니다.
        var img = document.getElementById("img");
        // img 요소의 src 속성이 "bg01.jpg"를 포함하고 있는지 확인합니다.
        if (img.src.includes("bg01.jpg")) {
          // "bg01.jpg"를 포함하고 있으면 "bg02.jpg"로 변경합니다.
          img.src = "bg02.jpg";
        } else {
          // "bg01.jpg"를 포함하고 있지 않으면 "bg01.jpg"로 변경합니다.
          img.src = "bg01.jpg";
        }
      }
    </script>
  </head>
  <body>
    <div class="container">
      <img id="img" src="bg01.jpg" />
      <br />
      <button onclick="changeImg()">이미지 변경하기</button>
    </div>
  </body>
</html>

4. Button를 클릭하면 여러 이미지 순환하기 

    버튼을 클릭할때마다 여러개의 이미지가 번갈아 가면서 보이게 합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        text-align: center;
      }
      #img {
        width: 300px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="img" src="bg01.jpg" />
      <br />
      <button onclick="changeImg()">이미지 변경하기</button>
    </div>
    <script>
      // script위치를 header태그에서 body태그 맨 아래로 이동합니다.

      const img = document.getElementById("img");
      // 이미지 배열
      // 이미지를 추가하려면 배열에 이미지 파일명을 추가하면 됩니다.
      const images = ["bg01.jpg", "bg02.jpg", "bg03.jpg"];
      let currentIndex = 0;

      function changeImg() {
        // 다음 이미지로 이동, 나머지 연산자를 사용하여 순환
        // 이미지 배열의 길이를 넘어가면 0으로 초기화
        // 이렇게 하면 이미지 갯수에 상관없이 이미지가 순환하게 됩니다.
        currentIndex = (currentIndex + 1) % images.length;
        img.src = images[currentIndex];
      }
    </script>
  </body>
</html>

 

 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기  (2) 2025.01.12
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01

더미 텍스트를 쉽게 만들자 - 로렘 입숨(Lorem Ipsum), 한글입숨

  로렘 입숨은 디자인이나 웹 개발 시 실제 내용이 들어가기 전에 자리만 채우기 위해 사용하는 의미 없는 라틴어 텍스트입니다. 마치 한글 문서에서 '가나다라마바사'를 반복하며 자리를 채우는 것과 비슷한 역할을 합니다.
  
▶  로렘 입숨 사이트   바로가기

▶  한글 로렘입숨 사이트 바로가기 (1사이트,  2사이트,  3사이트) 
   - 구글에서 한글입숨으로 검색하면 여러 사이트가 나옵니다. 

 

 

※ 로렘 입숨(Lorem Ipsum)이란 무엇일까요?

로렘 입숨은 디자인이나 웹 개발 시 실제 내용이 들어가기 전에 자리만 채우기 위해 사용하는 의미 없는 라틴어 텍스트입니다. 마치 한글 문서에서 '가나다라마바사'를 반복하며 자리를 채우는 것과 비슷한 역할을 합니다.

왜 로렘 입숨을 사용할까요?

  • 디자인 시안 제작: 실제 내용이 들어가기 전에 디자인 레이아웃을 미리 확인하고 수정하기 위해 사용합니다.
  • 폰트 및 타이포그래피 확인: 다양한 폰트와 글자 크기, 줄 간격 등을 적용하여 어떤 조합이 가장 보기 좋은지 시험해 볼 수 있습니다.
  • 페이지 레이아웃 검토: 이미지, 표 등 다른 요소들과 함께 텍스트가 어떻게 배치되는지 확인하고 조정합니다.

 

'쓸만한 사이트 > 무료 이용 사이트' 카테고리의 다른 글

무료 Rest API data 제공 사이트 - JSONPlaceholder  (0) 2025.03.05
두 파일(텍스트)의 차이점을 비교하는 강력한 도구 - Diffchecker  (3) 2025.01.09
무료 이미지 다운로드 - 픽사베이(pixabay), 언스플래시(unsplash)  (1) 2025.01.05

두 파일(텍스트)의 차이점을 비교하는 강력한 도구 - Diffchecker

  Diffchecker는 두 개의 텍스트 파일, 코드 파일, 또는 문서 파일의 차이점을 쉽고 빠르게 비교할 수 있는 온라인 도구입니다. 개발자, 작가, 번역가 등 다양한 분야에서 유용하게 활용되며, 특히 버전 관리 시스템에서 변경된 부분을 파악하거나, 두 문서의 내용을 비교해야 할 때 효과적입니다.  

※ Diffchecker 사용법 

1. Diffchecker 웹사이트 접속: 웹 브라우저에서 Diffchecker 공식 웹사이트에 접속합니다. ( 바로가기 )
2. 문서 비교: 비교하고자 하는 두 개의 문서를 텍스트 공간에 입력합니다. 파일을 업로드하여 비교할 수도 있습니다.
3. Find Difference 버튼을 누르면 끝~~ 

 

※ Diffchecker 사용법 

1. Diffchecker 웹사이트 접속: 웹 브라우저에서 Diffchecker 공식 웹사이트에 접속합니다. ( 바로가기 )


2. 문서 비교: 비교하고자 하는 두 개의 문서를 텍스트 공간에 입력합니다. 파일을 업로드하여 비교할 수도 있습니다.


3. Find Difference 버튼을 누르면 끝~~ 

4. 차이점을 비교하면 됩니다. 

 

 

 

'쓸만한 사이트 > 무료 이용 사이트' 카테고리의 다른 글

무료 Rest API data 제공 사이트 - JSONPlaceholder  (0) 2025.03.05
더미 텍스트를 쉽게 만들자 - 로렘 입숨(Lorem Ipsum), 한글입숨  (0) 2025.01.09
무료 이미지 다운로드 - 픽사베이(pixabay), 언스플래시(unsplash)  (1) 2025.01.05

[spring boot] mybatis - mariadb application.yml 설정 

 spring boot 3.3.6 version에서의 설정 예제입니다. 

 

Dependencies에 MyBatis Framework와 MariaDB Driver 가 추가 하면 
build.gradle 에 dependencies에 아래와 같이 추가됩니다.

 

	// build.gradle dependencies
    
	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3'
	runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'
	testImplementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter-test:3.0.3'

 

추가 후 프로젝트를 Run하면 에러가 발생합니다.
application.properties, 또는 application.yml에 아래와 같이 설정을 해 주어야 합니다.

 

# application.yml
# 서버 설정
server:
  port: 80  # 서버가 실행될 포트를 지정합니다. 여기서는 80번 포트를 사용합니다.

# Spring 프레임워크 설정
spring:
  datasource:  # 데이터베이스 연결 정보를 설정합니다.
    url: jdbc:mariadb://localhost:3306/databasename  # MariaDB 데이터베이스 연결 URL. databasename`라는 데이터베이스를 사용합니다.
    username: username  # 데이터베이스 접속에 사용할 사용자 이름입니다.
    password: password  # 데이터베이스 접속에 사용할 비밀번호입니다.

# MyBatis 설정
mybatis:
  configuration:
    map-underscore-to-camel-case: true  # 데이터베이스 필드 이름이 snake_case일 경우 Java 객체 필드 이름과 자동으로 매핑(camelCase)하도록 설정합니다.
  mapper-locations: classpath:mapper/**/*.xml  # MyBatis 매퍼 파일(.xml)의 위치를 지정합니다.

'Java > Spring Boot' 카테고리의 다른 글

[spring boot] mybatis - mssql application.yml 설정  (0) 2025.03.11
[spring boot] MultipartFile이란?  (0) 2025.02.27
[spring boot] build.gradle dependencies (의존성) 설정  (1) 2025.01.24
[spring boot] build.gradle 설정  (0) 2025.01.24
[spring boot] jpa - mariadb application.properties 설정  (2) 2025.01.22

무료 이미지 사용 사이트 

무료 이미지 사용 사이트입니다. 

  다양한 주제와 스타일의 이미지를 무료로 다운로드하여 사용할 수 있습니다.
  다만, 각 사이트의 라이선스 조건이 변경될 수 있으니 확인하여 사용 목적에 맞게 이용하시기 바랍니다.

▶  픽사베이   바로가기

▶  언스플래시  바로가기

 

 

※ 픽사베이

사진, 일러스트, 벡터, 비디오 등 다양한 콘텐츠를 저작권 걱정 없이 무료로 이미지를 다운로드하고 사용할 수 있는 사이트입니다. 상업적 용도로도 사용 가능하며, 출처 표기가 필요하지 않습니다. (바로가기)

 

★ 사용법 

1. 검색기능을 이용하여 원하는 이미지를 선택합니다.
2. 다운로드 버튼을 클릭 후 이미지의 크기 & 용량을 선택합니다.
3. 다운로드 버튼을 누르면 끝~~ 

★ 참고사항 

1. 회원가입 없이도 다운로드가 가능하지만, 고해상도 이미지나 추가 기능을 이용하려면 회원가입 및 로그인을 해야 합니다.
2. 픽사베이의 모든 콘텐츠는 상업적 용도로도 무료로 사용 가능하며, 출처를 밝힐 필요는 없지만, 추후 라이선스가 변경될 수 있고, 일부 콘텐츠는 모델 릴리스나 상표권 등의 제한이 있을 수 있으므로 사용 전에 확인하는 것이 좋습니다

더 자세한 이용 방법은 아래 영상을 참고하시기 바랍니다.

 

 

※ 언스플래시

고품질의 무료 이미지를 제공하는 플랫폼으로, 개인 및 상업적 용도로 자유롭게 사용할 수 있습니다 . (바로가기)

 

★ 사용법 

1. 검색기능을 이용하여 원하는 이미지를 선택합니다.
2. 다운로드 버튼을 누르면 끝~~ 

★ 참고사항 

1. 언스플래시의 이미지는 무료로 사용 가능하지만, 사진에 등장하는 인물이나 브랜드의 초상권 및 상표권은 별도로 확인해야 합니다.
2. 이미지를 재배포하거나 판매하는 행위는 금지되어 있습니다.

더 자세한 이용 방법은 아래 영상을 참고하시기 바랍니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'쓸만한 사이트 > 무료 이용 사이트' 카테고리의 다른 글

무료 Rest API data 제공 사이트 - JSONPlaceholder  (0) 2025.03.05
더미 텍스트를 쉽게 만들자 - 로렘 입숨(Lorem Ipsum), 한글입숨  (0) 2025.01.09
두 파일(텍스트)의 차이점을 비교하는 강력한 도구 - Diffchecker  (3) 2025.01.09

[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기

  웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해 웹 디자이너와 개발자는 다양한 폰트를 활용하여 웹사이트의 디자인과 가독성을 향상시킬 수 있습니다. 

  구글 폰트(Google Fonts)는 무료로 제공되는 웹폰트 서비스입니다. 웹사이트에 폰트를 적용하면 디자인과 가독성을 개선할 수 있습니다.

  여기서는 구글 폰트(Google Fonts) 사용법에 대해서 알아보려고 합니다.

 

 

1. 구글 폰트 웹사이트 접속하기 

  1) 브라우저에서 "구글웹폰트"를 검색하여 Google Fonts 사이트에 접속합니다. (바로가기) 
  2) 원하는 폰트를 검색하거나 카테고리, 언어, 글꼴 속성을 기준으로 필터링하여 선택합니다.
  3) 여기서는 언어를  korean으로 선택하였습니다. 

   4) 사용할 수 있는 한글 폰트들이 보이는데 원하는 폰트를 선택합니다. 여기서는 가장 많이 사용하는  Noto Sans Korean를 선택합니다.
   5) Get font를 선택합니다. 

  6) Get embed code를 선택합니다. 

  7)  link방식과 import방식 둘 중 원하는 방식을 선택하여 원하는 코드를 복사해서 이용하시면 됩니다. 


※ 사용예시입니다.

<!DOCTYPE html>
<html lang="ko"> 
<head>
  <meta charset="UTF-8"> 
  <title>Document</title>

  <!-- CSS 스타일 정의 -->
  <style>
    /* Google Fonts에서 세 가지 글꼴을 가져옵니다. */
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');

    body {
      font-weight: 300; /* 기본 글꼴 두께를 설정 */
    }

    /* Noto Sans KR 글꼴을 적용한 클래스 */
    p.font1 {
      font-family: "Noto Sans KR", sans-serif;
    }

    /* Nanum Gothic 글꼴을 적용한 클래스 */
    p.font2 {
      font-family: "Nanum Gothic", sans-serif;
    }

    /* Nanum Brush Script 글꼴을 적용한 클래스 */
    p.font3 {
      font-family: "Nanum Brush Script", sans-serif;
    }
  </style>
</head>
<body>
  <h3>Noto Sans Korean</h3>
  <p class="font1">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>

  <h3>Nanum Gothic</h3>
  <p class="font2">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>

  <h3>Nanum Brush Script</h3>
  <p class="font3">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 
  </p>
</body>
</html>

♠ 결과 



 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (0) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

 

XE Icon은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 
웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷으로, 다양한 아이콘을 손쉽게 웹페이지에 적용할 수 있습니다.

 

 

※ XE Icon 설정하기


사이트에서 파일을 다운받아서 사용할 수도 있습니다. (사이트 바로가기)

여기서는 CDN 서비스를 이용하겠습니다. 

▶ link 태그를 이용하는 방법

    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />


▶  style를 이용하는 방법

  <style>
    @import url("//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css");
  </style>

둘 중 한가지 방법을 선택하면 됩니다. 여기서는 link 태그를 이용하겠습니다. 

※ 사용할 아이콘 선택하기

XE Icon 사이트로 이동해서 상단의 LIBRARY 메뉴를 선택합니다.  (사이트 바로가기)


검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

icon 이름(xi-bars)를 확인합니다. 

<i class="xi-bars"> <i>태그에 class을 xi-bars로 지정하면 아이콘이 표시됩니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

xi-로 시작하는 class를 추가하여 크기를 변경할 수 있어요

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
  <i class="xi-bars"></i> 기본크기 <br>
  <i class="xi-bars xi-x"></i> xi-x <br>
  <i class="xi-bars xi-2x"></i> xi-2x<br>
  <i class="xi-bars xi-3x"></i> xi-3x <br>
  <i class="xi-bars xi-4x"></i> xi-4x<br>
  <i class="xi-bars xi-5x"></i> xi-5x<br>
  </body>
</html>

>>> 결과 <<<

더 많은 사용법은 샘플 페이지를 참고하세요 (샘플페이지 바로가기)

※ 아이콘 내 맘대로 꾸미기 (class 추가하기)

class를 추가하여 내 맘대로 꾸밀 수 있어요 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .close {
        color: red;
        background-color: #000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;  
        box-shadow: 0 0 5px red;
      }
    </style>
  </head>
  <body>
    <i class="xi-close-thin close"></i>
  </body>
</html>

>>> 결과 <<<

※ 아이콘 내 맘대로 꾸미기 (다른 태그에서 이용하기)

XE Icon에서 제공하는 class를 이용하지 않고  unicode를 이용해서 커스터마이징이 가능해요 

▶ unicode 얻는 방법 

태그추가 방식으로 아이콘을 추가한 후 브라우저에서 확인합니다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
  </head>
  <body>
    <i class="xi-bars"></i>
  </body>
</html>

>>> 결과 <<<

F12 key를 눌러서 개발자 도구를 오픈합니다. 

아이콘 태그앞의 ▶ 표시를 누릅니다. 

오른쪽에 unicode를 확인할 수 있습니다.

오른쪽 마우스를 클릭하고  Copy declaration를 선택하면 unicode 복사할 수 있습니다.

unicode를 이용하여 아이콘을 추가합니다. 

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css" />
  <style>
    .box:before {
      content: "\e91c";  /* 아이콘의 코드 값을 설정합니다. */
      font-family: "xeicon"; /* xeicon 폰트를 사용하도록 지정합니다. */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

>>> 결과 <<<

style를 추가하여 내맘대로 꾸밀 수 있어요

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"
    />
    <style>
      .box {
        border: 1px solid #000;
        width: 30px;
        height: 30px;
      }
      .box:before {
        content: "\e91c";
        font-family: "xeicon";
        font-size: 30px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

>>> 결과 <<<

 

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (0) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기

Font Awesome은 웹에서 다양한 아이콘을 손쉽게 활용할 수 있는 CSS 라이브러리입니다. 

Font Awesome 6버전까지 출시가 되었어도 아직까지도 Font Awesome 4가 많이 사용되어 4.7버전을 이용하여 아이콘을 사용해 보려고 합니다.
버전마다 사용법 조금씩 차이가 있다는 점 알아두세요 

★ 중요사이트
Font Awesome 4.7 아이콘 
Bootstrap Cheat Sheets
Font Awesome 4.7 css 다운로드

 

※ Font Awesome 설정하기


사이트에서 파일을 다운받아서 사용할 수도 있습니다. (다운로드 사이트 가기)

여기서는 CDN 서비스를 이용하겠습니다. 

구글에서 [font awesome 4.7 cdn] 으로 검색해서 cdn를 선택합니다. 

여기서는 bootstrap CDN을 이용하려고 합니다. 

▶ link 태그를 이용하는 방법

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


▶  style를 이용하는 방법

  <style>
    @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
  </style>

둘 중 한가지 방법을 선택하면 됩니다. 여기서는 link 태그를 이용하겠습니다. 

※ 사용할 아이콘 선택하기

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


4.7 버전에서는 675개의 아이콘를 사용할 수 있다고 하네요 
검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

 

<i> 태그를 이용하여 아이콘을 표시하면 됩니다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i>메뉴 바로가기
  
</body>
</html>

 aria-hidden="true" 를 생략해도 됩니다. 

>>> 결과 <<<

 

※ 아이콘 크기 변경하기

fa-로 시작하는 class를 추가하여 크기를 변경할 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <i class="fa fa-bars"></i> 기본크기 <br>
  <i class="fa fa-bars fa-lg"></i> fa-lg <br>
  <i class="fa fa-bars fa-2x"></i> fa-2x <br>
  <i class="fa fa-bars fa-3x"></i> fa-3x <br>
  <i class="fa fa-bars fa-4x"></i> fa-4x <br>
  <i class="fa fa-bars fa-5x"></i> fa-5x <br>
</body>
</html>

>>> 결과 <<<

더 많은 사용법은 샘플 페이지를 참고하세요 (샘플페이지로 가기)

※ 아이콘 내 맘대로 꾸미기 (fa class 이용하기)

<i class="fa fa-bars"></i> 태그의 fa class를 이용하여 내 맘대로 꾸밀 수 있어요 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    .fa {
      font-size: 25px;
      color: crimson;
      transform: rotate(90deg);
      background-color: blue;
      padding: 5px;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      box-shadow: 0 0 5px black;

    }
  </style>
</head>
<body>
  <i class="fa fa-bars"></i>
</body>
</html>

>>> 결과 <<<

※ 아이콘 내 맘대로 꾸미기 (다른 태그에서 이용하기)

Font Awesome에서 제공하는 class를 이용하지 않고  unicode를 이용해서 커스터마이징이 가능해요 

▶ unicode 얻는 방법 

구글에서 [fontawesome 4.7]로 검색해서 사이트로 이동합니다. (사이트 바로가기)


검색창에 bar로 검색해서 bars를 사용해 보겠습니다. 

bars를 선택하면 unicode를 확인할 수 있어요 

아래와 같이 스타일을 지정하면 div를 이용하여 아이콘을 표시할 수 있어요 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

style를 추가하여 내맘대로 꾸밀 수 있어요

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>아이콘(Icon) 사용하기</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .box {
      border: 1px solid #000;
      width: 50px;
      height: 50px;
      position: relative;
    }
    .box::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: black;
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;

    }

  </style>
</head>
<body>
  <div class="box"></div>
  
</body>
</html>

>>> 결과 <<<

※ 좀 더 쉽게 아이콘 추가하기 

구글에서 fontawesome 4.7로 검색후 Bootstrap Cheat Sheets를 선택하세요

Bootstrap Cheat Sheets 바로가기

bar로 검색하세요

Copy 버튼을 누르면 3개의 메뉴가 표시됩니다.

HTML Tag를 누르고 붙여넣기( Ctrl-v)를 하면 태그가 추가됩니다. 

<i class="fa fa-bars"></i>

CSS Rule를 누르고 붙여넣기( Ctrl-v)를 하면  유니코드가 추가합니다.

content:"\f0c9"

 

Bootstrap Cheat Sheets를 이용하면 좀 더 쉽게 아이콘을 추가할 수 있습니다. 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (0) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS] a 태그를 이용하여 버튼 만들기  (0) 2024.12.29

 

이미지를 이용하지 않고 css를 이용하여 버튼 이미지 효과를 낼 수 있습니다.

<a> 태그를 이용하여 버튼 이미지효과를 만들어 보겠습니다. 

※ 먼저 a 태그를 이용하여 링크를 만들었습니다. 

<body>
  <a href="https://google.com">구글홈페이지로 이동하기</a>
</body>

>>> 결과 <<<

HTML의 <a> 태그는 브라우저마다 기본적으로 설정된 유형별 CSS 스타일을 가지고 있어요. 

이를 유저 에이전트 스타일시트(User Agent Stylesheet)라고 부릅니다. 아래는 대부분의 브라우저에서 <a> 태그에 기본적으로 적용되는 CSS 속성이에요.

a {
  color: blue; /* 텍스트 색상: 파란색 */
  text-decoration: underline; /* 밑줄 */
  cursor: pointer; /* 마우스 포인터가 손가락 모양으로 변함 */
}

우리가 어떤 css속성을 설정하지 않았지만, <a>를 사용하면 파란색에 밑줄이 표시됩니다. 

※ 상태별 기본 스타일

<a> 태그는 기본적으로 링크 상태에 따라 스타일이 다르게 적용됩니다.

  1. 기본 상태 ( :link)

  • 아직 클릭하지 않은 링크
a:link {
  color: blue;
}

 

  2. 방문한 링크 (:visited)

  • 이미 방문한 링크.
a:hover {
  text-decoration: underline;
}

 

  3. 호버 상태 (:hover)

  • 마우스를 링크 위에 올릴 때.
a:hover {
  text-decoration: underline;
}

 

  4. 활성 상태 (:active)

  • 링크를 클릭 중인 순간.
a:active {
  color: red; /* 빨간색 */
}

 

※ 기본 스타일 예제

<body>
  <a href="#">기본 링크</a>
  <a href="#" style="color: green;">스타일 덮어쓰기</a>
</body>

>>> 결과 <<<

  • 첫 번째 링크는 파란색과 밑줄이 적용된 상태로 보입니다.
  • 두 번째 링크는 color: green으로 기본 색상이 덮어씌워집니다.

※ 브라우저 기본 스타일 제거하기

<a> 태그의 기본 스타일을 없애려면, 아래처럼 CSS를 작성할 수 있어요

a {
  color: inherit; /* 부모 요소의 텍스트 색상 상속 */
  text-decoration: none; /* 밑줄 제거 */
  cursor: auto; /* 포인터 모양 변경 */
}

>>> 결과 <<<

 

※ 버튼 스타일 만들기 

css속성을 주면 버튼처럼 만들 수 있어요

a {
  display: inline-block; /* 링크를 인라인 블록으로 설정하여 크기와 여백을 설정 가능하게 함 */
  padding: 10px 20px; /* 내부 여백: 위아래 10px, 좌우 20px */
  background-color: #007BFF; /* 배경색을 파란색 계열로 설정 */
  color: white; /* 텍스트 색상을 흰색으로 설정 */
  text-decoration: none; /* 링크의 밑줄을 제거 */
  border-radius: 5px; /* 버튼의 모서리를 둥글게 설정 (5px 반지름) */
  transition: background-color 0.3s; /* 배경색 변경에 0.3초의 전환 효과를 추가 */
}

a:hover {
  background-color: #0056b3; /* 마우스를 올렸을 때 배경색을 더 어두운 파란색으로 변경 */
}

>>> 결과 <<<

둥글고 입체감 있는 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 지정 가능 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background-color: #28a745; /* 녹색 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border-radius: 50px; /* 둥근 버튼 모양 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 */
      transition: transform 0.2s, box-shadow 0.2s; /* 클릭 시 애니메이션 효과 */
    }

    a:hover {
      background-color: #218838; /* 호버 시 더 진한 녹색 */
      box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.95); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<

그라데이션 버튼도 만들 수 있어요

    a {
      display: inline-block; /* 버튼 크기 설정 */
      padding: 12px 24px; /* 내부 여백: 위아래 12px, 좌우 24px */
      background: linear-gradient(45deg, #ff6f61, #d84e2a); /* 45도 각도로 그라데이션 배경 */
      color: white; /* 흰색 텍스트 */
      text-decoration: none; /* 밑줄 제거 */
      border: none; /* 테두리 제거 */
      border-radius: 8px; /* 둥근 모서리 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 입체감을 주는 그림자 */
      font-weight: bold; /* 굵은 글씨 */
      cursor: pointer; /* 마우스 포인터가 손 모양으로 변경 */
      transition: transform 0.2s, box-shadow 0.2s, background 0.3s; /* 클릭, 그림자 및 배경 변화에 애니메이션 추가 */
    }

    a:hover {
      background: linear-gradient(45deg, #d84e2a, #ff6f61); /* 호버 시 그라데이션 방향 반전 */
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 호버 시 그림자 강조 */
    }

    a:active {
      transform: scale(0.98); /* 클릭 시 버튼이 살짝 작아짐 */
    }

>>> 결과 <<<

 

'프로그래밍 > html+css+js' 카테고리의 다른 글

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (0) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02
[HTML+CSS] icon(아이콘)이 필요할 때 - XE Icon사용하기  (1) 2025.01.01
[HTML+CSS+JavaScript] icon(아이콘)이 필요할 때 - Font Awesome 사용하기  (1) 2025.01.01

※ korean Language Pack  - 영문 메뉴가 불편하다면 필수 

Visual Studio Code(이하 VS Code)를 한국어로 사용하려면, 한국어 언어 팩을 설치하여 인터페이스를 한글화할 수 있습니다.  설치후 재시작은 필수. 

※ Live Server  - 실시간으로 코드 수정내용을 확인하자 

Live Server 확장 기능을 사용하면 웹 개발 시 코드 변경 사항을 실시간으로 브라우저에서 확인할 수 있습니다.

※ Prettier - 뒤죽박죽 들여쓰기 한방에 정리하자 

Prettier는 Code Formatter로서, 작성된 코드를 일관된 스타일로 자동 정리해주는 도구입니다

※ Auto Rename Tag - 태그 변경을 간편하게~ 

HTML 및 XML 파일 작업 시, 시작 태그를 수정하면 자동으로 종료 태그도 함께 변경해 주는 확장 기능입니다.

※ HTML CSS Support - 작성된 CSS 선택자를 HTML에서 사용하자

CSS 에 사용된 선택자를 HTML에서 자동완성 해줍니다. ( css → html ) 

※ HTML to CSS autocompletion - HTML 선택자를 CSS에서 사용하자

HTML에 사용된 선택자를 CSS 에서 자동완성 해줌 (html → css) 

※ CSS Peek - HTML에서 CSS선택자로 바로 고고~

HTML에서 선택자를 Ctrl + 클릭하면 CSS 파일 해당 선택자로 이동합니다.

※ Htmltagwrap - 일부 내용을 태그로 감쌀때~

부모요소로 묶고 싶은 곳을 블록으로 지정하고 Alt + w 키 입력

※ Indent  rainbow - 들여쓰기를 보기 편하게~ 

들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시해줘서 코드 읽을 때 가독성이 높여줍니다.

 

 

 

 

 

 

 

 

 

'Tool > Visual Studio Code' 카테고리의 다른 글

[VSCode] 설정 html emmet ! lang=en을 lang=ko 로 변경하기  (0) 2025.02.07

출처:http://blog.djjproject.com/178

 

 

개인서버를 운영하게 되면서 윈도우를 호스팅할 일이 생겼습니다. 예전에는 가상머신을 하나 추가적으로 파서 호스팅을 했었습니다. 

   

그러나 윈도우 운영체제 하나로 원격데스크톱 멀티 세션 기능을 통해 하나의 컴퓨터에 여러 사용자가 연결하여 각자의 데스크톱을 가질 수 있고 

   

혹은 하나의 사용자가 여러 세션으로 동시에 다중 접속이 가능합니다.

   

   

기본적으로는 한 컴퓨터에 한 세션만 접속이 가능하고 A 라는 계정이 이미 로그인이 되어 있다면 B라는 계정이 원격데스크톱 요청을 보내면 A의 연결은 끊겨버립니다.

   

   

실제로 gpedit.msc 로 설정할 수 있는 부분이 있는데 거기서 설정을 해도 실제로 원격데스크톱 연결을 다중으로 할 수는 없습니다. 

   

그래서 만들어진 프로그램이 있는데 RDP Wrapper 라는 프로그램 입니다.

   

주소는 아래에 있습니다.

   

https://github.com/stascorp/rdpwrap/releases

   

   

1.6버전이 최신버전이며 윈도우10을 정식으로 지원합니다. 

   

위의 프로그램은  RDP 관련 파일은 termsrv.dll 파일을 수정하여 멀티세션이 가능하게 해 주는 프로그램입니다.

   

   

다운을 받고 압축을 풀어봅니다.

   

   

내부에 RDPconf.exe 프로그램이 있습니다. 그 프로그램을 통해서 설치가 되어 있는 상태인지 혹은 RDP 설정을 진행 할 수 있습니다.

   

지금은 설치가 되어있지 않은 상태입니다. 그럼 설치를 진행해 보겠습니다. install.bat 파일로 설치를 진행해 줍니다.

   

   

설치를 진행할 때는 스크립트에 관리자 권한을 주어서 실행합니다. 실행을 할 때 원격데스크톱에서 작업을 진행하면 아래처럼 연결이 잠시 끊깁니다.

   

   

한 10초 정도 기다려 주고 재접속을 시도해 봅니다.

   

그럼 설치가 정상적으로 되었다는 말이 나옵니다.

   

   

다시 RDPconf.exe 로 확인을 진행합니다.

   

   

뭔가 안될껏 같은 not supported 가 뜹니다.

   

다시 파일목록의 아래에 있는 update.bat 파일을 관리자 권한으로 실행합니다.

   

   

마찬가지로 원격데스크톱 서비스를 재시작하기 때문에 원격연결이 잠시 끊깁니다.

   

   

다시 RDPconf.exe 를 확인합니다.

   

   

이제 될것처럼 생겼네요 ㅎㅎ

   

   

마지막으로 RDPCheck.exe 프로그램으로 정상적으로 멀티세션이 동작하는지 확인을 해 보겠습니다. 체크 프로그램은 로컬 호스트에 이미 로그인 된 계정으로 또 로그인을 시도하는 프로그램입니다.

   

중복로그인이 되면 성공한 것입니다.

   

일단 테스트를 위해서 RDPconf.exe 에서 Single Session Per User 를 체크해제 합니다. 

   

   

   

(혹은 다른 계정을 생성하여 로그인이 되는지 테스트 해 봐도 됩니다.)

   

그리고 아래의 프로그램을 실행시킵니다.

   

   

   

   

   

   

암호를 입력합니다.

   

   

같은 컴퓨터에 같은 계정으로 2개의 세션이 연결 가능합니다.

   

(위 스크린샷은 이미 원격데스크톱으로 연결된 컴퓨터에서 또 한번 원격데스크톱을 사용한 것입니다.)

   

   

   

계정을 여러개 생성하여 중복 로그인을 시도해 보겠습니다.

   

   

테스트를 위해 계정 4개를 생성하였습니다. 연결은 무조껀 Guacamole 입니다. (제가 휴가를 못나가서 블로그 포스트도 이렇습니다 ㅠㅠ)

   

   

Guacamole 서버의 성능이 별로 좋지 않아서 3대만 테스트 해 보았습니다 잘 되네요 ㅎㅎ

   

감사합니다.



출처: http://horae.tistory.com/entry/RDP-Wrapper원격데스크톱-다중-사용자-접속-하기-RDP-Multisession [Unique Life]

 

'OS > Windows 10, 11' 카테고리의 다른 글

[windows 10/11] 작업표시줄 뉴스 및 관심사 메뉴를 완전히 없애는 방법  (0) 2025.03.11

+ Recent posts

티스토리툴바