홈페이지 구성하기
본 프로젝트는 2021.7.19부터 2021.8.28까지 진행한 토이프로젝트에 관한 기록이며, 해당 글은 프로젝트 진행 당시에 티스토리에 게재한 글을 그대로 옮겨온 것입니다.
1. CSS 가운데정렬
모든 요소들은 기본적으로 중앙 정렬 되게끔 css를 작성해주었는데, 중앙 정렬이 생각보다 만만치가 않았다. 어떻게 하면 중앙 정렬을 손쉽게 할 수 있을까 찾아보다가 굉장히 간단한 방법이 있다는 걸 알았다. 바로 transform 속성을 사용하는 것!
transform은 요소를 자유자재로 회전시키거나 좌표 상에서 이동시킬 수 있게 해주는데, 이때 다음과 같이 translate 함수를 사용하면 쉽게 중앙으로 오게 할 수 있다.
transform: translate(-50%, -50%);이 함수는 주어진 파라미터 값만큼 해당 요소를 x축, y축으로 이동시켜주며 양수/음수 모두 가능하다. top 50%, left 50%로 설정해줘도 중앙에 정렬이 안됐던 이유는 박스가 좌측 상단 꼭짓점을 기준으로 정렬되기 때문인데, 이를 그림으로 나타내면 이런 상황이다.
녹색박스 = 내가 정렬하고자 하는 요소
흰색박스가 전체 화면이고 이를 좌표평면으로 생각한다면 녹색박스는 흰색박스의 좌측상단 꼭짓점으로부터 50% 떨어진 거리에 정렬되는 것이다. 이때 translate(-50%, -50%)는 녹색박스 가로길이의 절반만큼 x축으로, 세로길이의 절반만큼 y축으로 이동하라는 의미이므로 이를 적용하면
이렇게 중앙정렬이 되는 것이다! 따라서 이를 이용하면 요소의 가로/세로 길이가 몇이든 상관없이 간단하게 중앙정렬을 할 수 있다.
1-1. 중앙정렬을 하는 또다른 방법! - flexbox 이용하기
transform의 단점은 position이 모두 absolute이어야 하기 때문에 요소들의 위치를 일일이 잡아주어야 한다는 점이다. 하지만 flexbox를 이용하게 되면 차례대로 나열되어야 하는 버튼같은 것들을 손쉽게 다룰 수 있다. 이를 이용하기 위해서는 부모요소의 속성을 몇가지 변경해주어야 한다.
//두 선택지의 부모요소
.css-border{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}먼저, display가 flex여야만 한다. 그리고나서 부모요소의 justify-content, align-items를 모두 center로 설정하면 자식요소들이 가운데에 위치하게 된다. 이때 자식들이 가로로 나열되게 하고 싶으면 flex-direction의 값을 row, 세로로 나열되게 하고 싶으면 column으로 주면 된다.
2. 창크기에 따른 요소 정렬
처음에 css를 작성할 때 top과 left 속성에 퍼센트(%) 값이 아닌 vh값을 넣었는데... 나중에 보니 창 크기가 줄어들면 요소들이 뒤죽박죽이 되는 것이다😓
물론 @media를 사용해 반응형으로 만들어줘도 좋겠지만 그보다는 top과 left에 퍼센트값을 넣는 것이 훨씬 간단하다고 생각되어 그렇게 했더니 문제가 해결되었다.
창크기 최대일때
창크기 절반일때
3. position 속성
position 속성은 이해가 잘 안되어 늘 헷갈렸었는데 이번 기회에 제대로 알고 가야겠다고 다짐했다(물론 1번 문제를 해결하려면 position은 무조건 absolute여야 했다).
reference: https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
새롭게 알게 된 내용으로 작성한 css는 다음과 같다.
.css-border{
/* 흰색 박스 */
display: block;
position: absolute;
background-color: white;
left: 50%;
top: 60%;
transform: translate(-50%, -50%);
width: 80vh;
height: 70vh;
border-radius: 10px;
}