[개발일지06/🌉포폴사이트 JS] detail 페이지 스타일링 - 프로젝트 정보 섹션, 탭 메뉴

✅ 오늘의 작업 내역
     1. detail css 작업(70%)
         1-1. 프로젝트 정보 섹션
         1-2. 탭 메뉴 

 

스타일 작업은 tailwind를 사용합니다.

🎨 오늘 작업할 시안

작업 시안

💡 구현 결과

완성 화면

 

1. 프로젝트 정보 섹션

1-1. 프로젝트 정보 섹션 구조

<section>
 <div> <!-- 전체 여백을 위한 div -->
   <article>
    <span>portfolio detail</span>
    <div> <!-- 프로젝트 제목/설명 + 버튼 레이아웃을 위한 div -->	
      <h2>개인 포트폴리오 사이트</h2>
      <p>포트폴리오 설명</p>
    </div>
    <div>  <!-- 링크 버튼 wrapper div -->
      <a>배포 사이트</a>
      <a>깃허브</a>
    </div>
    </div>
    <ul>
      <li>스택</li>
      <li>스택</li>
    </ul>
   </article>
 </div>
</section>

 

👀 스타일을 작업하며 고려한 점

• 데스크탑 폰트 사이즈
• 반응형 작업 시 프로젝트 제목/내용과 버튼의 배치
• 모바일뷰 이하로 화면이 작아졌을 때 제목 처리

프로젝트 제목과 설명, 사이트 바로가기 버튼은 flex로 처리해 줬는데, 크기가 줄어들면 텍스트 버튼이 아이콘 버튼으로 변경된다. 이때 모바일뷰보다 화면이 작아지면 오른쪽에 배치된 버튼이 영역 밖으로 나오는 이슈가 있어서 프로젝트 제목에 ellipsis(말줄임표) 처리를 해주려 했더니 속성이 적용되지가 않았다. 그래서 다른 방안으로 flex-wrap로 레이아웃을 처리하여 버튼을 아래로 떨어뜨리고, 프로젝트 제목 또한 단어 단위로 줄 바꿈 되도록 word-break 속성을 넣어주었다.

반응형 적용 화면

 

또한, 작업한 시안에서는 사이트 바로가기와 깃허브 바로가기 버튼이 단어와 아이콘 조합으로 되어있는데, detail 페이지에서는 화면을 좀 더 넓게 쓸 수 있으니 버튼명을 정확히 명시해 줘도 좋겠다는 생각이 들어 변경해 주었다.

 

1-2. break point

프로젝트 제목의 경우 폰트가 커서 화면 크기에 따라 세밀하게 처리해 주는 게 좋겠다는 판단이 들었다. 그래서 break point를 2개 잡아 처리해 줬으며, md 사이즈와 lg 사이즈에서 폰트 크기가 변경된다.

<!-- 프로젝트 제목과 설명 -->
<div class="flex flex-col">
  <h2
    class="text-xl md:text-[2.5rem] lg:text-3xl font-LINESeedKR-Bd leading-tight break-keep"
  >
    개인 포트폴리오 사이트
  </h2>
  <p class="text-sm md:text-base break-keep">
    개인 포트폴리오 사이트
  </p>
</div>

<!-- 바로가기 버튼 -->
<!-- 텍스트 버튼 -->
<div class="hidden md:flex md:flex-col md:space-y-2">
</div>
 
<!-- 아이콘 버튼 -->
<div class="flex flex-row space-x-2 pt-1 md:hidden">
</div>

 

2. 탭 메뉴

탭 메뉴 hover

탭 메뉴는 마크업과 기본 스타일링 이외에는 자바스크립트로 처리를 해야 해서 기본 레이아웃만 먼저 작업을 진행했다. 

전체 여백은 프로젝트 정보와 동일하기에 똑같이 적용해 줬고, 리스트 태그로 탭 메뉴 버튼을 만들어준다. 그리고 ul 태그 전체 넓이에 li 크기가 개수만큼 균일하게 배치되도록 flex-grow와 basis-0 속성을 사용하여 레이아웃을 수정해 주었다. 

border의 경우 리스트 태그를 감싸고 있는 div의 bottom에 라인을 하나 그려주고, li의 border를 투명 처리, 굵기만 설정해 주면 시안처럼 선택한 리스트만 border가 생긴 것처럼 표현할 수 있다. (active 상태는 자바스크립트로 처리해야 한다!)

<div class="border-b border-gray">
  <ul class="flex flex-wrap w-full">
    <li
      class="flex-grow basis-0 text-center hover:text-dark-gray
      hover:border-dark-gray rounded-t-lg pb-3 border-transparent border-b-2"
    >
      <button
        type="button"
        class="inline-block text-green font-LINESeedKR-Bd"
      >
        프로젝트 설명
      </button>
    </li>
    <li
      class="flex-grow basis-0 text-center hover:text-dark-gray
      hover:border-dark-gray rounded-t-lg pb-3 border-transparent border-b-2"
    >
      <button type="button" class="inline-block">주요 코드</button>
    </li>
    <li
      class="flex-grow basis-0 text-center hover:text-dark-gray
      hover:border-dark-gray rounded-t-lg pb-3 border-transparent border-b-2"
    >
      <button type="button" class="inline-block">트러블슈팅</button>
    </li>
  </ul>
</div>

 

👾 오늘의 트러블슈팅

flex-wrap 속성을 줬는데 줄 바꿈이 되는 순간 두 번째 줄 요소는 보이지 않는 문제

(좌) 이슈 발생 / (우) 이슈 해결

 

문제 상황

화면이 줄어들면 stack 태그들을 자연스럽게 줄 바꿈 처리되도록 하고 싶었다. 하지만 계속해서 전체 section을 벗어나는 이슈를 발견했다.

 

문제 원인

flex의 wrap 속성은 제대로 먹히고 있었으나 ul에 높이를 지정해 놓은 것이 문제였다. main에서 project card 스타일링을 작업할 때는 한 화면에 요소가 두 개가 배치되기 때문에 카드의 높이를 일정하게 맞추고자 ul 요소에 높이를 지정해 줬었는데, 해당 스타일을 가져오면서 높이 지정을 미처 발견하지 못했다.

 

해결 방법

지정해줬던 높이를 auto로 변경해 주면 문제없이 전체 section 안에 해당 요소가 포함된다.

 

---

참고

[유튜브] Create Accessible Tabs with HTML, CSS & JS - Kevin Powell (링크)

[사이트] tailwindComponents - tabmenu (링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!