A Joyful AI Research Journey🌳😊

230420 아래는 부트스트랩을 쓸 때 나오는 다운로드 아이콘 모양이다. bi bi-download me-2 아래와 신청 옆의 아이콘과 같다.

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%); } 결과) 화면 정중앙에 위치한다.

230414 배경 이미지 크기 상관없이 정중앙에 배치하게 하려면 아래 코드를 쓴다. body { background-image: url("이미지 주소.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } 결과) 현재 진행중인 포트폴리오인데, 배경 크기가 상당히 크다보니 중앙 배치가 안 됐었다. 위 코드를 쓰면 웹브라우저의 크기와 상관없이 배경이 정중앙에 배치된다.

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..

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-..

230210 마우스 올렸을 때 이미지 크기가 커진다. /* 마우스 올렸을 때 이미지가 커진다.*/ img { max-width: 100%; } .blog-slider__img { width: 280px; margin: 0px auto; overflow: hidden; } .blog-slider__img img { transition: all 0.2s linear; } .blog-slider__img:hover img { transform: scale(1.5); /*확대 배수*/ }

230213 Mon p. 265 1 2 3 4 Table 사용 시 1~4 나눔 부모 요소 태그 div로 묶는다. display: table; table-layout: fixed; 자식 요소 태그 #로 아이디 지정한다. display: table-cell;

우선순위 인라인 스타일 (ex. style = "color: pink") > 아이디 # > 클래스 . > 요소 p There are four categories which define the specificity level of a selector: Inline styles ex) IDs ex) #navbar Classes, pseudo-classes, attribute selectors ex) .test, :hover, [href] Elements and pseudo-elements ex) h1, :before How to Calculate Specificity? Memorize how to calculate specificity! Start at 0, add 100 for each ID value, ..

230206 Mon 230207 Tue 테이블 레이아웃 만들 때 1. display: table 2. display: table-row 3. display: table-cell 순서대로 한다. 참고: https://www.codingfactory.net/10776 table 말 그대로 table 형식으로 보여지게 만듭니다. table-row는 tr의 기능을 하고 table-cell은 td의 기능을 합니다. 참고: https://mondaymonday2.tistory.com/245 [CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row) A B C D A B C D table 말 그대로 table형식으로 보여지게 만듭니다. table-row 는 tr의 기능을하고 ta..

230127 메뉴 만들 때 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 p. 261 참고하기) HTML5 로그인 회원가입 CSS #login { display: table-cell; width: 200px; /*너비*/ height: 10px; /*네비게이션 영역 높이 */ border: dotted red; } #login ul{text-align:center;} #login ul li{display:inline;} #login ul li a{text-decoration:none; color:navy;}

vh = viewport height, vw = viewport width 즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻이다. 100vh, 100vw가 전체 화면의 기준이 된다. 예를 들어, 현재 스크린 크기가 height = 1000px, width = 800px이라면 1vh = 10px, 1vw = 8px 이 될 것이다. height: 50vh; width: 25vw; 로 설정한다면 height = 500px width = 200px 으로 적용된다. 참고: https://programming119.tistory.com/93

230203 If you want two classes on one element, do it this way: Reference it in css like so: .social.first {} 참고: http://jsfiddle.net/jyAyX/ 예시) HTML CSS .foo{ border-left: 1px solid gray; } .foo.bar{ border-top: 1px solid gray; } .foo .bar{ border-right: 1px solid gray; width:25px; height:25px; background-color:lightgray; } div{ margin:20px; height:50px; width:50px; background-color:beige; } 결과)