inflearn logo
강의

Course
Instructor

A Full-Stack Restaurant Guide Project for Non-Majors!: Front, Back-end, and Deployment

css 적용 중 강의대로 적용되지 않아 질문 드립니다

346

ryucream612

3 asked

0

맛집 지도 뼈대 잡고 반응형 처리하기 -> 파트를 들으며 수강 중이었는데요,

버튼들이 이렇게 4,4개로 정렬되지 않아서 질문 드립니다.

width: 25%를 했을 땐 위와 같이 정렬되고 (모든 너비에서 똑같습니다) 24%를 하면 4개 4개로 되긴 하는데 너무 찝찝해서요.. 분명 똑같이 따라 친 것 같은데 강의를 다시 돌려보아도 찾기가 힘드네요.. 아래에 제 css와 html 코드를 올려두겠습니다 ㅠㅠ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>맛집지도</title>
    <meta name="author" content="동네코딩" />
    <meta name="description" content="맛집지도 서비스" />
    <meta
      name="keywords"
      content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버"
    />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav>
      <div class="inner">

        <div class="nav-container">
          
          <h1 class="nav-title">맛집지도</h1>
          <button class="nav-contact">Contact</button>

        </div>

      </div>
    </nav>

    <main>
      <section id="category">
        <div class="inner">
          <div class="category-container">
            <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2>
            <div class="category-list">
              <button class="category-item">한식</button>
              <button class="category-item">중식</button>
              <button class="category-item">일식</button>
              <button class="category-item">양식</button>
              <button class="category-item">분식</button>
              <button class="category-item">구이</button>
              <button class="category-item">회/초밥</button>
              <button class="category-item">기타</button> 
            </div>
          </div>
          
        <!-- 카테고리 -->
        
        </div>
      </section>
      <div id="map">
        <!-- 카카오지도 -->
      </div>
    </main>



  </body>
</html>

 

@font-face {
    font-family: "KyoboHandwriting2020A";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff")
      format("woff");
    font-weight: normal;
    font-style: normal;
  }
  
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 10px;
    font-family: "KyoboHandwriting2020A";
  }

  nav { 
    background-color: rgb(212, 210, 210);
  }

  .nav-container {
    padding: 1rem 0;
    display: flex;
    flex-direction: row; 
    /* row로 결정되어있는데 가시적으로 적어줌 */
    justify-content: space-between;
    align-items: center;
  }

  .nav-title {
    font-size: 3rem;
  }

  .nav-contact {
    font-size: 2.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
  }

  .category-title {
    font-size: 3.5rem;
  }

  .category-item {
    width: 25%;
    height: 5rem;
    background:none;
    border:none;
    font-family: inherit;
    font-size: 1.6rem;
  }

  .inner {
    padding: 0 1.5rem;
  }

@media all and (min-width: 1024px) {
    .inner {
        max-width: 1024px;
        margin: 0 auto;
    }
}

HTML/CSS javascript aws git mysql rest-api github

Answer 2

1

Jay

안녕하세요.

 

음, 저도 올리신 코드 그대로 돌려봤는데 잘 안되는 것 같네요.

이럴때 해결책은 그리드를 쓰는 것입니다.

강의에선 다루지 않아서.. 조금 생소하실 수 있지만 말그대로 격자형태의 배치를 하는 기능입니다.

아래 css 수정을 해보면 좋을 것 같습니다.

 

감사합니다.

.category-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개의 열로 그리드 설정 */
    gap: 0.5rem; /* 열 사이의 간격 설정 (원하는 크기로 조정) */
}

 .category-item {
    width: 100%; /* grid 내부에서 100%로 할당하도록 */
    height: 5rem;
    background:none;
    border:none;
    font-family: inherit;
    font-size: 1.6rem;
  }

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. ryucream612님, 맛집 지도 강의를 들으시면서 겪고 계신 반응형 처리와 관련해 질문해주셨네요. ryucream612님의 상황과 유사하게 카테고리 버튼 너비 문제로 고민하셨던 다른 수강생의 사례를 찾았습니다. 해당 사례에서는 “.category-item”의 너비를 25%로 설정했을 때 예상한 대로 4개씩 배열되지 않는 문제를 경험했는데, 문제의 원인과 해결 방법이 명확하게 제공되었습니다.

대부분의 경우, 이러한 문제는 패딩, 마진 혹은 기타 요소의 크기 때문에 발생할 수 있습니다. 예상대로 정렬되지 않은 원인을 파악하기 위해선 상위 컨테이너(“.category-container” 또는 “.category-list”)의 패딩이나 마진 설정을 점검해봐야 할 수 있습니다. 또한, .category-item에 적용된 width: 25%; 외에도 다른 스타일 속성(예: box-sizing: border-box;)이 영향을 줄 수 있음을 고려해야 합니다.

이와 관련된 질문 중 “버튼 너비 관련”에서도 유사한 문제 해결에 대한 지식공유자님의 조언을 볼 수 있습니다. 지식공유자님은 코드 전문을 볼 수 있다면 더 자세하게 도와드릴 수 있다고 하시니, 가능하시다면 해당 게시글에 ryucream612님의 코드 상황을 댓글로 남겨보시는 것도 좋을 것 같습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

live server가 안 떠요..

0

77

1

카카오맵 API 가 안뜹니다...

0

663

2

카카오맵API 지도 관련

0

169

1

Putty에서 nginx를 vi로 수정할때 오류

0

277

3

mysql과 선생님의 깃허브 코드연결

0

182

1

nodemon 실행오류

0

226

2

Azure 서버로 구축하고 작업하는 방법 알 수 있을까요?

0

254

2

강의를 잘 활용하는 법 추천 부탁드립니다.

0

282

1

MysqlWorkbench 접속문제

0

299

1

전체 핀이 조회되지 않습니다.

0

257

1

빅데이터 처리관련

1

279

1

섹션5의 2번째 강의 질문-setMap 비동기 처리 이유

0

233

1

PM2 EADDRINUSE 에러

0

404

2

인스턴스 중단 후 재시작

0

277

1

이미지 부분에 cctv 영상을 넣고 싶은데요.

0

580

2

노션 링크가 어디있나요 ?

1

307

1

axios 이후 마커 오류

0

289

0

service nginx restart 에러

0

709

1

섹션10 배포하기 unbuntu에서 root경로가 안뜹니다ㅠㅠ

0

497

3

선생님 추가적으로 새로운 페이지를 만드려고 하는데요...

0

244

1

코드 질문 드립니다!

0

223

1

혹시 강의자료 노션 내리셨나요?

0

234

1

노드몬 에러 참조하세요

0

356

1

깃허브에서 다운받지 않고 생성하는 방법 여쭤보고 싶습니다.

0

316

1