부트캠프 1Week

- 220404

부트캠프 1일차에 들어섰다. 많이 걱정했었는 데 첫 날이라 그런지 할 만 했던 거 같다! 오늘은 간단하게 html과 css 기초 정도 진도를 나갔다.
첫 수업으로 이고잉님 강의를 들었는 데 다른 것보다도 개발자로서 가져야 할 마음 가짐, 자세 등을 강조하시고 알려주셔서 그 부분이 너무 좋았다.
'처음 웹페이지를 만들었을 때의 그 설렘을 잊지 말라' 고 말씀하셨는 데, 초심을 잃지 말아야겠다고 생각했다.

내 사이트에 애착이 생기면 불만족스러운 부분이 생기고 애증의 감정이 생길거라는 말이 많이 공감이 됐던 것 같다! 그 과정을 통해서 개선해 나가고 더 좋은 사이트로 거듭날 수 있다는 말씀에서 대학 다니면서 과제하면서 느꼈던 감정들이 떠올라서 인상깊었다.

아 그리고 개발자에겐 늘 그렇듯이 구글링의 중요성도 강조하셨다.
10시부터 6시까지 쭉 수업을 듣는 게 체력적으로 많이 힘들긴 하지만 그래도 4개월동안 열심히 달리고 성장해서 웹개발자로 취뽀하고 싶다. ꔷ̑◡ꔷ̑

• 웹이 자동차라면 인터넷은 자동차가 지나다니는 도로
• 🔗세계 최초의 웹
• 서비스를 요청하는 클라이언트(client)와 요청에 응답하는 서버(server). 각각을 호스트라고 부름
• ip 주소는 0~255.0~255.0~255.0~255로 구성. 그 중에서 127.0.0.1은 내 컴퓨터를 의미하는 특수한 주소.
• 호스트를 빌려주는 서비스 호스팅(=클라우드) (웹호스팅, 그 중 하나가 깃허브)
• Tag는 열리는 태그와 닫히는 태그로 구분. 태그는 웹을 규정하는 가장 바깥 쪽에 울타리.

- 220405

2일차도 마찬가지로 html과 css에 대해 다뤘다. 이미 알고 있던 내용이 대부분이긴 했지만, 마진 병합 현상에 대해 처음 알게 되었다. 그 덕분에 그동안 내가 코딩하면서 마주했던 오류들의 원인을 깨달았다! 매번 왜 margin을 줘도 여백이 늘어나지 않지 고민 했었는 데 저런 현상이 있었다니 난 왜 여태 몰랐나 싶다...

• inline 요소는 block요소와 다르게 width와 height를 지정하여 공간에 대한 크기를 지정할 수 없다. 또한, top,bottom에 대한 margin과 padding 적용 불가하다.
• display의 속성 값으로 inline-block을 적용하면, inline 요소도 block 요소처럼 width와 height을 설정할 수 있습니다. 뿐만 아니라 동시에 inline요소의 특성도 갖게 됩니다.
• display: inline-blcok을 사용하게 되면 inline 요소의 특징으로 인해 요소간에 미세하게 공백이 들어간다. 이러한 문제를 피하고 공백없이 촘촘하게 배치 작업을 해야할 때는 float를 사용하는 것이 적합하다.

• 마진병합현상 -> position으로 문제 극복
  형제 지간의 요소가 공통의 공간을 공유한다면 마진이 큰 값으로 병합되어 나타난다.
  부모 자식간의 요소 중 자식에게 margin-top을 주면 부모에게도 영향을 끼쳐 부모도 함께 이동하게 된다.

height: 80px; 
line-height: 80px;

height를 준 만큼 line-height를 동일하게 주면 텍스트를 수직으로 중앙 정렬이 가능하다.

- 220406

오늘은 실시간 강의를 하는 날이었다. 코치님이 귀찮으면 여러 단축키를 사용함으로써 부지런해질 수 있다고 말씀하시면서 다양한 단축키들을 가르쳐주셨다.

• 여러 태그를 한 번에 작성하는 법 -> ul>(li>{item})*3
• 커서의 위치를 옮기지 않고 바로 줄바꿈 하는 단축키 -> Ctrl + enter
• 위쪽으로 줄바꿈 하는 단축키 -> Ctrl + shift + enter

등등 다양한 꿀팁들을 배울 수 있었다. 이론적인 내용보다도 이런 실무적으로 적용할 수 있는 팁들을 배울 수 있다는 게 너무 좋은 것 같다. 덕분에 코딩하면서 귀찮음을 조금 덜어낼 수 있을 것 같다.

html과 css를 일주일만에 끝내는 커리큘럼이기 때문에 수업이 모두 끝난 이후 저녁시간에 개인적으로 추가 공부는 필수인 것 같다. 그나마 이미 아는 내용들이라서 복습하는 느낌으로 볼 수 있어서 다행인 것 같다. 아마 내가 코딩 입문자였다면 첫주부터 멘붕이 오지 않았을까 싶다!

🔗이고잉님께서 추천해주신 css select 연습하기 게임

그리고 코치님께서 항상 중복된 코드를 없애기 위해 노력해야 한다고 강조하셨다. 또한 공부할 때 Cheat sheet 찾아서 수시로 보라고 조언도 해주셨다! 실시간 강의에서는 늘 꿀같은 조언들을 많이 얻어가는 것 같다.

그리고 아래는 css 공부하면서 기억해두어야 하는 것들 필기!

• 새로 알게된 단위 vw, vh 🔗css 단위
• 인라인 태그 (a, em, strong)의 특징은 텍스트에 조미료를 첨가하는 태그들로 기억하기
• 선택자 차이
  p.a vs p .a -> a 클래스를 가진 p vs p안에 있는 a클래스
  p .a vs p, .a -> p안 a 클래스와 p와 a클래스
• flex는 1차원 정렬, grid는 2차원 정렬에 사용한다. 🔗flex 🔗grid
• position에서 가운데 정렬할 때는 top: 0; bottom: 0; margin: auto;
• transition 지속시간은 0.3s 를 제일 많이 쓴다.

- 220407

내가 css 공부하면서 가장 어려워하고 싫어했던 동적 애니메이션에 대해 학습했다. 처음 학습했을 때는 동적 애니메이션은 속성도 많아서 헷갈리고 @keyframes 는 왜 쓰는지, 애니메이션 이름은 왜 지정해주는 건지 등등 잘 이해하지 못했는데 이 번에 다시 보니 제대로 이해가 된 것 같다! 그 당시에는 아무리 봐도 이해가 안 가던 것들이었는 데... 이제라도 제대로 짚고 넘어가는 것 같아 기분이 좋았다.

• transform을 여러개 작성하게 되면 이전에 작성된 건 모두 무시되고 가장 나중에 작성한 transform 속성만 적용된다.
• transition과 animation 작성 순서는 상관 없지만, duration 과 delay의 순서는 유의해야 한다. 먼저 작성 되는 것이 duration이고 나중에 오는 것이 delay이다. 즉, 숫자가 하나인 경우는 무조건 duration인 것이다.
• 반응형 웹

- html
<meta name="viewport" content="width=device-width, initial-scale=1">
- css
@media all[미디어유형] and (min-width:320px) and (max-width: 768px) {
	적용할 css 스타일
}

- 220408

오늘은 Git에 대해서 학습했다. 학교 다니면서 실습할 때 Git을 사용해보긴 했지만, 그 당시에는 명령어들이 무슨 의미인지 언제, 왜 사용하는지에 대해서 제대로 이해하지도 못하고 실습 따라하기에만 바빴었다. 그래서 Git 실습을 정말 안 좋아하기도 했었다... 너무 어렵고 낯설어서...😥

실무에서 너무 중요한 부분이라는 걸 알기에 늘 아주 거대한 숙제 하나를 미뤄둔 기분이었다. 부트캠프를 통해서 각 잡고 배워볼 수 있는 기회인 것 같아 좋았지만 역시나 Git 수업은 어려웠다!ㅠㅠ 그리고 학교 다니면서 해봤자 add, commit, push, pull 이 정도만 사용해봤어서 충돌 해결 부분은 아예 처음 보는 부분이었다. 앞으로 프로젝트 하면서 많이 부딪히고 다뤄봐야 Git에 익숙해질 수 있을 것 같다.

• git 저장소를 만들려면 git init
• git은 작업 영역(working directory) - 준비 영역(staging area) - git 저장소(repository) 3가지 영역으로 구분된다.
• 파일을 준비 영역으로 보내려면 git add
• 준비 영역으로 보내진 파일을 저장소에 반영하려면 git commit
• 준비 영역의 파일 상태를 확인하려면 git status
• commit 이력을 보려면 git log
• Git Branch는 각각의 Branch들이 서로 영향을 받지 않으며 독립적으로 작업을 진행하기 위한 개념이다.
• Branch를 생성하려면 git branch
• Branch를 전환하려면 git checkout
• Branch를 병합하려면 git merge
• Git 원격 저장소를 가져오려면 git clone
• 그 외에 git remote git push git fetch git pull∙∙∙

- HTML / CSS 정리글 링크📎𝐇𝐓𝐌𝐋 𝐒𝐔𝐌𝐌𝐀𝐑𝐘 📎𝐂𝐒𝐒 𝐒𝐔𝐌𝐌𝐀𝐑𝐘
- Git 정리글 링크!📎𝐆𝐈𝐓 𝐒𝐔𝐌𝐌𝐀𝐑𝐘