20240701 사전캠프 1일차 TIL (데일리 1일차, 강의)

사전캠프 1일차 내용 간단요약

• 14:00 ~ 15:00 : OT 
• 15:00 ~ 15:10  : 아이스 브레이킹 및 매니저님께 질문 
• 15:00 ~ 15:30 : 데일리 1일차 과제 : Spring(Java) 트랙을 신청한 이유
• 15:30 ~ 17:00 : 프로그램 설치 
• 17:00 ~ 19:00 : 강의 (웹 개발 종합반)

---

데일리 과제 - 1주차 월요일 SPRING 트랙을 신청한 이유

Q1. 내가 Spring(java) 트랙에 참여한 계기는 무엇인가요?

 

A1.

비동일계로 편입을 했지만, 변명아닌 변명이라면 마땅히 이렇다 할 산출물이 없었다.

졸업을 앞둔 나는 깃허브로 팀원과 협업을 한 적이 없고 그냥 개인적으로 올려놓기만 했을뿐..

그러다가 내일배움캠프를 보고, 커리큘럼과 여러개의 협업 프로젝트를 보고 지원을 하게되었다

또한 9to9이라는 단점을 비대면이라는 장점으로 커버가 가능했던것 같다.

 

 

Q2. 내가 이해한 개발자는 어떤 역할을 하는 사람인가요?

 

 

A2.

컴퓨터, 소프트웨어, 하드웨어에 들어가는 프로그램등을 개발하는 사람이다.

사용자가 요구하는 내용을 구현하는 사람들이 개발자이다.

 

Q3. 개발을 경험해보셨나요? 해보셨다면 어떤 경험을 하셨는지 작성해주시고, 아니라면 개발에 대해 찾아본 것을 작성해주세요.

 

학교에 있으면서 개발은 겉핥기식으로 해본것 같다. 웹(간단한 리액트 node.js를 이용한 웹개발) 공공데이터를 이용한 지도, 코딩테스트 준비등. 하지만 아주 기초부터 꽉 다진다는 마음으로 들어왔다.

그때 느낀점은

1인 개발자라면 몰라도, 다른사람과 협업이 아주 중요하다고 느꼈다.

프로젝트를 하며 싸우기도, 친해지기도 하면서 그 사람들로 인해서 결과물이 천차만별로 달라지고, 좋지않은 일이 있더라도 다같이 으쌰으쌰하는 일이 있는 반면에 잘 되다가도 욕심때문에 무너지는 결과가 있기도 했다

내가 생각하는 개발자는 구현 능력이 있는 사람뿐만아니라 협업에도 능한사람인것 같다.

 

Q4. 개발자의 역할을 수행하는 데에 있어 나의 강점과 연관된 부분은 무엇이라고 생각하나요? 혹은 보완, 개선하고 싶은 개인 역량이 있나요?

과거 혹은 현재의 업무와 연관 지어도 좋습니다. '능력'을 기준으로 고민해주세요

 

 

A4.

일단 꼼꼼하다는 부분이었다. 시간이 걸리더라도 문서는 한번 확인을 하고 완벽한 내용으로 다른사람들에게 보여지는 것을 선호한다.

그것이 단점이 된다면, 꼼꼼하지않은 부분이 있으면 정말로 다른사람들에게 보여주기 싫어한다. 미숙하거나 완성이 덜 된 부분이

있다면 그것을 보여주는게 엄청난 고역이다.

개선하고싶다면 이점이다. 모든 사람은 완벽할 수 없다 라는 생각은 가지고 있지만 마음만은 그렇게 되지않는다.

 

Q5. 본 코스 수료 후, 어떤 개발자로 성장하고 싶나요?

 

A5.

본코스 수료후, 나의 개발 일지를 잘 적는 개발자가 되고싶다, 평소에는 그냥 문서 정리를 개인적으로 정리를 해놓았다 졸업직전 돌아보니 남는건 거의 없었다. 또한 비슷한 문제에 막혔을때도 참고할 수 있는 문서가 없어서 고생한적이 있다.

본 부트캠프를 신청한 이유또한, 커리큘럼과 함께 꾸준히 기록을 남긴다는점. 또한 상주 매니저분들의 지도를 받을수 있다는 점이다.

물론 다수의 협업과, 프로젝트로 성장한 개발자가 되는건 당연한것!

 

 

---

 

강의 (웹 개발 종합반 1주차) - HTML, CSS기초, 구글폰트, 부트스트랩 

1. 웹 페이지의 동작 원리 (1주차 2강)

• 브라우저의 역할 : 요청하는 쪽(클라이언트)에서 링크를 입력시, 보여주는쪽(서버)은 링크에 대응되어있는 정보를 사용자에게 보여주는 역할. 
• HTML : 웹 페이지의 구조와 내용을 정의함 즉, 웹페이지의 뼈대.
• CSS : 뼈대를 꾸며주는 역할, 스타일과 레이아웃을 정의함.
• JAVASCRIPT : 웹 페이지에 동적인 기능을 넣는다.

2. VS Code 설치 (1주차 3강)

3. HTML기초 (1주차 4강)

• frontEnd란 : 눈에 보이는 부분, 즉 사용자가 상호 작용 할 수 있는 부분으로 HTML, CSS, JS등이 있다.
• BackEnd란 : 사용자 눈에 보이지않는 뒷부분.
• HTML은 head와 body로 이루어진다.
• head : 제목, 탭의 아이콘, css, js등
• body : 사용자가 상호작용 할 수 있는 부분

4. 로그인 페이지 작성 (1주차 5강)

• 태그
• <p> : 단락을 나타낸다
• <h1~h6> : 제목을 나타낸다
• <a href="링크"> : 하이퍼 링크를 만든다
• <strong> : 굵은 텍스트를 나타낸다
• <em> : 기울임 꼴 텍스트를 나타낸다
• <ul> : 순서 없는 목록 태그를 만든다
• <ol> : 순서 있는 목록 태그를 만든다
• <li> : 목록 항목을 만든다
• <div> : 블록 레벨 컨테이너로, 구획을 나누는데 사용된다
• <span> : 텍스트 일부를 구획하는데 사용한다

5. CSS 기초(1주차 6강)

• CSS는 HTML의 스타일을 지정한다.
• 선택자 : CSS에서 스타일을 지정할 때, HTML에서 꾸밀 부분을 지정하여야 한다.
• 스타일 형식 : 선택자 { 스타일 속성 : 속성 값 }. ex p{ text-align: center;}
• * : 전체 선택자 >> HTML의 모든 요소를 선택한다
• 요소 선택자 >> 특정 태그의 요소를 선택함 EX <p>태그를 지정하고싶다면 p {}
• .클래스명 : 클래스 선택자 >> 특정 클래스가 지정된 요소를 선택함.
• #아이디명 : 아이디 선택자 >> 특정 아이디가 지정된 요소를 선택함.
• 부모요소 > 자식요소 : 자식 선택자 >> 특정 부모요소의 직계 자식요소를 선택한다.
• 조상요소 자손요소 : 후손 선택자 >> 특정 조상요소의 모든 자손요소를 선택한다
• 형제요소 + 형제요소 : 인접형제 선택자 >> 특정 요소의 바로 다음에 오는 형제요소를 선택한다.
• 형제요소 ~ 형제요소 : 일반 형제선택자 >> 특정 요소 바로 다음에 오는 모든 형제요소를 선택한다.
• 요소:의사클래스(hover) >> 특정 상태에 반응하는 요소를 선택한다
• 요소::의사요소(first-letter) >> 요소의 특정부분을 선택한다

6. 자주 쓰는 CSS(1주차 7강, 8강)

• width : 10px; >> 요소의 넓이를 지정한다
• height : 10px; >> 요소의 높이를 지정한다
• padding : 10px; >>요소의 안쪽 여백을 지정한다
• margin : 10px; >>요소의 바깥쪽 여백을 지정한다
•  
• margin과 padding의 기능
• margin(padding)-top(bottom, left, right) 가능 margin-top : 10px;
• margin(padding) : 10px 9px 8px 7px 로 지정하면 위 10px 오른쪽 9px 아래 8px 왼쪽 7px이다.
•  
• background-color : black(or #000000)요소의 배경색을 지정함 +  transparent는 투명이다.
• text-align : 텍스트 정렬
• border-radius : 테두리 곡선
• background-image : url을 지정해 배경 이미지를 지정한다
• background-position : 배경 이미지의 정렬을 지정한다
• background-size : 배경이미지의 크기를 지정한다.

7. 구글 폰트 잘 가져다 쓰기(1주차 9강)

• 구글폰트 : 다양한 웹 폰트를 제공하는 서비스
• 구글 폰트 접속
• get font > get embaded code
• import
• css에 넣기
• @import : CSS에서 외부 스타일시트를 불러오는 방법

 

8. 부트스트랩(1주차 10강)

• 반응형 웹 디자인을 위한 CSS 프레임워크이다.
• 헤더에 CDN을 붙여넣고 원하는 내용을 HTML에 삽입하면 자동으로 CSS가 적용되어서 나타난다

9. 추억앨범 만들기 (1주차 11강 , 12강)

• 중간, 중간으로 옮기기
• display:flex; >> 요소의 디스플레이 유형을 지정
• felx-drection:column; >> 아이템 배치 방향을 지정
• align-items:center >> 아이템을 수직 정렬
• justrify-contetn:center >> 아이템을 수평 정렬
•  
• bodrder : 1px solid white; >> 테두리 지정, 두께/선 타입/선 색깔
• border-radius; >> 모서리 둥글게