복습 및 실습7 HTML, CSS, JS만 이용한 간단한 계산기 만들기 오늘은 HTML, CSS, JS만 이용해서 계산기를 만들어 볼까 합니다!우선 살펴본 것은 window 11에 기본 탑재되어 있는 기본계산기 입니다히야..... 공부하고 나서 보니까 기본 디자인도 예뻐보이네요....바로 만들어 보겠습니다!우선은 table을 이용하여 다음과 같이 만들어 줍니다...ㅎㅎ...너무 볼품없네요...코드는 다음과 같이 짜 주었습니다.후에 CSS와 JS까지 적용할것을 생각해 함수명, id까지 적용해 놓았습니다!일단 적용하기 쉬운 CSS부터 적용해 보겠습니다.그림판 스포이드로 색깔을 따내고... 배경으로 적용, 크기조절, background-image삽입 정도 해주면!잘 된거 같은데...버튼이 너무 단색이라 버튼마다 색깔좀 처리해 주겠습니다.숫자버튼에 name속성도 추가해 주면 편하게.. 2024. 8. 18. Git hub 웹사이트 무료 배포 전에 말했던 깃허브 사이트의 무료배포 방법을 한번 알아보겠습니다....!열심히 만든 UI가 배포된다니 너무 기분이 좋겟죠...?우선 깃허브에 로그인 해줍니다!!!짜잔만들어둔 레포지토리도 보이고 이것저것 보이네요ㅎㅎ 여기서!!!배포할 UI를 업로드할 레포지토리 하나 생성해 줍니다레포지토리 이름은 추후 본인 UI주소가 될것이니 신중하게 작성...!공개범위는 당연히 public입니다!! private이면 이후에 다시 설정 바꾸셔야 해요....고대로 진행!저는 포트폴리오라고 만들었습니다ㅎㅎㅎ 이제 코드를 푸시 해주시면 되는데 주의할 점이 있어요!!! 실행할 코드 파일을 index.html이라 저장해서 푸시해야 한다는점..... 이게 안되서 저는 한참 애먹었습니다....짜란~~~~ 물론 이외의 데이터 파일이나 참.. 2024. 8. 17. HTML, CSS 포트폴리오 만들기 지금까지 공부한 HTML, CSS만을 이용하여간단한 포트폴리오를 만들어 보려고 합니다..!개발자라면 하나씩은 가지고 있다는 포트폴리오... 나도 한번 만들어보겠습니다...먼저 vs code를 실행...! 이후 만들 문서의 구조를 만들어 줍니다...저는 간단하게 만들려고 계획중이기 때문에.. 우선 헤더영역, 콘텐츠 영역, 푸터 영역 이렇게 간단하게 나누어 주었습니다!짜잔..! 코드는 생각보다 간단합니다!엄청 간단하죠....?이후 작성할때 내용이 길어지면 style태그에 사이즈만 조절해 주면 된답니다!배경색은 제가 좋아하는 어두운 계열로 하도록 하겟습니다....먼저 헤더 작성!! 프로필 사진과 이름.. 그리고 각 페이지에 갈수 있도록 a태그를 이용할겁니다..!헤더부분만 작성해 주면이렇게...! 프로필 사진.. 2024. 8. 16. CSS를 이용해 티스토리 블로그 테마 변경하기 CSS 공부를 했으니 이제 티스토리 내 블로그를 싹 갈아 엎으려 계획하였습니다!!!무려 한달 전 스킨편집에 html편집이 있다는걸 깨달은 저는.... 이건 못참겠다 하고 결국 또 건드려보고야 말았으나.....휴......프론트는 쉽지 않은 것이었습니다....일단 먼저 티스토리에서 제공하는 기본테마를 입혀준 뒤 (저 이미지는 셀트리온 회사 이미지...)블로그 관리를 들어가 주시면... 여기서 두번째 스킨편집을 눌러 줍니다!그다음엔 여기서 html 편집을 누르게 되면.... 후...... 이때 잘못됨을 깨닫고 돌아 섰어야 하는데....아참! 홈화면이 마음에 들지 않으신 분들은 스킨편집에서 이렇게 다양하게 설정 가능하니 마음에 들게 설정 해주시면 됩니다.CSS건들기 전에 대충 홈페이지 꾸며주고 나니 요런 화면.. 2024. 8. 15. 미니 프로젝트 JDBC연동 자바공부를 하며 만들어진 미니프로젝트를 JDBC와 연동해 보았습니다.... 대략적인 구조는 동일하므로 기존 프로젝트를 수정하는 방법으로 진행하였습니다.이전 프로젝트가 궁금하다면 https://kauli1014.tistory.com/73 여기서 확인할 수 있습니다.새로 만들어진 클래스 다이어그램에 대한 설명입니다.먼저 가장 간단한 run 클래스다음은 model과 DAO 부분입니다... 모델은 이전과 동일하게 작성되어 있으나 가장 변화가 많았던 DAO부분을 살펴보겠습니다.DAO는 이전과 동일하게 DATA 인터페이스를 implement 하고 있으나 필드부를 확인해 보면 JDBC url, UserName, PassWord 를 추가하여 DATA 베이스에 접속하기 위한 Connection의 매개변수들을 저장하고 있.. 2024. 8. 4. 자바 미니 프로젝트 작성 이제까지 공부한 내용을 바탕으로 미니프로젝트를 만들어 보고자 한다.만들어 보고자하는 프로그램은 우리의 최종 목표인 웹페이지 개발을 위하여 콘솔창을 이용한 간단한 홈페이지 제작을 할것이다.회사이름이 특이한데 이유는 다음과 같다....중요하지 않으니 빠르게 넘어가자다음은 클래스 다이어그램에 대한 설명들이다여기서 사용한 JFrame은 이전에 다룬적이 없었으나 만들어진 프로그램 특성상 출처를 밝혀야 할 것 같아 사용하게 되었다.이왕 사용한 김에 여러 이미지도 출력해 보았다.여기까지 모든 클래스 다이어그램을 살펴 보았다, 이 모든 클래스를 합쳐보면...?다음과 같이 작성되었다...미니프로젝트 였지만 욕심에 이것저것 추가하다 보니 복잡한 프로젝트가 되었다.프로젝트 욕심에 블로그 작성이 조금 늦어지게 되었으나 뿌듯함.. 2024. 7. 31. 이전 1 2 다음
