A Joyful AI Research Journey🌳😊

내가 만든 포트폴리오 웹사이트의 기술 목록인데 노트북 같은 큰 화면에서는 정상적으로 보인다. 하지만 모바일로 봤을 때는 글자들이 하단처럼 나왔는데 내가 원했던 건 왼쪽 칼럼의 클자가 오른쪽 칼럼의 글자 위로 올라가게 만드는 것이었다. 해결책은 Bootstrap의 col-sm-12를 모든 칼럼에 사용하면 된다. 이유는 화면의 스크린 크기가 모바일처럼 작을 때 (col-sm) 칼럼 너비 전체를 차지하게 만드므로 (12) 모든 칼럼들이 세로로 일렬로 정렬된다. This class specifies that the column should take up the full width of the grid system on small screens (sm breakpoint). It means that the col..

현재 팀 프로젝트 (3)에서 만들고 있는 화면인데 Bootstrap ver.5를 이용해서 item을 상단으로 붙이려면 align-items-start을 사용한다. 사용한 코드) 입고 등록 물품명 분류 현재고 들어온 재고 재고 등록하기

내가 구현하고 싶었던 화면은 화면의 상단에서 중앙까지는 지도가 나오고 화면의 중앙부터 하단까지는 진료부서 및 편의시설 리스트의 버튼들로 구성되는 화면을 원했다. 화면의 상단~중앙은 class를 map-container로 두고 화면의 중앙~하단은 class를 department-buttons로 두고 아래 CSS 코드를 사용하면 첨부한 사진의 결과가 나온다! html, body { height: 100%; overflow: hidden; } .map-container { height: calc(100vh - 50%); overflow-y: auto; } .department-buttons { height: 35%; overflow-y: auto; }

폰으로 봤을 때 배경화면을 반복없이 하나만 하단에 고정할 수 있다. /* 배경 화면 반응형 변경 */ @media only screen and (max-width: 400px) { .BgImage { background-position: 70% bottom; background-size: auto 40%; background-repeat: no-repeat; } } 결과)

다른 사이트들을 개발자 도구로 휴대폰 크기로 보면 햄버거 아이콘이라고 불리는 toggle bar가 우측으로 고정되어있었다. Bootstrap의 ms-auto class로 간편하게 우측 고정으로 만들 수 있다. 전체 코드) button에 ms-auto class를 추가했다. 결과) 토글 바가 우측으로 고정된다.

팀 프로젝트로 관리자 페이지를 만드는 데 휴대폰 같은 작은 화면으로 볼 때 아무래도 반응형이다보니 테이블의 글자가 세로로 나왔다. 가로형 스크롤바가 나오고 글자 라인이 안 바뀌도록 바꾸는 방법은 하단처럼 css에 white-space: nowrap을 쓰는 거다. /* Diagnosis.jsp 진단 테이블 칼럼 너비 조정 */ .DiagnosisTable{ table-layout:auto; white-space: nowrap; } 또 관리자 페이지의 칼럼 내용들이 왼쪽으로 쏠렸는데 아주 간단한 해결 방법은 bootstrap의 table class를 쓰는 것이다. 생략 table class를 사용하기 전) 왼쪽으로 쏠려있다. table class를 사용한 후) 자동으로 정렬됐다. 화면 너비를 줄인 뒤 하단에..

230504 Thu 부트스트랩의 validation 기능을 쓰고 있는 데 태그 안에 id = "needs-validation"과 novalidate를 추가하면 부트스트랩 자체의 validation이 정상적으로 작동한다. 비밀번호 (영문 숫자 특수문자 조합, 8자리 이상) 좋아요! 영문자, 숫자, 특수기호 조합으로 8자 이상으로 입력하세요. id = "needs-validation": enable the validation and feedback messages. novalidate: disable the browser's built-in validation.

230425 아래 캡쳐 이미지는 오늘 내가 만든 팀프로젝트의 증명서 상세 내역 다운로드 페이지이다. 다운로드 버튼을 누르면 pdf 저장이나 인쇄창이 뜨는데 날짜와 병원장은 최하단에 위치하고 제목과 테이블, 확인함이라는 문구는 최상단에 위치하는 걸 원했다. 날짜와 병원장 이름은 클래스명이 dateCheif이고, 20AA년 B월 C일 울산 그린 병원 병원장 제목과 테이블, 확인함이라는 문구는 클래스명이 container이다. 진료확인서 환자 이름 이름 주민등록번호 000000-0000000 상병명 코드 코드 번호 병명 병명 이름 위와 같이 진료받았음을 확인함. 해결책은 아래 css 코드를 사용하면 된다. postion:fixed와 각각 bottom:0이나 top:0을 쓴다. @media print { .da..

230425 Tue 특정 부분을 숨기려면 아래 코드를 css에 넣어둔다. #로 아이디로 지정할 수도 있고 .로 클래스로 지정해도 된다. @media print { #print-hide { display: none; } } 다운로드 할 때 숨기고 싶은 부분을 로 묶어둔다. 증명서 다운로드 샘플 증명서 양식) 증명서 다운로드 눌렀을 때) '증명서 다운로드' 버튼이 숨겨진다.

230423 input에 자연스러운 공간 및 그림자 효과 주기 우연히 부트스트랩 템플릿들을 둘러보다가 발견한건데 input에 자연스러운 공간 그림자 효과를 줄 수 있다. .inputStyle{ background-color: #fafafa; box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.08); } 코드는 위에 적었지만, 현재 부트스트랩 템플릿을 사용 중이므로 .form-control에서 수정했다. .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; /* background-co..

230423 Sun 현재 팀 프로젝트를 하면서 테이블을 만드는 데 한글 4글자(퇴원 날짜)인 칼럼 이름이 테이블 너비 때문에 퇴원 날짜 처럼 2줄로 되는 현상이 나타났다. 해결책은 아래 코드의 white-space: nowrap; 를 사용하는 것이다. .DiagnosisTable{ table-layout:auto; white-space: nowrap; } 결과) white-space:nowrap;을 쓴 뒤로 '퇴원 날짜'가 1줄로 나온다.

230423 Sun 배경에 전체 이미지가 적용되게 만들기 우선 부딪힌 문제는 배경 이미지가 전체적으로 적용되긴 했는데 배경 이미지의 가로 일부가 잘려서 배경으로 적용되는 것이었다. 해결책은 아래 코드인 background-position: center center; 을 사용하면 된다. 전체 코드) 제일 하단에 추가했다. .BgImage { background-image: url("../images/mainBlur.png"); background-size: cover; background-attachment: fixed; background-position: center center; } 결과) 현재 만들고 있는 팀 프로젝트의 main 화면인데, 오른쪽에 잘렸던 건물 이미지가 나오게 됐다.

폼 태그에서 입력한 값을 전송할 때는 GET방식과 POST방식으로 나뉘는데 POST방식으로 보내는 값이 '한글'일 경우 깨지지 않게 전달하기 위해 사용하는 것이 request.setCharacterEncoding("UTF-8")이다. jsp파일은 MS949로 작성되었으며 브라우저는 UTF-8로 받게될 것이다. 내가 사용한 코드) 참고: https://jong99.tistory.com/92 참고: https://powersmile-it.tistory.com/56

a 태그 페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용된다. button 태그 단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사용된다. A button is meant to submit information and will not necessarily redirect the user to an entirely new web page. A button tag can have a variety of behaviors, such as submitting a form, opening a link, or performing a JavaScript function when clicked. A regular tag does not have this built-i..

230430 우선 아래 그림은 어제 내가 팀프로젝트 때 만든 메인 화면인데, 네비게이션 아래에 있는 그라이데션 효과가 있는 부분은 header 부분으로 html에서 아예 TEXT가 없다. 배경 효과를 주려면 아래 코드처럼 height와 width를 지정하면 된다. (header든, 어떤 div든 아무 클래스여도 된다.) header{ height: 80px; width: 100%; background: linear-gradient(180deg,#EBF3FE, white); } 결과) 네비게이션 바 밑에 구름 효과 같은 그라데이션 효과가 나타난다.