728x90 디자인베이스2 [CSS] position의 사용법 #12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌 (youtube.com)고윤서 강의 참고 (콜로소) position 속성(5 가지 속성)toprightbottomleftz-index속성 같이 쓰임기본 값 - static포지션과 쓰이는 5가지 속성은static 일 때는 적용되지 않음.속성들이 적용되기 위해서는relative를 함께 써야함.fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.sticky = 평소에는 static 처럼 자리.컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.psoition: relative원래 위치에서 상대적인 값을 추가해서 가짐position을 다주고 (기본적으로 띄우는 속성)z-index (더 띄.. 2024. 5. 13. #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh % .item 에 width 50% 부여 .item-parent 여기서도 50% 부여. 여기선 .item의 절반 크기를 갖게된다. percent-wrap 하고 item-parent 에 붉은 border 값을 넣음. 결론은 부모의 넓이 기준으로 적용된다고 알고 있으면 될듯. em & rem em 상위요소인 item-wrap 의 폰트 사이즈 확인 = 24px item-em 의 값 20em 20em = 480px 1em = 24px item-em보다 상위요소인 item-parent 의 font-size = 16px 로 지정했을 경우, 20em 은 1em 이 16px 으로 바뀌므로 16*20 을 해줘야한다 상위에 있는 요소의 폰트 사이즈에 대한 몇 배를 할 건지 정할 때 사용 rem 본인의 상위개념의 폰트 사이.. 2024. 4. 19. 이전 1 다음 728x90
