A Joyful AI Research Journey🌳😊

230405 집 a.html(pull)-update(최신)-수정 commit 학원 a.html commit(최신) 학원에서 알게 된 건데, 두 branch는 merge가 안 된다. 이유는 내가 이클립스에서 pull은 안 했기 때문이다! https://allmana.tistory.com/168 이클립스 프로젝트 GitHub에 올리기~ https://github.com/ GitHub: Where the world builds software GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositorie..

230403 Mon 66th class 집에서 만든 포트폴리오 import를 학원 내 이클립스로 하니까 버전 때문에 오류가 났다. Exception in thread "main" java.lang.UnsupportedClassVersionError: com/example/demo/DemoApplication has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 52.0 61버전으로 컴파일 됐고 이클립스 버전은 52까지 가능하니까 52버전 -> 61버전으로 바꿔줘야 한..

230403 Mon 66th class Window - Show View - Git - Git repositories Clone a Git repository를 눌러서 Git 주소와 아이디, 비밀번호를 입력한다. 처음에 오류가 났는데 프로젝트를 Public으로 바꿔야한다. Team - Commit (깃허브 서버에 프로젝트를 업로드 한다.) Git Staging Unstaged Change Commit Message: 프로젝트 첫 upload 밑에 Commit and Push 버튼 누름 https://github.com/settings/personal-access-tokens/new 커밋할 때 쓰이는 토큰 (30일 짜리다.) 기억해두기 이클립스에서 연동하기 참고: https://velog.io/@godls..

230401 Sat 학원에서 스프링으로 할 때와는 다르게 집에서 스프링부트로 하니까 css, js 파일이 실시간 반영이 안 돼서 불편했다. 이클립스를 사용중이고, 해결책은 아래와 같다. pom.xml의 에 아래 코드를 추가한다. org.springframework.boot spring-boot-devtools runtime org.springframework.boot spring-boot-devtools 2.0.4.RELEASE Maven Dependencies에 아래 jar 파일이 다운된 것을 볼 수 있다. src/main/resources 경로의 application.properties에 아래 코드 추가한다. spring.devtools.livereload.enabled=true spring.free..

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

230329 기본틀은 아래와 같고 input에 name, type, id 등 다양한 걸 넣을 수 있다. 검색하면 보통 전체 약관 동의만 떠서 그런데 선택 약관 코드도 넣었다. 코드) 전체 약관, 선택 약관, 이메일, SMS 각 눌렀을 때 체크박스 체크되게 만들기 //전체 약관 동의 function checkAll() { if ($("#TermsOfService").is(':checked')) { $("input[name=sub_TermsOfServiceRequired]").prop("checked", true); } else { $("input[type=checkbox]").prop("checked", false); } } //선택 약관 동의 function checkOptional() { if ($("..

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; } 결과)

::after (:after) 참고: https://developer.mozilla.org/ko/docs/Web/CSS/::after CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. (CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.) /* 링크 뒤에 화살표 추가 */ a::after { content: "→"; } HTML 적당히 평범하고 심심한 글입니다. 지루하지도 흥미진진하지도 않은 글입니다. MDN 기여는 쉽고 재밌습니다. CSS .exciting-text::after { content: "

230422) 가장 쉽게 생각하는 방법은 css파일을 중심으로 보고 경로를 생각한다. .mainBg { background-image: url("../images/mainBlur3.png"); background-size: cover; background-attachment: fixed; /* position: fixed-bottom; */ } ".." (double dot) refers to the parent directory of the current directory. The image is located in a folder named "images" that is one level up in the directory hierarchy from the location of the CSS file..