혹시 당신은 z-index를 애용하시나요?

혹시 당신은 z-index를 애용하시나요?

프로젝트를 진행하며 겪은 CSS z-index, position 관련 학습이 필요하다 느껴 작성한 글 입니다.만약 z-index를 사용한다면..위치도 잘 잡히고 너무 좋죠!!! 모든곳에 사용해도 되는 것 아닌가요?라고 생각하는 당신 위험합니다..프로젝트를 진행하며 컴포넌트를 각자 만든 뒤 합쳤을 때 위로 올라가면 안되는 부분이 위로 올라가있는 경험을 해보셨다면 제 위의 말이 이해가 갈것입니다.구조가 굉장히 복잡하게 짜여져있기때문에 '언제 어떤순서로 컴포넌트를 불러왔고 position 속성은 어떤것으로 설정했다'를 전부 기억하고있다면 문제가 되지는 않겠지만 우리는 혼자서 모든 일을 하지 않고 기억력도 엄청나게 좋지는 않습니다! (저만 그럴 수 있습니다.)z-index를 사용하기 전요소 간 상대적 깊이 먼저..

  • format_list_bulleted 개발 공부/CSS
  • · 2024. 8. 7.
  • textsms

CSS 우선순위

학습 목적웹페이지 클론 코딩 중 CSS를 입력해도 적용이 되지 않는 경우가 발생. 이 문제를 빠르게 고치기 위해강의를 들으며 프론트엔드 개발자에게 CSS도 많이 중요하다 느낌개발중인 블로그에 잘 적용하기 위해CSS란?CSS(Cascading Style Sheets)는 HTML, XHTML, XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 글꼴, 배경색, 너비와 높이 등을 지정하는 역할을 한다.웹사이트를 제작하다보면 하나의 태그에 여러가지 CSS를 적용시켜야할 상황이 오게된다.이때 특정한 규칙에 따라 CSS에 우선 순위가 부여되어 적용되는데 지금부터 알아보도록 하자.CSS 규칙!important > 인라인 스타일 > ID 선택자 > CLASS 선택자, 속성 기반 선택자, 가상 클래스, ..

  • format_list_bulleted 개발 공부/CSS
  • · 2024. 8. 7.
  • textsms
스크롤시 다른 영역도 스크롤 되는 문제 해결

스크롤시 다른 영역도 스크롤 되는 문제 해결

무슨 문제가 생겼나?왼쪽의 사이드바 스크롤을 움직일 때 오른쪽의 컴포넌트 영역이 스크롤 되는 현상 발생!위의 css를 적용해주면 문제가 해결됩니다.https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

  • format_list_bulleted 프로젝트/개발괴발
  • · 2024. 8. 6.
  • textsms