[04/27 TIL] Tailwind CSS , 이력서, CSS특강 과제

Tailwind CSS 사용법 & 이력서 작성

 큰 틀을 잡고 하나 구역 나누고 하면 되는데 
 엄청 헤매느라 완성도 다 못하고 제출했다.. 주말에 복습하면서 완성할 것
 Tailwind 뿐만이 아니라 일단 div 로 다 묶고 나중에 시멘틱하게 바꾸는게 맞는것같다

 

빔캠프 CSS 특강 과제

월요일 특강 때 배운 negative 마진 등등 을 활용해서 포토샵 역사 페이지를 구현하는 과제가 있었다

 

좀 시간 걸렸던 부분은 PHOTOSHOP 중간에 가상요소로 선 긋는 부분이랑
letter-spacing 할 때 간격이 늘어남으로 정렬이 안된것처럼 보이는 현상이 있었다

 

가상요소부분은 z-index: -1 을 사용해서 선을 photoshop 아래로 놔두는걸로 해결했다
쌓임 맥락 부분은 추가로 공부 해야할 듯
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

쌓임 맥락 - CSS: Cascading Style Sheets | MDN

https://erwinousy.medium.com/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

 

letter-spacing 부분은 letter-spacing 값만큼 negative margin 을 적용해 왼쪽으로 땡겨주도록 했다

과제하다보니 px 를 많이쓰는데 폰트를 바꿀 때 마다 정렬 안 맞아서 하나하나 고치기 힘들더라 

왜 em, rem 으로 쓰라고 하는지 알거같고 완성할 때 px 부분 다 대체해봐야 겠다