#004. 1px도 놓치지 않으리라

😎 오늘의 잘한점

상황

기존에 공부 방식이 수업과 필기 두 가지 모두를 잡지 못해서 새로운 공부 방식을 생각해봤다.

액션

모든 내용을 수업 시간 내에 정리하려고 하지 않고 새로 알게된 내용만 따로 작성한다. 모르는 내용은 키워드만 작성한 후 수업 외 시간에 추가적으로 알아본다.

칭찬

수업과 기록 모두 놓치지 않으려고 새로운 방식을 적용해본 것은 정말 좋은 선택이었다👍

새로운 도전이란 항상 어려운 거지만, 막상 도전해보면 '별 거 아니였네?' 싶은 상황들이 있다.

내일의 나, 미래의 나도 오늘의 경험을 토대로 도전을 두려워하지 않길! ✨

✔️ 오늘의 개선점

문제

수업 시간에 들었던 내용이 머리에 많이 들어오지 않는 것

원인

아무래도 수업 시간에 실습만 하는 것이 아니라 조금의 메모도 추가하기 때문에 100% 집중을 하고 있는 것이 아니라고 생각한다.

예전의 경험으로 생각하자면 완전 집중 상태일 때는 어느정도 수업 내용이 기억 날 것!

액션 플랜

수업이 끝나고 자습시간을 활용하여 수업 내용을 한번 훑어보자.

그리고 생각나는 대로 종이에 써내려가보기! 🖊️

💡 오늘의 배운점

POINT 짚고가기!

✅background-clip: text를 사용할 때의 주의점

아직 실험중인 속성으로 태그가 h1 p span section 등 텍스트를 인지할 수 있는 태그여야만 적용이 된다.
div는 적용되지 않으니 주의하자.

✅ 이미지가 페이지 상에서 정보를 제공하거나, 최적화가 필요할 때는 <img> 태그를 사용하는 것을 권장한다. 하지만, 이미지가 시각적인 스타일의 기능만 하거나 최적화를 고려할 대상이 아니라면 background로 이미지를 넣는 것을 권장한다.

✅개별 속성인 background-clip이나 background-origin의 경우 css 후자 우선 순위 법칙으로 인해 단축 속성인 background보다 뒤에 작성해주어야 스타일이 적용된다.

✅ :last-child의 비밀

first-child의 경우 첫 번째 요소를 확정할 수 있다.
last-child의 경우 브라우저에서는 저게 정말 마지막 태그인가? 생각하게 된다.
따라서 자식 태그에 속해 있는 경우에만 last-child가 적용되고, <body> 안의 요소에서 last-child를 사용하면 스타일이 적용되지 않는다.

배움

☑️ CSS Box Model

background-attachment
background-clip
background-clip: padding-box vs. background-origin: padding-box

☑️display 속성

display를 사용하면 CSS 속성으로 시각적인 부분만 바뀌고 태그 자체의 요소의 레벨이 바뀐 것은 아니다.

☑️ reset.css

☑️ img 태그

img는 인라인 요소이기 때문에 세로 정렬이 글자의 baseline을 따르게 된다.
따라서 img 하단의 빈 공간을 제거하기 위해 vertical-align: top과 같은 속성을 주자.

☑️ 이미지 비율 유지 방법

☑️ position

☑️ z-index

부모는 z-index를 높여 자식 앞으로 나올 수 없다.
자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다.

의미

오늘은 새로 알게 된 개념이 많았다!

CSS는 파면 팔수록 어려워지는 것 같은 느낌이다..🤣 박스 꾸미기, 카드 UI 만들기를 하면서 다양한 CSS 적용 방법을 알게 되었고 레이아웃을 어떤식으로 그려나가야 할지 알 수 있었다.

항상 div section article의 차이가 와닿지 않았는데 다음 수업에 진행된다고 해서 매우 기대된다!

카드 UI 만들기 실습 중 강사님의 결과물과 디자인 중 padding이 되어 있지 않은 부분을 발견했다!

실제로 6px의 여백을 꼭 맞춰야겠어! 하려고 말씀드렸던건 아니었지만..... 보였던 부분이라 어쩔 수 없이...ㅎㅎㅎ

디자인과 비교했을 때 똑같은 결과물이 나오면 너무 뿌듯하다,,✨

🙋‍♀️ 오늘의 질문

sticky가 스크롤을 만나 붙어서 이동하게 되면 해당 요소가 차지하는 공간이 남아있는건가요, 아니면 빈 공간으로 차지하고 있을까요?

👉 fixed나 absolute처럼 해당 공간이 없어지는 것이 아니라 sticky의 자리 공간은 그대로 남아있습니다.

저작자표시 변경금지

'Retrospective > LikeLion' 카테고리의 다른 글

#006. 멋있게 배치하는 방법 flex, grid 배우기 (0)	2023.03.08
#005. 레이아웃 제대로 부셔버리기! 하지만 부서지는건 정작... (0)	2023.03.07
#003. 멋사에서의 1주차 마무리하기 (0)	2023.03.03
#002. HTML/CSS 들어가기 - 마크업... 생각보다 어려운? (0)	2023.03.02
#001. 설레는 시작과 호준님과의 첫 수업 (2)	2023.02.28