블로그

코드캠프

입문자도 가넝한 8주만에 개발자 되는 법

안녕하세요! 실무 코딩부트캠프, 코드캠프입니다 :)날씨가 조금씩 따뜻해지면서 식곤증이 부쩍 늘어나고 있지 않나요?(전지적 컴퓨터 시점)그래서 코드캠프가 눈이 번쩍! 뜨이는(👀) 강의 업데이트 소식을 준비해왔어요!특히 비전공이지만 개발 커리어에 관심이 있는 분들이라면, 주목해주셔도 좋아요 :)코딩을 몰라도(NEW!) 2개월만에 개발자가 되는 '관리형' 코딩 부트캠프인프런에 입성한지 얼마 되지 않았지만 뜨거운 관심과 애정 어린 피드백을 받으며, 더 나은 컨텐츠를 제공하기 위해 코드캠프도 열심히 성장 중인데요. (정말 감사합니다)그 중 사전 기초 지식 없이는 부트캠프 합류가 어려워 신청을 망설였던 분들을 많이 보았어요.그래서 상담 후 등록을 완료해주신 모든 분들께,[시작은 프리캠프], [강력한 CSS], [훈훈한 Javascript] 기초 강의를 무료로 제공합니다!사전 지식을 필요로 하시는 분들은 웹 개발의 기초를 습득하시고사전 지식이 이미 있으신 분들은 기초 내용을 복습하면서 튼튼하게 다져보세요 :)⚠️ 단, 기초 강의 수강 기간은 부트캠프 기간(8주)에 포함되지 않으므로 등록하신 기수의 개강 일정에 맞춰 수강해 주셔야 합니다!(MBTI가 P인 분들)개강 전 기초 강의 수강 계획을 짜기 힘드신 분들은 언제든 코드캠프에 문의해주세요!개강일에 맞춰 수강할 수 있도록 체계적인 시간표를 제공해드리겠습니다 😊👉 2기 일정 : 03.06 - 04.28 (선착순 모집) ▶ 20% 할인 중!👉 3기 일정 : 04.03 - 05.29 (선착순 모집) ▶ 20% 할인 중!

웹 개발･웹개발･프론트엔드･백엔드･부트캠프･비전공자･Javascript･Node.js･React･Next.js･Nest.js

코드캠프

Github Copilot, 진짜 개발자 대체가 가능할까?

요즘 Github Copilot에 관해 여러가지 의견들이 충돌하며 의견이 분분하다는 것을 본 코캠.어떤분들은 '미래에 개발자는 Copilot이 대체할 거다' 라는 의견이 있는가 하는 반면, '치와와랑 머핀도 구분 못하는 AI가 어떻게 대체하냐,아직 미흡하다.' 라는 의견도 있었습니다.이런 토론은 개발자로서 굉장히 참을 수 없는 의견대립이죠.그래서 코캠측에서도 슬그머니 의견을 끼워 넣어보기 위해 Github Copilot에 대해 알아보았습니다. 🛠 Github Copoilot?깃허브 코파일럿은 내가 원하는 기능을 주석으로 묘사하면, 묘사에 맞는 기능을 자동으로 완성시켜주는 자동 코딩 시스템입니다.Copilot 빠르게 시작하기1️⃣ 작동방식1. 내가 원하는 기능을 주석으로 묘사합니다.2. 코파일럿 AI가 딥러닝 한 내용을 바탕으로 '대부분 이렇게 쓰던데?' 하는 코드들을 완성합니다. 2️⃣ Github Copoilot의 장단점[ 장점 ]웬만큼 연차가 쌓인 개발자가 아니고서야 라이브 코딩을 하는 개발자는 생각 보다 많이 없습니다.주니어 개발자의 대부분은 다른 사람들이 쓴 코드를 참고하고 긁어와 사용하는 경우가 더 많죠.이런 부분에 있어서는 코파일럿이 도움이 될 수 있습니다.[ 단점 ]코파일럿의 학습이 완벽하지 않기 때문에 개발자의 의도가 정확하게 컴퓨팅 사고를 기반으로 제시되지 않으면, AI는 갈 길을 잃고 의도와 다른 코드를 제시할 수 있습니다.개발자의 의도와 다른 코드는 결국 불필요한 코드를 늘리는 것과 같기 때문에 비효율적일 수 있습니다. 3️⃣ Copoilot의 궁극적인 문제?copoilot의 궁극적 문제는 라이선스 문제가 되지 않을까 싶습니다.코파일럿의 AI가 어떤 라이선스인가를 따지지 않고 학습하기 때문에 뱉어낸 결과물에 제한된 라이선스 코드가 있다면 해당 코파일럿 코드 또한 제한되어야 하는지, 적용한다면 어느 범주까지 적용해야 하는지 애매한 부분이 있다고 합니다.  ❓ 그래서 진짜 개발자 대체가 가능해?여기부터는 코드캠프 일부 개발자들의 의견으로 반박시 여러분들 의견이 맞습니다.😁코드캠프에게 여러분들의 의견을 알려주세요! 코캠측 개발자들의 의견을 정리해보았는데요, 생각보다 코캠 내부에서도 파가 나뉘었습니다!🧑🏻‍💻 백엔드 개발자들Captain( 팀 내 그저 빛을 맡고 계신 9년차 풀스택 개발자 )- 설계를 하는 시니어들은 대체 불가능, 단순 업무를 하는 주니어는 대체 가능.틀을 설계하는 건 인공지능이 발전해도 인간의 창의성까지 가지고 올 수 없는 부분이 있기 때문에 무리라고 생각.Quokka- 비슷한 거 써봤는데 대체 안됨.( 일단 돈을 안냈음. - 무료판 유저 )Otter- 회사의 도입이 대중화 되느냐에 따라 다를 것 같은데, 주니어는 대체 가능하지만 로직의 틀을 짜야 하는 시니어는 대체가 불가하다.Bommy- 상용화 시기가 중요하다고 생각, 과도기동안은 주니어도 대체가 안되지만 상용화 된 이후에는 주니어는 대체가 가능하다고 생각.🧑🏻‍💻 프론트엔드 개발자들Eunny- 주니어, 시니어 모두 대체가 불가하다.공부는 가능하겠지만, 모든 코드는 각자 코드 상황에 따라 다르게 적용되기 때문에 대체 불가.Hoony( 공상과학에 빠져있는 디지털노마드 선두주자 )- 주니어, 시니어 모두 대체가 가능하다. ( 터미네이터와 아이언맨 자비스를 너무 감명 깊게 봄. - AI가 인류를 대체할 수 있다 주의 )시간이 흐를 수록 데이터는 누적될 것이고 대부분의 코드 설계가 가능한 수준까지 올라 갈 수 있을 것, 이를 통해 인건비 절감을 위해 개발자 보다 AI를 선호하는 상황이 생길 수 있다.Jenny- 주니어 정도는 코파일럿으로 대체가 가능하다. 하지만 코파일럿 설계를 해야 하는 엔지니어나 서비스의 큰 틀을 짜야하는 시니어는 대체가 불가능하다. 큰 틀은 언제나 상황에 따라 짜야 하는데 통상적인 부분으로는 커버 불가능함.Gee- 코파일럿이 상용화되어서 많은 사람이 사용하게 된다면 나중에는 코파일럿이 작성한 코드가 트렌드를 반영한 정석 로직으로 여겨지는 날이 올 것 같음. 하지만 상황에 맞게 배치하고 개선하는 작업을 하는 개발자는 반드시 필요하다고 생각. ( 근데 코파일럿 되게 좋은데? ) 코드캠프에서도 총 3가지 의견으로 나뉘었는데요,1. 주니어만 대체가 가능하다.2. 주니어, 시니어 둘 다 대체 가능하다.3. 주니어, 시니어 둘 다 대체 불가능하다.이렇게 총 세가지 의견 중 가장 우세한 의견은 [ 주니어는 대체가 가능하나, 시니어는 불가능하다! ] 입니다. 코드 캠프의 개발자들(일부)은 위와 같이 생각하는데, 여러분들은 어떻게 생각하시나요?여러분들의 의견도 들려주세요!

웹 개발･개발자･개발자대체･GithubCopilot･AI･기술토론･프론트엔드･백엔드･웹개발･시니어개발자･주니어개발자

우리가 코딩을 못하거나 포기하는 이유 (팩폭주의)

1. 시작도 못하거나 시작했다 하더라도 그냥 안해서 2. 어떤 프로그램을 만들지 모르고 남들이 하니까 막연하게 해서 3. 한 종류의 코딩언어를 단기간에 끝내려고 해서 4. 많은 종류의 코딩언어를 알기만 하고 깊이 안 파고들어서 결론 이런 사람들 대부분(본인포함)은 의욕만 앞서다가 지쳐서 코딩을 포기함

웹 개발･html･css･javascript･웹개발･java･코딩･작심삼일･귀차니즘･게으름･팩트폭력

모두의연구소

코딩 테스트 대비까지 완벽한 백엔드 기초 가이드

위니브, 제주코딩베이스캠프 대표 이호준 대표가 말하는 백엔드 개발자가 되기 위한 첫 걸음부터 완벽한 코딩 테스트 대비까지! 국가에서 지원하는 많은 부트캠프가 있습니다. 여러분도 비교 분석을 해보셨을 것이고요. 만약 비교 분석을 하지 않으셨다면 비교 분석을 해보시길 권해드립니다. 이 글에서는 이 과정이 어떠한 부분에서 특별한지를 설명해 드리고자 합니다. 1. 실무 경험 많은 강사진부트캠프마다 한 강사가 처음부터 끝까지 끌고 가는 강의가 있고, 챕터마다 강사가 나뉘는 강의도 있습니다. 둘 다 장단점이 있습니다. 저희는 각 분야의 전문성은 해당 분야 근무와 실무 경험이 있으신 분이 가장 잘 알고 있다고 판단했기 때문에 후자를 선택했습니다.파이썬과 인공지능은 국민은행 등에서 데이터 분석을 하셨던 김진환 님이, 프론트엔드는 다음 포털 검색 FE 개발 등을 하셨던 한재현 님이, 인프라는 반도체 회사에서 IT 담당하셨던 김승주 님이, 백엔드는 위니브의 대표인 제가(이호준) 이끌고 있습니다. 모두 위니브라는 조직에 속해있어 유기적으로 커뮤니케이션하고 있습니다. 자신이 맡은 분야 강의가 끝나도 채팅방을 나가거나 사라지지 않고요.또한 실무 경험과 더불어 가장 큰 것은 강의 경험이라고 생각합니다. 모두 아래 보이는 다양한 콘텐츠 제작과 대학, 대기업 등에 강의 경험, 출판 경험이 있는 분들입니다.저희는 다양한 콘텐츠 제작(책과 강의 제작) 경험과 다수의 부트캠프 운영 경험이 있습니다. 다양한 곳에 콘텐츠를 공급하고 있지만, 그중에서도 인프런에서는 57개 강의, 7만여 명 수강생, 평점 4.8점을 달성하고 있어요. 제주코딩베이스캠프라는 Django 부트캠프를 제주에서 진행하고 있기도 합니다. 카카오와 함께하는 알고리즘 산책 등 다양한 프로그램 운영 경험도 가지고 있습니다. 유튜브 채널은 제주코딩베이스캠프라는 채널을 운영하고 있고요.이렇게 쌓인 노하우를 통해 여러분의 드라마틱한 성장을 돕겠습니다.  2. 개별 학습 욕구에 맞춘 학습 방식많은 학생이 모여 수업을 듣는 만큼 다양한 학습 경험치를 가지고 있습니다. 컴퓨터공학과를 졸업한 분, 이제 막 시작하신 분, 이미 다른 기업에서 실무를 하다 오신 분 등이요. 다양한 분들이 들어오는 만큼 학습 방법에서도 차이가 있습니다.이제 막 시작하신 분은 모든 수업에 집중해서 들을 수 있도록 구성이 되어 있고, 관련 학과를 졸업하신 분들은 부족한 부분만 학습할 수 있도록 강의자료와 월별 영상 강의가 나갑니다. 이미 실무를 하신 분들은 책 출판이나 오픈소스 프로젝트 등 다양한 커리어를 쌓을 수 있도록 구성되어 있습니다. 이밖에도 수준별 스터디 그룹 구성, 개발 실무진의 멘토링 등을 통하여 가능하면 여러분의 다양한 학습 욕구가 해소될 수 있도록 진행하고 있습니다.공통 교육은 줌을 통한 온라인 라이브로 진행이 되고, 디스코드를 통해 실시간 질문을 받습니다. 진도는 중위 진도로 조정해가며 나가고, 어렵거나 쉬우신 분들을 위해 공부할 수 있는 학습자료나 자신의 실력을 가늠할 수 있는 과제를 드립니다.강사와 수강생의 시간이 꼭 동기화 될 필요는 없습니다. 이미 해당 과목이나 당일 나가는 진도에 대해 충분한 이해를 하고 있다면 더 높은 수준으로 넘어갈 수 있도록 학습 자료를 제공합니다. 부족한 부분 2%를 채우러 오신 분 같은 경우 과제로 바로 넘어가거나 오픈소스나 책 출판 프로젝트에 좀 더 몰입하는 분도 있으십니다.다만 이 경우에도 필수 과제는 꼭 해주셔야 합니다. 선택 과제와 필수 과제가 주어지는데요. 이 과제를 통해 여러분이 해당 과정에 꼭 필요한 학습 개념을 이해하고 있는지 판단합니다. 3. 책 출판과 오픈소스 프로젝트여러분을 좀 더 밀도 있는 개발자로 성장 시키고, 이력서에 한 줄 넣어 취업의 험난한 허들을 넘을 수 있도록 캠프 외 프로젝트로 책 출판 프로젝트와 오픈소스 프로젝트를 진행합니다.책 출판 프로젝트는 항상 무료책으로만 출판을 하고 있으며 반기나 분기별로 출판하고 있습니다. 이러한 프로젝트는 여러분의 이력서에 오랫동안 남을 것입니다. 지금 취업뿐만 아니라 여러분이 다음에 이직을 하실 때도 많은 도움이 될 것이고요.다만 이 프로젝트는 자율 프로젝트입니다. 출판이 쉬운 작업은 아니기 때문에 의지가 있어야 합니다. 책 출판은 의지가 있는 분들을 모으고, 브레인스토밍을 통해 주제를 선정한 다음 그 주제를 집필할 분들을 모아 팀끼리 집필하게 됩니다. 필수로 참여해야 하는 프로그램은 아닙니다. 한 권의 책을 출판한다는 것은 쉬운 일은 아닙니다. 쉽지 않기 때문에 가치가 있습니다. 이를 통해 여러분들은 좀 더 밀도 있는 개발자가 되실 수 있습니다.오늘 자(2023/11/22) 리디북스 컴퓨터/IT 전체 무료 책 인기순으로 보았을 때 첫 페이지에 있는 책 대부분이 저희가 집필한 책이거나 캠프에 참여한 학생들이 집필한 책입니다. 출판사 사도출판으로 확인하시면 됩니다.오픈소스 프로젝트는 관련된 주제가 있을 때 진행하고, 관련된 주제가 없을 경우 진행하지 않습니다. 보통 반기에 한 건씩 진행하고 있습니다. 대표적인 프로젝트로 제주특별자치도 상황판으로도 사용했었던 라이브 코로나(https://livecorona.co.kr/)가 있고, 스탑워(https://stopwar.co.kr/), 플랙스엔그리드(https://flexngrid.com/), 에스큐엘스쿨(https://sqlschool.co.kr/) 등을 진행했었습니다. 오픈소스 프로젝트는 실무에 계신 분 중 뜻이 있는 분들이 합류해 함께 개발합니다. 4. 반복학습과 코드 리뷰, 코딩 테스트처음 하는 분에게 가장 두렵고 힘든 것은 ‘익숙하지 않음’ 입니다. 12번의 반복을 통해 Django를 학습할 수 있도록 다양한 프로젝트가 준비되어 있고, 실무에 대한 막연한 두려움도 이겨내실 수 있도록 실제 실무에서 하는 것과 유사한 프로젝트가 준비되어 있습니다.각 프로젝트에는 발표회가 준비되어 있습니다. 이 발표회와 프로젝트 시트(sheet)를 통해 서로가 서로의 프로젝트를 공유할 수 있는 구성으로 동반성장 할 수 있도록 구성이 되어 있습니다. 발표마다 상장이 준비되어 있습니다. 발표가 있는 프로젝트는 총 3개이고 별개로 대상, 최우수상, 우수상이 나가게 됩니다.이러한 경험과 과제가 쌓여갈 때마다 할 수 있다는 자신감이 생기실 것입니다. 쉬우니까 할 수 있다는 자신감이 아니고 어렵지만 할 수 있다는 자신감입니다. 모두 구현하지 못하더라도, 일부라도 발표를 할 수 있도록 합니다. 부담감도 성장의 동력으로 쓸 수 있도록 여러분을 이끌겠습니다.또한 막연하게 여러분에게 어떤 결과물을 요구하는 것이 아니라 명확한 가이드를 통해 여러분이 갖춰야 될 구성 요소에 대해 예시를 통해 말씀드립니다. 예를 들어 발표는 대부분 Readme 파일로 진행을 하는데요. 아래 샘플 레포를 통해 어떤 식으로 구성하는지 감을 잡을 수 있습니다.링크 : https://github.com/weniv/project_sample_repo과제 발표와 동시에 코드 리뷰를 진행합니다. 실제 실무에서 받는 코드 리뷰 절차 등에 대해서도 설명해드리고 어떤 코드가 좋은 코드인지에 대해서도 여러 사례를 기반으로 얘기해드립니다. 코딩 테스트는 현재 출제되는 문제의 유형 분석, 문제의 출제 빈도, 기업별로 분석해둔 코딩 테스트 유형 등 다양한 데이터 기반 자료를 토대로 여러분들에게 명확한 가이드와 전략을 드리도록 하겠습니다.위니브에서는 그동안 여러 권의 알고리즘 책을 출판했으며, 제주 알고리즘 베이스캠프(https://jejualcam.co.kr/), 카카오와 함께하는 알고리즘 산책 등 다양한 행사를 진행해 왔습니다. 또한 알고리즘 테스트 서비스(https://pyalgo.co.kr/)도 운영하고 있는데요. 이러한 경험을 기반으로 여러분이 알고리즘에 보다 쉽게 다가갈 수 있도록 돕겠습니다.다만 코딩 테스트는 아쉽게도 왕도가 없습니다. 여러분이 매일매일 훈련하셔야 합니다.  4. 이력서 템플릿 제공과 리뷰, 코딩 테스트 대비저희가 한 해에 리뷰하는 이력서는 500건에서 700건 정도 됩니다. 이력서 검토 경험을 ‘신입개발자 이력서 작성 가이드’라는 책으로 집필하기도 했습니다.리뷰를 했던 데이터를 기반으로 희망 연봉에 따라 이력서를 검토해드립니다. 또한 희망 연봉에 따라 준비해야 하는 요건이 다를 수 있습니다. 예를 들어 고액 연봉을 희망한다면 코딩 테스트를 준비해야 하지만 연봉 3200 미만에서는 코딩 테스트가 거의 없습니다. 전략적으로 어떤 포지션을 취해야 하는지도 함께 알려드립니다.이력서를 노션으로 많이 작성하는데요. 실무자가 어떤 것을 선호하는지 모르기 때문에 다양한 양식을 준비해둘 필요가 있습니다. 생각보다 Notion 이력서를 좋아하지 않는 곳도 많습니다. 저희는 PDF양식과 노션 양식을 모두 제공해드립니다. PDF 양식은 아래 링크에서 무료로 확인하실 수 있습니다.https://paullabworkspace.notion.site/Figma-bfa32213fc244db9b31bb8486a479ee6?pvs=4 5. ICT 교육에 대한 치열한 고민캠프를 진행하게 되면 우리끼리 간혹 하는 얘기가 있습니다. ‘이 교육은 우리밖에 못한다’라는 얘기인데요. 이유는 우리는 ICT 교육에 대해, 한 과목 한 과목에 대해 치열하게 파고들고 회의하여 적재적소에 학습요소를 배치할 수 있는 그룹이기 때문입니다. 또한 단순히 교육의 퀄리티를 고민하는 것이 아니라 교육을 넘어 여러분에 이력에 무엇이 들어가야 좋을지, 이력서는 어떻게 써야 하는지 실질적인 컨설팅을 병행할 수 있는 그룹이기 때문에 그렇습니다. 우리는 여러분의 취업과 성장에 진심인 그룹입니다.우리의 방식이 모든 사람에게 맞는다는 생각은 가지고 있지 않습니다. 비교해보시고, 분석해보시고 선택해주시길 바랍니다.

백엔드･백엔드･웹개발･파이썬･장고･Python･Django･AI서비스･인공지능･머신러닝･프레임워크

미스터디벨로

[이카운트] ECOUNT API 연동(5)

API 제공 기능 테스트 ( PHP CURL )판매 입력(품목)  - 문서 ( 너무 길어서 생략 ) - PHP CODE/* 판매 입력 */ /* 문서 TEST URL = https://sboapi{ZONE}.ecount.com/OAPI/V2/Sale/SaveSale?SESSION_ID={SESSION_ID} -> {ZONE}에 ZONE 조회 반환값 ZONE, {SESSION_ID}에 로그인 반환값 SESSION_ID */ $url = 'https://sboapiCC.ecount.com/OAPI/V2/Sale/SaveSale?SESSION_ID=로그인 반환값 SESSION_ID'; $arr_post['SaleList'] = array(); for($i=0;$i<5;$i++){ $data['SESSION_ID'] = '로그인 반환값 SESSION_ID'; $data['WH_CD'] = '100'; //창고 코드 $data['PROD_CD'] = '000100'; //품목 코드 $data['PROD_DES'] = '상품1'; //품목 명 $data['QTY'] = '3'; //수량 $child['BulkDatas'] = $data; $child['Line'] = $i.""; array_push($arr_post['SaleList'], $child); } $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true);※ 쇼핑몰 창고1 ( 창고코드 : 100 ) 에 상품1 ( 품목코드 : 000100 ) 을 3개씩 5번 팔았음  - 반환값※ 반환값 정상인지 확인하고 이카운트 ERP에서 판매현황, 재고 현황 다 확인 ㄱ

웹 개발･미스터디벨로･웹개발･이카운트

내일배움단 웹개발종합반 학습 3일차

  08.22~ 08.25 사용 프로그램: 파이참 1. 작성해본 코드 1)loginPage. html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>로그인페이지</title> <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href = "loginPage.css"></head><body> <div class="wrap"> <div class ="mytitle"> <h1>로그인페이지</h1> <h5>아이디, 비밀번호를 입력하세요</h5> </div> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button class="mybtn">로그인하기</button> </div></body></html> 2)loginPage.css .mytitle { color: white; width: 300px; height: 200px; text-align: center; background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg'); background-position: center; background-size: cover; /*백그라운드 관련 3가지 스타일: 덩어리 인식하면 편하다*/ border-radius: 10px; padding-top: 40px;}.mybtn { /**바깥 여백*/ margin: 20px 20px 20px 50px; /**안쪽 여백*/ padding: 40px;}.wrap { width: 300px; margin: auto; /*상하 좌우 최대로 미세요= 가운데*/}* { font-family: 'Song Myung', serif; /*구글 웹폰트 사용*/}/* 주석 단축키: Ctrl + / */ 3)index.html <!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <title>스파르타 피디아</title> <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet"> <style> * { font-family: 'Gowun Dodum', sans-serif; } .mytitle { background-color: green; width: 100%; height: 250px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg"); background-position: center; background-size: cover; color: white; display: flex; flex-direction: column; /*row colum으로만 바꿔사용*/ align-items: center; justify-content: center; /*덩어리 인식하면 편하다*/ } .mytitle > button { width: 200px; height: 50px; background-color: transparent; color: white; border-radius: 50px; border: 1px solid white; margin-top: 10px; } .mytitle > button:hover { border: 2px solid white; } .mycomment { color: green; } .wrap { margin: 20px auto 0px auto; max-width: 1200px; width:95%; } .mypost { width:95%; max-width: 500px; margin: 20px auto 0px auto; box-shadow: 0px 0px 3px 0px gray; padding: 20px; } .buttons { display: flex; flex-direction: row; /*row colum으로만 바꿔사용*/ align-items: center; justify-content: center; /*덩어리 인식하면 편하다*/ margin-top: 20px; } .buttons > button { margin-right: 10px; } #button1 { background-color: black; color: white; max-width: 80px; width:95%; padding:5px; border: 1px solid black; border-radius: 5px; } #button2 { background-color: white; color: black; max-width: 50px; width:95%; padding:5px; border: 1px solid black; border-radius: 5px; } </style></head> <body> <div class="mytitle"> <h1> 내 생애 최고의 영화들 </h1> <button> 영화 기록하기</button> </div> <div class = "mypost"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">영화 URL</label> </div> <div class="input-group mb-3"> <label class="input-group-text" for="inputGroupSelect01">별점</label> <select class="form-select" id="inputGroupSelect01"> <option selected>--선택하기--</option> <option value="1">⭐</option> <option value="2">⭐⭐</option> <option value="3">⭐⭐⭐</option> <option value="4">⭐⭐⭐⭐</option> <option value="5">⭐⭐⭐⭐⭐</option> </select> </div> <div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea" style = "height:100px"></textarea> <label for="floatingTextarea">코멘트</label> </div> <div class = "buttons"> <button id = "button1">기록하기</button> <button id = "button2">닫기</button> </div> </div> <div class="wrap"> <div class="row row-cols-1 row-cols-md-4 g-4"> <div class="col"> <div class="card"> <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">여기에 제목이 들어갑니다</h5> <p class="card-text">여기에 내용이 들어갑니다</p> <p>⭐⭐⭐</p> <p class="mycomment">여기에 코멘트가 들어갑니다</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">여기에 제목이 들어갑니다</h5> <p class="card-text">여기에 내용이 들어갑니다</p> <p>⭐⭐⭐</p> <p class="mycomment">여기에 코멘트가 들어갑니다</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">여기에 제목이 들어갑니다</h5> <p class="card-text">여기에 내용이 들어갑니다</p> <p>⭐⭐⭐</p> <p class="mycomment">여기에 코멘트가 들어갑니다</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">여기에 제목이 들어갑니다</h5> <p class="card-text">여기에 내용이 들어갑니다</p> <p>⭐⭐⭐</p> <p class="mycomment">여기에 코멘트가 들어갑니다</p> </div> </div> </div> </div> </div> </body></html> 2. 스터디 출석여부: 출석완료   3. 강의내용 중 노트 필기와 간단 소감 HTML/CSS **주석 단축키 : Ctrl + / CSS 사용시 부트스트랩 활용 *유용한 덩어리: 백그라운드, 디스플레이 모음 class 선택자 하위 단락 특정하여 속성을 부여하고 싶을 때: ex) .mytiltle > button:hover {} 모바일 모드 미리보기: 개발자모드   아직까지는 큰 어려움 없이 진행중.. 다만 게으름과의 싸움! 정신줄을 잡는 데 필요한 건 습관화.        

웹 개발･웹개발