부트캠프 1일차에 들어섰다. 많이 걱정했었는 데 첫 날이라 그런지 할 만 했던 거 같다! 오늘은 간단하게 html과 css 기초 정도 진도를 나갔다.
첫 수업으로 이고잉님 강의를 들었는 데 다른 것보다도 개발자로서 가져야 할 마음 가짐, 자세 등을 강조하시고 알려주셔서 그 부분이 너무 좋았다.
'처음 웹페이지를 만들었을 때의 그 설렘을 잊지 말라' 고 말씀하셨는 데, 초심을 잃지 말아야겠다고 생각했다.
내 사이트에 애착이 생기면 불만족스러운 부분이 생기고 애증의 감정이 생길거라는 말이 많이 공감이 됐던 것 같다! 그 과정을 통해서 개선해 나가고 더 좋은 사이트로 거듭날 수 있다는 말씀에서 대학 다니면서 과제하면서 느꼈던 감정들이 떠올라서 인상깊었다.
아 그리고 개발자에겐 늘 그렇듯이 구글링의 중요성도 강조하셨다.
10시부터 6시까지 쭉 수업을 듣는 게 체력적으로 많이 힘들긴 하지만 그래도 4개월동안 열심히 달리고 성장해서 웹개발자로 취뽀하고 싶다. ꔷ̑◡ꔷ̑
- 웹이 자동차라면 인터넷은 자동차가 지나다니는 도로
- 🔗세계 최초의 웹
- 서비스를 요청하는 클라이언트(client)와 요청에 응답하는 서버(server). 각각을 호스트라고 부름
- ip 주소는 0~255.0~255.0~255.0~255로 구성. 그 중에서 127.0.0.1은 내 컴퓨터를 의미하는 특수한 주소.
- 호스트를 빌려주는 서비스 호스팅(=클라우드) (웹호스팅, 그 중 하나가 깃허브)
- Tag는 열리는 태그와 닫히는 태그로 구분. 태그는 웹을 규정하는 가장 바깥 쪽에 울타리.
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를 동일하게 주면 텍스트를 수직으로 중앙 정렬이 가능하다.
오늘은 실시간 강의를 하는 날이었다. 코치님이 귀찮으면 여러 단축키를 사용함으로써 부지런해질 수 있다고 말씀하시면서 다양한 단축키들을 가르쳐주셨다.
- 여러 태그를 한 번에 작성하는 법 -> ul>(li>{item})*3
- 커서의 위치를 옮기지 않고 바로 줄바꿈 하는 단축키 -> Ctrl + enter
- 위쪽으로 줄바꿈 하는 단축키 -> Ctrl + shift + enter
등등 다양한 꿀팁들을 배울 수 있었다. 이론적인 내용보다도 이런 실무적으로 적용할 수 있는 팁들을 배울 수 있다는 게 너무 좋은 것 같다. 덕분에 코딩하면서 귀찮음을 조금 덜어낼 수 있을 것 같다.
html과 css를 일주일만에 끝내는 커리큘럼이기 때문에 수업이 모두 끝난 이후 저녁시간에 개인적으로 추가 공부는 필수인 것 같다. 그나마 이미 아는 내용들이라서 복습하는 느낌으로 볼 수 있어서 다행인 것 같다. 아마 내가 코딩 입문자였다면 첫주부터 멘붕이 오지 않았을까 싶다!
🔗이고잉님께서 추천해주신 css select 연습하기 게임
그리고 코치님께서 항상 중복된 코드를 없애기 위해 노력해야 한다고 강조하셨다. 또한 공부할 때 Cheat sheet 찾아서 수시로 보라고 조언도 해주셨다! 실시간 강의에서는 늘 꿀같은 조언들을 많이 얻어가는 것 같다.
그리고 아래는 css 공부하면서 기억해두어야 하는 것들 필기!
내가 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 스타일 }
오늘은 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 정리글 링크!📎𝐆𝐈𝐓 𝐒𝐔𝐌𝐌𝐀𝐑𝐘