[Suite Landing Page] 2 day ⭐

WHAT Frontenc Mentor?

https://www.frontendmentor.io/challenges?sort=difficulty%7Casc

---

CHALLENGE TITLE : Suite Landing Page

FOCUS ON

This small-ish HTML and CSS only landing page includes some interesting layout decisions. Perfect if you want to put your layout and responsive skills to the test!

 

반응형과 시안 안의 몇 가지 요소를 CSS로 구현하는게 재미있을 거라고 하네요!

 

WHAT TO DO? 

-  두 번째 섹션과 footer 부분을 완성했다.

- z-index에 대해서 생각한 대로 동작하지 않아서, 한 번 더 관련 내용을 찾아봤다.

 

Z - index

https://www.youtube.com/watch?v=JMOJrjMb95w&t=2

 

요소가 더 앞에 위치하는 조건

• 마크업상에서 보다 이후에 작성된 요소가 더 앞에 위치한다.
• position이 static이 아닌 요소 (기본값이 아닐 때)
• transform 프로퍼티를 가지고 있는 요소
• opacity가 1보다 작은 요소

⭐ position 값이 static(기본값)이 아닌 요소에게만 z-index가 적용된다.
⭐ flex에 영향을 받는 flex-items 요소들에게는 position값이 static이여도 z-index가 적용된다.

 

쌓임 맥락

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

 

 

지금 보니 타블렛 인물의 위치가 맘에 안드는 군.

 

 

목표 설정

- position 이 static인 요소에 z-index를 넣고 있어서 footer과 work-section이 제대로 겹쳐지지 않는 문제가 있었는데, 원인을 찾고 원하는 대로 구현할 수 있었다.

- 이론만 공부했을 때는 분명히 다 이해하고 넘어갔다고 생각했지만, 구현을 할 때 왜 이렇게 동작하는지에 대한 원인을 찾을 수 없어서 스스로가 조금 아쉬웠다. 

- 조금 더 열심히 공부를 해야할 것 같다.