키자드에 등록된 총 368개의 포스트를 확인하실 수 있습니다.
디자인은 기본적으로 부트스트랩을 사용하기로 했다. 부트스트랩은 화면 해상도에 따라서 디자인이 변경된다. (PC, 모바일 등 따로 구축할 필요가 없다.) 프로젝트를 진행하다 시간적 여유가 있으면 CSS 연습을 하며 변경할 예정이다. login.jsp 따릉이는 처음이라 메인 게시판 접속하기 로그인 회원가입 로그인 화면
데이터베이스는 Mysql을 사용한다. 아래와 같이 데이터베이스 테이블을 생성한다. 회원 데이터를 다룰 수 있는 데이터베이스 및 자바 빈즈 생성한다. User.java package user; public class User { private String userID; private String userPassword; private String userName; private String userGender; private String userEmail; public String getUserID() { return userID; } public void setUserID(String userID) { this.userID = userID; } public String getUserPassword() {..
JSP에서 회원 데이터베이스 테이블로 접근할 수 있도록 DAO를 만들어줘야한다. (DAO란? 데이터베이스에서 회원 정보를 불러오거나 정보를 저장할 때 사용한다.) UserDAO.java package user; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class UserDAO { private Connection conn; private PreparedStatement pstmt; private ResultSet rs; public UserDAO() { try { String dbURL = "jdbc:mysql://lo..
만들었던 login.jsp 소스를 복사해서 join.jsp에서 사용한다. 네비게이션 부분은 수정하지 않고 회원가입 양식을 추가한다. join.jsp 회원가입 화면 남자 여자
회원가입 기능은 UserDAO에 함수를 추가하면 된다. 추가하는 함수는 아래와 같다. public int join(User user) { String SQL = "INSERT INTO USER VALUES (?, ?, ?, ?, ?)"; try { pstmt=conn.prepareStatement(SQL); pstmt.setString(1, user.getUserID()); pstmt.setString(2, user.getUserPassword()); pstmt.setString(3, user.getUserName()); pstmt.setString(4, user.getUserGender()); pstmt.setString(5, user.getUserEmail()); return pstmt.execute..
Web Server는 회원을 세션 아이디로 구분할 수 있다. (세션이란? 실시간 접속한 회원에 할당해주는 고유 아이디) 로그인을 성공했을 경우 세션 아이디를 부여하는 것으로 세션관리가 시작된다. 또한, 로그아웃했을 경우 세션 아이디를 해지해야 한다. 1. loginAction와 joinAction에서 각각 로그인에 성공한 회원에게 세션을 부여한다. session.setAttribute("userID", user.getUserID()); 2. 할당된 세션을 다시 해지해주는 페이지를 만들어야한다. (logoutAction) logoutAction.jsp 3. joinAction과 loginAction에 로그인한 계정은 다시 로그인할 수 없도록 조건을 준다. String userID = null; if(ses..
청기 백기 I “청기 내려. 백기 올려. 청기 내리지 말고 백기 올려!” '청기 백기' 게임 아시죠? 참가자들이 한 손에는 청기를, 다른 손에는 백기를 들고 있다가 사회자가 말하는 대로 동작을 해야 하는 게임입니다. 예를 들어, 사회자가 "청기 내리지 말고 백기 들어!"라고 외치면 그대로 따라해야 합니다. 만약 실수로 청기를 내린다거나 백기를 들지 않으면 탈락하게 됩니다. 이 게임을 한 번 만들어봅시다. 주어진 코드를 실행해보시면 총 6개의 깃발과, 3개의 버튼이 있습니다. HTML 코드와 CSS 코드를 분석한 후, 앞서 배운 jQuery 선택자와 메소드(함수)를 이용해, 각 버튼이 제대로 동작하도록 스크립트를 작성해보세요. 깃발이 다시 올라오는 기능은 청기 백기 II 과제에서 구현할 테니, 일단은 내려..
청기 백기 II 저번에는 내려간 깃발이 다시 올라오지 않았는데, 이번에는 다시 깃발이 올라오도록 써주세요. 그리고 재미를 조금 더하기 위해, 깃발이 1초 뒤에 올라오도록 써줄 텐데요. setTimeout 함수를 사용하면 동작을 몇 초 후에 실행되도록 설정할 수 있습니다. // someFunction 함수가 1초 후 실행 setTimeout(someFunction, 1000); // someFunction 함수가 3.5초 후 실행 setTimeout(someFunction, 3500); 청기 내려 청기 내리지 말고 백기 내려 점선 청기 내려 * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; text-align: cen..
깨깨오톡 주어진 HTML/CSS 코드를 분석한 후, 자바스크립트로 아래의 조건들을 따라서 기능을 추가해주세요: 메시지를 입력하고 '전송' 버튼을 클릭하면 새로운 말풍선이 생깁니다. 친구가 보낸 말풍선은 .friend-bubble 클래스를 갖고 있지만, 내가 보낸 말풍선은 .my-bubble 클래스를 갖고 있습니다. 메시지가 전송되면 는 다시 빈 칸이 됩니다. 가 비어 있으면 메시지는 보내지지 않습니다. siri 잘 지내? 자니? 전송 * { box-sizing: border-box; } body { background-image: url('background.jpg'); font-family: 'Noto Sans KR', sans-serif; } .chat-container { margin: 60px a..
jQuery [jQuery 활용하기] 02. 이벤트01. 이벤트 객체 들여다보기02. 이벤트 객체 파라미터?03. 코드 줄이기04. 다양한 이벤트 정리05. $(document).ready, 그리고 익명 함수 [jQuery 활용하기] 03. jQuery 201. 요소 숨기기, 보여주기02. Furniture Shop Mini Project c️[JSP 게시판 만들기] 01. Hellow World!02. 로그인 페이지 디자인 GitHub 주말에 푹 쉬고 저녁부터 공부를 시작했다. 기분 좋게 jQuery 강의와 실습을 하고 2021년도 일요일 두 번째 커밋을 완성해서 기분이 좋았다.. 그러나, Mini Project를 진행하는 와중에 생각지도 못한 복병이 나를 힘들게 했다... tomcat 너란 자식..
Furniture Shop '가구계의 아마존', Furniture Shop이 블랙 프라이데이를 맞아 할인 쿠폰을 제공하려고 합니다. '쿠폰 받기' 버튼을 누르면 팝업이 1초 이내에 부드럽게 나타나고, '확인' 버튼 또는 키보드의 esc 키를 누르면 팝업이 1초 이내에 부드럽게 없어져야 합니다. SHOP CART LOGIN 블랙 프라이데이 슈퍼 세일 최대 50% 할인의 혜택을 받아보세요! 쿠폰 받기 다운 완료! 내 쿠폰함에서 확인하세요! 확인 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navbar */ .navbar { height: 75px; padding-left: 30px..
jQuery [jQuery 활용하기] 03. jQuery 2 03. 스크롤 1 04. 스크롤 2 05. each 06. 홀짝 Mini Project c️ [JSP 게시판 만들기] 02. 회원 데이터베이스 구축하기 03. 로그인 기능 구현하기 04. 회원가입 페이지 디자인 05. 회원가입 기능 구현하기 06. 접속한 회원 세션 관리하기 07. 게시판 메인 페이지 디자인 08. 게시판 데이터베이스 구축하기 09. 글쓰기 기능 구현하기 10. 게시판 글 목록 기능 구현하기 11. 게시글 보기 기능 구현하기 12. 게시글 수정 및 삭제 기능 구현하기 GitHub Study c [주간 필수 미션] 01. 코뮤니티 카페 활동 후기 02. 내가 좋아하는 언어(or알고리즘)로 문제 만들기 [게릴라 미션] 01...
JavaScript [인터랙티브 자바스크립트] 03. 이벤트 살펴보기 01. 이벤트 핸들러 등록하기 02. 다양한 이벤트 03. 이벤트 핸들러 등록하기 퀴즈 04. 이벤트 객체 05. 이벤트 객체 프로퍼티 06. 완료한 일 체크하기! 07. 이벤트 버블링 08. 캡쳐링 09. 이벤트 버블링 퀴즈 10. 이벤트 위임 11. 효율적으로 완료한 일 체크하기! 12. 브라우저의 기본 동작 13. 브라우저의 기본 동작 퀴즈 14. 종합 정리 jQuery [jQuery 활용하기] 01. jQuery 1 01. DOM pt. 1 02. DOM pt. 2 03. jQuery 사용해보기 04. jQuery = '선택'과 '동작' 05. CSS로 '선택'하기 06. jQuery 내부 살펴보기 07. jQuery의 ..
완료한 일 체크하기! 이벤트 객체를 활용한 이벤트 핸들러, updateToDo 함수를 완성해 주세요. 이 함수는 이벤트가 발생한 대상에 'done'이라는 class 속성값을 toggle하는 함수여야 합니다. 반복되는 부분들이 좀 더 간단하게 정리되도록 이벤트 핸들러를 등록하는 반복문을 작성해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일은 클릭했을 때 'done'이라는 class 속성값이 toggle되면서 스타일이 변하고, 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; display: flex; align-items: center; justify-..
효율적으로 완료한 일 체크하기! 이벤트 위임을 활용할 수 있도록 이벤트 핸들러, updateToDo 함수를 완성해 주세요. updateToDo는 이벤트가 발생한 대상이 item이라는 클래스 속성 값을 가지고 있을 때 동작해야 합니다. 이벤트 핸들러를 li 태그 각각에 등록하는 것이 아니라 하나의 태그에만 등록해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일 뿐만아니라 자바스크립트로 추가한 네 번째 할 일을 클릭했을 때도 'done'이라는 class 속성값이 toggle되면서 스타일 변해야 합니다. 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; di..
드럼 시퀀서 I 요즘의 음악 트렌드를 따라가기 위해 비트메이킹을 배워보려고 합니다. 하지만 '런치패드'를 살 돈이 없기 때문에 자바스크립트로 대안을 만들 건데요. 우선 만들려고 하는 사이트의 완성본을 살펴보세요. 오른쪽에는 루프 음원을 실행할 수 있는 '재생 버튼'과 '정지 버튼'이 있고, 키보드로 숫자 1에서 9까지 입력하면 해당 드럼 소리가 재생됩니다. 과제를 세 파트로 나누어 진행해볼게요. 이번 첫 번째 파트에서는: #play-btn을 누르면 loop.mp3 파일이 실행되어야 합니다. #stop-btn을 누르면 loop.mp3 파일이 멈추고, 다시 음원의 처음으로 돌아가야 합니다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1..
드럼 시퀀서 II 두 번째 파트에서는: 키보드로 숫자 1에서 숫자 9를 누르면 해당 'cell'에 'playing' 클래스가 추가되어야 합니다. 예를 들어서 숫자 1을 누르면 #cell1에 'playing' 클래스가 추가되고, 5을 누르면 #cell5에 'playing' 클래스가 추가되는 거죠. 키보드에서 손을 떼면 모든 'cell'에서 'playing' 클래스를 없애줘야 합니다. 아직 드럼 소리는 넣지 마세요. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: 0; font-family: "Helvetica"; bac..
드럼 시퀀서 III 마지막 파트에서는: 키보드로 1에서 9까지의 숫자를 누르면 해당 드럼 소리가 나도록 해주세요. 같은 버튼을 빠르게 여러 번 눌러도 소리가 끊어지지 않아야 합니다. 누를 때마다 매번 드럼 소리를 처음부터 재생해주세요. 숫자 1에서 9까지가 아닌 다른 값을 입력하면 무시되어야 합니다. 예를 들어서 키보드로 q를 입력하면 오류도 나지 않고, 다른 특별한 동작도 없어야 합니다. 소리가 녹화되지 않아서 아쉽다. 모든 버튼이 다 다른 소리가 나게 구성되어있다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: ..
이메일 광고 처음에는 'Send' 버튼이 회색(#9E9E9E)으로 비활성화되어 있다가, 방문자가 올바른 형태의 이메일을 입력하면 파란색(#4D79C2)으로 활성화되어야 합니다. 이메일에는 @가 포함되어 있어야 한다. @ 뒤에는 최소 1개 이상의 .이 포함되어 있어야 한다. 이메일의 필수요소인 '@', '.'이 입력되어야 send버튼 활성화! PRODUCTS BLOG HOME ABOUT LOGIN 더 많은 정보와 이벤트 등을 받아보고 싶으면 이메일을 입력해주세요! * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; min-width: 992px; } /* Navigation Bar */ .navbar { pos..
D-DAY 계산기 만난지 며칠 되었는지 계산해주는 웹사이트를 만들어보려고 합니다. 시작 날짜가 제대로 입력되지 않은 채로 버튼을 누를 경우, '시작 날짜를 입력해주세요!'라는 메시지를 알러트창으로 띄웁니다. 5월 13일에 만났고 현재 5월 13일이면 '만난지 1일째'입니다. 5월 13일에 만났고 현재 5월 14일이면 '만난지 2일째'입니다. 만난지 00일째 시작일 결과 보기 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navigation bar */ .navbar { height: 66px; background-color: white; text-align: center; lin..
정답일까? 주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!c라는 경고창이 나타나도록 코드를 작성해 주세요. (박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요) 단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요. 정답일까? 채점 body { text-align: center; padding: 30px 0; } #title { font-weight: 500; } #grade { width: 65px; height: 35px; color: #6500c3; font-size: 15px; border: solid 1px #6500c3; border-radius: 5px; background-..
JavaScript [인터랙티브 자바스크립트] 02. 브라우저와 자바스크립트 01. 브라우저도 객체다? 02. DOM 03. console.dir? 04. DOM 트리 05. DOM 트리 여행하기 06. DOM 트리 여행하기: 부록 07. DOM 트리 여행하기 퀴즈 08. 요소 노드 프로퍼티 09. inner/outerHTML, textContent 비교 10. 요소 노드 프로퍼티 퀴즈 11. 요소 노드 추가하기 12. 노드 삭제와 이동하기 13. 오늘 꼭 해야 할 일! 14. HTML 속성 다루기 15. HTML 속성 다루기 퀴즈 16. 스타일 다루기 17. 스타일 다루기 퀴즈 18. 비표준 속성 다루기 19. 종합정리 jQuery [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 01. ..
오늘 꼭 해야할 일! 본인이 작성한 태그 안에 li 태그로 오늘 할 일들을 추가하고 싶어합니다. li 태그이름을 가진 요소 노드를 만든 다음 그 요소 노드에 파라미터로 전달받은 오늘 할 일(text)을 담고 태그의 마지막 자식 요소 노드로 추가하는 addNewTodo함수를 완성해 주세요. 오늘 할 일 body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .main { width: 350px; margin: 40px; padding: 30px 0; background-color: #fcfcfc; box-shadow: -5px -5px 20px #FFFFFF, 5px 5px 20px #BABECC..
현명하게 거스름돈을 계산해 주는 프로그램을 만들려고 합니다. 예를 들어 33,000원짜리 물건을 사기 위해 100,000원을 냈다면, 이런 식으로 '가장 적은 수'의 지폐를 거슬러 주는 것입니다. 50,000원 1장 10,000원 1장 5,000원 1장 1,000원 2장 우리는 calculateChange라는 함수를 작성하려고 하는데요. 이 함수는 지불한 금액을 나타내는 payment와 물건의 가격을 나타내는 cost를 파라미터로 받습니다. function calculateChange(payment, cost) { let change = payment - cost; const fiftyCount = (change - (change % 50000)) / 50000; change = change - 5000..
팰린드롬 팰린드롬 여부를 확인하는 함수 isPalindrome을 작성하려고 하는데요. isPalindrome은 파라미터 word가 팰린드롬이면 true를 리턴하고 팰린드롬이 아니면 false를 리턴합니다. function isPalindrome(word) { for (let i = 0; i < Math.floor(word.length / 2); i++) { let left = word[i]; let right = word[word.length - 1 - i] if (left !== right) { return false } } return true } // 테스트 코드 console.log(isPalindrome("racecar")); console.log(isPalindrome("stars")); co..
아이디 비밀번호 검사 자바스크립트를 활용해서 '로그인 페이지'를 수정하려고 하는데요. 아이디 혹은 비밀번호 둘 중 하나라도 입력란이 비어있다면, 로그인 버튼이 '비활성화'되어서 버튼의 배경색이 #9B9B9B로 설정되어야 합니다. 사용자가 아이디와 비밀번호를 둘 다 입력하면, 로그인 버튼이 '활성화'되어서 버튼의 배경색이 #1BBC9B로 바뀌어야 합니다. 아이디와 비밀번호 모두 입력할 경우에만 로그인 버튼 활성화 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { width: 300px; backg..
JavaScript [인터랙티브 자바스크립트] 01. 인터랙티브 자바스크립트 시작하기 01. 웹 서비스와 Javascript 02. HTML/CSS + Javascript 맛보기 03. id로 태그 선택하기 04. id로 태그 선택하기 퀴즈 05. class로 태그 선택하기 06. 유사 배열(Array-like Object)이란..? 07. class로 태그 선택 퀴즈 08. 태그 이름으로 태그 선택하기 09. css 선택자로 태그 선택하기 10. css 선택자로 태그 선택하기 퀴즈 11. 이벤트와 버튼 클릭 12. 정답일까? 13. 종합 정리 jQuery [jQuery 시작하기] 02. 과제로 워밍업 01. Javascript의 기능들 02. Math 정리 노트 03. String 정리 노트 0..
문자 개수 세기 주어진 단어에 특정 알파벳이 몇 번 들어가는지 세어주는 프로그램을 작성해봅시다. 예를 들어 countCharacter('AbaCedEA', 'E') 함수는 'AbaCedEA' 에서 E가 몇 번 들어갔는지 세는 함수로 실행결과는 2입니다. 여기서 주의해야 할 점은 대소문자를 구분하지 않는 다는 점입니다. countA(word) 함수는 단어에 'A'가 몇 번 들어가는지 출력하는 함수입니다. 마찬가지로 대소문자를 구분하지 않습니다. // 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) { var count = 0; let big = word.toUpperCase(); for (let k = 0; k < ..
데이터 분석하기 배열 birthdayData에는 11개의 문자열이 있습니다. 각 문자열에는 생년월일 8자리와 이름이 나와 있고요. 이 중 미성년자만 골라서 출력해주는 함수를 써봅시다. 2017년 기준으로 98년생까지 성년, 99년생부터가 미성년자입니다. var birthdayData = [ '20010309전소미', '19960828김세정', '19991112최유정', '19960209김청하', '19990719김소혜', '19981216주결경', '19971201정채연', '19991204김도연', '19991204강미나', '19951218임나영', '19990803유연정' ]; function printMinors(arr) { console.log("미성년자 명단:"); arr = 1998; for..
안녕하세요. 시리(ENTP 코린이)입니다 :) 저는 코딩에 관심을 가진 지 6개월 각 잡고 시작한 지 2개월 된 코린이입니다. 관심을 가진지는 오래됐지만 현실에 치여 배울 엄두를 못내다가 우여곡절 끝에 퇴사를 하고 코딩을 시작하게 되었습니다. 현재는 국비 학원을 병행하고 있지만, 처음 코딩을 시작할 때는 막막했습니다. 여러 가지 경로로 알아보다가 SNS에서 코뮤니티의 카드 뉴스를 보고 처음 코뮤니티에 발을 들이게 되었습니다. 처음 코딩을 시작할 때 막막했던 점은 "나는 개발자 직무에서도 어느 직무로 가야할까? 어느 직무가 나의 적성에 맞을까?"였습니다. 하지만, 이 고민도 사실 쓸모없는 걱정이었던 것이 코딩의 ㅋ도 모르고 생각한 고민이었기 때문입니다. 1. 코뮤니티의 콘텐츠들을 보고 프론트엔드는 "어떤 ..
JavaScript [프로그래밍과 데이터 in JavaScript] 03. 자료형 심화 01. 다양한 숫자 표기법 02. 숫자형 메서드 03. 숫자형 더 익히기 04. Math 객체 05. 바보 자바스크립트 06. 이자 계산기 07. 문자열 심화 08. 문자열과 배열 사이 09. 그래, 우리 함께 10. 기본형과 참조형 11. 기본형과 참조형 익히기 12. 참조형 복사하기 13. 레시피 만들기 14. const, 변수와 상수 사이 15. const와 참조형 익히기 16. 변수, 그땐 그랬지 [프로그래밍과 데이터 in JavaScript] 04. 과제로 복습하기 01. 팩토리얼 02. 거스름돈 구하기 03. 팰린드롬 jQuery [jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 05..
이자 계산기 2년 뒤에 받게 될 금액으로 위안 삼으려고 적금 이자를 계산해주는 함수를 만들어보려고 합니다. 이자율(rate), 매월 납입 금액(payment), 납입 기간(term)을 파라미터로 전달하면, 만기 후 받게 될 이자를 출력하는 interestCalculator 함수를 완성해 보세요. n = 납입 개월 수 r = 이자율 v = 월 납입금 일 때, 이자 금액은 다음과 같은 식으로 계산할 수 있다고 합니다. interest = v * n * (n+1) / 2 * r / 12 function interestCalculator(rate, payment, term) { let interest = payment * term * (term + 1) / 2 * rate / 12 console.log(inte..
그래, 우리 함께 lyrics 문자열에 적절한 메소드를 활용해서 형돈의 부분만 떼어내고 hyungdon 변수에 재할당 해주세요. let lyrics = "[재석]너에게 나 하고 싶었던 말 고마워 미안해 함께 있어서 할 수 있어서 웃을 수 있어" + "[준하] 정말 고마웠어 내 손을 놓지 않아줘서 힘을 내볼게 함께 있다면 두렵지 않아" + "[홍철] 내가 늘 웃으니까 내가 우습나 봐 하지만 웃을 거야 날 보고 웃는 너 좋아" + "[명수] 자꾸만 도망치고 싶은데 저 화려한 큰 무대 위에 설 수 있을까? 자신 없어.." + "[하하] 지금까지 걸어온 이 길을 의심하지는 마 잘못 든 길이 때론 지도를 만들었잖아" + "[형돈] 혼자 걷는 이 길이 막막하겠지만 느리게 걷는 거야 천천히 도착해도 돼" + "[길]..
레시피 만들기 아메리카노는 에스프레소에 물을 더한 메뉴이고 카페라떼는 에스프레소에 우유를 더한 메뉴라고 배웠습니다. 카페 모카(mocha) 와 바닐라 라떼(vanillaLatte) 레시피도 만들어 주세요. 모카는 에스프레소에 우유와 초코 시럽을, 바닐라 라떼는 에스프레소에, 우유와 바닐라 시럽을 더한 메뉴입니다. // 아래 코드중 잘못된 부분을 수정해 주세요. let espresso = ['espresso']; let americano = espresso.slice(); americano.push('water'); let caffeLatte = espresso.slice(); caffeLatte.push('milk'); // 여기에 caffeMocha와 vanillaLatte 레시피를 만들어 주세요. l..
팩토리얼 파라미터로 양의 정수 n을 받고 n!을 계산해서 리턴해주는 함수 factorial을 작성해주세요. function factorial(n) { let result = 1; for(let i = 1; i
배열 인덱싱 연습하기 이 배열의 요소들을 모두 출력하는 프로그램을 작성해 보세요. let dataType = ['number', 'string', 'boolean', 'null', 'undefined', 'object']; let dataType = ['number', 'string', 'boolean', 'null', 'undefined', 'object']; for (let i = 0; i < dataType.length; i++) { console.log(dataType[i]); } 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를 참고하여 작성한 내용입니다.
온도 바꾸기 여기 이번 주 온도를 섭씨로 기록한 배열이 있습니다. let celsiusTemps = [27, 25, 26, 22, 28, 27, 21]; 각각의 섭씨온도들을 화씨로 변환해 봅시다. F: 화씨(fahrenheit), C: 섭씨(celsius) F = ( C * 9 / 5 ) + 32 반복문을 이용해서 celsius 배열의 각 요소들을 화씨로 변환한 값을 fahrenheit 배열에 추가해 주세요. let celsiusTemps = [27, 25, 26, 22, 28, 27, 21]; let fahrenheitTemps = [] for(i = 0; i < celsiusTemps.length; i ++) { fahrenheitTemps[i] = (celsiusTemps[i] * 9 / 5) + ..
splice 연습하기 splice 메소드를 활용하여 아래의 미션들을 수행하세요. fruits 배열에 '토마토'를 삭제하고 그 자리에 '사과', '청포도' 를 추가해 주세요. fruits 배열의 첫 번째 요소를 삭제해 주세요. ages 배열에 마지막 요소를 삭제해 주세요. ages 배열의 2번, 3번 인덱스를 26, 28로 변경해 주세요. numbers 배열에 1, 2, 3, 5, 8, 9를 순서대로 추가해 주세요. 반복문을 활용해서 numbers 배열의 요소들 중 홀수를 모두 삭제해 주세요. let fruits = ['레몬', '토마토', '딸기', '바나나']; let ages = [20, 24, 25, 29, 30, 33]; let numbers = []; fruits.splice(1, 1, '사과'..
안녕하세요 :) 코뮤니티 서포터즈 1기 시리(ENTP 코린이)입니다. 코뮤니티의 코딩 정보 카드 뉴스를 알고 계신가요? 저도 코뮤니티를 처음 접하게 된 것도 카드 뉴스를 보고 알게 되었습니다 c c 그럼 제가 만든 코딩 정보 카드 뉴스를 보러 가실까요?
투표 집계하기 자바스크립트 배열 votes에는 학생회 투표 결과가 저장되어 있습니다. 배열 votes의 정보를 토대로, 객체 voteCounter에 후보별 득표수를 정리하는 것이 목표입니다. 예를 들어서 votes가 ['장태환', '신성순', '신성순', '장태환', '장태환']라고 가정하면, voteCounter는 {'장태환': 3, '신성순': 2}가 되어야 하는 거죠. // 투표 결과 리스트 let votes = ['이재식', '이재식', '이규하', '이규하', '이규하', '이재식', '이재식', '이규하', '이규하', '이재식', '이규하', '이규하', '이규하', '이규하', '이재식', '이재식', '이규하', '이재식', '이재식', '이재식', '이재식', '이재식', '이규하', ..
팀 나누기 오늘은 풋살 동아리 경기가 있는 날입니다. 총인원 10명이서 5명씩 팀을 나누려고 하는데요. 실력이 비슷한 사람들끼리 가위바위보를 했고, 이긴사람이 0번 index, 진 사람이 1번 index 배열을 만들어 정리했습니다. 다음 groups 배열을 가지고, 이긴 사람끼리 그리고 진 사람끼리 팀을 나눠 teams 배열을 완성해 주세요. let groups = [ ['영준', '캡틴'], ['태순', '우재'], ['재훈', '지웅'], ['윤형', '동욱'], ['규식', '소원'] ] let teams = [ [], [] ]; // 여기에 코드를 작성해 주세요. for (let i = 0; i < groups.length; i++) { for (let k = 0; k < groups[i].len..
영어 단어장 I 영어공부도 하고 코딩공부도 할 겸 자바스크립트로 영어 단어장을 만들어 보려는 아이디어가 떠올랐습니다. 외워야 할 단어들 [function] = 함수 [variable] = 변수 [constant] = 상수 [local] = 지역의 [global] = 전반적인 let myVoca = { function: '함수', variable: '변수', constant: '상수', local: '지역의', global: '전반적인' } console.log(myVoca); console.log(myVoca.local); console.log(myVoca.constant); console.log(myVoca.function); 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를..
영어 단어장 II 외웠던 영어단어 5가지 중에서 function, constant, local은 이제 확실하게 다 외웠습니다. 오늘 외울 단어는 총 4가지입니다. [extend] = 확장하다 [export] = 내보내다 [import] = 불러오다 [default value] = 기본값 지난번에 작성한 코드를 참고해서 vocab 변수를 수정하지 않은 채로, 이미 다 외워버린 단어 3개는 삭제하고 오늘 외울 단어는 추가해 주세요. 마지막 줄에서 default value의 뜻을 콘솔에 출력해 주세요. let myVoca = { function: '함수', variable: '변수', constant: '상수', local: '지역의', global: '전반적인' } delete myVoca.function;..
영어 단어장 III 단어장 객체에 단어를 추가하고 삭제하고, 콘솔에 출력도 해주는 다양한 메소드를 만들어 사용해봅시다. 단어를 추가하는 addVoca메소드를 만들어 주세요. addVoca메소드는 영어단어와 뜻, 총 두 개의 문자열 값을 파라미터로 전달받아서 myVoca 객체에 새로운 프로퍼티를 추가하는 메소드 입니다. 단어를 삭제하는 deleteVoca메소드를 만들어 주세요. deleteVoca메소드는 영단어 문자열을 파라미터로 전달받아서 해당하는 단어를 삭제하는 메소드 입니다. 단어를 출력하는 printVoca메소드를 만들어 주세요. printVoca메소드는 영어단어 문자열을 파라미터로 전달받아서 특별한 포멧의 문자열을 콘솔에 출력하는 메소드 입니다. 특별한 포멧은 "[영어단어]"의 뜻은 "[뜻]"입니..
JavaScript [프로그래밍과 데이터 in JavaScript] 01. 객체 07. 객체와 메서드 08. 영어 단어장 3 09. for...in 반복문 10. for...in 주의사항 11. 순이들의 시험 결과 12. Date객체 13. Data객체 Tip 14. 우수사원 재상이 [프로그래밍과 데이터 in JavaScript] 02. 배열 01. 배열 02. 배열 인덱싱 연습하기 03. 배열 다루기 04. 온도 바꾸기 05. 배열 메소드 1 06. splice 연습하기 07. 배열 메소드 2 08. 배열 메소드 익히기 09. 배열 메소드 Tip 10. for...of 반복문 11. 투표 집계하기 12. 다차원 배열 13. 팀 나누기 GitHub Study c 코뮤니티 서포터즈 1기 활동 [..
순이들의 시험 결과 아래는 두 사람의 각 과목별 점수를 정리한 객체입니다. let hyesoonScore = { '데이터 모델링의 이해': 10, '데이터 모델과 성능': 8, 'SQL 기본': 22, 'SQL 활용': 18, 'SQL 최적화 기본 원리': 20 }; let minsoonScore = { '데이터 모델링의 이해': 14, '데이터 모델과 성능': 8, 'SQL 기본': 12, 'SQL 활용': 4, 'SQL 최적화 기본 원리': 16 }; 자격증 합격 기준은 총점이 60점 이상인데요. 파라미터로 객체를 전달받고, 각 과목들의 점수를 모두 합산해서 시험 결과를 알려주는 passChecker 함수를 완성해 주세요. 합격 기준을 충족할 경우 "축하합니다! 합격입니다!" 라는 문자열을 충족하지 ..
우수사원 재상이 그동안 고생한 지난날이 머릿속을 스쳐지나면서 자신이 입사한 지 얼마나 지났는지도 궁금해졌는데요. 오늘은 날짜는 2112년 8월 24일이고, 재상이의 입사일은 2109년 7월 1일입니다. Date객체와 메소드를 활용해서 재상이가 입사한 지 며칠째인지를 계산해주는 workDayCalc 함수를 완성해 주세요. (만약 8월 24일에 입사했고, 오늘이 8월 24일이면 0일이 아니라, '입사한 지 1일째'입니다.) let today = new Date(2112, 8, 24); let jaeSangStart = new Date(2109, 7, 1); function workDayCalc(startDate) { let calculate = (Number(today)/1000/60/60/24 - Numb..
for문 연습하기 for 반복문을 사용하여 1 이상 100 이하의 짝수를 모두 출력해 보세요. for (let i = 1; i
for문 더 연습하기 주어진 높이(height)에 맞게 *로 삼각형을 그려주는 함수 printTriangle을 완성해 봅시다. function printTriangle(height) { let message = ''; for (let i = 0; i < height; i++) { message += '*'; console.log(message); } } // 테스트 코드 console.log('높이: 1'); printTriangle(1); console.log('높이: 3'); printTriangle(3); console.log('높이: 5'); printTriangle(5); 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를 참고하여 작성한 내용입니다.
while문 연습하기 while 반복문을 사용하여 1 이상 100 이하의 홀수를 모두 출력해 보세요. let k = 0; while (k < 100) { if (k % 2 !== 0) { console.log(k); } k++; } 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를 참고하여 작성한 내용입니다.
while문 더 연습하기 정수 n의 약수는 n을 나누었을 때 나누어떨어지는 수입니다. 만약 정수 i가 정수 n의 약수라면, n을 i로 나누었을 때 나머지가 0이 나와야 하는 거죠. while문을 활용해서 정수 180의 약수를 모두 출력하고, 총 몇 개의 약수가 있는지 출력하는 프로그램을 작성해 보세요. const N = 180; let i = 0; let count = 0; while (i
구구단 만들기 반복문을 사용해서 구구단 프로그램을 만들어 봅시다. for문과 while문 중 어떤 반복문을 사용해도 상관없습니다. for (let i = 1; i < 10; i++) { for (let k = 1; k < 10; k++) { console.log(`${i} * ${k} = ${i*k}`) } } 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를 참고하여 작성한 내용입니다.
피보나치 수열 피보나치 수열(Fibonacci Sequence)이라고 들어 보셨나요? 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ... 우선 피보나치 수열의 1번 항과 2번 항은 각각 1입니다. 3번 항부터는 바로 앞 두 항의 합으로 계산됩니다. 예를 들어서 3번 항은 1번 항(1)과 2번 항(1)을 더한 2이며, 4번 항은 2번 항(1)과 3번 항(2)을 더한 3입니다. 반복문을 활용해서 피보나치 수열의 첫 50개 항을 차례대로 출력하는 프로그램을 작성해 보세요. for문과 while문 중 어떤 반복문을 사용해도 상관없습니다. let current = 1; let previous = 0; for (let i = 1; i
JavaScript [프로그래밍 핵심 개념 in JavaScript] 03. 제어문 01. if문 02. 롤러코스터, 탈 수 있을까? 03. else fi문 04. 학점 계산기 05. 서열 정리 GitHub Study c [프로그래머의 세계 이해하기] 01. 프로그래밍의 다양한 분야 05. 테스트 프로세스 06. 버전 관리 07. 프로그래머의 세계 퀴즈 2 08. 개발자의 필수 프로그램 IDE 09. 개발자들이 많이 쓰는 프로그램들 동탄에서 시흥 찍고 서울 찍고 의정부까지 오느라 시간이 너무 없었다. 어제처럼 틈틈이 한다고 했는데 이동시간이 너무 길어서 어제처럼 목표한 바를 다하지는 못했다cc 기차 빌런, 지하철 빌런 등 너무나 많은 사람들을 만나서 멘탈붕괴 c 그래도 이동 시간에 컴퓨터 개론 강..
롤러코스터, 탈 수 있을까? 이 롤러코스터는 140cm 이상만 탑승할 수 있다고 하는데요. 놀이기구를 타고 싶은 마음은 간절하지만 안전상의 문제로 위험한 상황이 발생할 수 있으니, 만약 기준을 통과하지 못한다면 아쉽지만 다음을 기약하는 것이 좋겠죠? 그럼, if문을 활용해서 키 140cm를 기준으로 탑승 가능 유무를 알려주는 checkHeight 함수를 작성해 주세요. 코드를 잘 작성하셨다면 아래와 같은 결과가 출력되어야 합니다. 탑승이 가능합니다. 탑승이 불가능합니다. 탑승이 가능합니다. function checkHeight(height) { if (height > 140) { console.log("탑승이 가능합니다.") } else{ console.log("탑승이 불가능합니다.") } }; // 테..
학점 계산기 이 수업에는 50점 만점의 중간고사와 50점 만점의 기말고사가 있는데요. 두 시험의 점수를 합해서 최종 성적을 내는 방식입니다. 규칙은 다음과 같습니다. A: 90점 이상 B: 80점 이상 90점 미만 C: 70점 이상 80점 미만 D: 60점 이상 70점 미만 F: 60점 미만 printGrade 함수는 파라미터로 중간고사 점수 midtermScore와 기말고사 점수 finalScore를 받고, 최종 성적을 출력합니다. D A F C function printGrade(midtermScore, finalScore){ let totalScore = midtermScore + finalScore; if (totalScore >= 90) { console.log("A"); } else if (t..
서열 정리 한국에서는: 나이가 같은 경우: '친구' 자신보다 나이가 어릴 경우: 2 - 1. 상대방 성별이 남성인 경우: '남동생', 2 - 2. 상대방 성별이 여성인 경우: '여동생' 자신보다 나이가 많을 경우: 3 - 1. 상대방 성별이 남성인 경우: '형', 3 - 2. 상대방 성별이 여성인 경우: '누나' 라고 말하는 게 너무 어렵다고 합니다. 이런 Peter를 위해서 미리 자신의 나이와 성별을 입력해두고, 상대방의 나이와 성별을 전달하면 호칭을 판별해주는 whatShouldICallYou함수를 만들어줍시다. 코드를 잘 작성했다면, 다음과 같은 결과가 출력되어야 합니다. 여동생 남동생 친구 형 누나 // 나의 나이와, 나의 성별을 저장하는 변수 let myAge = 26; let myGender ..
JavaScript [프로그래밍 핵심 개념 in JavaScript] 03. 제어문 06. switch문 07. switch문 vs if문 08. 등급별 티켓 가격 09. for문 10. for문 tip 11. for문 연습하기 12. for문 더 연습하기 13. while문 14. while문 연습하기 15. while문 더 연습하기 16. break와 continue 17. break와 continue 익히기 18. 구구단 만들기 19. 피보나치수열 [프로그래밍과 데이터 in JavaScript] 01. 객체01. 객체와 프로퍼티02. 객체와 프로퍼티 익히기03. 객체에서 데이터 접근하기04. 영어 단어장 105. 객체 다루기06. 영어 단어장 207. 객체와 메서드08. 영어 단어장 3 GitHu..
등급별 티켓 가격 switch문을 활용해서 각 등급이 선택되었을 때 등급에 따라 가격을 표시해주는 checkPrice 함수를 완성해 주세요. 코드가 잘 작성되었다면 다음과 같이 출력되어야 합니다. R석은 13만원 입니다. VIP석은 15만원 입니다. S석은 10만원 입니다. A석은 8만원 입니다. VIP, R, S, A 중에서 하나를 선택해 주세요. // 각 등급별 가격 let VIPPrice = 15; let RPrice = 13; let SPrice = 10; let APrice = 8; // 각 등급에 맞는 가격을 출력하는 함수 checkPrice를 완성하세요. function checkPrice(grade) { switch (grade) { case 'VIP': console.log(`${grad..
JavaScript [프로그래밍 핵심 개념 in JavaScript] 02. 추상화 01. 할당 연산자 02. 복합 할당 연산자 03. 함수의 실행 순서 04. 함수 부려먹기 1 05. 함수 부려먹기 2 06. return문 제대로 이해하기 07. return과 console.log의 차이 08. 함수 부려먹기 3 09. 옵셔널 파라미터 10. 세트메뉴 주문하기 11. 변수의 scope 12. scope 익히기 13. 상수 14. 상수 익히기 15. 함수 변수 복습하기 Academe HW01. 유스케이스 모델 HW02. 요구사항 정의서 GitHub Study c [프로그래머의 세계 이해하기] 01. 프로그래밍의 다양한 분야 01. 컴퓨터 사이언스의 기본기 02. 소프트웨어 공학 03. 프로세스..
함수 부려먹기 I 예시 코드 console.log('동수(이)가 대화에 참여했습니다.'); console.log('윤하(이)가 대화에 참여했습니다.'); console.log('재준(이)가 대화에 참여했습니다.'); console.log('동훈(이)가 대화에 참여했습니다.'); console.log('영희(이)가 대화에 참여했습니다.'); console.log('신욱(이)가 대화에 참여했습니다.'); 실행 결과 동수(이)가 대화에 참여했습니다. 윤하(이)가 대화에 참여했습니다. 재준(이)가 대화에 참여했습니다. 동훈(이)가 대화에 참여했습니다. 영희(이)가 대화에 참여했습니다. 신욱(이)가 대화에 참여했습니다. function logParticipant(name) { console.log(`${name}..
함수 부려먹기 II 예시코드 console.log('3 * 4 = ' + 3 * 4); console.log('3 * 2 = ' + 3 * 2); console.log('7 * 5 = ' + 7 * 5); console.log('8 * 9 = ' + 8 * 9); console.log('5 * 5 = ' + 5 * 5); console.log('9 * 9 = ' + 9 * 9); 실행결과 3 * 4 = 12 3 * 2 = 6 7 * 5 = 35 8 * 9 = 72 5 * 5 = 25 9 * 9 = 81 function expressMultiplication(num1, num2) { console.log(`${num1} * ${num2} = ` + num1 * num2); }; // 테스트 코드 expre..
함수 부려먹기 III 직사각형의 넓이를 계산해주는 calculateRectangleArea 함수를 만들어보세요. calculateRectangleArea 함수는 파라미터로 width와 height를 받고, 직사각형의 넓이를 리턴해 줍니다. 과제를 해결한 뒤 실행결과는 아래와 같아야 합니다. Area1: 12, Area2: 40, Area3: 14 function calculateRectangleArea(width, height){ return width * height; } // 테스트 코드 let area1 = calculateRectangleArea(3, 4); // 가로 3, 세로 4인 직사각형의 넓이 계산 let area2 = calculateRectangleArea(5, 8); // 가로 5, ..
세트메뉴 주문하기 코드웨잇의 세트메뉴는 샌드위치와 음료가 함께 제공되는데요. 주문 시 특별히 말씀해주시지 않으시면, 음료는 스프라이트가 기본으로 제공됩니다. 샌드위치 이름(sandwich)과 음료 이름(drink)을 입력받고, 다음과 같은 문구를 출력하는 함수(orderSetMenu)를 만들어 주세요. 주문하신 '샌드위치', '음료' 세트메뉴 나왔습니다! 과제를 해결한 뒤 실행결과는 아래와 같아야 합니다. 주문하신 코드웨잇 클럽, 스프라이트 세트메뉴 나왔습니다! 주문하신 터키베이컨 아보카도, 코카콜라 세트메뉴 나왔습니다! 주문하신 코드웨잇 멜트, 스프라이트 세트메뉴 나왔습니다! 주문하신 이탈리안 비엠티, 닥터페퍼 세트메뉴 나왔습니다! 주문하신 에그마요, 환타 오렌지 세트메뉴 나왔습니다! function ..
함수 변수 복습하기 항상 "삑!"소리만 나는 게 아니라 상황에 따라서 청소년의 경우에는 "삑삑!", 승차권이 제대로 찍히지 않을 땐 "삑삑삑!", 그리고 환승을 할 때는 "환승입니다." 라는 소리도 나는데요. 각 상황의 소리를 담은 변수 adultTag, teenagerTag, errorTag, transferTag 를 만들고, 이 변수들을 파라미터(tagCase)로 전달하면 각 상황에 맞게 태그 소리를 콘솔에 출력하는 tagNotification함수를 만들어 보세요. 코드가 잘 작성되었다면 실행 시 다음과 같이 출력되어야 합니다. 삑! 삑삑! 환승입니다. 삑삑삑! 삑! let adultTag = "삑!"; let teenagerTag = "삑삑!"; let errorTag = "삑삑삑!"; let tr..
JavaScript [프로그래밍 핵심 개념 in JavaScript] 01. 자료형 01. 숫자형 02. 숫자 연산 익히기 03. 문자열 기본 04. 문자열 활용 05. 문자열 연습 1 06. 문자열 연습 2 07. 불 대수 08. 불린형 09. 불링형 연습 10. 불린 익히기 11. typeof 연산자 12. typeof 연산자 익히기 13. 연산자 우선순위 14. 형 변환 1 15. 형 변환 익히기 1 16. 형 변환 2 17. 형 변환 익히기 2 18. 템플릿 문자열 19. 템플릿 문자열 연습하기 20. null과 undefined 21. null과 undefined 익히기 22. 자료형 응용하기 jQuery [jQuery 시작하기] 01. HTML, CSS와의 콜라보레이션 01. 환경 설정..
console.log()함수와, 문자열 개념을 이용해서 다음 두 문장을 출력하세요. 한국 영화 역사상 아카데미상을 받은 것은 '기생충'이 처음이다. 아리스토텔레스는 "인간은 사회적 동물이다."라고 말했다. 영화 '베테랑'에서 "어이가 없네~"라는 대사가 유명했다. console.log("한국 영화 역사상 아카데미상을 받은 것은 '기생충'이 처음이다."); console.log('아리스토텔레스는 "인간은 사회적 동물이다."라고 말했다.'); console.log(`영화 '베테랑'에서 "어이가 없네~"라는 대사가 유명했다.`); 본 내용은 Codeit의 '프로그래밍 기초 in JavaScript' 강의를 참고하여 작성한 내용입니다.
템플릿 문자열 연습하기 근무자 별로 근무 시간을 계산해서 총 급여를 계산하는 calcWage 함수를 만들어보려고 합니다. 파라미터로 근무자 이름(name), 근무 시간(time), 그리고 시급(wage)을 전달받고 총 급여를 계산하기 위해 total 변수에 시간과 시급을 곱한 값을 담는 것까진 작성했는데, 마지막으로 콘솔에 출력하는 부분이 남았습니다. 지난 시간에 배운 템플릿 문자열 개념을 이용해서 아래의 문장이 출력되게 작성해주세요. 김윤식님의 근무 시간은 총 208시간이며, 최종 급여는 2358720원 입니다. 성규재님의 근무 시간은 총 175시간이며, 최종 급여는 2128000원 입니다. 손태웅님의 근무 시간은 총 161시간이며, 최종 급여는 2104270원 입니다. 허우선님의 근무 시간은 총 22..
자료형 응용하기 숫자형을 담고 있는 변수들(material1, material3, material5)과 문자열을 담고 있는 변수들(material2, material4)이 있습니다. 변수들끼리 연산을 하여 result1에는 문자열 '34'를, result2에는 숫자형 34를 만들어 넣어주세요! 단, 절대 숫자값을 사용하지 마세요. result1과, result2는 반드시 material1~5 변수들의 연산식만 할당해야 합니다. 실행결과는 다음과 같아야 합니다. 34 string 34 number // 숫자형과 문자열 재료 let material1 = 3; let material2 = '3'; let material3 = 10; let material4 = '4'; let material5 = 4; // ..
코뮤니티 코린이들이 공감할 주제만 뽑아서 만든 4 X 4 빙고판입니다. 빙고 완성하신 분들은 완벽 코뮤니티인입니다! 만약, 완성을 못하셨더라도 앞으로 차근차근 코뮤니티에서 완성해봐요!
폰트 굵기 바꾸기 Home Seoul Tokyo Paris #logo { display: block; margin-left: auto; margin-right: auto; margin-top: 80px; } #menu { text-align: center; margin-top: 60px; margin-bottom: 60px; } #menu a { margin-left: 10px; margin-right: 10px; font-size: 16px; color: #58595b; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } #menu a:first-child { font-weight: bold; } #photo { display: bl..
커피를 만들 때 들어가는 재료들의 칼로리는 다음과 같습니다. 에스프레소 : 10 kCal 우유 : 170 kCal 초코시럽 : 50 kCal 휘핑크림 : 60 kCal 우리가 판매했던 메뉴들의 칼로리를 한번 계산해 보려고 하는 데요, 각 재료의 이름을 변수 이름으로 사용하여, 메뉴들의 칼로리를 저장해 주세요. 변수를 사용하는 테스트 코드는 이미 작성되어 있으니 별도로 편집하지 않으셔도 됩니다. 여러분은 변수를 선언하고 값을 입력해 주세요! 변수를 제대로 작성했다면 콘솔에는 아래와 같이 출력되어야 합니다. 10 180 230 290 let espresso = 10; let milk = 170; let chocolateSyrup = 50 let whippedCream = 60; // 메뉴별 칼로리 테스트 c..
애국가 가사를 들여다보면 반복되는 후렴구가 있죠? 이 후렴구를 한 줄에 한 소절씩 출력하는 printChorus 함수를 만들어 주세요. 함수를 제대로 작성했다면 콘솔에는 아래와 같이 출력되어야 합니다. 1절 동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 2절 남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 3절 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 4절 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세 무궁화 삼천리 화려 강산 대한 사람 대..
인터넷에 검색해보니 데이터 용량 단위는 1MB = 1024KB 1GB = 1024MB 1TB = 1024GB 라고 합니다. 이 정보를 참고해서 TB 단위를 입력하면 GB 단위를 출력해주는 teraToGiga 함수와 TB 단위를 입력하면 MB 단위를 출력해주는 teraToMega 함수 두 가지 함수를 작성해 주세요. 각 함수는 숫자 값을 파라미터로 받고 첫 번째 줄에서는 입력받은 용량을, 두 번째 줄에서는 변환한 용량을 출력해야 합니다. 함수를 잘 작성하셨다면 아래와 같이 출력되어야 합니다. 2TB는 2048GB 입니다. 2TB는 2097152MB 입니다. function teraToGiga(GB) { console.log(GB * 1024 + 'GB 입니다.'); }; function teraToMege..
저체중 : 18.5 미만 정상체중 : 18.5 이상 23 미만 과체중 : 23이상 25미만 경도비만 : 25이상 30미만 중도비만 : 30이상 35미만 고도비만 : 35이상 체질량지수를 구하는 공식은 다음과 같습니다. 단위: 체중 = kg, 신장 = cm 체질량지수 = 체중 / (신장 * 신장 / 10000) 위 공식을 참고해서 이름(name)과 체중(weight), 그리고 신장(tall)을 파라미터로 입력받고 체질량지수를 계산해주는 bmiCalculator함수를 작성해 주세요. 홀쭉이님의 체질량지수는 17입니다. 코린이님의 체질량지수는 20입니다. 통통이님의 체질량지수는 24입니다. function bmiCalculator(name, weight, tall) { console.log(name + '님의..
이자율 4%에 세금까지 내지 않아도 되는 정기예금 상품을 추천받아서 그동안 조금씩 모은 돈을 1년 동안 넣어두기로 하고 왔는데요. 즐거운 마음으로 집에 돌아와서 1년 뒤에 얼마를 받을 수 있을지를 계산하는 코드를 작성해보려고 합니다. 검색해보니 이자 금액을 계산하기 위한 식은 아래와 같은데요. 맡긴 금액(원) * 맡기는 기간(년) * 이자율(%) / 100 맡긴 금액(amount)과 맡기는 기간(term), 이자율(rate)을 입력받으면 이자 금액을 계산해서 결괏값을 전달해 주는 interestCalculator 함수를 작성해 주세요. 맡긴 금액은 3650000원 입니다. 이자는 146000원 입니다. 최종 받을 금액은 3796000원 입니다. function interestCalculator(myMon..
안녕하세요 :) 코뮤니티 서포터즈 1기 시리(ENTP 코린이)입니다. 코뮤니티를 알고계신가요? 아직도 모르시다면 잘 오셨습니다 독학으로 코딩을 시작했을 때 코뮤니티는 구세주였습니다. 제가 요즘 푹~ 빠져있는 코뮤니티 같이 알아볼까요?c
파라다이스 파크 놀이 공원 '파라다이스 파크'의 웹사이트를 만들어보려고 합니다. 여러분이 할 일은 사이트 좌측에 있는 네비게이션 바를 채워 넣는 것입니다. 'HOME', 'EVENT', 'TICKET', 'MEMBERSHIP', 'NOTICE'는 사이트 메뉴입니다. 각각 다른 태그 안에 있는 태그입니다. 태그는 모두 태그에 묶여 있습니다. 빨간 선은 margin, 초록 선은 padding, 파란 선은 '가운데 정렬'입니다. 페이스북 아이콘은 width를 22px로, 트위터 아이콘은 width를 25px로 지정해 주세요. HOME EVENT TICKET MEMBERSHIP NOTICE Welcome to Paradise Park! Learn More body { margin: 0; min-width: 76..
네비게이션 바 메뉴 네비게이션 바 로고 과제에 이어서 네비게이션 바에 메뉴를 넣어보세요. 세 메뉴는 각각 태그 안의 태그이고, 태그 안에 묶여 있습니다. float의 개념을 잘 활용해보세요! 수업 회원가입 로그인 코딩, 스펙이 아니라 필수입니다. 코드잇은 코딩을 통해 생각하는 법을 가르칩니다. 더 알아보기 body { margin: 0; } #navbar { padding: 0 20px; border-bottom: 1px solid #eee; overflow: hidden; background-color: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50); height: 60px; } #logo { float: left; line-height: 60px; } #logo..
SimpleShop 코드잇의 SimpleShop 쇼핑몰 페이지를 완성해보세요! 참고하세요: 네비게이션 바의 height 는 60px 입니다. 네비게이션 바의 메뉴들은 클릭하면 페이지 최상단으로 이동합니다. # 를 활용해주세요. hero_header.jpg 는 배경이미지로 들어가고, 배경이미지가 들어가는 영역은 450px 의 height를 가집니다. 각 상품들을 클릭하면 페이지 최상단으로로 이동합니다. 이미지의 테두리는 클릭 영역 표시를 위한 것이고, 직접 구현하지는 않아도 됩니다. 페이스북, 인스타그램, 트위터 아이콘의 height는 20px로 지정해 주세요. Contact Shop Cart Login Our New Products Sunglasses 49,000 Tassel Loafer 89,000 B..
Academe Theory01. Javascript Theory02. JQuery GitHub Study c Codeit; [웹 퍼블리싱 - HTML/CSS 핵심 개념] 07. 쇼핑몰 01. SimpleShop [웹 퍼블리싱 - 반응형 웹 퍼블리싱] 01. 반응형 웹 01. 반응형 웹 02. 반응형 그리드 03. 이노 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 02. 부트스트랩 01. 새로운 기술을 배우는 법 02. 부트스트랩 소개 03. 부트스트랩 그리드 04. 부트스트랩 반응형 그리드 05. 재능 공유 사이트 [프로그래밍 시작하기 in JavaScript] 01. 자바스크립트 첫걸음 01. 자바스크립트 프로그래밍? 02. 준비하기 03. Hello Codeit! 04. 프로그래밍 첫걸음 떼..
반응형 그리드 크게 세 가지로 나누어집니다. 왼쪽: 모바일 사이즈 (767px 이하) 가운데: 타블릿 사이즈 (768px 이상, 991px 이하) 오른쪽: 데스크탑 사이즈 (992px 이상) 반응형 그리드 결과물 body { margin: 0; } div { float: left; } #div1 { background-color: #FF0000; width: 100%; height: 60px; } #div2 { background-color: #FFA500; width: 100%; height: 350px; } #div3 { background-color: #FFFF00; width: 100%; height: 320px; } #div4 { background-color: #008000; width: 10..
이노 옷걸이처럼 걸어 놓을 수 있는 블루투스 스피커 '이노'를 홍보하는 사이트를 만들어보려고 합니다. 위에 있는 도면을 따라 반응형 웹사이트를 만들어주세요. 그리드는 반응형 그리드 과제에서 만든 것을 그대로 사용하면 됩니다! 초록색 선은 padding, 빨간색 선은 margin, 파란색 선은 가운데 정렬(가로 혹은 세로)을 뜻합니다. 모든 사진은 background-image를 통해 넣었습니다. In'o 글자의 font-size는 20px 글자색은 white입니다. In'o 글자가 속한 div 태그의 background-color 는 #353535입니다. 결과물 IN'O Portfolio Make Hardware Soft IN'O is a hanger-type bluetooth speaker that d..
우표 붙이기 Absolute 포지셔닝 개념을 이용해서 우표와 주소를 올바른 곳에 위치해주세요. siri Kim 1234 ENTP #101 .env-div { width: 500px; height: 232px; position: relative; } .address { font-family: cursive; position: absolute; left: 30px; bottom: 30px; } .stamp { position: absolute; right: 30px; top: 30px; } 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.
신문 광고 광고의 가로 길이는 180px 입니다. 빨간색으로 나와 있는 수치를 보고 margin도 꼭 넣어주세요! 4차 산업혁명의 시대, 소프트웨어 교육은 필수 코드잇 강영훈 대표 '소프트웨어 강국되려면 컴퓨터적 사고방식 필요해' "누구나 프로그래밍을 배워야한다. 사고하는 방법을 가르쳐주기 때문이다." 故 스티브잡스 애플 창업자가 했던 말이다. 소프트웨어는 4차 산업혁명의 흐름이다. 인공지능, IoT, 빅데이터, 3D프린팅, 가상 현실, 증강현실 등 모두 소프트웨어와 긴밀한 연관성을 갖고 있는 분야이다. 미래의 흐름에 발맞춰 정부는 2018년부터 초, 중, 고등학교에서 소프트웨어 교육을 전면 실시할 계획이다. 이에 앞서 지난해와 올해 미래부, 교육부에서 900개의 연구기관 및 선도학교를 정해 교육하고 있..
그리드 연습 위와 같은 그리드 레이아웃을 만들어주세요! body { margin: 0; } /* 전체 */ div { width: 100%; height: 800px; float: left; } /* 개별 */ #red { background-color: #FF0000; width: 100%; height: 200px; } #orange { background-color: #FFA500; width: 25%; height: 200px; } #yellow { background-color: #FFFF00; width: 50%; height: 200px; } #green { background-color: #008000; width: 25%; height: 200px; } #blue { background-..
코딩의 민족 그리드 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코가네 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 * { box-sizing: border-box; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; color: #58595B; margin-top: 75px; margin-bottom: 30px; } h2 { text-align: center; font-size: 3..
CSS 최적화 웹사이트를 열심히 만들다보니 어느덧 코드가 엄청 길어졌습니다. 옆에 앉아 있던 친구가 제 코드를 쓱 보더니 한 마디 하네요. “뭘 그렇게 복잡하게 해? 그거 열 줄이면 되는데~ ㅎㅎ” 아, 자존심 상합니다! 얼른 CSS 코드를 열 줄(빈 줄 제외)로 줄여보세요. 결과물이 동일하다면 HTML 코드를 조금 변형해도 됩니다. 결과물은 아래 사진과 같습니다. HTML CSS JAVASCRIPT PYTHON JAVA h2 { padding: 20px; font-size: 30px; } .box-one h2 { background: #FA987D; } .box-two h2 { background: #72CCA7; } 본 내용은 Codeit의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.
이미지 버튼 위 사진처럼 이미지 링크 세 개를 만들어보세요. 순서대로 각각 "https://facebook.com", "https://instagram.com", "https://github.com"으로 갑니다. 세 이미지는 브라우저에서 가운데 정렬이 되어 있습니다. Check me out on... body { margin: 50px 0; } h1 { font-family: 'Noto Sans KR', sans-serif; margin-bottom: 20px; text-align: center; } .link-container { text-align: center; } .link-container a:not(:last-child) { margin-right: 20px; } a { text-decorat..
내비게이션 바 로고 위 사진처럼 로고 링크와 .info를 세로로 가운데 정렬을 해주세요. 여러분을 돕기 위해 배경색도 입혀놓았고 소문자 'x'도 써놓았는데요. 완성이 되면 다 없애주시길 바랍니다! 코딩, 스펙이 아니라 필수입니다. 코드잇은 코딩을 통해 생각하는 법을 가르칩니다. 더 알아보기 body { margin: 0; font-family: 'Noto Sans KR', sans-serif; } #navbar { padding: 0 20px; border-bottom: 1px solid #eee; overflow: hidden; background-color: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50); height: 60px; } #logo { font-fa..
해변의 몽숭이 Relative 포지셔닝 개념을 이용해서 몽숭이를 해변가에 위치시켜주세요. 몽숭이를 원래 위치에서 위로 100px, 오른쪽으로 200px 이동시키면 됩니다! 코드는 css 폴더에 styles.css에 작성해주세요. img { display: block; margin: 0 auto; } .mongsoong { position: relative; bottom : 100px; left: 200px; } 본 내용은 코드잇의 '웹 퍼블리싱' 강의를 참고하여 작성한 내용입니다.
명언 두 따옴표는 폰트 크기는 96px(32px의 300%)입니다. 위 사진에서 빨간 줄은 margin입니다. 위 사진에서 초록 줄은 포지셔닝을 통한 이동입니다. “ 정상에 오르고 싶다는 생각만으로 정상에 오르는게 아니야, 올라야지 “ 조승우 .quote { font-size: 32px; line-height: 32px; text-align: center; margin-top: 75px; font-family: 'Do Hyeon', sans-serif; } .figure { margin-top: 50px; } .qmark { font-size: 96px; position: relative; } .open-qmark { margin-right: 15px; top: 20px } .close-qmark { m..
로그인 페이지 박스를 꾸미는 방법들을 총동원하여 위와 같은 디자인을 만들어보세요. 모든 태그는 기본적으로 설정되어 있는 속성들이 있다는 걸 기억해주세요. 예를 들어서 태그에는 기본적으로 테두리가 있기 때문에 테두리를 직접 없애줘야겠죠? .login-form의 배경색은 #EEEFF1, submit-btn의 배경색은 #1BBC9B, 의 폰트색은 #9B9B9B입니다. 초록 선은 padding을 뜻하고, 빨간 선은 margin을 뜻합니다. .login-form은 가운데로 정렬되어 있습니다. 모든 동근 모서리는 5px의 border-radius를 갖고 있습니다. 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; }..
썸머 뮤직 페스티벌 (SMF) 최고의 아티스트들로 구성된 초호화 라인업! '썸머 뮤직 페스티벌(SMF)'을 위한 웹사이트를 만들어보려고 합니다. 위 사진과 같이 images/hero_image.jpg 파일로 .hero-header의 배경 이미지를 설정해주고, .learn-more 버튼을 스타일링 해주세요. 배경 이미지는 원본의 비율을 유지하면서 태그를 모두 채워야 합니다. 만약 배경 이미지가 잘려야 하는 상황이 오면 왼쪽, 오른쪽이 똑같이 잘려야 하고 위, 아래가 똑같이 잘려야 합니다. 정답 코드는 css 폴더의 styles.css에 작성해주세요. SMF 10th Summer Music Festival 20 - 21 August, 2017 Learn More body { margin: 0; font-fa..
GitHub Study c Codeit; [웹 퍼블리싱 - HTML/CSS 핵심 개념] 01. Box Model 18. 배경 이미지 19. 배경 이미지 정리 노트 20. 썸머 뮤직 페스티벌 (SMF)
Academe Theory01. JQueryGitHub Study cCodeit;[웹 퍼블리싱 - HTML/CSS 핵심 개념] 01. Box Model21. 코딩의 민족 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 02. CSS 제대로 활용하기01. 선택자 정리02. 마우스 오버 버튼03. CSS 상속04. CSS 우선순위05. CSS 최적화06. CSS의 다양한 단위들 [웹 퍼블리싱 - HTML/CSS 핵심 개념] 03. Display01. display02. display 정리03. Inline-block04. Inline-block 정리05. 태그의 비밀06. 다양한 링크07. 이미지 버튼08. Baseline09. vertical-align pt. 110. vertical-align pt...
코딩의 민족 위 이미지의 지시사항을 따라, '코딩의 민족' 웹사이트를 완성해주세요. 참고로 '바로 결제' 버튼은 href="#"로 설정되어 있는 태그로 써주세요! 코딩의 민족 넌 코딩할때가 제일 이뻐 코딩에 빠진 닭 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코코 스시 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코데리아 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 코가 주머니가 가벼운 당신의 마음까지 생각한 착한 가격! 바로 결제 * { box-sizing: border-box; } body { background-color: #f0e8d9; } h1 { text-align: center; font-size: 64px; color: #58595B;..
마우스 오버 버튼 로그인 페이지 과제의 버튼에 작은 효과를 하나 주려고 합니다. 마우스를 '로그인' 버튼 위에 올릴 경우 로그인 버튼에 box-shadow 속성을 설정해주세요. 속성값은 위 사진에 나와 있듯이 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);입니다. 코드는 css/style.css에 작성해주세요. 마우스오버 작동 영상 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { padding: 20px; background-color: #EEEFF1; widt..
듀엣 가요제 혼성 듀엣곡의 가사를 보여주는 페이지를 만들어보려고 합니다. 가사의 각 부분은 태그로 나뉘어 있는데요. 클래스를 이용해서 각 부분을 다른 색으로 칠해주세요. 남자가 부르는 부분은 파란색(blue) 여자가 부르는 부분은 핑크색(hotpink) 남녀가 같이 부르는 부분은 연두색(lime)으로 바꿔주세요. 사랑보다 깊은 상처 임재범, 박정현 오랫동안 기다려왔어 내가 원한 너였기에 슬픔을 감추며 널 보내줬었지 날 속여가면서 잡고 싶었는지 몰라 너의 눈물 속에 내 모습 아직까지 남아있어 추억을 버리긴 너무나 아쉬워 난 너를 기억해 이젠 말할게 그 오랜 기다림 너 떠나고 너의 미소 볼 수 없지만 항상 기억할게 너의 그 모든걸 사랑보다 깊은 상처만 준 난 이젠 깨달았어 후회하고 있다는 걸 이젠 모두 떠나..
노래 브리지 노래에서 브리지는 한 번만 나오기 때문에, 이번에는 클래스 대신 아이디('id')를 이용해서 노래의 브리지 부분만 연두색(lime)으로 써주세요. 이 노래에서는 "허약한 내 영혼에 힘을~" 부분이 브리지입니다. 노래에서 유일하게 조금 다른 부분이죠? 하늘을 달리다 이적 두근거렸지 누군가 나의 뒤를 좇고 있었고 검은 절벽 끝 더이상 발 디딜곳 하나 없었지 자꾸 목이 메어 간절히 네 이름을 되뇌었을 때 귓가에 울리는 그대의 뜨거운 목소리 그게 나의 구원이었어 마른 하늘을 달려 나 그대에게 안길 수만 있으면 내 몸 부서진대도 좋아 설혹 너무 태양 가까이 날아 두 다리 모두 녹아내린다고 해도 내 맘 그대 마음 속으로 영원토록 달려갈거야 내가 미웠지 난 결국 이것밖에 안 돼 보였고 오랜 꿈들이 공허한..