Optional

[들어가기 앞서] 나는 현재 건국대학교 스마트ICT융합공학과에 21학번으로 재학중인 학부생이다! 컴퓨터 관련 새내기이자 백엔드 지망생이다. 이제 설날이 얼마남지 않아, 스파르타코딩클럽에서 덕담 공유 코딩 패키지를 제공해줘서 듣게 되었다. 프론트엔드(HTML, CSS, JS)에 생소한 나는 강의를 듣기 전에 약간 두려웠다. 내가 이 강의만으로 정말로 웹 페이지를 만들수 있을지 여러번 머리 속에 맴돌았다. 이범규 튜터님의 자세한 설명과 실습 위주의 코딩으로 그 걱정은 사라지고, 전반적인 웹 지식을 얻게 되었다! 프론트엔드가 무서운 벽인줄만 알았는데, 이번 강의를 통해서 백엔드보다 훨씬 간단하고 편리하다고 느끼게 되었다. 기회가 된다면, 스파르타코딩클럽에서 웹 개발 종합반을 수강하여 프론트엔드 지식 또한 얻고..

[들어가기 전] 일단 저에 대해 소개해보자면, 현재 건국대학교 스마트ICT융합공학과 1학년에 재학중인 백엔드 관련 지망 학부생입니다! 컴퓨터 관련 전공자이지만, 백엔드지망 개발자라 프론트엔드(Html, CSS 등) 관련 지식이 1도 없었습니다. 매일 누군가 저에게 HTML, CSS 관련 질문을 물어보면 당황하기 일색이었습니다. 이번 스파르타코딩클럽에서 프론트엔드 관련 지식을 보충하기 위해서, 스파르타 관련 강의를 통해 나만의 웹사이트 2개를 만들어 봤습니다. 제 결과물은 '크리스마스 덕담 카드', '2021년 신년 운세 보기' 웹 페이지입니다. '누구나 큰일 낼수 있다' 라는 스파르타코딩클럽의 모토에 맞게, 이번 강의를 통해 웹 프론트엔드 지식을 쌓아가고 내 웹 페이지를 만드는 능력을 키우게 되었습니다...

브라우저가 하는 일 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 HTML 은 뼈대, CSS 는 꾸미기, Javascript 는 움직이게 하는 것 CSS 기초 안에 로 공간을 만들어 작성합니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것 기억하기 배경관련 CSS background-color background-image background-size 사이즈 width height 폰트 font-size font-weight font-famliy color 간격 margin padding 자주 쓰이는 CSS 연습하기 [연습할 것들] h1, h5, background-image, background-size, background-position ..

제목 메시지 만들기 .title { font-size: 32px; color: darkred; text-align: center; } 2021년 쥐띠의 운세는! 운세 메시지 만들기 .msg { color: darkred; text-align: center; font-size: 32px; line-height: 48px; } 마음을 알아주는 따뜻한 사람을 만날 것이야! 일이 잘 안 풀리는 것 같아도 연말에는 호탕하게 웃을 수 있을 지어니 너무 걱정하지 말고 하루하루 잘 나아가봐~ 버튼 만들기 버튼 배치하기 우선, div와 button 태그를 이용해서 버튼을 배치하기 btns 클래스 뒤로가기 공유하기 버튼을 가운데로 가져오기 내용물을 정리시키는 방법! display:flex .btns { display: f..

HTML과 CSS의 개념 HTML은 뼈대, CSS는 꾸미기 HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각하기 HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 CSS 기초 안에 로 공간을 만들어 작성합니다. div 태그에 클래스 라는 명찰을 붙여줄 수 있다. 로 감싼 곳에 .클래스{ ... } 로 지칭해주면 꾸밀 수 있다. 글씨 가운데 정렬 text-align: center; 만약에 .mytitle 안에 있는 h1 태그를 가리키고 싶다면? .mytitle > h1 { font-size: 56px; ..

[한 것] 앱 개발 프로젝트에서 팀원 분들과 함께 만나 개발 및 협업 PostControllerTest / PostServiceTest 오류 고치기 API 명세서 Swagger UI를 통해서 작성해보기 [배운 것] Swagger UI를 스프링 내부에서 사용하면, 자동으로 API 명세서를 편하게 작성 할 수 있다. 프로젝트를 진행할 때 git pull을 빠르게 진행하여, 업데이트해야 함을 알게 되었다. Jpa에서 LocalDateTime 사용법과, SwaggerConfig 작성법을 알게 되었다. [느낀점] 비대면으로 프로젝트 하는 것보다, 팀원 분과 같이 대면으로 만나서 프로젝트를 해보니 더 잘 진행되는 것 같다. 프로젝트를 진행할 때 1인분을 하기 위해서 더 공부해야 겠다. API 명세서를 작성할 때, ..