분류 전체보기62

• 

  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.

• 

  사파리에서 디바이스별로 확인하는 방법 (응답형 디자인 모드) 크롬에서는 디바이스별로 레이아웃을 볼 수 있는 것이 개발자 도구에 떡하니 있는데, 사파리에서는 찾아볼 수가 없었습니다. 사파리에서는 조금 다른 메뉴인 [응답형 디자인 모드 시작] 이란 메뉴를 선택해야 디바이스별로 레이아웃을 볼 수 있습니다. 사파리 -> 개발자용 -> 응답형 디자인 모드 시작 응답형 디자인 모드가 실행되면 위의 디바이스를 클릭하면 레이아웃을 확인할 수 있습니다. iOS 기기 디바이스인 아이폰 SE부터 아이패드 프로(12.9인치)까지 확인이 가능합니다. 디바이스를 클릭하면 세로/가로로 전환되면서 레이아웃을 확인할 수 있습니다. 가로/세로 사이즈를 늘리고 싶다면, 하단에 네모박스처럼 생긴 부분을 드래그하면 늘릴 수도 있습니다. 이번에 아이폰 디바이스를 확인하면서 사용한 응답형 디자인 모드였습.. HTML 2022. 12. 26.

• 

  함수의 return은? 함수의 return이 처음에는 굉장히 헷갈렸습니다. 왜 함수에 마지막에 저녀석을 왜 쓰는 거지? 저걸 위에 쓰니까 다른 코드들이 작동이 되지 않았던 부분에서 공부를 하면서 찾기 시작했습니다. (사실 이전에 공부했던 부분을 정리하였는데, 요즘은 강의를 들으면서 개인적으로 다른 내용도 추가하고 정리를 하는 부분입니다.) - return 문법은 왜? return 우측 값을 반환합니다. return 에는 아무거나 작성이 가능합니다. (숫자, boolean) -> 어떤 값도 반환하지 않는 경우에는 사용하지 않는 것이 좋습니다. 함수 종료 기능을 가지고 있습니다. 이전에 학원에서 공부했을 때는 함수 실행문 밑에 return이 있는 거를 그냥 따라치기 했었는데, 그냥 그런가보다만 했었는데, 3번 함수 종료 기능을 모.. JavaScript 2022. 12. 17.