A Joyful AI Research Journey🌳😊

다른 사이트들을 개발자 도구로 휴대폰 크기로 보면 햄버거 아이콘이라고 불리는 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를 사용한 후) 자동으로 정렬됐다. 화면 너비를 줄인 뒤 하단에..

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 화면인데, 오른쪽에 잘렸던 건물 이미지가 나오게 됐다.

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

230419 부트스트랩 템플릿을 사용하면서 화면을 만들고 있고 공통 css 파일을 쓰고 있다. 특정 파일에만 배경이 들어가길 바랐다. 다른 css 파일 안 만들고 단순하게 특정 파일에만 배경이 들어가게 하려면 아래 코드처럼 배경 화면을 특정 class로 만들고 .mainBg { background-image:url("../assets/main.jpg"); /* #경로 수정 필요함 # */ background-size:cover; background-attachment: fixed; position:fixed-bottom; } 만약 body에 배경화면이 들어간다면 아래처럼 클래스를 써서 사용하면 된다.

230416 항상 화면 정중앙에 section이 위치하게 만들 수 있다. 코드) .section { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 결과) 화면 정중앙에 위치한다.

230408 현재 포트폴리오 만들고 있는 데, 각 섹션마다 동영상 배경을 두고 싶었다. HTML id를 background-video로 둔다. CSS 제일 중요한 건 z-index: -1을 써서 우선 순위를 뒤로 둬야한다! #background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } 결과물) 캡쳐여서 움직이지는 않는 데 동영상 배경이다. 텍스트가 앞에 위치한다! 참고: https://blog.hubspot.com/website/video-background-css

반응형 웹을 만들고 있는데 개발자 도구에서 폰으로 보면 여러 방법들을 계속 써봐도 텍스트에 가로형 스크롤바가 계속 나타났다. 해결책으로 가장 쉬운 방법은 css에 word-break: break-word;로 지정하는 것이다. word-break: break-word; 내가 쓴 코드) 그린컴퓨터아카데미 울산캠퍼스에서 진행한 팀프로젝트입니다. 주요 기능: 4월 17일에서 6월 15일까지 진행 완료 후 적을 예정입니다. GitHub: github.com/yjyuwisely/Team-Project-2023 Frontend: 4월 17일에서 6월 15일까지 진행 완료 후 적을 예정입니다. Backend: 4월 17일에서 6월 15일까지 진행 완료 후 적을 예정입니다. word-break: break-word; 추..

부트스트랩을 쓰면서 opacity-75처럼 투명도를 조정하니까 텍스트까지 투명해져서 알아보게되었다. background: rgba(3, 172, 240, 0.5); 정답은 rgba를 사용한다. 제일 뒤의 4번째 값이 투명도(Opacity) 조절이다. rbga(0~255, 0~255, 0~255, 0~1 사이의 값) 예를 들면 아래와 같다. rgba(0, 0, 0, opacity 0~1사이의 값): 검정색 rgba(255, 255, 255, opacity 0~1사이의 값 ): 흰색 아래는 포트폴리오 만들면서 쓴 코드인데 style을 쓰면서 부트스트랩과 같이 쓰게 됐다. 참고: https://dev.to/jungjungie/how-to-change-background-opacity-without-affect..

요약된 것을 편하게 볼 수 있다. https://getbootstrap.kr/docs/5.0/utilities/text/ 텍스트 Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. getbootstrap.kr https://www.w3schools.com/cssref/css3_pr_text-justify.php CSS text-justify property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular su..

230208 포커스 이용해서 input text 눌렀을 때 border 효과 주기 /*input 클릭하면 효과 있다.*/ input:focus{outline:none;/*input 박스를 클릭 했을떄 나오는 테두리 색상 없애기*/ border:solid 2px #CCCCFF; /*box-shadow: 0 0 5px #d6a8e9;*//*그림자 효과*/}; !important 쓰니까 실행됐다. 참고: https://zxchsr.tistory.com/301 select:focus{ border:solid 2px #CCCCFF !important; box-shadow: 0 0 15px #ECEEFF;} 참고: https://stackoverflow.com/questions/43820420/change-the-..