본문 바로가기

Study/CSS

 (11)
Centering Element를 centering하는 방법 Flex box를 이용할 때 | display: flex justify-content, align-items를 이용해 아이템을 가운데로 정렬할 수 있다. body { /* 100vh가 아니면 centering 안됨 */ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } 어떤 요소를 가운데로 정렬하고 싶을 때, 그 요소를 감싸고 있는 부모 태그를 flex box로 선언하면 쉽게 정렬이 가능하다. 위의 코드는 body의 자식 태그를 가운데로 정렬할 수 있게 만들어 준다. +) height을 100% 으로 설정하면 수직 가운데 정렬이 불가능하다. 100%는..
Position Position이란? | MDN position은 element를 어떤 기준으로 위치시킬 것인지를 정할 수 있는 property이다. position의 타입에 따라 이 기준은 달라진다. 이 타입에는 static, relative, absolute, fixed, sticky가 있고, top, bottom, left, right을 함께 이용하면 각각의 "기준" 위치에서 얼마만큼 떨어져 있는 곳에 위치시킬 것인지를 최종적으로 결정할 수 있다. 따라서 top, bottom, left, right의 값을 지정하지 않으면, 아무런 일도 일어나지 않는다. +) z-index | static을 제외하고 position에 값을 적용하면, 그 요소의 z 값이 설정된다(원래 위치에서 붕 뜨게 된다). z-index 값은 정..
Box & Flex Box Box Model이란? box라는 것은 다음 그림과 같이 생겼다. html의 모든 요소는 브라우저 위에서 보여질 때, 위와 같은 box가 된다. 이 box를 이루고 있는 구성 요소에는 margin, border, padding, content이 있다. 모든 box가 이 네가지의 구성요소로 이루어져 있어서 box-model 이라고 부른다. .box { margin: 2px; border: 1px solid violet; padding: 2px; width: 50px; height: 50px; } 이런 박스 요소의 너비와 높이는 어떻게 정할 수 있을까? 박스의 가장 내부에 있는 content의 너비와 높이를 박스의 크기로 정할까? 아니면 가장 외부의 margin 까지를 박스의 크기로 정할까? 아니면 padd..

티스토리툴바