일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Absolute
- AGI
- ai
- AI agents
- AI engineer
- AI researcher
- ajax
- algorithm
- Algorithms
- aliases
- Array 객체
- ASI
- bayes' theorem
- Bit
- Blur
- BOM
- bootstrap
- canva
- challenges
- ChatGPT
- CLASS
- COALESCE
- combinatorics
- congruent modulo
- Cookie
- css
- CSS3
- deep learning
- div
- divmod
- DOM
- DOM 변경
- El
- Emotion
- figma
- Today
- In Total
목록css (23)
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에 배경화면이 들어간다면 아래처럼 클래스를 써서 사용하면 된다.