프로젝트14 [# 0 Prologue ] 박람회 플랫폼 개발 계획 2021년도 여름방학 기간동안 전반적인 HTML, CSS, JS 그리고 github에 대해 공부할 수 있었다. 공부한 내용을 직접 적용하고 더불어 팀 협업 프로젝트에 도전해보고자 박람회 플랫폼을 제작하기로 했다. # 제작 배경 - 코엑스를 방구석에서 즐길 수 있다면 어떨까? - 코로나 상황 속에서도 비대면으로 전시회를 즐기면 어떨까? - 방학동안 열심히 제작한 우리들의 프로젝트를 웹에 동적 효과를 넣어 재미있게 기록 하려면? - 다른 사람들도 우리가 만든 서비스를 이용해 무궁무진한 전시회를 열어보면 좋겠다! # 제작 목적 - 1학년 여름 방학기간 동안 배운 HTML, CSS, JS로 박람회 플랫폼 제작하기 - 협업 툴로 깃헙을 사용해 PR, Fork 등 사용법 마스터하기 - 동아리 활동이었던 python.. 2021. 11. 7. [파이썬_크롤링] 증권뉴스 모아따 웹 제작 이번 여름방학 중 파이썬 크롤링을 이용한 증권뉴스 모아따 웹을 제작해 보았다. flask와 beautiful soup을 사용해 실시간으로 업데이트 되는 증권뉴스를 모은 웹을 제작했다. 뉴스 기사는 네이버의 증권뉴스와 구글의 증권뉴스의 html파일에서 기사의 제목과 url을 BS4로 크롤링하여 웹에 담았다. 추가적으로 import datetime을 모듈을 사용해 뉴스가 업데이트 된 시간과, 현재의 총 기사 개수를 보여지게끔 했다. 전체적인 디자인은 이런식!! 깔끔한 글씨체와 베이지색 바탕이 뽀인트!! https://stocktimes.emilyjiminroh.repl.co/ Stock Times Main News Naver : 8 Google : 100 results found [오전시황] 코스피, 美 증.. 2021. 10. 22. [HTML/CSS] 개톡 프로젝트 2일차(개발 과정, 시작-종료까지) 이틀 간 마무리 지어야 했던 개톡 프로젝트... 하루 만에 개발을 끝내야 한다. 최대한 conflict이 발생하지 않도록 최대한 겹치지 않는 파트부터 순차적으로 개발에 들어갔다. 내가 맡은 일 ) - chats.html - chat_지원누나.html - chat_멍멍이.html - chat_고약이.html - chat_백설기.html - chats.css - find.html - find.css - account_(profile).html ( x 10 ) chat 구현하기 ) 채팅창은 친구들과 톡한 내용이 column으로 쫘르륵 보이도록 했다. 큰 박스로 나누자면 status_bar + chat_element + chat_contents + nav_bar 이렇게 세 항목으로 나눴고, 특히 chatting.. 2021. 8. 21. [HTML/CSS] 개톡 프로젝트 1일차(figma - 계획 및 구상, 파트 분배) 개톡은 지금까지 웹 스터디에서 배운 HTML과 CSS를 활용해, 톡 서비스를 구현을 목적으로 한 프로젝트이다. 무엇보다 인생에서 처음으로 github를 활용했던 첫 협업 프로젝트여서 너무 설렜다. 이 설레는 마음의 초심을, 프로젝트가 끝날 때까지 지니는 것을 목표로, 본격적인 1일차! 계획 및 구상을 진행했다. 계획 및 구상) - 사용 툴 프로젝트에 있어서 가장 중요하고 튼튼해야하는 부분이다. 협업에서는 더더욱 서로가 추구하고자 하는 결과물의 방향성을 정해 나가고, 조정해야 하기 때문에 가장 신경써야 하는 부분이다. 다른 것 보다도, 우리 팀은 협업을 중요시했기 때문에, 모두가 동시에 의견을 제시하고 계획을 적어나갈 수 있는 공유 화이트보드 서타일의 figma 사이트를 사용해 진행했다. https://w.. 2021. 8. 7. [HTML&CSS] 웹 프로젝트 12일차! (friends.html & .css ) 지난 시간에 이어 이번엔 friends.html을 만들어 보았다. 그리고 세분화한 css파일을 적용해 아래와 같은 화면처럼 보이게 했다. 이번에도 역시 HTML을 작성하기 전 어떻게 박스를 입힐지에 대한 구상부터 했다. friends.html ) 확실히 지난 index.html보다는 더 복잡해 졌다... ㅎㅎ 쨋든!! 이번에도 font awesome의 icon을 이용해서 아이콘들을 넣어주었고, text는 span태그를 사용했다. 천천히 큰 div부터 차례차례 잡아가다보면 어느새 완성!! friends.html 코드) status-bar의 class를 저번 index와 똑같이 해서 css가 적용된 상태이고, 추가적으로 user-component부분이랑 nav-bar 부분 그리고 no-mobile 부분 세 .. 2021. 7. 21. [CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20. 이전 1 2 3 다음
