✅ 사용 중인 포트 다시 사용할 때의 에러 메시지, 확인 방법, 종료 방법 완벽 정리

웹 서버를 개발하거나 테스트하다 보면 아래와 같은 메시지를 한 번쯤은 마주치게 됩니다.

Web server failed to start. Port 8080 was already in use.

이 글에서는
- 포트 충돌 시 발생하는 메시지
- 사용 중인 포트 확인 방법
- 포트를 종료하고 다시 사용하는 방법
을 정리해 드릴게요. 개발 중 겪는 잦은 문제를 쉽게 해결해보세요!

🛑 사용 중인 포트로 서버 실행 시 나타나는 에러 메시지

Spring Boot나 Node.js, Python Flask 등에서 서버를 실행하다가 이미 해당 포트가 사용 중일 경우, 다음과 같은 오류가 발생합니다.

Web server failed to start. Port 8080 was already in use.

이 메시지는 8080 포트가 이미 다른 프로세스에 의해 사용 중이라는 의미입니다. 해결하려면 먼저 어떤 프로세스가 포트를 점유하고 있는지 확인해야 해요.

🔍 사용 중인 포트 확인하는 방법 (Windows 기준)

CMD 또는 PowerShell에서 아래 명령어를 입력하세요:

netstat -ano | findstr :8080
컬럼 설명
TCP/UDP 사용 중인 프로토콜
Local Address 사용 중인 IP 및 포트 번호
PID 해당 포트를 사용하는 프로세스 ID

예시 출력:

TCP    0.0.0.0:8080     0.0.0.0:0       LISTENING       10256

여기서 마지막 숫자 10256은 이 포트를 사용 중인 프로세스 ID(PID)입니다.

🧨 해당 포트를 종료(Kill)하는 방법

Taskkill 명령어 사용

taskkill /PID 10256 /F
  • /PID: 종료할 프로세스 ID
  • /F: 강제로 종료

성공적으로 종료되면 해당 포트가 해제되고, 다시 사용할 수 있게 됩니다.

🧪 포트를 자주 사용할 경우 팁

  • 서버 종료를 잊지 마세요
    IDE에서 서버를 실행 후 수동으로 종료하지 않으면 포트가 계속 점유될 수 있어요.
  • 자동 종료 스크립트 작성
    start.sh 또는 stop.sh 같은 스크립트를 만들어 자동화하면 실수를 줄일 수 있어요.
  • IDE 설정 확인
    IntelliJ, VSCode 등에서는 백그라운드에서 자동 실행된 서버가 포트를 점유하는 경우도 있습니다.

💬 마무리

개발 도중 “포트 충돌”은 정말 자주 마주치는 문제예요.
하지만 위의 방법대로 차근차근 확인하고 종료하면 금방 해결할 수 있어요.
포트 관련 문제로 시간을 낭비하지 마시고, 빠르게 체크하고 개발에 집중하세요! 💪

 

'프로그래밍 > 일반' 카테고리의 다른 글

와이어프레임(Wireframe)이란?  (0) 2025.02.25
RabbitMQ란?  (1) 2025.02.05

📢 display 속성 정리 


🙌 CSS의 display 속성은 HTML 요소가 화면에 어떻게 렌더링될지를 결정하는 중요한 속성입니다. 이 속성을 이해하면 웹 페이지의 레이아웃을 효과적으로 설계할 수 있습니다.

📝 display: block 

✅  block에 해당하는 태그 

  <div>, <p>, <h1>~<h6>, <ul>, <ol>,  <li>, <table>, <blockquote>, <form>, <hr>, <figure>

✅ block 의 특징

✔ 기본 width값 : 100%, 지정하지 않으면 부모 요소의 너비를 전부 차지한다. 한 줄에 여러 태그를 표시할 수 없다.
✔ width, height 값을 가질 수 있다 
✔ 상하좌우 모든 margin 값을 가질 수 있다



📝 display: inline

✅  inline 에 해당하는 태그 

<img>, <br>, <span>, <sub> <input>, <label>, <a>, <button>, <b>, <s>, <i>

✅ inline 의 특징

✔ 기본 width값 : 컨텐츠 너비값, 한 줄에 여러 태그를 표시할 수 있다.
✔ width, height 값을 가질 수 없음, 같은 지정해도 무시됨
✔ 상하 margin값을 가질 수 없음

 

📝 display: inline-block 

✅ inline-block 의 특징

✔ 기본 width값 : 컨텐츠 너비값, 한 줄에 여러 태그를 표시할 수 있다.
✔ width, height 값을 가질 수 있음
✔ 상하 margin값을 가질 수 없음

 

 

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

[html/css] text-shadow 텍스트에 그림자 넣기 (효과 주기)  (0) 2025.03.13
[HTML+CSS] button 태그 css 버튼 스타일 꾸미기  (2) 2025.01.29
[HTML+CSS+JavaScript] CSS font-face 사용법  (1) 2025.01.19
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17

 📢   text-shadow는 CSS에서 텍스트에 그림자 효과를 추가하는 속성입니다.

📝 text-shadow 기본 문법

text-shadow: x-offset y-offset blur-radius color;

x-offset : 그림자의 가로 위치(오른쪽으로 이동은 양수, 왼쪽은 음수)
y-offset : 그림자의 세로 위치(아래쪽 이동은 양수, 위쪽은 음수)
blur-radius (선택 사항) : 흐림 효과의 정도 (값이 클수록 더 흐려짐)
color : 그림자의 색상


🎨 일반 text-shadow 사용법 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            /* background-color: #333; */
        }

        h1 {
            font-size: 50px;
            text-transform: uppercase;
        }

        /* 기본 그림자 효과  */
        /* 회색 그림자가 오른쪽 아래로 퍼지게 됩니다. */
        h1.text-shadow1 {
            text-shadow: 4px 4px 6px gray;
        }

        /* 여러 개의 그림자 적용  */
        /* 쉼표(,)를 사용하면 여러 개의 그림자를 겹칠 수 있습니다. */
        /* 빨간색 그림자가 오른쪽 아래로, 파란색 그림자가 왼쪽 위로 퍼지게 됩니다. */
        h1.text-shadow2 {
            text-shadow: 2px 2px 5px red, -2px -2px 5px blue;
        }        

        /* 네온(Glow) 효과  */
        /* 초록색 빛이 번지는 네온사인 효과가 나타납니다. */
        h1.text-shadow3 {
            text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
        }        

        /* 3D 텍스트 효과  */
        /* 텍스트가 입체적으로 보이게 됩니다. */
        h1.text-shadow4 {
            text-shadow: 1px 1px 0 #999, 2px 2px 0 #666, 3px 3px 0 #333;
        }        

        /* 윤곽선(Outline) 효과  */
        /* 텍스트 주위에 테두리가 생겨 강조됩니다. */
        h1.text-shadow5 {
            text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
        }        

    </style>    
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>    
<h1 class="text-shadow2">Hello, Welcome to world!</h1>    
<h1 class="text-shadow3">Hello, Welcome to world!</h1>    
<h1 class="text-shadow4">Hello, Welcome to world!</h1>    
<h1 class="text-shadow5">Hello, Welcome to world!</h1>    
</body>
</html>


👉 결과 


🎨 다양한 text-shadow 사용법

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #333;
        }

        /* ✨ 부드러운 빛나는 효과 */
        h1.text-shadow1 {
            font-size: 80px; /* 글자 크기 설정 */
            color: gold; /* 글자 색상을 금색으로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5); 
            /* 그림자를 30px 정도 흐릿하게 설정하여 빛나는 효과 */
        }

        /* 🏆 입체적인 그림자 효과 */
        h1.text-shadow2 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 
                5px 5px 0px darkblue,  /* 첫 번째 그림자 (진한 파란색) */
                10px 10px 0px dodgerblue; /* 두 번째 그림자 (밝은 파란색) */
            /* 두 개의 그림자를 겹쳐서 입체적인 그림자 효과 */
        }

        /* ☁️ 은은한 그림자 효과 */
        h1.text-shadow3 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */
            text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.5);
            /* 하얀색 반투명 그림자를 적용하여 은은한 효과 */
        }

        /* 🔵🔴 양쪽으로 퍼지는 입체적인 그림자 효과 */
        h1.text-shadow4 {
            font-size: 80px; /* 글자 크기 설정 */
            color: goldenrod; /* 글자 색상을 어두운 금색 계열로 설정 */
            text-transform: uppercase; /* 글자를 대문자로 변환 */

            text-shadow: 
                2px 2px 5px red,   /* 오른쪽 아래 방향으로 퍼지는 붉은 그림자 */
                -2px -2px 5px blue; /* 왼쪽 위 방향으로 퍼지는 푸른 그림자 */

            /* 
               🔹 효과 설명:
               - 빨간색 그림자가 오른쪽 아래 방향으로 흐릿하게 퍼짐
               - 파란색 그림자가 왼쪽 위 방향으로 흐릿하게 퍼짐
               - 결과적으로 텍스트가 입체적으로 보이는 효과를 연출
            */
        }

    </style>    
</head>
<body>
<h1 class="text-shadow1">Hello, Welcome to world!</h1>    
<h1 class="text-shadow2">Hello, Welcome to world!</h1>    
<h1 class="text-shadow3">Hello, Welcome to world!</h1>    
<h1 class="text-shadow4">Hello, Welcome to world!</h1>    
</body>
</html>


👉 결과 

 

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

[css] display 속성 정리 block / inline / inline-block  (0) 2025.03.20
[HTML+CSS] button 태그 css 버튼 스타일 꾸미기  (2) 2025.01.29
[HTML+CSS+JavaScript] CSS font-face 사용법  (1) 2025.01.19
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17

📌 와이어프레임(Wireframe)이란?

와이어프레임(Wireframe)은 웹사이트나 애플리케이션의 구조 및 레이아웃을 시각적으로 표현한 설계도입니다. UI/UX 디자인의 초기 단계에서 사용되며, 페이지의 기본적인 배치와 기능을 정리하는 역할을 합니다.

🔹 와이어프레임의 특징

✅ 흑백 또는 단순한 도형으로 구성됨
✅ 디자인 요소(색상, 이미지, 아이콘 등) 최소화
✅ 페이지의 핵심 기능과 구조를 정의
✅ 개발자, 디자이너, 기획자 간의 원활한 소통 도구

🏗 와이어프레임의 유형

와이어프레임은 디테일 수준에 따라 로우 피델리티(Lo-Fi)와 하이 피델리티(Hi-Fi)로 나뉩니다.

1️⃣ 로우 피델리티(Lo-Fi) 와이어프레임

✔ 종이나 디지털 스케치 도구를 이용해 간단한 박스와 선으로 구성
✔ 텍스트보다는 자리 표시자(Placeholder) 사용
✔ 웹사이트의 기본적인 구조와 레이아웃을 빠르게 정리할 때 유용

✏️ 예시: 손으로 그린 스케치, Balsamiq을 활용한 간단한 와이어프레임

2️⃣ 하이 피델리티(Hi-Fi) 와이어프레임

✔ 상세한 디자인 요소가 포함됨 (폰트, 버튼 스타일, 아이콘 등)
✔ 실제 콘텐츠를 반영하여 좀 더 완성된 모습
✔ UI/UX 검토 및 개발 전에 구체적인 방향을 설정하는 데 사용

✏️ 예시: Figma, Adobe XD, Sketch 등을 활용한 정밀한 와이어프레임

🛠 와이어프레임 제작 도구

  • Figma: 협업 기능이 강력한 클라우드 기반 디자인 툴
  • Adobe XD: 프로토타이핑까지 가능한 강력한 UX/UI 설계 도구
  • Sketch: Mac 사용자를 위한 UI/UX 디자인 툴
  • Balsamiq: 빠른 스케치 스타일 와이어프레임 제작
  • Whimsical: 직관적인 UI 설계 도구

🎯 와이어프레임이 중요한 이유

✅ 개발 및 디자인 비용 절감 → 초기에 레이아웃을 확정하여 불필요한 수정 방지
✅ 팀원 간의 원활한 협업 → 기획자, 디자이너, 개발자 간의 명확한 소통 가능
✅ 사용자 경험(UX) 최적화 → 페이지의 흐름과 기능을 미리 점검

📌 와이어프레임 vs 목업(Mockup) vs 프로토타입(Prototype) 차이점

개념설명활용 목적

와이어프레임 기본적인 레이아웃과 구조를 설계한 스케치 초기 기획 단계에서 레이아웃 정리
목업(Mockup) 색상, 이미지, 타이포그래피 등을 포함한 정적인 디자인 UI 디자인 검토 및 피드백 반영
프로토타입(Prototype) 클릭, 애니메이션 등 상호작용이 가능한 동적인 시뮬레이션 사용자 테스트 및 실제 기능 검토

🎨 정리하면?

와이어프레임은 UI/UX 디자인 과정에서 기본적인 레이아웃을 빠르게 구상하는 단계입니다.
본격적인 디자인 및 개발에 들어가기 전에 기획을 명확하게 정리하고, 팀원과의 원활한 협업을 위해 필수적인 작업이죠! 😊

'프로그래밍 > 일반' 카테고리의 다른 글

사용 중인 포트 다시 사용할 때의 에러 메시지, 확인 방법, 종료 방법 완벽 정리  (0) 2025.04.14
RabbitMQ란?  (1) 2025.02.05

[react] react 설치하기 - Create React App

📢  작업순서 

📌 Node.js 및 npm 설치

📌 Create React App 설치

📌 React 앱 실행

📌 Node.js 및 npm 설치 

💡 React 앱을 개발하려면 Node.js가 필요합니다. Node.js에는 JavaScript 런타임과 함께 패키지 관리자(npm)가 포함되어 있습니다.
✔ 다운로드: Node.js 공식 홈페이지에서 LTS(Long Term Support) 버전을 다운로드하여 설치합니다.
 ✔ 설치 확인: 터미널(또는 명령 프롬프트)에서 아래 명령어를 입력하여 설치가 제대로 되었는지 확인합니다.

node -v
npm -v

 

📌 Create React App 설치

💡 Create React App은 React 프로젝트를 쉽게 생성하고 기본적인 빌드 설정을 자동으로 구성해주는 도구입니다.

📝 폴더 생성

✔ 터미널(명령 프롬프트)에서 폴더를 생성후 이동합니다.

mkdir react-app
cd react-app

📝 react 앱 설치 

✔ 터미널(명령 프롬프트)에서 실행합니다.

npx create-react-app .

 

📌 React 앱 실행

✔ 터미널(명령 프롬프트)에서 실행합니다.

npm start

👉 실행결과입니다.

 

 

📌  AMQP는 메시지 큐 시스템에서 사용되는 표준 프로토콜입니다.
📌  RabbitMQ는 AMQP 프로토콜을 구현한 오픈 소스 메시지 브로커입니다.
📌  RabbitMQ를 사용하면 AMQP 프로토콜을 따르는 메시지 시스템을 쉽게 구축할 수 있습니다.
📌  결론적으로, AMQP는 규칙이고, RabbitMQ는 그 규칙을 따라 구현한 소프트웨어입니다.

※ RabbitMQ란?

  RabbitMQ란 오픈 소스 메시지 브로커(Message Broker) 소프트웨어로, AMQP(Advanced Message Queuing Protocol)를 구현한 메시지 큐 시스템입니다. 메시지를 생성하는 Producer(생산자)와 메시지를 소비하는 Consumer(소비자) 간의 비동기 메시지 전송을 지원합니다.

※  AMQP란?

  AMQP란 Advanced Message Queuing Protocol의 약자로, 메시지 큐 시스템에서 사용되는 표준 프로토콜입니다.  서로 다른 시스템 간에 메시지를 주고받을 때 어떤 규칙을 따라야 하는지 정의한 일종의 약속과 같은 것이죠. 이 프로토콜을 따르면 다양한 시스템들이 서로 간섭 없이 효율적으로 통신할 수 있습니다. 

 

※ RabbitMQ의 주요 개념

🟢 메시지(Message)
    메시지는 데이터 조각을 의미하며, 일반적으로 JSON, XML, 바이너리, 텍스트 등의 형태로 전송됩니다.
🟢 프로듀서(Producer)
    메시지를 생성하여 Exchange(교환기)로 전달하는 역할을 합니다.
🟢 익스체인지(Exchange)
    메시지를 Queue(큐)로 라우팅하는 역할을 합니다. Exchange 유형에 따라 메시지를 다르게 전달합니다.
🟢 큐(Queue)
    메시지를 저장하는 버퍼 역할을 합니다. 큐에 저장된 메시지는 컨슈머(Consumer)가 가져가 처리할 수 있습니다.
🟢 소비자(Consumer)
    큐에서 메시지를 꺼내서 처리하는 역할을 합니다.

※ RabbitMQ의 작동 방식

(이미지 출처 - https://www.cloudamqp.com/blog/part1-rabbitmq-for-beginners-what-is-rabbitmq.html)

  🟠 Producer(생산자)가 메시지를 생성하여 Exchange(교환기)에 전송
  🟠 Exchange(교환기)가 메시지를 적절한 Queue(큐)로 라우팅
  🟠 Queue(큐)는 메시지를 저장하고, Consumer(소비자)가 메시지를 가져감
  🟠 Consumer(소비자)는 메시지를 처리하고, 처리 완료되면 RabbitMQ에 확인(Ack, Acknowledgment) 신호를 보냄

※  RabbitMQ의 특징

  🟠 메시지 내구성 (Durability) 지원

  • 메시지가 손실되지 않도록 설정 가능
  • 큐와 메시지를 영구적으로 저장할 수 있음 (durable=true, persistent=true)

  🟠 확장성 (Scalability) 높음

  • 다중 프로듀서-컨슈머 모델을 지원
  • 여러 개의 RabbitMQ 노드를 클러스터링하여 확장 가능

  🟠 다양한 프로토콜 지원

  • 기본적으로 AMQP를 지원하지만,
    MQTT, STOMP, HTTP 등 다양한 프로토콜과도 통신 가능

  🟠  플러그인 시스템 지원

  • 모니터링, 로깅, 인증 등 다양한 플러그인을 추가하여 기능 확장 가능

 


🖥️  도커로 RabbitMQ 설치 및 실행하기 

 

[도커(docker)] 도커로 RabbitMQ 설치 및 실행하기

[도커(docker)] 도커로 RabbitMQ 설치 및 실행하기docker run -d --hostname my-rabbit --name some-rabbit -p 5672:5672 -p 15672:15672 rabbitmq:3-management♣ 명령어 설명docker run새로운 컨테이너를 실행하는 명령어입니다.-d (De

happyldh.tistory.com

 

 

 

 

 

 

'프로그래밍 > 일반' 카테고리의 다른 글

사용 중인 포트 다시 사용할 때의 에러 메시지, 확인 방법, 종료 방법 완벽 정리  (0) 2025.04.14
와이어프레임(Wireframe)이란?  (0) 2025.02.25

 

📌 이미지를 이용하지 않고 css를 이용하여 버튼 이미지 효과를 낼 수 있습니다.
📌 <button> 태그를 이용하여 버튼 이미지효과를 만들어 보겠습니다. 

📌 <button> 태그는 HTML에서 클릭 가능한 버튼을 생성하는 데 사용됩니다. 버튼은 기본적으로 인터랙션을 위한 UI 요소이며, 사용자 입력이나 동작을 처리하는 데 사용됩니다.

※ 기본 구조

<button>버튼 텍스트</button>

※  주요 속성:

  • type: 버튼의 종류를 지정합니다 (submit, button, reset 등).
  • value: 버튼에 대한 추가적인 값을 제공합니다 (form 데이터 전송 시 사용).
  • disabled: 버튼을 비활성화합니다.

※  예시:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h5> type: 버튼의 동작을 지정합니다. </h5>
  <button type="button">Button</button>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <br>
  <h5> disabled: 버튼 비활성화.</h5>
  <button disabled>Disabled Button</button>
  <br>
  <h5> value: 버튼에 데이터를 저장.</h5>
  <button type="button" value="button1">눌러주세요</button>
  <br>
  <h5> name: 폼 데이터의 이름을 지정.</h5>
  <button type="submit" name="submitButton">제출</button>
  <h5> 버튼에 이벤트 설정 </h5>
  <button type="button" onclick="alert('사과');">사과</button>
</body>
</html>

✅ 결과 

※ CSS 로 버튼 스타일링하기

★ 기본 스타일링
배경색, 글꼴 크기, 테두리를 꾸민 예제입니다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 기본 버튼 스타일 */
    .basic-button {
      background-color: #4CAF50;
      /* 버튼 배경색: 초록색 */
      color: white;
      /* 버튼 텍스트 색상: 흰색 */
      font-size: 16px;
      /* 텍스트 크기: 16px */
      padding: 10px 20px;
      /* 버튼 안쪽 여백: 위아래 10px, 양옆 20px */
      border: none;
      /* 테두리 제거 */
      border-radius: 5px;
      /* 모서리를 둥글게 처리 (반지름 5px) */
      cursor: pointer;
      /* 마우스를 올릴 때 포인터 커서 표시 */
    }

    /* 버튼에 마우스를 올렸을 때의 스타일 */
    .basic-button:hover {
      background-color: #45a049;
      /* 버튼 배경색: 조금 더 짙은 초록색 */
    }
  </style>
</head>
<body>
<button class="basic-button">제출하기</button>
</body>
</html>

✅ 결과 

★ 그림자와 애니메이션 추가

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 그림자 버튼 스타일 */
    .shadow-button {
      background-color: #008CBA;
      /* 버튼 배경색: 파란색 */
      color: white;
      /* 버튼 텍스트 색상: 흰색 */
      font-size: 16px;
      /* 텍스트 크기: 16px */
      padding: 10px 20px;
      /* 버튼 안쪽 여백: 위아래 10px, 양옆 20px */
      border: none;
      /* 테두리 제거 */
      border-radius: 5px;
      /* 모서리를 둥글게 처리 (반지름 5px) */
      cursor: pointer;
      /* 마우스를 올릴 때 포인터 커서 표시 */
      box-shadow: 0 4px #005f73;
      /* 버튼의 그림자: 아래쪽으로 4px, 색상은 어두운 파란색 */
    }

    /* 버튼에 마우스를 올렸을 때의 스타일 */
    .shadow-button:hover {
      background-color: #005f73;
      /* 버튼 배경색: 어두운 파란색 */
      box-shadow: 0 6px #003f50;
      /* 그림자 크기 증가: 아래쪽으로 6px, 더 어두운 파란색 */
      transform: translateY(-2px);
      /* 버튼이 약간 위로 올라가 보이게 이동 */
    }
  </style>

</head>
<body>
<button class="shadow-button">제출하기</button>
</body>
</html>

✅ 결과 

★ 글자 애니메이션 효과

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 애니메이션 버튼 스타일 */
    .animated-button {
      background-color: transparent; /* 버튼 배경색: 투명 */
      color: #FF5733; /* 버튼 텍스트 색상: 주황색 */
      font-size: 16px; /* 텍스트 크기: 16px */
      padding: 10px 20px; /* 버튼 안쪽 여백: 위아래 10px, 양옆 20px */
      border: 2px solid #FF5733; /* 테두리: 2px, 주황색 */
      border-radius: 5px; /* 모서리를 둥글게 처리 (반지름 5px) */
      cursor: pointer; /* 마우스를 올릴 때 포인터 커서 표시 */
      position: relative; /* 자식 요소를 기준으로 배치할 수 있게 상대 위치 지정 */
      overflow: hidden; /* 버튼 영역 밖으로 나간 요소는 숨김 처리 */
    }

    /* 버튼 안에 배경 애니메이션 효과를 위한 가상 요소 */
    .animated-button::before {
      content: ''; /* 가상 요소 내용 없음 */
      position: absolute; /* 버튼 안에서 절대 위치 지정 */
      top: 0; /* 상단 0 */
      left: -100%; /* 초기 위치: 버튼 왼쪽 밖 */
      width: 100%; /* 가로 크기: 버튼 전체 */
      height: 100%; /* 세로 크기: 버튼 전체 */
      background: #FF5733; /* 가상 요소 배경색: 주황색 */
      transition: all 0.4s; /* 애니메이션 시간: 0.4초 */
      z-index: 0; /* 배경 요소가 텍스트 아래로 가도록 설정 */
    }

    /* 마우스를 올렸을 때 애니메이션 */
    .animated-button:hover::before {
      left: 0; /* 가상 요소가 버튼 내부로 이동 */
    }

    /* 버튼 텍스트 스타일 */
    .animated-button span {
      position: relative; /* 가상 요소 위에 텍스트를 표시하도록 상대 위치 지정 */
      z-index: 1; /* 텍스트가 가상 요소 위에 나타나도록 설정 */
      color: white; /* 텍스트 색상: 흰색 */
    }
  </style>

</head>
<body>
<button class="animated-button">제출하기</button>
</body>
</html>

✅ 결과 

★ 라운드 효과

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 라운드 버튼 스타일 */
    .circle-button {
      width: 50px; /* 버튼의 가로 크기: 50px */
      height: 50px; /* 버튼의 세로 크기: 50px */
      background-color: #e91e63; /* 버튼 배경색: 분홍색 (#e91e63) */
      color: white; /* 버튼 텍스트 색상: 흰색 */
      border: none; /* 테두리 제거 */
      border-radius: 50%; /* 버튼을 원형으로 만듦 (반지름: 50%) */
      font-size: 24px; /* 텍스트 크기: 24px */
      cursor: pointer; /* 마우스를 올릴 때 포인터 커서 표시 */
      display: flex; /* 버튼 안의 내용을 중앙 정렬하기 위해 flexbox 사용 */
      justify-content: center; /* 수평 가운데 정렬 */
      align-items: center; /* 수직 가운데 정렬 */
    }

    /* 마우스를 올렸을 때 버튼 스타일 */
    .circle-button:hover {
      background-color: #d81b60; /* 버튼 배경색: 조금 더 진한 분홍색 (#d81b60) */
    }
  </style>

</head>
<body>
<button class="circle-button">+</button>
</body>
</html>


✅ 결과 

★ icon(아이콘)를 이용하여 버튼만들기 

<!DOCTYPE html>
<html lang="ko">
<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>
    /* 라운드 버튼 스타일 */
    .icon-button::before {
      content:"\f0c9";   /* f0c9은 fontawesome에서 bars의 유니코드 */
      font-family: fontAwesome; /* fontAwesome는 fontawesome에서 사용하는 폰트 */      
    }

    .icon-button {
      width: 50px; /* 버튼의 가로 크기: 50px */
      height: 50px; /* 버튼의 세로 크기: 50px */
      background-color: #e91e63; /* 버튼 배경색: 분홍색 (#e91e63) */
      color: white; /* 버튼 텍스트 색상: 흰색 */
      border: none; /* 테두리 제거 */
      border-radius: 50%; /* 버튼을 원형으로 만듦 (반지름: 50%) */
      font-size: 24px; /* 텍스트 크기: 24px */
      cursor: pointer; /* 마우스를 올릴 때 포인터 커서 표시 */
      display: flex; /* 버튼 안의 내용을 중앙 정렬하기 위해 flexbox 사용 */
      justify-content: center; /* 수평 가운데 정렬 */
      align-items: center; /* 수직 가운데 정렬 */
    }

    /* 마우스를 올렸을 때 버튼 스타일 */
    .icon-button:hover {
      background-color: #d81b60; /* 버튼 배경색: 조금 더 진한 분홍색 (#d81b60) */
    }
  </style>

</head>
<body>
<button class="icon-button"></button>
</body>
</html>

✅ 결과 

※icon(아이콘) 를 이용하여 버튼만들기를 참고하세요

🖥️ Font Awesome 이용하기

 

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

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

happyldh.tistory.com

 

🖥️ XE Icon 이용하기

 

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

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

happyldh.tistory.com

 

 

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

[css] display 속성 정리 block / inline / inline-block  (0) 2025.03.20
[html/css] text-shadow 텍스트에 그림자 넣기 (효과 주기)  (0) 2025.03.13
[HTML+CSS+JavaScript] CSS font-face 사용법  (1) 2025.01.19
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17

[HTML+CSS+JavaScript]  CSS font-face 사용법

  font-face는 CSS의 규칙으로, 웹 페이지에서 사용자 지정 글꼴을 정의하고 사용할 수 있게 합니다. 이를 통해 사용자의 컴퓨터에 해당 글꼴이 설치되어 있지 않더라도, 웹 페이지에서 원하는 글꼴을 표시할 수 있습니다.

 

※ 기본문법

/* 사용자 정의 글꼴을 정의하는 @font-face 규칙 */
@font-face {
  /* font-family: CSS에서 사용할 글꼴 이름을 지정합니다. */
  font-family: 'CustomFont';
  
  /* src: 글꼴 파일의 경로와 형식을 지정합니다. */
  src: url('CustomFont.woff2') format('woff2'), /* WOFF2 형식의 글꼴 파일 */
       url('CustomFont.woff') format('woff');   /* WOFF 형식의 글꼴 파일 */
  
  /* font-weight: 글꼴의 굵기를 설정합니다. 여기서는 일반 굵기(normal)로 설정합니다. */
  font-weight: normal;
  
  /* font-style: 글꼴의 스타일을 설정합니다. 여기서는 일반 스타일(normal)로 설정합니다. */
  font-style: normal;
}

▶  @font-face로 글꼴을 정의한 후, CSS에서 해당 글꼴을 다음과 같이 적용할 수 있습니다: 

body {
  font-family: 'CustomFont', sans-serif;
}

▶ 웹 브라우저마다 지원하는 글꼴 형식이 다를 수 있으므로, 여러 형식의 글꼴 파일을 제공하는 것이 좋습니다 

WOFF2: 최신 브라우저에서 지원하는 형식입니다.
WOFF: 널리 사용되는 형식으로, 대부분의 브라우저에서 지원됩니다.
TTF/OTF: TrueType 및 OpenType 형식으로, 일부 브라우저에서 지원됩니다.
EOT: 이전 버전의 Internet Explorer에서 사용됩니다.
SVG: 일부 구형 iOS 장치에서 사용됩니다.


※ 사용예시입니다.

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

  <!-- CSS 스타일 정의 -->
  <style>
    /* NEXON Lv2 Gothic 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'NEXON Lv2 Gothic';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
        font-weight: normal; /* 폰트 굵기를 기본값으로 설정 */
        font-style: normal; /* 폰트 스타일을 기본값으로 설정 */
    }

    /* MaplestoryOTFBold 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'MaplestoryOTFBold';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }    

    /* Bazzi 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'Bazzi';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }    

    /* 본문 텍스트 기본 설정 */
    body {
      font-weight: 300; /* 기본 글꼴 두께 설정 */
    }

    /* NEXON Lv2 Gothic 폰트 적용 */
    p.font1 {
      font-family: "NEXON Lv2 Gothic", sans-serif;
    }

    /* MaplestoryOTFBold 폰트 적용 */
    p.font2 {
      font-family: "MaplestoryOTFBold", sans-serif;
    }

    /* Bazzi 폰트 적용 */
    p.font3 {
      font-family: "Bazzi", sans-serif;
    }
  </style>
</head>
<body>
  <!-- NEXON Lv2 Gothic 폰트를 적용한 섹션 -->
  <h3>넥슨 Lv.2 고딕</h3>
  <p class="font1">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>

  <!-- MaplestoryOTFBold 폰트를 적용한 섹션 -->
  <h3>넥슨 메이플스토리</h3> <!-- <1/h3> 오타 수정 -->
  <p class="font2">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>

  <!-- Bazzi 폰트를 적용한 섹션 -->
  <h3>넥슨 배찌체</h3>
  <p class="font3">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>
</body>
</html>

♠ 결과 


※ 참고 페이지

 

[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기

[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  웹폰트(Web Font)는 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도, 웹 페이지에서 원하는 폰트를 표시할 수 있게 해주는 기술입니다. 이를 통해

happyldh.tistory.com

 

 

 

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

[html/css] text-shadow 텍스트에 그림자 넣기 (효과 주기)  (0) 2025.03.13
[HTML+CSS] button 태그 css 버튼 스타일 꾸미기  (2) 2025.01.29
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17
[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성  (1) 2025.01.17

[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기

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

  눈누 웹폰트는 한국에서 인기 있는 무료 웹폰트 플랫폼입니다. 눈누는 디자이너, 개발자, 크리에이터들이 상업적 이용이 가능한 무료 폰트를 쉽고 빠르게 다운로드하거나 웹에서 바로 사용할 수 있도록 지원합니다. 저작권 걱정 없이 사용할 수 있어 특히 한국어 폰트를 찾는 사용자들 사이에서 큰 인기를 얻고 있습니다.

 

1. 눈누 폰트 웹사이트 접속하기 

  1) 브라우저에서 "눈누웹폰트"를 검색하여 사이트에 접속합니다. (바로가기) 
  2) 원하는 폰트를 선택합니다.
  3) 여기서는 넥슨 Lv.2 고딕을 선택하였습니다. 

   5) 복사 기능을 이용하여 소스를 복사하여 이용하시면 됩니다. 

※ 사용예시입니다. 

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

  <!-- CSS 스타일 정의 -->
  <style>
    /* NEXON Lv2 Gothic 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'NEXON Lv2 Gothic';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
        font-weight: normal; /* 폰트 굵기를 기본값으로 설정 */
        font-style: normal; /* 폰트 스타일을 기본값으로 설정 */
    }

    /* MaplestoryOTFBold 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'MaplestoryOTFBold';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }    

    /* Bazzi 폰트를 외부에서 가져와서 정의 */
    @font-face {
        font-family: 'Bazzi';
        src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/Bazzi.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }    

    /* 본문 텍스트 기본 설정 */
    body {
      font-weight: 300; /* 기본 글꼴 두께 설정 */
    }

    /* NEXON Lv2 Gothic 폰트 적용 */
    p.font1 {
      font-family: "NEXON Lv2 Gothic", sans-serif;
    }

    /* MaplestoryOTFBold 폰트 적용 */
    p.font2 {
      font-family: "MaplestoryOTFBold", sans-serif;
    }

    /* Bazzi 폰트 적용 */
    p.font3 {
      font-family: "Bazzi", sans-serif;
    }
  </style>
</head>
<body>
  <!-- NEXON Lv2 Gothic 폰트를 적용한 섹션 -->
  <h3>넥슨 Lv.2 고딕</h3>
  <p class="font1">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>

  <!-- MaplestoryOTFBold 폰트를 적용한 섹션 -->
  <h3>넥슨 메이플스토리</h3> <!-- <1/h3> 오타 수정 -->
  <p class="font2">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>

  <!-- Bazzi 폰트를 적용한 섹션 -->
  <h3>넥슨 배찌체</h3>
  <p class="font3">
    행정각부의 설치·조직과 직무범위는 법률로 정한다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.
  </p>
</body>
</html>

♠ 결과 




 

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

[HTML+CSS] button 태그 css 버튼 스타일 꾸미기  (2) 2025.01.29
[HTML+CSS+JavaScript] CSS font-face 사용법  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17
[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성  (1) 2025.01.17
[HTML+CSS+JavaScript] CDN URL 모음  (1) 2025.01.16

[HTML+CSS+JavaScript]  CSS font-family 사용법

  font-family는 CSS에서 텍스트의 글꼴을 지정하는 데 사용하는 속성입니다. 이를 통해 텍스트를 원하는 글꼴로 스타일링할 수 있습니다. 아래는 font-family의 사용법과 관련된 자세한 설명입니다.

 

※ 기본문법

font-family: <font1>, <font2>, <generic-family>;

<font1>, <font2>, ...: 우선순위에 따라 <font1> 글꼴을 설정합니다. <font1> 글꼴이 사용 불가능하면 다음 순서인 <font2>글골을 지정합니다. 
<generic-family>: 브라우저가 지원하지 않는 글꼴이 모두 실패했을 때 사용하는 기본 글꼴 계열을 지정합니다.

 

※ 글꼴 이름 작성 규칙

단일 단어인 글꼴 이름: 따옴표 없이 사용.
예: Arial, Verdana
공백이 포함된 글꼴 이름: 따옴표로 묶어야 함.
예: "Times New Roman", "Comic Sans MS"

 

※ Generic Family 종류

serif: 각 글자의 끝에 장식이 있는 글꼴 계열.
예: Times New Roman, Georgia
sans-serif: 장식이 없는 깨끗한 글꼴 계열.
예: Arial, Helvetica
monospace: 모든 글자가 동일한 너비를 가짐.
예: Courier New, Consolas
cursive: 필기체 스타일.
예: Comic Sans MS, Pacifico
fantasy: 장식적이고 장난스러운 글꼴 계열.
예: Papyrus, Jokerman

 

※ 웹 폰트 사용 

▶ 웹 폰트를 사용하면 다양한 글꼴을 추가로 사용할 수 있습니다. 다음은 구글 폰트 사용 예시입니다.

<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

  body {
    font-family: "Noto Sans KR", serif;
  }
</style>

 

▶ 사용 예시입니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
      .type01 {
        font-family: "Noto Sans KR", sans-serif;
      }
      .type02 {
        font-family: "Georgia", Times, serif;
      }
      .type03 {
        font-family: "Courier New", Courier, monospace;
      }
    </style>
  </head>
  <body>
    <div class="type01">font-family Noto Sans KR 사용 예제입니다.</div>
    <div class="type02">font-family Georgia 사용 예제입니다.</div>
    <div class="type03">font-family Courier New 사용 예제입니다.</div>
  </body>
</html>

♠ 결과


※  font-family는 웹 디자인의 기본 요소로, 사용자 경험에 큰 영향을 미칩니다. 가독성을 고려하여 적절한 글꼴 계열과 대체 글꼴을 설정하는 것이 중요합니다. 필요한 경우 웹 폰트를 활용해 더 많은 옵션을 제공할 수도 있습니다.

 

 

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

[HTML+CSS+JavaScript] CSS font-face 사용법  (1) 2025.01.19
[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성  (1) 2025.01.17
[HTML+CSS+JavaScript] CDN URL 모음  (1) 2025.01.16
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기  (4) 2025.01.12

[HTML+CSS+JavaScript]  CSS 텍스트(text) 관련 속성

  CSS에서 텍스트를 다루는 것은 웹 페이지의 가독성과 디자인을 결정하는 중요한 요소입니다. 다양한 텍스트 관련 속성을 활용하여 텍스트의 크기, 색상, 스타일, 정렬 등을 세밀하게 조절할 수 있습니다.

 

1. 텍스트의 기본적인 스타일링

font-family: 텍스트에 사용할 글꼴을 지정합니다. 시스템에 설치된 글꼴이나 웹폰트를 사용할 수 있습니다.
font-size: 텍스트의 크기를 지정합니다. px, em, rem 등 다양한 단위를 사용할 수 있습니다.
font-weight: 텍스트의 굵기를 지정합니다. bold, bolder, lighter, 100~900 숫자 등을 사용할 수 있습니다.
font-style: 텍스트의 스타일을 지정합니다. normal, italic, oblique 등을 사용할 수 있습니다.
color: 폰트의 색상을 지정합니다

▶ 예제 소스

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      /* 글꼴 설정: Arial 폰트를 우선 사용하고, Arial이 없을 경우 sans-serif 계열 폰트를 사용 */
      font-family: Arial, sans-serif;

      /* 글자 크기 설정: 텍스트 크기를 16픽셀로 고정 */
      font-size: 16px;

      /* 글자 굵기 설정: 텍스트를 굵게 표시 */
      font-weight: bold;

      /* 글자 스타일 설정: 텍스트를 기울임체로 표시 */
      font-style: italic;
    }
  </style>
</head>
<body>
  <!-- CSS 스타일이 적용된 단락 -->
  <p>이 문장은 설정된 스타일이 적용된 텍스트입니다.</p>
</body>
</html>

♠ 결과



 

 

 

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

[HTML+CSS+JavaScript] 눈누 웹 폰트 사용하기  (1) 2025.01.19
[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17
[HTML+CSS+JavaScript] CDN URL 모음  (1) 2025.01.16
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기  (4) 2025.01.12
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12

[HTML+CSS+JavaScript] CDN  URL 모음 

 

1. jQuery CDN

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- jQuery UI CDN -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

 

2. Web Font

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&display=swap');
font-family: 'Noto Sans KR', sans-serif;

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
font-family: 'Raleway', sans-serif;

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
font-family: 'Montserrat', sans-serif;

/* Google Web Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
font-family: 'Roboto', sans-serif;

/* Google Web Font */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap');
font-family: 'Source Sans Pro', sans-serif;

/* Noonnu Korean Fonts */
@font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

 

2. Web ICon

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

 

3. Reference URL

FontAwesome 4.7 CheatSheet
https://fontawesome.bootstrapcheatsheets.com/

FontAwesome 4.7 Official Website
https://fontawesome.com/v4.7.0/icons/

XEICON Ver2.3.3
https://xpressengine.github.io/XEIcon/

Web Gradients
https://webgradients.com/

W3 Schools Color Picker
https://www.w3schools.com/colors/colors_picker.asp

Flat UI colors
https://flatuicolors.com/

Social Colors
https://www.materialui.co/socialcolors

눈누 한글 폰트
https://noonnu.cc/

 

 

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

[HTML+CSS+JavaScript] CSS font-family 사용법  (1) 2025.01.17
[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성  (1) 2025.01.17
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기  (4) 2025.01.12
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12

[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기

  HTML, CSS, JavaScript를 사용하여 사이드바 메뉴를 구현한 예제입니다.

사이드바는 체크박스를 활용하여 열리고 닫히며, Font Awesome 아이콘을 사용하여 메뉴 버튼이 열리고 닫히는 상태를 시각적으로 나타냅니다.

 

1. 참고 페이지

▶ icon 클릭시 동적으로 icon 변경하기 

 

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

[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  HTML에서 icon을 클릭했을 때  다른 icon으로 변경하는 예제입니다. 아이콘은 Font Awesome를 이용합니다. 1. 참고 페이지▶ Font Awesome icon 사용하는

happyldh.tistory.com

 

2. icon 클릭시 side bar 보이고 감추기 

▶ 전체 소스 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- Font Awesome CSS를 불러옵니다. -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      /* .boxOpen 클래스: 열림 상태를 나타냅니다. Font Awesome의 .fa-bars 아이콘을 사용합니다. */
      .boxOpen::before {
        content: "\f0c9"; /* Font Awesome에서 .fa-bars의 유니코드 값 */
        font-family: fontAwesome; /* Font Awesome 폰트를 지정 */
      }

      /* .boxClose 클래스: 닫힘 상태를 나타냅니다. Font Awesome의 .fa-times 아이콘을 사용합니다. */
      .boxClose::before {
        content: "\f00d"; /* Font Awesome에서 .fa-times의 유니코드 값 */
        font-family: fontAwesome; /* Font Awesome 폰트를 지정 */
      }

      /* 체크박스가 선택되었을 때(sidebar 열림 상태)의 스타일 */
      input[id="trigger"]:checked ~ .sidebar {
        left: 0; /* 사이드바를 화면의 왼쪽에 위치시킴 */
      }

      /* 체크박스가 선택되었을 때(label의 위치 변경) */
      input[id="trigger"]:checked + label {
        left: 220px; /* 메뉴 버튼을 사이드바 밖으로 이동 */
      }

      /* 체크박스 자체는 화면에 표시되지 않도록 숨깁니다. */
      input[id="trigger"] {
        display: none;
      }

      /* 메뉴 버튼의 기본 스타일 */
      label[for="trigger"] {
        /* 메뉴 버튼의 크기와 위치를 지정 */
        width: 30px;
        height: 20px;
        display: block;
        position: relative;
        top: 0px;
        left: 0px;
        cursor: pointer; /* 클릭 가능한 커서를 표시 */
        transition: 0.3s; /* 애니메이션 효과를 부드럽게 적용 */
        z-index: 1000; /* 사이드바 위에 표시되도록 z-index 설정 */
      }

      /* 사이드바 기본 스타일 */
      .sidebar {
        width: 250px; /* 사이드바의 너비 */
        height: 100vh; /* 화면 전체 높이를 차지 */
        background-color: teal; /* 배경색 */
        position: fixed; /* 화면에 고정 */
        top: 0; /* 화면 상단에 위치 */
        left: -250px; /* 기본적으로 화면 왼쪽 밖으로 숨김 */
        transition: 0.3s; /* 애니메이션 효과를 부드럽게 적용 */
      }
    </style>
    <script>
      /**
       * changeImg 함수는 메뉴 버튼의 상태를 변경하는 역할을 합니다.
       * - "boxOpen" 클래스와 "boxClose" 클래스를 토글(toggle)하여 버튼 상태를 변경합니다.
       */
      function changeImg() {
        // id가 "triggerLab"인 요소를 가져옵니다.
        var div = document.getElementById("triggerLab");
        // 요소가 "boxOpen" 클래스를 가지고 있는지 확인합니다.
        if (div.classList.contains("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 class="container">
      <!-- 체크박스: 사이드바의 열림/닫힘 상태를 제어 -->
      <input type="checkbox" id="trigger" onclick="changeImg()" />
      <!-- 사이드바를 열고 닫는 버튼(label) -->
      <label for="trigger" class="boxOpen" id="triggerLab"></label>
      <!-- 숨겨진 상태로 시작하는 사이드바 -->
      <div class="sidebar"></div>
    </div>
  </body>
</html>

♠ 결과

 

 

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

[HTML+CSS+JavaScript] CSS 텍스트(text) 관련 속성  (1) 2025.01.17
[HTML+CSS+JavaScript] CDN URL 모음  (1) 2025.01.16
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 2025.01.12
[HTML+CSS+JavaScript] 이미지 동적으로 변경하기 - 버튼 클릭 방법  (0) 2025.01.12
[HTML+CSS+JavaScript] 구글 웹 폰트 사용하기  (0) 2025.01.02

[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(사이드바) 보이고 감추기  (4) 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(사이드바) 보이고 감추기  (4) 2025.01.12
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기  (1) 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

+ Recent posts

티스토리툴바