[HTML, CSS] portfolio 페이지 만들기

두개의 scene 으로 나눠진 porfolio 페이지를 반응형으로 만들었다.

구현해야 하는 요소만큼 오류도 많아 주말 하루를 받쳐서야 완성할 수 있었다😢 해당 글은 작업하면서 있었던 오류들을 정리한 글이다.

 

일단 처음에 폰트를 설정할때 나는 보통 @font-family 를 주는데 종찬 강사님 같은 경우엔 :root 변수 로 폰트를 설정했다 둘의 차이는 뭘까? 내 생각으로는  @font-family 는 설정을 한 뒤 한번더 폰트를 설정해야하지만 :root 변수는 전체적으로 해당 폰트가 설정된다는 차이가 있다.

 

1.  큰 레이아웃 잡기

처음에 제일 큰 씬을 먼저 잡고 시작했다 시각적으로 제일 눈에 띄는 보라색 배경과 핑크 배경으로 class 명을 주었다. 

각 씬 안에는 안의 콘텐츠를 모두 담는 wrapper를 잡았는데 해당 wrapper의 전체 너비는 디자인상 1080px로 설정 되어 있어서 max-width: 1080px 로 잡았는데 어차피 @media 를 사용하여 반응형을 max-width: 1080px 이하로는 레이아웃을 변경할 거라 더 확실한 width 속성으로 전체 너비값을 준 후 화면이 1080px 보다 작아질땐 화면 양옆에 여백을 주어 가독성을 높여주기 위해 calc 함수를 주어 양 옆에 각각 30px 의 마진을 주었다. 이후엔 두 씬 모두 공통적으로 들어가는 header 와 contents 로 요소를 나눠주었다.  

 

 

 

2. purple 씬 카드 style

각 카드를 지그재그로 레이아웃을 잡는건 그리 어렵지 않았다. 각 카드마다 flex를 주고 2번째 flex의 경우에만 row-reverse 를 주었다.

내가 제일 어려웠던 부분은 이미지를 넣고 그 이미지를 덮는 투명한 보라색 배경을 덮는 거였다. 그리고 그 높이는 카드의 height 만큼 꽉 채워지고 너비는 전체 wrapper 너비의 26% 비율을 유지하길 바랬다. 그러나 아래 이미지 처럼 딱 h2의 크기만큼만 높이를 차지했다.

위 아래로 채워지지 않는 이미지

<오류를 해결하려고 시도한 방법>

• card-title 자체의 높이값이 커져야 할거 같아 height: 100%를 줘봤지만 별다른 변화가 없었다
• card-title 에 absolute 를 주고 card 자체에 relateive를 줬더니 card-contents 가 띄워진 형제 요쇼로 인해 밑으로 끌어당겨졌다
• 원래 요소들이 박스 안에서 가운데 정렬이 되길 원해서 부모요소에 align-items에 center을 줬었는데 이를 삭제했더니 높이값이 card-title 만큼 채워졌다.

📍 height: 100%는 언제 써야 적용이 되는건지
📍align-items:center을 주면 요소 이미지의 높이값이 왜 변할까
: 이 이유는 생각해보니 align-items의 기본 속성은 stretch 이므로 이 속성을 지우면 요소가 부모의 높이만큼 채워질 수 있었던것 같다.

 

3. section-pink 의 카드 레이아웃

두번째 카드들의 레이아웃을 잡으려고 일단 큰 틀을 잡을때 분명 section 태그로 묶었는데 display 가 인라인요소로 적용돼 있었다. 계속 이유를 찾으려고 css 코드를 뒤적뒤적 거렸는데 보니 태그를 section 이 아닌 seciton 이라고 적었었다.. 코드를 짜면서 오타 때문에 오류가 나고 그걸 찾다가 시간이 가는 경우가 많았는데 항상 오타부터 보는 습관을 들여야겠다 ㅠ

 

4. pink 씬 카드 style

디자인을 보면 카드의 라벨은 라벨끼리 위치가 높이가 동일하고 텍스트는 텍스트끼리 위치가 동일하게 작업해야한다는것을 알았다.

이 부분에서 제일 많이 애를 먹고 많은 시간을 소모했다..

각각 동일한 높이만큼 늘어나는 요소들

한 카드 요소의 비율이 늘어나면 다른 요소들의 높이 또한 일치하게 늘어나야하는게 핵심이다. (예를 들어 A카드의 라벨이 두줄이 되어 라벨이 차지고 하고 있던 높이의 비율이 변하면 B카드 에서도 라벨의 높이값이 A카드 랑 같게 변하는것 )

 

처음에 시도했던 방법은 카드 단위로 요소를 묶지 않고 이미지는 이미지끼리 묶어서 flex, row 를 주고 라벨은 라벨끼리 묶어서 똑같은 속성을 준 뒤 각각 이미지 묶음, 라벨 묶음, 타이틀 묶음 등등 comlumn-gap 을 주었다. 결과는 당연히 같은 부모에 묶여 있으므로 하나의 카드에있는 라벨이 2줄이 되면 다른 카드의 라벨이 한줄이라도 2줄로 변한 라벨의 높이만큼 늘어났지만 문제는 반응형으로 만들때 '이미지-라벨-타이틀-텍스트' 순서로 나오는 것이 아닌 마크업의 순서대로 '이미지-이미지-이미지 - 라벨-라벨-라벨...' 나오는 문제가 발생했다.

마크업 순서대로 나오는 요소들

 

계속 고민하다가 아직 시도해보지 않은 레이아웃 방법중 'grid' 가 있다는 것을 알았다.

grid 는 grid-template-areas 속성을 통해 각각 요소들의 위치를 자유롭게 배치할 수 있는 장점이 있다. 이를 적극 활용한다면 반응형에서도 내가 원하는 방법대로 배치하여 순서를 정할수 있는것은 물론 같은 열에 위치한 요소들의 높이도 일정하게 유지할 수 있다. 

gird를 준 레이아웃

반응형을 줬을때

이게 맞는 방식인지는 잘 모르겠다.. 마크업상 각각의 카드별로 묶여 있는게 아니라서 웹접근성이 굉장이 떨어질것으로 보인다. 이후에 종찬강사님 특강시간에 이 문제를 어떻게 해결하는지 본 후에 다시 한번 해당코드를 수정하는 시간을 가져야할것 같다.

 

---

완성한 페이지 GitHub 주소

https://github.com/dananote/frontend-developer/tree/main/practice/0328%20%20%EC%A2%85%EC%B0%AC%20%EA%B0%95%EC%82%AC%EB%8B%98

GitHub - dananote/frontend-developer