분류 전체보기64

• 

  [CSS] scroll-behavior로 부드러운 스크롤 구현하는 법 1. scroll-behavior: smooth – 단 1줄로 부드러운 스크롤 완성하기사용자 경험을 높이기 위해 많이 사용되는 효과 중 하나가 부드러운 스크롤(smooth scroll)입니다.과거에는 JavaScript나 jQuery를 통해 구현해야 했지만, 이제는 CSS 한 줄만으로도 가능합니다.2. 기본 문법html { scroll-behavior: smooth;} 이 속성 하나만으로 같은 페이지 내의 앵커(anchor) 링크 클릭 시 부드럽게 이동하게 됩니다.3. 예제: 내비게이션에서 섹션으로 스크롤3-1. HTML 코드섹션 2로 이동 여기가 섹션 2입니다3-2. CSS 코드html { scroll-behavior: smooth;}이제 를 클릭하면, 페이지가 자연스럽게 section2로 스르륵.. CSS 2025. 5. 19.

• 

  [CSS] aspect-ratio 속성으로 반응형 박스 비율 고정하는 법 반응형 웹페이지를 만들다 보면, 정해진 가로세로 비율을 유지한 채 박스나 이미지 크기를 자동 조절해야 하는 경우가 많습니다. 과거에는 padding-top 트릭이나 position: absolute를 이용해 우회적으로 해결했지만, CSS의 aspect-ratio 속성을 사용하면 이 과정을 훨씬 더 간단하게 만들 수 있습니다. 기본 사용법.box { width: 100%; aspect-ratio: 16 / 9; background-color: #3498db;} 이렇게 작성하면, .box는 항상 가로 16: 세로 9의 비율을 유지합니다. width가 늘어나면 height도 자동 조정됩니다. 모바일에서도 완벽하게 작동하게 됩니다. 다양한 예제1. 정사각형 만들기.square { width: 100px.. CSS 2025. 5. 18.

• 

  2024년 3회 정보처리기사 실기 후기.. 일단, 시작부터 꼬였다10월 20일에 2024년 3회 정보처리기사 실기를 보게 되었습니다.시작부터 꼬이기 시작한 것이... 시험 장소를 잘못 알아서 엄청나게 고생 했습니다. 2회 (늦잠으로 인한 결석) 때 장소를 아무렇지 않게 3회 장소로 착각을 하였습니다.(편의상 2회 시험장을 A, 3회 시험장을 B라고 하겠습니다.) A 시험장을 8시 30분에 도착하면서 들어가서 이론을 조금 보려고 했었습니다. 하지만 도착을 했는데, 어디 하나 시험 관련된 내용, 시험장 위치 표시가 없었습니다. 운동장에서 애들이 축구를 하고 있길래.. 그때 직감 했습니다."아.. 이거 잘못됐다" 바로 Q-net 어플로 확인을 하였습니다. 이런.. B 시험장이었습니다. 처음에 포기를 할까 했지만, 역시 그래도 너무 아까웠습니다. (공부.. 웹 퍼블리셔 일기 2024. 10. 21.

• 

  dl, dt 마지막 요소 선택 방법? dl (description list) 내의 dt와 dd에 border-bottom 스타일을 적용하고 싶을 때가 있습니다. 하지만, 마지막 dt와 dd에 접근하여 스타일을 주는 방법입니다.1.  html 구조간단하게 HTML 태그를 만들어봅시다. dl은 HTML에서 설명 목록을 만들 때 사용하는 요소로, dt는 항목의 제목을, dd는 그에 대한 설명을 나타냅니다. 다음과 같은 구조로 구성됩니다. Title 1 Description 1 Title 2 Description 22. border-bottom 스타일 적용 방법먼저, dt와 dd에 border-bottom을 적용하는 방법을 살펴보겠습니다./* 모든 dt와 dd에 border-bottom 적용 */dl dt, dl dd { border-.. CSS 2024. 9. 30.

• 

  jqGrid 검색 결과가 없을 때 메시지 출력! jqGrid는 많은 데이터 테이블을 간편하게 관리하고 검색할 수 있는 강력한 그리드 라이브러리입니다. 하지만 사용자가 그리드를 사용할 때, 검색 결과가 없을 경우 이를 사용자에게 명확히 알려주는 기능을 추가하는 것이 UX 관점에서 매우 중요합니다. 이번 글에서는 jqGrid에서 검색 결과가 없을 때, "조회된 데이터가 없습니다."라는 메시지를 표시하는 방법에 대해 소개하겠습니다. 1. 준비우선, 기본적인 HTML 구조와 jqGrid 관련 파일을 로드하는 과정이 필요합니다. 여기서는 jquery, jqGrid, 그리고 jquery-ui 관련 CSS 파일들을 CDN을 통해 가져와 사용하겠습니다. 조회된 데이터가 없습니다.위 코드에서 중요한 부분은 #noRecords라는 태그입니다. 이 태그는 검색 결.. jQuery 2024. 9. 13.

• 

  c3 Chart 범례(legend) 클릭 시 순서가 변경된다? 웹 페이지에서 데이터 시각화에 많이 사용되는 C3.js는 사용하기 쉽고 다양한 기능을 제공하는 차트 라이브러리입니다. 그러나 범례(legend) 클릭 시 데이터 순서가 변경되는 문제가 발생할 수 있습니다. 1. 문제점?C3.js에서 차트를 생성하고, 범례를 클릭하면 데이터가 표시되거나 숨겨집니다. 하지만 기본 설정에서는 범례를 클릭할 때 데이터의 순서가 자동으로 변경되는 문제가 발생할 수 있습니다. 이는 사용자가 데이터의 순서에 의존하는 경우, 불편을 초래할 수 있습니다. 2. 해결 방법: data.order 옵션 사용C3.js는 data.order 옵션을 제공하여 데이터의 순서를 제어할 수 있습니다. 이 옵션을 적절하게 설정함으로써 범례 클릭 시 데이터 순서가 변경되지 않도록 고정할 수 있습니다.dat.. JavaScript 2024. 9. 11.

• 

  로티 플레이어(lottie Player)를 통해 애니메이션을 추가해보자! Lottie는 JSON 기반의 애니메이션 파일을 웹이나 모바일에 쉽게 통합할 수 있는 라이브러리입니다. 이 중 LottiePlayer는 웹에서 Lottie 애니메이션을 간편하게 재생할 수 있는 웹 컴포넌트입니다. 이번 포스팅에서는 CDN 방식으로 LottiePlayer를 사용하는 방법을 소개하겠습니다. 1. LottiePlayer란?LottiePlayer는 Lottie 애니메이션을 HTML 태그만으로 손쉽게 삽입하고 제어할 수 있게 해주는 도구입니다. LottiePlayer는 다양한 속성으로 애니메이션의 반복 재생, 자동 재생 등의 설정을 손쉽게 할 수 있습니다. 2. CDN으로 LottiePlayer 사용하기LottiePlayer를 사용하려면 CDN을 통해 라이브러리를 불러오고, HTML에 태그를 추가.. HTML 2024. 9. 10.

• 

  input checkbox를 클래스와 함께 선택하는 방법 HTML에서 checkbox는 다양한 방식으로 사용되며, 이를 CSS로 스타일링할 때 특정한 클래스나 상태에 맞게 세밀하게 적용할 수 있습니다. 이 글에서는 CSS에서 input 태그 중 checkbox 타입을 선택하고, 클래스나 특정 상태에 따라 스타일을 적용하는 다양한 방법을 살펴보겠습니다. 1. 직접 선택자 사용input 태그와 checkbox 타입, 그리고 클래스 이름을 지정하여 간단하게 선택할 수 있습니다.input[type="checkbox"].my-checkbox { /* 스타일 적용 */}input[type="checkbox"]: input 태그 중 type 속성이 "checkbox"인 요소만 선택합니다..my-checkbox: 클래스 이름이 "my-checkbox"인 요소를 선택합니다... CSS 2024. 9. 9.

• 

  jQuery Zoomer를 이용하여 이미지를 확대 축소 해보자 이번에 필요했던 기능은 header와 bottom을 고정한 상태에서 이미지 영역만 확대를 시킬 수 있는 기능이 필요 했습니다. 은행이나 카드 상품 정보에서 약관을 PDF나 이미지 정보로 보여주는 기능을 볼 수 있는데, 이 기능이 필요해서 작성을 하게 되었습니다. HTML부터 CSS와 그리고 jQuery 플러그인인 Zoomer 플러그인을 사용해서 이미지를 확대하고 스크롤 할 수 있는 기능까지 추가로 알아봅시다.0. 준비하기 (CDN)jQuery 플러그인 Zoomer를 사용하기 위해서는 기본적으로 jQuery가 필요하고, zoomer.js가 필요합니다. 파일이 있으시면 추가하시면 되지만, 저는 CDN 기준으로 작성 하였습니다. zoomer.css 역시 추가 해주시면 됩니다. 해당 CSS는 확인해보니 라인 수.. jQuery 2024. 9. 6.

• 

  input type file에서 카메라 - 파일 작업 선택 속성 추가 모바일에서 작업 선택이라고 바텀 시트가 올라오면서 카메라 - 갤러리 - 파일 이런식으로 선택을 할 수 있는 속성을 알게 되었습니다. 여태 input type="file" 에서 속성을 추가하면 간단하게 해결이 됩니다. 하지만 PC 에서는 일반 input file로 보이기 때문에 테스트는 모바일해야 합니다. "image/*;capture=camera"는 HTML의 input 요소에서 사용하는 accept 속성의 값 중 하나입니다. 이 값은 웹 페이지에서 파일 업로드를 위한 입력 필드를 정의할 때 사용됩니다. 여기에 대한 설명은 다음과 같습니다: "image/": 이 부분은 파일 형식을 지정하는 부분입니다. "image/"는 이미지 파일의 모든 형식을 허용하겠다는 의미입니다. 즉, 사용자가 업로드할 수 있는 .. HTML 2023. 10. 5.

• 

  [SQL] Select 쿼리문에 대해 요즘 스파르타코딩클럽에서 국비교육 과정으로 엑셀보다 쉬운 SQL을 수강하게 되었습니다. SQL 이전에는 막막하고, 정말 엑셀보다 쉬운 것인가라는 의문점을 가지고 시작하였는데, 생각보다 재미있게 접근이 가능했고, 튜터님이 쉽게 설명해주고, 즉문 즉답이라는 막강한 프로그램을 이용하여 버벅대는 부분을 넘어갈 수 있어서 좋았습니다. 1. Select 데이터베이스에서 데이터를 선택해 가져오겠다 라는 의미입니다. 사용할 수 있는 예문으로는 아래와 같습니다. SELECT * FROM ORDERS 위의 코드대로 작성하게 된다면, ORDERS 테이블을 선택해서 가져오겠다라는 의미입니다. SELECT email, name, like FROM USERS 아까 위의 내용처럼 *을 사용하게 되면 전체 필드를 가져오는 것이지만,.. 카테고리 없음 2023. 4. 24.

• 

  github: 모르면 배워야 한다 일단 저는 이제 퍼블리셔로 근무한지 1년이 넘었습니다. 하지만 형상관리를 github으로 한 프로젝트가 없었고, 현재까지도 SVN 환경에서 계속해서 근무를 하게 되었습니다. 제가 배운 지식에서 기초적인 지식이 없이 텅 비었다고 생각하여 하나씩 배워가는 마음으로 다시 작성하려고 합니다. 각설하고 일단은 github에 대해 알아보고 제가 배운 내용으로 작성하려고 합니다. 1. Github이란 무엇인가? Github은 개발자들이 코드를 관리하고 공유하는 데 사용되는 협업 도구입니다. Git이라는 버전 관리 시스템을 기반으로하며, 코드를 저장하고 다른 사람들과 함께 작업할 수 있는 기능을 제공합니다. 개발자들은 코드를 업로드하고 저장소(repository 이하 레포지토리)를 만들어 다른 개발자들과 공유할 수 있.. 웹 퍼블리셔 일기 2023. 4. 14.