반응형

분류 전체보기 368

[jQuery 활용하기] 03. jQuery 2

음악 스트리밍 사이트 I 스크롤을 하면서 플레이리스트가 스르륵 나타나는 효과를 만들어봅시다. 우선 'playlist' 클래스에 적용된 스타일을 살펴봅시다. .playlist { opacity: 0; } 'playlist'는 처음에 opacity가 0이기 때문에 보이지 않는데요. 'playlist'가 브라우저에 반 이상 걸치면 opacity가 서서히 1로 바뀌어야 합니다. 그 과정에서 반복을 해야 하는 일이 있으면, each 대신 for문을 사용해주세요. each는 다음 과제에서 사용할 것입니다. 인기차트 추천음악 뮤직비디오 회원가입 로그인 인기 검색어 아이유 (IU) 방탄소년단 (BTS) 레드벨벳 아이콘 (iKON) 멜로망스 다비치 윤딴딴 수지 김동률 폴킴 수면 꿀잠 자게 해줄 잔잔한 음악 플레이리스트 ..

Front-end/jQuery 2021.02.23

[TIL] 2021.02.23

jQuery 🌀 [jQuery 활용하기] 03. jQuery 207. 제이쿼리 애니메이션08. 음악 스트리밍 사이트 109. 음악 스트리밍 사이트 210. 음악 스트리밍 사이트 3 HTTP🔗[모든 개발자를 위한 HTTP 웹 기본 지식] 02. URI와 웹 브라우저 요청 흐름01. URI02. 웹 브라우저 요청 흐름 Mini Project 🖥️Theory01. API 연동하기Theory02. 대략적인 CSS/디자인 구현하기 GitHub 🐸 오늘도 역시나 Mini Project🖥를 하느라 시간을 많이 보냈다. 내가 맡았던 부분은 CRUD가 가능한 리뷰 게시판과 데이터베이스 그리고 디자인도 완성했다. (내가 담당한 기능은 아니지만 회원가입/로그인 기능과 데이터베이스도 연습해봤다.) 마지막으로 같이 하기로 한 ..

CodeSiri/TIL 2021.02.22

[서포터즈 1기] 알고리즘 문제 풀기

안녕하세요. 시리(ENTP 코린이)입니다 :) 오늘은 인터넷 강의도 아니고 책도 아니고 코뮤니티에서 알고리즘 문제를 풀어보았습니다. 어디서 어떻게 풀었는지 궁금하시죠? 👇🏻👇🏻👇🏻 첫번째, 살펴볼 곳은 "함께 만드는 코딩 문제" 게시판입니다. 코뮤니티 서포터즈가 알고리즘 문제를 직접 만들어서 올리고 있는 게시판입니다. 문제의 난이도가 다양해서 코린이부터 코른이까지 모두 참여하실 수 있으니 문제를 풀고 서로 풀이를 나누며 성장해요! 두번째, 코뮤니티 운영진이 직접 업데이트 하는 "알고리즘 문제풀기" 게시판입니다. 항상 열과 성을 다하여 코린이들에게 희망을 주는 운영진분들이 운영하다보니 퀄리티 좋은 문제들이 많습니다. 모두 한 번씩 댓글로 참여해보세요!

[jQuery 활용하기] 03. jQuery 2

홀짝 each 반복문을 사용해서 '짝수', '홀수' 버튼을 완성해주세요. 참고로, .card라는 클래스를 가지고 있는 태그를 파란색으로 바꿔주려면 .selected라는 클래스를 추가해주면 됩니다. css/styles.css 파일에 정의된 코드를 참고하세요. /* 선택된 카드 */ .card.selected { background: #3E50B4; /* 파란색 */ color: white; } 짝수와 홀수 선택하기 13 3 14 7 22 38 17 15 11 10 22 31 32 41 10 85 17 82 70 5 53 7 4 29 짝수 홀수 * { box-sizing: border-box; } body { margin: 0; min-width: 960px; background: #eee; font-fam..

Front-end/jQuery 2021.02.22

[Mini Project 🚴🏻‍♀️] 12. 게시글 수정 및 삭제 기능 구현 & 회고

게시글을 수정하고 삭제할 수 있는 함수를 DdaDAO.java에 생성합니다. 또한, 수정 및 삭제 Action.jsp를 생성한다. DdaDAO.java public int update(int ddaID, String ddaTitle,String ddaContent ) { String SQL="update Dda set ddaTitle = ?, ddaContent = ? where ddaID = ?"; try { PreparedStatement pstmt=conn.prepareStatement(SQL); pstmt.setString(1, ddaTitle); pstmt.setString(2, ddaContent); pstmt.setInt(3, ddaID); return pstmt.executeUpdate()..

CodeSiri/Project 2021.02.22

[Mini Project 🚴🏻‍♀️] 11. 게시글 보기 기능 구현

게시판 목록에서 "제목"을 클릭했을 때 글의 내용을 확인할 수 있는 페이지를 구현한다. 따라서, DdaDAO에 글을 불러오는 함수를 추가한다. DdaDAO.java public Dda getDda(int ddaID) { String SQL="SELECT * from DDA where ddaID = ?"; try { PreparedStatement pstmt=conn.prepareStatement(SQL); pstmt.setInt(1, ddaID); rs=pstmt.executeQuery(); if(rs.next()) { Dda dda = new Dda(); dda.setDdaID(rs.getInt(1)); dda.setDdaTitle(rs.getString(2)); dda.setUserID(rs.getS..

CodeSiri/Project 2021.02.22

[Mini Project 🚴🏻‍♀️] 10. 게시판 글 목록 기능 구현

게시판에서 글 목록을 보여주려면 DdaDAO.java에 소스를 추가해야한다. 또한, 목록을 확인하기위한 디자인도 필요하므로 dda.jsp에 추가한다. DdaDAO.java public ArrayList getList(int pageNumber){ String SQL="SELECT * from DDA where ddaID < ? AND ddaAvailable = 1 order by ddaID desc limit 10";//마지막 게시물 반환, 삭제가 되지 않은 글만 가져온다. ArrayList list = new ArrayList(); try { PreparedStatement pstmt=conn.prepareStatement(SQL); pstmt.setInt(1, getNext()-(pageNumber-..

CodeSiri/Project 2021.02.22

[Mini Project 🚴🏻‍♀️] 09. 글쓰기 기능 구현

1. 게시글을 작성하는 form 및 화면 구현 write.jsp JSP 게시판 웹 사이트 메인 게시판 접속하기 로그인 회원가입 회원관리 로그아웃 게시판 글쓰기 양식 2. 게시글을 업데이트할 수 있도록 기능을 구현해야한다. DdaDAO.java package dda; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; public class DdaDAO { private Connection conn; private ResultSet rs; public DdaDAO() { try { String dbURL = "jdbc:mysql://localh..

CodeSiri/Project 2021.02.22

[Mini Project 🚴🏻‍♀️] 08. 게시판 데이터베이스 구축하기

1. mysql에서 'DDA' table을 생성한다. Field의 세부사항은 아래와 같다. CREATE TABLE DDA( ddaID INT, //게시글 번호 부여 ddaTItle VARCHAR(50), //게시글 제목 userID VARCHAR(20), //작성자 ddaDate DATETIME, //작성 날짜 ddaContent VARCHAR(2048), //게시글 ddaAvailable INT, //글이 삭제 되었는가? 1:삭제 되지 않은 글 0:삭제된 글 PRIMARY KEY (bbsID), //게시글 번호로 구분 ); 2. Dda 자바빈즈를 생성한다. package dda; public class Dda { private int ddaID; private String ddaTitle; privat..

CodeSiri/Project 2021.02.22
반응형
LIST