일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- OpenAPI
- 3주차
- 2주차
- 숙제
- Transaction
- cors
- node winston
- HTTPS
- 웹 스크래핑(크롤링)
- 위키백과
- post
- nginx
- 항해99
- 노드 윈스턴
- 개발일지
- 5주차
- Node.js
- JWT
- NoSQL
- db
- Get
- SQL
- 트랜잭션
- 부트스트랩
- MongoDB
- 스파르타코딩클럽
- 1주차
- 비동기
- Sequelize
- 4주차
- Today
- Total
목록
728x90
1주차 (9)
얼음꽃의 일지
1. 프로젝트명 타임뮤직 (탐뮤) 2. 소개 그 시절 우리가 좋아했던 음악 음악은 언제나 우리와 함께였지..☆ 지구 뿅뿅 음악실 그 시절 우리가 좋아했던 노래 3. 와이어프레임 3 - 1) 메인페이지 3 - 2) 로그인 3 - 3) 회원가입 3 - 4) 댓글 4. DB Schema 5. API (개발해야 하는 기능들) 기능 Method URL Request Response 로그인 POST /api/login { 'id' : username_give, 'pw' : password_give } 로그인 성공 {'result' : 'success', 'token' : 'token'} 로그인 실패 {'result' : 'fail', 'msg' : '아이디/비밀번호가 일치하지 않습니다'} 회원가입 POST /api..
배운 내용을 가지고 만든 부분이기 때문에 따로 설명 없이 올려놓겠습니다. 벤(Ban) 팬명록 닉네임 응원댓글 응원 남기기 새로운 앨범 너무 멋져요! 세균맨 새로운 앨범 너무 멋져요! 호빵맨 새로운 앨범 너무 멋져요! 식빵맨 결과입니다.
기록하기 버튼과 기록하는 창이 무엇인지 모르겠다, 이 글이 처음이다 하시는 분은 https://iceflower.tistory.com/6 부트 스트랩을 추가 이용해보자! 이전 웹페이지에 부트 스트랩을 추가하여 영화가 들어갈수 있는 세션을 만들려고합니다. https://iceflower.tistory.com/5 폰트, 부트스트랩을 이용한 웹페이지 이번에는 폰트와 부트스트랩을 이용한 웹 iceflower.tistory.com 밑에 글 읽고 오시면 이해하시는데 도움이 됩니다. 연결하기 위해서는 먼저 JavaScript 관련해서 알아야 하는데요. 제 첫번째 글에서 간단히 말씀드렸지만 JavaScript는 움직이는 부분을 묘사하기 위해 사용하는 코드입니다. 즉, 어떤 캐릭터를 움직이거나, 뛰게하거나 할때 Java..
이전 웹페이지에 부트 스트랩을 추가하여 영화가 들어갈수 있는 세션을 만들려고합니다. https://iceflower.tistory.com/5 폰트, 부트스트랩을 이용한 웹페이지 이번에는 폰트와 부트스트랩을 이용한 웹페이지 형태를 보여드리겠습니다. 코드를 보기에 앞서 폰트와 부트 스트랩 사이트 부터 알려드릴려고 합니다. 폰트 : https://fonts.google.com/?subset=korean 부 iceflower.tistory.com 이전 내용이 궁금하시면 위의 링크를 통해 확인해주시면 되겠습니다. 제목에 맞게 이제 영화를 집어넣으려고 하는데요. 영화를 집어넣기 위해서는 그에 맞는 틀이 필요합니다. 사용된 틀의 사이트는 밑에 추가해두었습니다. 부트스트랩 : https://getbootstrap.co..
이번에는 폰트와 부트스트랩을 이용한 웹페이지 형태를 보여드리겠습니다. 코드를 보기에 앞서 폰트와 부트 스트랩 사이트 부터 알려드릴려고 합니다. 폰트 : https://fonts.google.com/?subset=korean 부트스트랩 : https://getbootstrap.com/docs/5.2/getting-started/introduction/ Get started with Bootstrap Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. getbootstrap.com 폰트는 사이트에 들어가서 사용하고자 하는 폰트를 가져올 수 있습니다. 예를 들..
이전에 만들었던 로그인 페이지에 변화를 주려고 합니다. https://iceflower.tistory.com/3 간단한 로그인 페이지 만들기 그림과 같이 간단한 로그인 페이지를 만드는걸 첫 스타트로 배웠습니다. 딱 형태로 봤을때는 1. 로그인 페이지라는 제목 2. ID, PW가 들어갈수 있는 입력 창 3. 입력창에 입력이 끝나고나서 누를수 iceflower.tistory.com 아직 못보신 분들이 계시다면 위의 글 한번 읽어보시면 되겠습니다. 이전에 만들었던 웹페이지 형태를 다시 가져오면 이런 모양이었습니다. 이제 여기에 변화를 주려고 하는데요. 이런 형식으로 주려고 합니다. 차근차근 하나씩 설명을 부과하면서 말씀드리자면 코드를 설명하기에 앞서 가 무엇인지 알려드리겠습니다. 이전에 라는 것을 보셨을텐데요..
그림과 같이 간단한 로그인 페이지를 만드는걸 첫 스타트로 배웠습니다. 딱 형태로 봤을때는 1. 로그인 페이지라는 제목 2. ID, PW가 들어갈수 있는 입력 창 3. 입력창에 입력이 끝나고나서 누를수 있는 로그인 버튼 이렇게 3가지로 나눠서 볼 수 있을 거 같습니다. 다음 코드를 보시게 되면 로그인페이지 이 부분은 저희가 웹페이지를 켰을때 제목 상태창에 나타나는 부분입니다. 예를 들어 네이버를 켜시게 되면 탭 창에 이런 형태를 많이 보실수 있습니다. 이게 title에 해당하는 부분이기도 합니다. 이 타이틀은 웹페이지를 봤을때 맨 위 즉, 머리 부분이기 때문에 부분에 들어가신 것을 보실수 있습니다. 참고로 html 파일에서 이런 형태를 자주 보시게 될텐데 이 부분은 열어주는 부분, 이 부분은 닫아주는 부분..
코드의 형태를 보면 크게 3 묶음으로 나눌수 있습니다. 1. html 2. head 3. body 1. html 은 안에 내용물을 묶어주는 큰 틀이라고 생각하면 편합니다. 2. head 안에는 필요한 링크들을 연결하고, 제목, 함수(function), CSS들이 들어가는 자리입니다. 3. body 는 우리가 웹페이지를 볼때 보여주는 부분입니다. 위의 코드를 실행시키면 다음과 같은 모습이 나옵니다. 지금은 위의 코드가 이러한 방식으로 나타나는 구나 정도만 알아 두시면 좋을거 같습니다. 나중에 배우면서 그때그때 추가하는 형식으로 진행하겠습니다.