코드를 작성하면서 헷갈렸던 점이나 주의하면 좋은 점을 간단하게 적어보자!!
typography
우선 첫번째! 타이포그래피 ➡️ 폰트를 지정하고 각 색을 변수로 처리한다. (재사용성 증가)
:root {
font-family: "Montserrat";
--color-green-10: #e7ffe5;
--color-green-20: #d1ebda;
--color-green-30: #009f6f;
--color-gray-10: #eeeeee;
--color-gray-20: #6b6b6b;
--color-purple: #6100ff;
--color-white: #ffffff;
}
position: absolute
👀 헷갈렸던 점
position: absolute를 사용할 때 부모 요소에height지정이 꼭 필요한 요소가 있고, 지정하지 않아도 알아서 동작하는 요소가 있다.
( 이 부분은 헷갈려서 지피티에게 계속 물어보다가 머릿속으로 정리가 되었다!!)
내가 이 페이지에서 position: absolute 속성을 사용하여 배치한 요소는 두가지가 있다.
- OK 버튼
우선, 이 부분에서 position: absolute 속성을 사용한 이유는 이 버튼을 상하좌우로 가운데 정렬을 하고 싶었기 때문이다. position: absolute에서 left:0 right:0으로 가용 공간을 주어 가운데 정렬을 할 수 있다는 아이디어가 생각나서 사용했다.
✔️ before
.button-container {
position: relative;
}
.button {
position: absolute;
inset: 0; /* 가용공간 만들어서 가운데 정렬 */
margin: auto;
}이렇게 진행했더니 그냥 button-container가 없어지는 상황이 발생했다.
position: absolute때문에 덮혀서 이렇게 됐나 싶어서 z-index를 열심히 해봐도 안됐었는데 부모의 높이가 지정이 안되어 있어서 그랬다!
position: absolute 진행 시에는 꼭 부모 요소에 높이가 있어야 한다. (이때 높이가 있어야 한다는 말은 높이 지정이 아니라 높이가 0이 아니어야 된다는 말!)
이 상황에서는 버튼 컨테이너 안에는 버튼 요소만 존재하여 버튼의 높이 덕분에 버튼 컨테이너가 보였던 것인데 버튼이 position: absolute 속성으로 인해 공간을 버리고 위로 뜨기 때문에 버튼 컨테이너는 높이가 0이 되어 버튼 컨테이너가 보이지 않는 것이었다!!!
✔️ after
.button-container {
position: relative;
flex-basis: 84px; // 버튼이 공간을 잃어도 높이가 보존되도록 높이 고정
}
.button {
position: absolute;
inset: 0; /* 가용공간 만들어서 가운데 정렬 */
width: fit-content;
height: fit-content;
margin: auto;
}- 닫기 버튼
position: absolute
이건 또 왜 헷갈렸냐면 .. 아까의 상황으로 난 position: absolute 진행시 무조건 부모 요소에 높이 지정이 필수라고 머릿속에 인식했기 때문에 이건 부모에 높이 지정을 따로 안해줬는데도 알아서 위치로 가서 헷갈렸다.
근데 결국 알아낸건 이건 이 요소가 없어도 안에 컨텐츠들이 많기 때문에 높이가 존재할 수 밖에 없다. 그래서 부모 요소에 굳이 높이 지정 안해도 되는것 !!
진짜 '이게 왜 안되지' vs '이게 왜 되지'의 상황 ㅠㅠ
💡 세로(높이)기준 가운데 정렬을 할 때
1.flexbox
2.position
이것도 항상 헷갈리는데 .. 너비는 max-width 속성으로 지정을 해줘서 margin:0 auto 를 때리면 되는데 높이는 유지 보수를 위해( 컨텐츠가 더 추가되면 컨텐츠가 잘리지 않고 자동으로 컨텐츠에 맞춰야 하므로 ) auto라는 초기값을 지정하기 때문에 높이를 가운데 정렬하는 것이 항상 헷갈린다.
이때 내가 생각한 결론은 flexbox, position 를 사용하는 것이다.
flexbox
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
.flex-items {
}position
.parent {
position: relative;
}
.children {
position: absolute; /* 높이를 가운데 정렬하고 싶음 */
top: 50%;
left: 50%; /* 이렇게 하면 요소가 시작하는 왼쪽 모서리가 중앙 정렬됨 --> 그냥 요소가 중앙정렬하도록 하고싶음 */
transform: translate(-50%, -50%); /* 요소의 너비와 높이의 절반만큼 이동 */
}여기서는 transform: translate 이 핵심이다!
top, left의 지정만으로는 요소가 시작하는 왼쪽 모서리가 가운데 정렬이 되는 것으로 transform: translate(-50%, -50%) 을 진행해야 요소의 너비와 높이의 절반만큼 이동하는 것이다.
