Css 클론코딩 : 프로그래머스 | 코딩테스트 연습
이번 주 과제는 SCSS를 이용하여 홈페이지를 클론 코딩하는 과제였다.
프로그래머스를 선택한 이유
- 개발자가 되기 위한 공부를 하는데 가장 많이 들리는 사이트 중 하나가 프로그래머스 코딩 테스트 연습 부분이고, 또 그렙 같은 교육 기업에 가고자 하는 욕심이 있었기 때문에 시도하였다.
- 솔직히 카카오, 배달의 민족처럼 화면은 단순하지만 여러 효과가 가미된 홈페이지보다는 구현 난이도가 낮을 것이라고 생각
(이는 큰 오산이었다)
구현 과정 및 이슈
사실 가장 먼저 해야하는 것은 가로줄을 그어 구성 요소별로 레이아웃을 나누는 것이지만, 보통 나는 일단 구현하기 어려운 부분부터 생각하여 각이 보인다 싶으면 먼저 그 부분을 끝내 놓고 다른 부분을 건드린다. 나에게 있어서 반응형 헤더를 구성하는 것이 가장 큰 이슈라고 생각하여 그 부분 먼저 시작했다.
어느정도 헤더가 만들어지고 난 뒤에, 레이아웃을 구성하였다. 보통 레이아웃을 잡을 때 구분되는 라인이 명확한 것 위주로 나누는데, 나중에 알았는데 가로줄을 그어서 나눌 수 있으면 그것을 한 덩어리로 잡으면 된다고 한다.
반응형 헤더 만들기
반응형 헤더를 만드는 부분은 드림코딩 by 엘리 유튜브를 참고하였고, 세부적인 색 및 폰트만 프로그래머스 사이트에서 참고하였다. 미디어 쿼리를 이용하여 구성하였으며, 반응형으로 헤더를 구성하는 것 자체는 쉬웠으나, 자꾸 헤더의 높이가 프로그래머스와 다른 문제가 있었고 이는 지금까지 해결되지 않았다(^^...)
그리고, 추후 애니메이션을 부여하기 위하여 이슈가 있었는데, 그것에 대한 내용은 애니메이션 구현 문단에서 서술하겠다.
Flexbox 내부에서 2단 카드 만들기
display: flex는 flexbox 내부의 아이템을 주축으로 정렬할 수있게 해주는 옵션이다. 보통 flexbox를 이용할 때 wrap 속성을 사용하지 않고 내부 아이템들을 100%의 너비로 두고 사용하였기 때문에, 두 열씩 정렬하는 방법을 잘 몰랐다. 또 wrap을 사용하면 여러 행으로 배치가 가능하지만, 여러개의 열을 만들 수 없었다. 인터넷에서 찾아보니, 각 아이템을 원하는 비율에 맞게끔 설정하는 것이 핵심이었다. 2열로 만들고 싶으니, 50% width를 설정하는 방식이다. 그러나 margin이나 padding을 각 아이템에 설정한다면 50%로 설정하더라도 두 열이 만들어지지 않을 수 있으니, calc(50% - padding) 형식으로 안전하게 너비를 설정하는 방법도 있다.
처음에 이 방법이 번거로워서 display: grid와 함께 grid-template-columns 방식으로 사용하려 하였으나, 내부에 다른 박스를 만들고 text-overflow: ellipsis 옵션을 설정하려 할 때 화면 크기가 줄어듬에도 불구하고 텍스트 박스가 튀어나오는 현상이 발생하여 flexbox를 사용하게 되었다.
balloon tooltip만들기
balloon tooltip 구현은 정말 기가막힌 방법이었다. 처음에는 어떤 balloon 모양의 아이콘을 이용하는줄 알았는데, balloon의 말풍선과 아래쪽 삼각형으로 나누어서 만드는 것이었다. 난 CSS로 도형까지 구현할줄은 상상도 못했다... 구현하는 방법은 아래에 서술하고, 일단 인터넷에 나와있는 방법들은 가상 선택자 ::after에 position: absolute를 주어 말풍선을 구현하였으나, 나의 경우는 어떤 긴 문장 말풍선이더라도 항상 50% 위치에 있어야 하기 때문에 position absolute를 사용할 수 없었다. position: absolute, left: 50%은 시작점을 기준으로 맞추기 때문에 중간 지점을 찾기 어렵고, 찾더라도 말풍선의 길이에 따라 자꾸 달라지는 문제가 있었다.
이를 해결하기 위하여 말풍선을 감싸는 wrapper를 만들고, wrapper에 display: flex; flex-direction: column; align-items: center; 옵션을 주어 항상 가운데로 오도록 하였다.
헤더에 애니메이션 추가하기
추가해야 할 애니메이션은 총 두가지였다.
- 햄버거 버튼을 클릭하면 X자로 변하고, 다시 클릭하면 원래대로 돌아오기
- 햄버거 버튼 클릭시 위에서 차르륵 메뉴가 나오고, 다시 차르륵 올라가기
햄버거 버튼의 변형 역시 만들 줄 몰라서 검색을 해 보았더니 여러 정보가 있었다. 따라서 그 중 하나를 사용했다. 덕분에 원래 font-awesome에서 사용하던 햄버거 메뉴를 span을 이용하여 구현하였고, transform을 이용하여 X자로 변하게 하였다. 완전 노가다였다...
위에서 차르륵? 메뉴가 나오는 것은, display: none에서 display: block에 transition을 주는 것은 불가능하다고 알고 있었기 때문에, width에 변화를 주어 애니메이션을 주었다. 실제로 프로그래머스 사이트에서도 메뉴가 내려올 때 하단 컨텐츠가 덮어지는 것이 아닌 아래로 밀려 나가기 때문에 이 방법이 맞았다고 생각한다. 그리고
아직 해결되지 않은 이슈
pagination 구현
시간 관계상 pagination을 구현하지 못했다. 프로그래머스의 pagination을 보면 모든 페이지가 나오는 것이 아닌 중간에 ... 표시가 되어 있는 블록이 있는데, 아마 display: inline 속성을 준 뒤 wrapper에 text-overflow: elipsys 속성을 준 것이 아닐까 추측한다. 아직 해보지는 않았기 때문에 해 봐야 알 것 같다.
쪼그라드는? 점보트론
프로그래머스 사이트 가면 가로로 너비를 줄일 때 점보트론의 높이는 줄지 않고 너비로만 주는 것을 확인할 수 있는데, 내 사이트는 같은 비율로 점보트론이 쪼그라든다... object-fit 옵션을 주지도 않고, width 역시 고정했는데도 불구하고 같은 증상이 나타난다. img 태그를 사용하면 안되는 것일지, 아무래도 추가적인 정보가 필요할 듯 하다.
balloon tooltip의 위치가 제대로 놓여지지 않음
balloon tooltip은 구현했지만, 아이콘을 hover 했을 때 보여져야하는 balloon tooltip의 위치가 정확하지 않은 문제가 있다. 정확히 말하면 높이는 정확하지만, 말풍선의 너비가 각각 제각각이기 때문에 left 또는 right를 50%주어도 제대로 된 위치를 잡지 못하는 문제가 있다. 이 문제를 어떻게 해결해야 할 지 아직 잘 모르겠다.
새롭게 배운 것
max-width 속성을 이용하여 애니메이션 구현하기
- 정확히는 width를 이용하여 transition 효과를 부여할 수 없고,
max-height속성을 이용하여 transition을 구할 수 있다. - 이때,
text-overflow: hidden처리를 해야만max-height: 0;이 되었을 때 글자가 밀려나와 보이지 않는다. .active클래스를 만들고,max-height: 500px정도로 주어 애니메이션을 만들 수 있다. (정확한 높이가 있어야 애니메이션 구현이 가능하기 때문)- 참고로 처음 헤더는
justify-content: space-between으로 구현되어 있는데, 로고를 제외한 나머지 부분이 동시에 내려오도록 하기 위하여 헤더가 축소되었을 때만 나오는 메뉴를 가운데에 놓았고, 오른쪽 끝에 있는 메뉴는 보이지 않도록 처리했다.
Flexbox내부에서 2단 리스트 구성하기
- flex: 1은 전체에서 1의 비율을 가진다는 뜻으로 너비를 100%로 설정했을 때 전체를 차지하게 되므로 의미가 없는 옵션이다.
- flex 속성은 건들지 않고, wrapper에
flex-wrap: wrap속성을 부여한 뒤 각 아이템의 너비를 50%로 설정하거나,width: calc(50% - padding)값으로 설정하여 완전히 두 단으로 나눌 수 있게 만들 수 있다.
border 속성을 이용하여 삼각형 만들기
width: 0일 때 삼각형 모양을 만드는 법은 다음과 같다. 예시는 위에서 아래 방향의 삼각형을 만드는 방법이다.
- 만들고자 하는 방향의 시작점의 border를 부여한다. (ex:
border-top: 10px solid;) - 시작점의 border와 인접한 border(좌, 우)의 border color를 transparent로 부여한다. 이때, border 픽셀은 자유롭게 구성하여 세부적인 모양을 결정할 수 있다.
.triangle-down {
border-top: 10px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
// 아래 방향 삼각형이 만들어짐느낀 점
솔직히 말하면, 나에게 있어 가장 어려웠던 과제가 아니었나 싶다. CSS 속성은 그때 그때 찾아서 쓰는 편이었고 주로 디자인보다는 로직에 집중했기 때문에 CSS로 생각보다 많은 것들을 구현할 수 있다는 사실에 조금 놀라기도 했다.
CSS 코드는 흐름에 관계없이 작성만 해두면 동작하기 때문에 작성하다보면 코드가 매우 더러워지기 일수였고, 내가 작성한 코드가 너무 삭제마려웠(?)다. 그래서 전부 폴더 및 클래스명들을 재작성하였고 그나마 조금 깨끗하게 보이는 것 같다.
CSS에 익숙하지 않아 다른 곳에 속성을 적용하여 현재 컴포넌트에 의도한 속성이 제대로 구현되지 않는 문제가 있었다. 특히 a tag에 이미 hover시 색상 부여를 했기 때문에 color를 바꿔도 제대로 동작하지 않았다. 우선 순위에 대하여 조금 더 공부를 해야할 것 같다.
