SearchBar components 배치 방법 SearchBar의 components의 배치를 flex를 이용해 할 수 있었는데 부트스트랩으로 [그림 1]과 같이 보기 좋게 만들 수도 있었다. 해당 코드는 아래와 같다. 조회기간 간격 일간별 조회 주간별 조회 월간별 조회 연도별 조회 검색 PDF XLSX 인쇄 초기화 참고한 내용 https://getbootstrap.com/docs/5.0/forms/overview/#form-text Forms Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. getbootstrap.com

1. div 태그 가로/세로 중앙-가운데-정렬 flex 사용시 : div태그의 경우 flex와 margin으로 가운데 정렬할 수 있다. .outer { display: flex;}.inner { margin: auto;} grid 사용시place-items: center;display: grid; 출처https://hianna.tistory.com/675 2. Tailwind의 경우 flex 또는 grid를 이용flex flex-col align-centergrid place-items-center 출처https://eight20.tistory.com/532024-09-27 추가3. 가로/세로 가운데 정렬 4가지 방법(최종) Button Button Button Button

text-align, display, vertical-align을 이용해 보더 정중앙에 텍스트 배치 [그림 1]의 겉뚜껑 카드 안에 "정상, 대각선"을 그려 넣고자 했다. 보더 안에 텍스트를 넣는 것은 어렵지 않았다. 하지만 보더 안의 정중앙에 글자를 배치하기 위해서는 몇 가지 설정을 더 해줘야 했다. 아래 코드에서 주석에 해당하는 부분을 참고하자! .card-message-wrap { height: 40px; width: 40px; border-style: solid; border-width: thin; border-radius: 50%; /* 이하 텍스트 중앙 배치 코드 */ text-align: center; display: table-cell; vertical-align: middle; } bac..

CSV를 JSON으로 변환해야 하는 상황이 생겨 검색하다가 발견한 사이트이다. 여러 서비스들이 있었지만 여기가 가장 빠르고 간편했다. https://csvjson.com/csv2json CSV to JSON - CSVJSON Embed all the functionality of csvjson in any web application with Flatfile. Auto-match columns, validate data fields, and provide an intuitive CSV import experience. csvjson.com

[그림 1]과 같이 이미지 맵에서 툴팁을 사용하고자 하였다. 여기서 소개하고 있지 않은 방식으로 먼저 시도를 했었는데 붉은색으로 표시된 서클 세 곳에 각각 다른 툴팁이 표시되어야 하는데 같은 툴팁 하나만 표시되는 문제가 있어 검색 끝에 아래의 사이트를 찾게 되었다. https://codeconvey.com/responsive-image-map-with-hover/ Responsive Image Map with Hover Tooltip - Codeconvey In this tutorial, we'll create a responsive image map with hover tooltip using CSS and jQuery. Here you can download code for image map. cod..

이미지의 어떤 영역에 마우스를 올려놓으면 설명을 띄우거나 링크를 연결하고 싶었는데 map 태그로 쉽게 기능을 구현할 수 있었다. Image Map Generator 사이트에서 사용할 이미지를 업로드(Select Image from My PC) 한 후 해당 이미지의 부분만 설정해 주면 쉽게 선택에 부분의 좌표가 포함된 map 태그를 가져올 수 있다. https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output! www.image-map.net 복사한 코드를..

위 코드에는 프로필 이미지 파일을 base64로 인코딩한 문자열이 포함되어 있다. 따라서 별도의 이미지 파일과 url이 불필요하다. [그림 1]은 위 코드를 실행한 결과이다. base64는 ASCII에서 특수문자를 제외한 26인 64개의 문자로 이루어진다. 즉, "A~Z, a~z, 0~9, +, /"로 표현된다. 아래의 base64encode.net에서 이미지 파일을 base64 문자열로 변환할 수 있다. https://www.base64encode.net/ Base64 Encode - Online Tool Base64 encode Encode base64 string from 'base64 encoder' to 'YmFzZTY0IGRlY29kZXI=' www.base64encode.net

학습동기 front-end개발 stack의 가장 기본이 되는 HTML, CSS를 학습하고자 하였다. 학습내용 1. 강의영상 https://youtu.be/cb7VlXqFla4 2. 학습 중 작성한 코드 I am red I am blue I am big 이름 지역 전화번호 홍길동 서울 010-111-1111 네이버 /* style.css */ .color-primary { color:blue; } .font-50 { font-size: 50px; } .select-style1 { height:40px;font-size:20px;color:red; } .tb-head>tr>td { border: 1px solid #000; font-size: 14px; font-weight: bold; color: red;..