CSS table, position, z-index, media, dialog, ...

프린이·2025년 4월 18일

display: table 속성

요즘은 float css, flex css, grid css 사용하기에 잘 사용하진 않음

⬇

...

💨Position CSS

static을 준 곳에 top이랑 left 지정해줘도 위치 변하지 않음( 임의로 바꿀 수❌ )

'자기 자신을 기준'으로 움직이는 걸 볼 수 있음

absolute는 부모에 아무런 포지션을 안 줘서 최상단 기준으로 움직임

만약, div 여기다 relative 줬다면 부모인 div 기준으로 움직일거임

fixed는 그 자리에 고정되면서 스크롤을 따라다님

첨에 상태는 static이다가 스크롤 할 때 되면 그때는 fixed가 되는 것
🤩 sticky➡static➕fixed

🔍Z-index

앞과 뒤에 나타나는 요소를 결정

z-index 더 높은 요소는 더 낮은 요소 앞에 나타남 ( ➖음수 가능⭕ )

기본 값 0

순서 값 없을 경우 코드상 순서에 따라 쌓임

position: static; 스타일 가진 요소는 항상 뒤에 나타남( z-index 효과❌ )

z-index 같거나 두 요소가 position: static이면
코드에서 나중에 작성된 요소가 앞으로 나타남

부모에게 z-index 줄 경우 부모끼리 먼저 순위 정한 뒤 자식이 적용됨
즉, 자식이 아무리 높다 하여도 부모가 낮으면 위로 올라올 수 없음

z-index➡position 속성 지정하고 z-index 속성 지정해야함✔

DIV #5는 포지션 안 줬음
👉 z-index 가장 높게 8 줬는데도 맨 뒤에 있는걸 볼 수 있음

DIV #1은 absolute 포지션 줘서 다음으로 높은 5로 지정했으므로 맨 앞으로 나온거임

🔮Media Query

751px 보다 크고 999px 보다 작을 때

✍기본 문법

🎨CSS 적용 우선순위

🖱스크롤바 스타일링

💼Viewport 메타 태그

1.0이면 현재 디바이스 100%에 맞게 body에 있는 텍스트들이 들어간다는 것

2.0으로 하면 침범한 걸 볼 수 있음( 기계 사이즈의 두 배로 커진 것 )

🪁Media Query Range

min -width: 600px➡600이상 크기일 때 적용되는건데 헷갈리니까
밑에 처럼 써도 됨( 훨씬 알아보기 쉬워짐👏 )

👉 width가 400px 이상이면서 1000px 이하일 때

🎈Container Query

✅ media query➡일반적으로 viewport의 너비를 기준으로 적용
✅ conatainer query➡viewport 대신 영역을 감싼 container를 기준으로 적용

컨테이너 크기에 따라 스타일링을 다르게 줄 수 있는거임

🔍Dialog Element

open 이라는 속성을 안 주면 dialog가 보이지 않음

어떠한 버튼을 눌렀을 때 dialog가 나올 수 있게 구현할거임

버튼을 눌렀을 때니까 누르는 요소에 접근을 해줘야함

::backdrop➡모달(dialog)의 뒷배경을 스타일링할 때 쓰는 가상 요소❗

여기서 외부 클릭했을 때 모달창이 닫아지게 하고 싶으면❓
현재는 Cancel 버튼을 눌러야 모달창 닫아짐

이코드 집어넣으면 됨 🆗

🎡반응형 이미지 최적화 하기

width: 100vw;➡veiwport(화면) 너비 전체 차지한다는 뜻

화면이 큰 사이즈 일 땐 이 이미지를 사용하는게 좋겠지만

브라우저 사이즈가 이정도일 때
혹은 모바일 화면일 때 이렇게 큰 이미지가 필요할까❓

작은 화면일 땐 굳이 큰 이미지를 보여줄 필요없음🙅‍♀️
왜냐, 큰 이미지 가져오기 위해서 로드 하는 시간 오래걸림(이미지 사이지 빅빅)⌚
이럴 때 사용하는 속성➡srcset 사용하면 됨🔥

✨srcset

✅ w 유닛 : srcset에서 이미지의 실제 너비(px)를 나타내는
단위처럼 쓰이는 값 (예: 400w = 400px 너비 이미지)

✅ 브라우저가 알아서 이미지 선택하는 이유 : 브라우저가 디바이스 해상도,
화면 크기, sizes 값을 보고 가장 적절한 이미지를 자동으로 골라서 보여줌
(데이터 절약 + 선명함 유지!)