Flexbox와 Grid를 공부하고나서 네비바와 카드 레이아웃을 만드는걸 해보려고 함

우선은 css파일을 불러와야 하니

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="navbar_card_layout_practice.css" />
  </head>

 

다음으로는 상단바 부터 만들어 보겠음

<!-- 상단 네비게이션 바 -->
    <nav class="navbar">
      <div class="logo">MyPortfolio</div>
      <ul class="nav-menu">
        <li><a href="#">홈</a></li>
        <li><a href="#">소개</a></li>
        <li><a href="#">포트폴리오</a></li>
        <li><a href="#">연락처</a></li>
      </ul>
    </nav>

리스트 형식으로 생성을 했으니 이제 원하는 스타일로 스타일을 추가해보면?

/* 네비게이션 부분 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 15px 30px;
}

.logo {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: white;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #0066cc;
}

이렇게 바뀐 것을 볼 수 있음. 아 참고로 `a:hover`는 홈 소개 등등 카테고리에 마우스가 올라가면 파란색으로 변하는 거임 혹시나..ㅇㅇ

다음으로는 카드 레이아웃을 만들건데. 이미지를 넣으니 역시 매우 커짐.. 처음엔 보기 힘들었음

<!-- 카드 레이아웃 -->
    <div class="card-container">
      <div class="card">
        <img src="./src/card-img.jpeg" alt="임시 이미지" class="card-img" />
        <h3>Swift 앱</h3>
        <p>iOS 날씨 앱 프로젝트</p>
        <button>보기</button>
      </div>

뭐 대충 이렇게 됨.. 이렇게 해서 3개를 같은 형식으로 만들어두겠음. 보기 쉽게 하나만 올려놨음

다음으로는 그럼 카드 레이아웃 부분에 CSS가 들어가야함

/* 개별 카드 */
.card {
  width: 400px;
  background: beige;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card h3 {
    padding: 15px 20px 5px;
    margin: 0;
    font-size: 20px;
}

.card p {
    padding: 0 20px;
    color: #666;
    line-height: 1.6;
}

.card button {
    margin: 15px 20px 20px 20px;
    padding: 10px 20px;
    background-color: #0066cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.card button:hover {
    background-color: #0052a3;
}

각각의 요소들에 속성을 지정하고 여백을 지정했음.

완성본은 이렇게 나왔음.

어디서 많이본 광고 형식같은 느낌이 든다..

'React > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] CSS 정리  (0) 2025.11.26
[HTML/CSS] 자기소개 페이지 꾸며보기  (0) 2025.11.26
[HTML] form태그와 input태그  (0) 2025.11.21
[HTML] div, span 태그 & 클래스와 아이디  (0) 2025.11.21
[HTML] 간단한 자기소개 페이지 만들어보기  (0) 2025.11.20

티스토리툴바