나디아 성장 일기

Carousel Slide : 버튼 클릭 시 배경색이 랜덤하게 변하며 해당 배경색의 색상 코드를 출력하는 사이트 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 1. 이미지 준비하기 브라우저 크기, 위치 배치 .slide-container { width: 300vw; transition: all 1s; } .slide-box { width: 100vw; float: left; /* 왼쪽으로 배치 */ } .slide-box img { width: 100%; } 2. 숫자 버튼 숫자 버튼을 누르면 해당 번호의 사진이 슬라이드 된다. 숫자 버튼에서도 현재 사진 변수(now)를 신경 써야 한다!..

Button with Badge : 메세지 버튼과 버튼 클릭 횟수를 같이 보여준다. 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 기능 구현 main.css - 전체 디자인 코드 구현 계획 Message 버튼 & badge Message 버튼을 클릭하면 클릭 숫자가 badge에 출력된다. Reset 버튼 Reset 버튼을 클릭하면 Message 버튼 badge의 숫자 카운트가 0으로 초기화된다. 기능 구현 Message 버튼의 badge - 클릭 횟수를 변수로 선언하고 클릭(click) 이벤트가 발생할때마다 1씩 증가해준다.(count++;) index.html Message 0 Reset Check your message! index.js //..

369 게임 : 3의 배수에 박수 출력 사용 언어 - HTML - CSS - Javascript 구조 - index.html - 전체 구조 - index.js - 기능 구현 - main.css - 전체 디자인 - success.html: 입력값이 3의 배수가 아닐 경우 실행 코드 구현 계획 기본 구조 구현(제목, 버튼 기능 등) 으로 입력 받기 입력 받은 값이 3의 배수인지 계산하기 i % 3 == 0이면 3의 배수 결과 출력하기 3의 배수이면 '박수' 출력 3의 배수가 아니면 '통과' 출력 9의 배수에는 '박수 박수' 출력 - 9의 배수 조건을 if문의 처음 조건에 넣기 기능 구현 input으로 입력 받은 값이 3의 배수인지 계산하기 9의 배수인 경우 다른 메시지('박수 박수') 출력하기 documen..

Question : 질문 상자(box)를 누르면 내용(content)을 보여주는 바가 내려간다. 사용 언어 - HTML - CSS - Javascript 구조 - index.html - 전체 구조 - index.js - 기능 구현 - main.css - 전체 디자인 코드 구현 계획 버튼 html, css 생성 버튼 누르면 서브 메뉴 열리게 구현 (js) 버튼 누르면 서브 메뉴 열고 닫히게 토글 생성 서브 메뉴가 열려있으면 (if(max-height)) 서브메뉴 닫고(max-height == null) 닫혀있으면 (max-height + "px") css에서 transition에 시간 설정 기능 구현 for문을 이용하여 3개의 버튼에 토글 기능 부여 버튼의 다음 요소(=내용content)를 가지고 온다. ..

Click Counter : 버튼을 클릭하면 증가, 감소, 초기화 기능을 나타내는 페이지 사용 언어 HTML CSS Javascript 구조 index.html - 전체 구조 index.js - 버튼, 글자 디자인 main.css - 전체 디자인 코드 구현 계획 1. 초기 숫자는 0으로 띄움 2. 증가 버튼을 누르면 1씩 증가(+= 1) 3. 감소 버튼을 누르면 1씩 감소(-= 1), (음수 가능) 4. 초기화 버튼을 누르면 0으로 셋팅 (초기 숫자와 같음) 5. **실시간 숫자를 화면에 출력**하기 - 숫자를 보여주는 태그의 id를 innerHTML를 통해 초기 숫자 변수인 main으로 변경한다. index.html Counter // 숫자 보이는 곳 (초기 숫자 0으로 설정) 0 Decrease Re..

📌JAVA SEMI PROJECT 목차 1. 프로젝트 소개 - 주제 - 기획 의도 - 기간 - 개발 환경 - 참여 부분 2. 어려웠던 점 & 해결 방법 3. 느낀점 - 잘한 점 - 힘들었던 점 / 아쉬운 점 - 배운 점 1. 프로젝트 소개 주제 지하철 혼잡도 관리 시스템 기획 의도 - 관리 지하철 혼잡도를 통한 역 혼잡도 관리 - 서비스 지하철 혼잡도 정보 제공으로 이용객 편의 증진 기간 2024-01-29 ~ 2024-02-08 개발 환경 - Windows 11 - Eclipse (2023-12 R) - Java (JDK 21.0.2) - GitHub 2. 어려웠던 점 & 해결 방법 1. 협업 툴 팀 프로젝트의 꽃은 사실 코드 구현이 아니라 협업 툴을 사용하는 것이다... GitHub를 이용하여 매일 ..

Color Flipper : 버튼 클릭 시 배경색이 랜덤하게 변하며 해당 배경색의 색상 코드를 출력하는 사이트 사용 언어 - HTML - CSS - Javascript 구조 - index.html - 'Simple' 버전 - app.js - 'Simple' 버전 - hex.html - 'hex' 버전 - hex.js - 'hex' 버전 - styles.css - 사이트 css 코드 index.html Color Flipper Simple hex Background Color : #f1f5f8 Click Me app.js - 'Simple' const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; // Simple 선택 시 나오는 색상들 선언 //..