#008. 특강 DAY! 내가 알던 CSS가 맞나요? (feat. 종찬님)

핀터레스트

😎 오늘의 잘한점

액션

• 7시에 기상하여 미라클 모닝 스터디에 참여했다.
• 특강 때 질문을 통해 많은 정보를 얻었다.

칭찬

미라클 모닝 스터디 2일 차👏

미라클 모닝이라 하면 더 일찍 일어나야 하는 게 맞지만,, 미리 일어나서 잠도 깰겸 추가적인 공부도 했다는 거에 의의를 두었다!

수업 때 궁금한 점이 있으면 바로바로 질문을 하는 편인데, 특강에도 예외 없이 질문을 계속하였다.

혼자 독학했을 때는 알 수 없었던 좋은 답변들을 받을 수 있는 기회를 잘 활용하고 있다고 생각한다.👍

---

✔️ 오늘의 개선점

문제

• 시간 관리가 어려워서 공부 내용 정리라던가 하고 싶은 공부등을 할 수가 없다🥹

원인

• 일을 너무 많이 벌려놓은 것 같다..!!
• 내가 얼만큼 무엇을 진행하고 있는지 진행도 파악이 어렵다.

액션 플랜

• 현재 진행하고 있는 것들의 기간과 세부 사항의 우선순위를 체크하자✔️
• 너무 모든 것을 한꺼번에 하려 하지 말기
• 진행 상황 시각화하기

---

💡 오늘의 배운점

[ 프론트엔드 스쿨 3기 이지형님 선배 특강]

오전에는 3기 선배이신 지형님의 특강이 진행되었다. 프론트엔드 스쿨을 시작하게 된 계기, 멋사 과정에 참여하면서 아쉬웠던 점 등에 대해서 들을 수 있던 시간이었다.

항상 에디터를 켜면 막막함이 느껴졌던 나의 문제가 지형님도 똑같이 겪었었던 문제였고, 내 코드에 자신이 없던 점과 왜 동작하는지 이유를 알지 못하는 것이 원인이라는 것을 알게 되었다. 문제의 원인을 직면하게 되니 왜 그동안 외면하기만 했을까 싶었다. 아마 나에 대한 자신감이 없었던 것 같다. 하지만 프론트엔드 스쿨을 진행하면서 매일 나를 돌아보고 어제보다 나은 나로 성장하는 걸 보면서 ''이젠 할 수 있다''고 말할 수 있게 되었다. 포기하지만 말자, 하면 된다✊

 

[ 유튜브 빔캠프 채널, 빔캠프 교육 사이트 대표 이종찬님 CSS 특강]

드디어 기다렸던 종찬님의 CSS 강의! 이전 기수분들이 엄청 좋아하셨고, 유익한 시간이었다는 후기들을 보고 기대가 됐었다.

종찬님의 강의는 내가 생각해 왔던 강의의 틀을 깨부셔 주신,, 그런 강의었다. 평상시 독학하면서 들을 수 있었던 강의들은 프로젝트 하나를 만들어보면서 이 동작을 하려면 이 코드 작성이 필요하다의 느낌이었고 세부적인 내용은 스스로 알아봐야 하니 기초적인 것보다는 사용되는 것 위주로 기억되는? 구조였다. 하지만 이번 특강은 정말 정말 중요한 왜 이렇게 동작하는가에 관심을 가질 수 있고, 초점이 맞춰져 있었다.

평상시에 아무렇지 않게 사용했던 용어들이 틀렸다는 걸 알게 되었고, 지금까지 공부한 건 공부가 아니었다.

수업에서 질문을 하실 때마다 머리를 한 대 맞은 느낌이었다ㅋㅋㅋㅋ 특히나 width: auto가 무엇을 의미하는지, HTML 요소가 아무 값도 주지 않았을 때 왜 왼쪽 상단에 위치하는지...

CSS 외길 인생이셨던 만큼 정확하고 깊이 있는 내용을 알 수 있다는 게 너무 영광이었다. 점심시간까지 고민했던 화면 그리기 단계를 강의 시간에 배웠다니!!

CSS가 어렵게 느껴지는 이유를 종찬님은 잘 알지 못해서, 작업 순서가 정리가 안되어 있기 때문이라고 얘기해 주셨다.

지형님의 특강, 종찬님의 특강만 듣더라도 내가 하고 있는 것을 잘 아는 건 굉장히 중요하다는 걸 알 수 있다.

시간이 걸리더라도 배운 내용을 꼭 제대로 정리해서 포스팅하고 싶다!

---

🙋‍♀️ 오늘의 질문

이미지 하단의 빈 공간은 따로 초기화를 해주시는 편인가요?

👉 네, 무조건!!! 여러 가지 방법이 있겠지만, 강의에서 배웠던 vertical-align: top을 사용하셨다.

 

아까 width: 100%의 경우 부모 요소의 넓이를 상속하는 게 아니라 가져오는 거라고 하셨는데 왜 상속은 아닌 걸까요??

👉 CSS에서 상속은 기본적으로 제공되는 프로퍼티가 있고, 제공되지 않는 프로퍼티가 정해져 있습니다.

제공되는 프로퍼티는 그럴만한 이유를 가지고 있고, 추가적인 동작을 해줄 필요 없이 부모에 프로퍼티를 적용하면 자식에게 상속됩니다.

제공이 되지 않는 프로퍼티는 inherit 값을 통해서 부모의 값이 상속이 되는 것이죠.

부모에 의해서 자식이 영향을 받으면 무조건 상속이라고 표현하는 건 잘못된 표현입니다.

 

border-bottom에 따로 컬러값을 주지 않으셨는데 색이 적용되었어요.
MDN에서 찾아보니 initial value가 currentColor라고 되어있던데 해당 요소의 color 값을 얘기하는 건가요?

👉 (이 부분은 정확한 말씀이 기억나지 않아 MDN에서 내용을 찾아 추가하였다.)

 

color 속성은 요소의 텍스트와 text-decoration 속성의 전경색(foreground) 값을 설정하고 currentcolor 값을 설정한다.

 

 

color 속성의 값으로는 <color>와 currentcolor를 사용하는 걸 알 수 있다.

<color>는 우리가 평상시에 사용하는 HEX 컬러 코드나, rgb(), named-color(red, blue,...)이고, currentcolor라고 값을 설정하면 inherit로 취급된다.

 

이렇게 되면 currentcolor와 inherit의 차이는 무엇일까 생각하게 된다.

stack-overflow에 있는 답변을 보니 inherit는 부모에게서 상속받아오는 거고, currentcolor는 가까운 color 속성의 값을 가져온다.

 

body > div 셀렉터에 color 속성이 지정된 경우 해당 color 값을 currentColor로 하게 되어 빨간색이 적용되고, 부모 셀렉터에만 color 속성이 지정된 경우 body > div의 currentColor는 가장 가까운 부모 셀렉터의 color 속성값을 가져온다.

 

What's the difference between { color: inherit } vs { color: currentColor }?

 

🤔 이번주를 마무리하며

벌써 프론트엔드 스쿨 2주차가 지나갔다. 독학했을 때와는 차원이 다른 학습의 깊이라고 자부할 수 있다. 스스로 그렇게까지 공부하지 않은 걸 수도 있지만 프론트엔드 스쿨의 분위기, 동료, 멘토, 강사님들의 영향이 매우 크다고 생각한다.

매일 내가 이 정도로 노력할 수 있던 사람이란 것에 놀라곤 한다. 그렇다고 하루에 공부하는 양이 많거나, 만족스러운 건 아니지만 나 자신을 성장시키는 게 재미를 느끼고 있다.

정리할 내용은 계속 쌓이고 있지만ㅋㅋㅋㅋ 지금 이 과정에서 재미를 느낀다는 게 더 중요한 포인트 아닐까

멘토님 강사님이 해주시는 말에 매일매일 코끝찡에 감동의 눈물을 흘리는 중...

특히 이번에 호준님이 해주셨던 말씀에 거의 울 뻔했다🤣

한 마디씩 해주실 때마다 안도감과 성장할 수 있다는 자신감을 심어주셨다. 성장할 수 있는 환경이란 게 얼마나 중요한지 매일 느끼고 있다.