교육 | 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 2주차

국민내일배움카드로 국비지원받고 프론트엔드 학습
열공 챌린지 2주차

 

 

🎥 목차

1. 목표

2. 알게된 점

3. 좋았던 점

4. 나의 다짐

 

🚀 목표

패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 2주차 학습강의 듣기가 학습 목표이다.

 

 

💡 알게된 점

inline 요소에 margin과 padding 부여

span 태그와 같은 inline 요소는 margin-left, margin-right, padding-left, padding-right가 적용되지 않는다.

 

그럼에도 margin 값이 적용되는것처럼 보이는 이유는, margin-left와 margin-right에 margin값이 적용되어 top과 bottom 크기가 늘어나기 때문이다.

 

만약, display: block으로 스타일을 줄 경우에는, 적용이 된다.

 

background-attach

background-attach의 기본값은 scroll으로, 이미지가 요소를 따라서 스크롤 된다.

 

background-attach: fixed로 지정하면, 이미지가 뷰포트에 고정이되어서, 스크롤을 내려도 이미지가 고정된다.

 

흔히, 공포사이트를 접속하면, 배경화면에 무서운 사진을 넣고 스크롤을 내려도 무서운 사진이 없어지지 않고 그대로 남아있는 것을 생각하면 이해하기 쉽다.

 

만약 position: fixed을 이해하고 있다면, position: fixed가 스크롤해도 뷰포트에 고정이 된다면,

background-attach: fixed는 이미지가 웹브라우저의 뷰포트에 고정되는 것이다.

 

현재로서는 이해하기 어렵겠지만, 스타벅스 클론코딩을 하게된다면 이해하기 쉬워진다.

 

transform : 3D 변환

3D로 보인다!

rotateY, rotateX를 사용하면, 요소가 3D로 움직인다.

 

그러나 내가 보는 화면은 2D이기 때문에, 크기가 줄어보인다.

 

perspective에 값을 지정하여, 요소를 바라보는 위치에 거리를 만들어 냄으로써, 해당 요소가 3D로 보이게 된다.

 

사실, 해당 내용은 잘 사용되지 않기 때문에 그냥 이런게 있구나 하고 넘어가면 될듯하다.

 

🙌 좋았던 점

오버워치 영웅 초상화 실습

오버워치 영웅 실습 페이지

transform으로 크기를 크게하는 scale이나, 이미지의 움직임을 나타내는 translateX와 같은 2D를 이용한 변환을 사용했다.

 

그러나 3D에서 보는것 처럼 변환하는 것은 포토샵에서만 하는 줄 알았는데, 이번 강의를 듣고나서 3D로도 변환할 수 있다는 것을 알게 되었다.

 

3D로 변환하는 것이 써먹을 일이 거의 없을 거 같아서 외우려고하지 않고, 그냥 우선 알고 넘어가야겠다.

왜냐하면, 개발자가 이미지를 3D로 변환하는 것보단, 디자이너가 이미지를 조작하는 것이 개발자가 더 개발에 치중할 수 있도록 하는것이 좋다고 생각하기 때문이다.

 

그래도 만약 3D를 작업하는 날이 있다면, 이번 주차때 배웠던것을 기억하고 다시 찾아보면 되지 않을까?

 

그래도 아는 것이 많아서 기분이 좋았다.

헛으로 공부한게 아니라고 느낀것이, flex를 이용한 레이아웃 설계를 굉장히 많이해서 그런지 

 

flex에 관련된 기초는 쉽게 느껴졌다.

 

작년 12월 달에 포트폴리오 웹사이트를 만들때 flex를 이용했던 것이 나에게 큰 도움이 된거 같다.

 

그래도 아직 잘 모른다고 느끼는 것이, 오버워치 영웅 초상화를 띄우는 실습을 진행하면서 내가 강의를 보지 않고 곧바로 만들 수 있을까 하고 의문이 들었다.

 

나의 다짐에 적겠지만, 2주차 때는 개인 시간이 부족해서 복습이나 실습을 하지 못했는데

 

3주차 때는 복습을 열심히 해야겠다.

그래서인지 수강하기 전에는 제대로 학습을 할 수 있을지 조금 걱정했지만, 우려했던것보다는 괜찮았다.

 

💬 나의 다짐

복습도 하기

1주차 때는 강의도 열심히 듣고, 복습도 했다.

 

근데 2주차 때는 팀 프로젝트를 하느라 강의만 듣고 복습을 하지 못했다.

 

팀프로젝트를 하면서, 리액트에 대해 부족하다는 것을 많이 느꼈는데 

 

3주차 때는 팀 프로젝트가 소강상태로 접어드니, 기초를 다지자는 마음으로 복습도 열심히 들어야겠다.