position2 211011 필기내용 position fixed : fixed는 자신의 부모가 아닌 브라우저 기준 위치를 지정해주지 않으면 브라우저의 왼쪽 상단이 아니라서 일단 부모 쪽에 붙어있음 sticky : top: 0;를 같이 사용하면 처음엔 제자리에 있다가 top 0 자리에 오면 fixed처럼 변함 구형 브라우저는 실행 안됨 투명 상자와 민트색 상자 모두 같은 sticky 적용 relative : 기준만 잡아주거나 z-index를 위해 사용 absolute : relative가 기준이 됨 padding 적용 안됨 border는 적용됨 부모나 그 위에 부모에게도 relative가 없으면 브라우저 기준 글씨 옆 바 만들기 /* 가상요소: after 사용 */ .nav_list li:after, .nav_list li::after { c.. 2021. 10. 18. 210929 필기내용 position position static : 자신의 위치를 지킴 realtive : 자신의 위치를 지키고 위치 설정해주면 현재 자신의 자리로부터 배치됨, (자기 자신을 기준으로 맞춤) absolute : 자신의 위치를 잃어버리고 위치 설정해준 곳으로 고정됨, **스크롤 따라가지 않음** fixed : 자신의 위치를 잃어버리고 위치 설정해준 곳으로 고정됨, **스크롤 따라감** 위치 설정 top left right bottom z-index : 단위x html은 나중에 쓴 코드가 위에 배치됨 css css 불러오는 순서 : font/icon -> reset.css -> common.css -> design.css body { --color-gray1 : #c4c4c4; } css내부에 body안에 `c.. 2021. 10. 1. 이전 1 다음 반응형
