본문 바로가기

홈페이지18

CSS에서 텍스트 말줄임 처리하는 방법 CSS에서 텍스트 말줄임 처리하는 방법웹사이트를 만들다 보면 긴 텍스트를 일정한 너비 안에 표시해야 하는 경우가 많습니다. 이때 텍스트가 넘칠 경우 말줄임(...)을 적용하는 방법을 알아보겠습니다.1. 한 줄 말줄임 (text-overflow: ellipsis)✅ 기본 코드.text-ellipsis { display: block; /* 또는 inline-block */ width: 150px; /* 원하는 너비 지정 */ white-space: nowrap; /* 줄 바꿈 방지 */ overflow: hidden; /* 넘치는 텍스트 숨김 */ text-overflow: ellipsis; /* 말줄임(...) 적용 */}📌 핵심 포인트display: block; 또는 disp.. 2025. 3. 28.
PHP 파일을 include 또는 require 할 때  (BOM, Byte Order Mark) 문제가 발생하는 경우 - 공백 줄바뀜 PHP 파일을 include 또는 require 할 때 (BOM, Byte Order Mark) 문제가 발생하는 경우는 주로 파일의 인코딩 설정 때문이에요. 이 문제를 해결하는 방법은 여러 가지가 있습니다.🔹 해결 방법 1: UTF-8 BOM 제거하기파일에 BOM(Byte Order Mark)이 포함되어 있으면 가 출력될 수 있어요.해결 방법:VS Code, Notepad++, Sublime Text 같은 편집기로 PHP 파일을 열기다른 이름으로 저장 (Save As) 선택인코딩을 UTF-8 (BOM 없음, UTF-8 without BOM)으로 설정 후 저장🔹 해결 방법 2: ob_clean() 또는 trim() 사용하기파일이 자동으로 BOM을 포함해 출력하는 경우, in.. 2025. 3. 26.
html 강제로 링크 및 css 수정하기 교수/강좌안내     무료강의     기타 2025. 3. 19.
제이쿼리 다중팝업 변수처리 2025. 3. 19.
asp 다중팝업 변수처리 ' 팝업 데이터 배열로 정의 (teacherName, teacherMonth, teacherWidth, linkUrl, isActive, teacherYear, target) Dim popupData(2, 6) ' 2차원 배열: 팝업 개수 x 속성 (0부터 시작) popupData(0, 0) = "ysh"   : popupData(0, 1) = "2022" : popupData(0, 2) = "600" : popupData(0, 3) = ""                     : popupData(0, 4) = "true"  : popupData(0, 5) = "2025" : popupData(0, 6) = "_blank" popupData(1, 0) = "ysh"   : popupData(1, 1) .. 2025. 3. 19.
이미지 가변적일때 높이 통일하는 방법 - 최신 aspect-ratio 가로 세로 비율 이미지 가변적일때 높이 통일하는 방법 이미지의 `height` 값을 고정값이 아니라 너비에 따라 비율적으로 조정되도록 하려면, CSS에서 **비율을 유지하는 컨테이너**와 `padding-top` 또는 `aspect-ratio` 속성을 활용하는 방법을 사용할 수 있습니다. 이렇게 하면 이미지의 높이가 너비에 비례해서 자동으로 변경되며, 브라우저 크기에 따라 반응형으로 동작합니다. 아래는 두 가지 주요 해결책입니다: --- ### 1. `aspect-ratio` 사용 (현대적인 방법) CSS의 `aspect-ratio` 속성을 사용하면 이미지의 가로:세로 비율을 설정할 수 있습니다. 브라우저 너비가 변할 때 높이가 비율에 맞춰 자동으로 조정됩니다.       - **`aspect-ratio`**.. 2025. 3. 19.
어썸폰트 사용방법 알려줘. - Awesome Font 어썸폰트 사용방법 알려줘. - Awesome Font​Font Awesome에서 요청하신 아이콘들을 다운로드하거나 웹 프로젝트에 적용하려면 다음 방법을 참고하세요:1. Font Awesome 웹사이트 이용하기:아이콘 검색 및 다운로드:Font Awesome 공식 웹사이트(https://fontawesome.com/)에 접속합니다.상단의 Icons 메뉴를 클릭하여 원하는 아이콘을 검색합니다.아이콘을 선택하면 상세 페이지에서 SVG 또는 PNG 형식으로 다운로드할 수 있습니다.웹 프로젝트에 적용하기:CDN 이용:HTML 파일의 섹션에 다음 코드를 추가하여 Font Awesome을 불러옵니다:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/al.. 2025. 3. 5.
css와 제이쿼리로 간단한 탭메뉴 만들어줘 css와 제이쿼리로 간단한 탭메뉴 만들어줘. -상단 탭메뉴4개-클릭시 그 아래 콘텐츠 영역에 탭메뉴에 해당하는 내용 노출 https://chatgpt.com/canvas/shared/67c7d8fb810c8191bc5e1cc8f6986716 Tabs Css JqueryYou’re viewing user-generated content that may be unverified or unsafe.chatgpt.com               탭 1         탭 2         탭 3         탭 4                   탭 1 내용         탭 2 내용         탭 3 내용         탭 4 내용            https://link.coupang.com/a.. 2025. 3. 5.
CSS와 jQuery를 사용한 좌우로 움직이는 슬라이드쇼 - 3개씩 이미지 캐러셀 형태 이미지 3개씩 좌우로 움직이는 슬라이드쇼를 css랑 제이쿼리 사용해서 만들어줘.CSS와 jQuery를 사용한 좌우로 움직이는 슬라이드쇼 코드를 제공해드리겠습니다. 3개씩 이미지가 표시되는 캐러셀 형태로 구현하겠습니다. https://grok.com/share/bGVnYWN5_fe891865-308f-4d0b-8331-1acdce256c59                                                          https://via.placeholder.com/400x200?text=Image+1" alt="Image 1">                 https://via.placeholder.com/400x200?text=Image+2" alt="Image 2">  .. 2025. 3. 5.
div 높이 설정 방법 - Flexbox css에서 div가 내용없이도 높이값이 적용되게 하려면  CSS에서 div 요소가 내용이 없더라도 높이(height)가 적용되게 하려면 다음 방법을 사용할 수 있습니다.1. 고정 높이 지정하기내용이 없어도 div의 높이가 유지됩니다..empty-div { width: 100px; height: 200px; /* 고정된 높이 */ background-color: lightgray;}2. 최소 높이 (min-height) 지정하기내용이 없어도 최소한의 높이를 가지며, 내용이 많아지면 높이가 증가할 수 있습니다..empty-div { width: 100px; min-height: 200px; /* 최소 높이 */ background-color: lightgray;}3. 부모 요소의 높이를 상속받기부.. 2025. 2. 28.
VUE 1일차-(1) 📌 Vue 기본 개념 이해1. Vue.js란?Vue.js(뷰)는 프론트엔드 프레임워크로, 웹 애플리케이션의 UI(User Interface)를 만들기 위해 사용돼.React나 Angular 같은 프레임워크와 비슷하지만, 더 가볍고 배우기 쉬운 구조를 가지고 있어.✅ Vue의 주요 특징✔ 반응형(Reactivity): 데이터가 변경되면 UI도 자동으로 업데이트됨✔ 컴포넌트 기반(Component-Based): UI를 작은 블록(컴포넌트) 단위로 재사용 가능✔ 가상 DOM(Virtual DOM) 사용: 성능 최적화✔ 쉽고 유연한 학습 곡선: HTML, CSS, JS 기본만 알면 빠르게 배울 수 있음2. MVVM 패턴Vue는 MVVM(Model-View-ViewModel) 아키텍처 패턴을 기반으로 동작해.M.. 2025. 2. 22.
VUE 공부 3개월만에 끝내려고 하는데 1일차 공부할 내용 알려줘. Vue를 3개월 만에 끝내려면 기본 개념부터 실전 프로젝트까지 체계적으로 학습해야 해.1일 차에는 기초 개념과 개발 환경 설정을 배우는 게 좋아.✅ 1일 차 공부 내용: Vue 기초 및 개발 환경 설정1. Vue 기본 개념 이해Vue.js란? (프론트엔드 프레임워크, 특징)MVVM 패턴 개념Vue 2 vs Vue 3 차이점2. 개발 환경 설정Node.js 및 npm 설치Vue CLI 설치 및 프로젝트 생성 (vue create my-project)Vite를 이용한 프로젝트 생성 (npm create vite@latest my-project)프로젝트 폴더 구조 분석3. 첫 번째 Vue 앱 만들기index.html에 Vue CDN 추가 후 간단한 앱 실행Vue 인스턴스 생성 (new Vue 또는 create.. 2025. 2. 22.

티스토리툴바