static
-
Position property, 위치이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 27. 05:20
이번시간에는 position, 포지션에 대해 배워보도록 하겠습니다. position, 포지션에는 4가지 종류, 1> static, 정지 2> fixed, 고정, 3> absolute가 있습니다. position, 포지션을 설명하기 위해, 제일 먼저 클래스가 box와 box-child인 박스를 두 개 만들고, 브라우저가 갖고 있는 디폴트, default값을 상쇄 시키기 위해, 문서의 스타일은 높이는 100%, margin, 마진은 0, padding, 패딩도 0으로 따로 설정 하도록 하겠습니다. 그리고 본문 body 높이는 400%로, 배경색은 빨간색으로 설정한 후, 크롬에서 확인해 보겠습니다. 이번에는 box의 높이를 300px, 폭은 300px, 배경색은 노란색으로 설정하고, 크롬에서 확인 하겠습니다...
-
CSS 위치(position, 포지션)이거 공부 했더니 어때?/HTML & CSS & JS 2020. 9. 28. 16:17
static: 기본값 fixed: 특정 위치에 고정 부모 요소가 아닌 브라우저 화면 기준(상대적 위치)으로 배치. 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. relative: static(기본값)이나 abolute를 포함하는 부모요소에 따른 상대적 배치 z-index 값으로 앞/뒷쪽 배치 가능. absolute: 부모 요소에 따른 상대적 배치 스크롤에 영향을 받지 않음. 페이지 내 공간을 차지하지 않음. z-index 값으로 앞/뒷쪽 배치 가능. z-index: 수직 배치 값은 정수로 입력. 값이 클수록 앞쪽으로 배치.