최원종의 개발 블로그

HTML_CSS 11강 (Flexbox 심화 & 종합) 본문

HTML_CSS/HTML_CSS

HTML_CSS 11강 (Flexbox 심화 & 종합)

chl6698 2026. 4. 23. 12:20

Flexbox 심화: 아이템 크기 제어

이전 강의까지 배운 것: display:flex, justify-content, align-items, flex-wrap 

이번 핵심: **flex 아이템의 크기를 제어하는 3가지 속성**
속성 역할값  예시
flex-grow 남는 공간을 얼마나 차지? 0(안먹음), 1(전부)
flex-shrink 공간 부족 시 얼마나 줄어듦? 0(안줄어듦), 1(줄어듦)
flex-basis 기본 크기는? 296px, auto
flex (단축) 위 3개를 한번에 flex: 0 0 296px

 

flex 단축 속성 해석법

flex: 0 0 296px;
/* 0 → grow: 남는 공간 안먹음
   0 → shrink: 줄어들지 않음
   296px → basis: 항상 296px 유지
   결과: 고정폭 사이드바에 딱! */

flex: 1;
/* 1 → grow: 남는 공간 전부 차지
   결과: 나머지 공간 전부 차지하는 메인에 딱! */

11강 GitHub 프로필 페이지 만들기

HTML코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <header>
      <span class="gh-logo">GitHub</span>
      <input class="gh-search" type="text" placeholder="Search" />
    </header>
    <main>
      <section class="profile-layout">
        <aside class="sidebar">
          <img
            class="avatar"
            src="https://picsum.photos/seed/ghprofile/200/200"
            alt=""
          />
          <h2 class="username">Choi-coding</h2>
          <p class="user-repo"><a href="#">@Choi-coding</a></p>
          <p class="biography">풀스택 개발자를 꿈꾸며 매일 커밋합니다</p>
          <p><strong>42</strong> followers <strong>18</strong> following</p>
          <div class="skills">
            <span class="skill-badge skill-html">HTML</span>
            <span class="skill-badge skill-css">CSS</span>
            <span class="skill-badge skill-js">JavaScript</span>
          </div>
        </aside>
        <section class="main-content">
          <h3>잔디밭 (Contribution Graph)</h3>
          <div class="grass-grid">
            <!-- 라인1 -->
            <div class="grass level-2"></div>
            <div class="grass level-0"></div>
            <div class="grass level-1"></div>
            <div class="grass level-0"></div>
            <div class="grass level-1"></div>
            <!-- 라인 2 -->
            <div class="grass level-1"></div>
            <div class="grass level-0"></div>
            <div class="grass level-2"></div>
            <div class="grass level-0"></div>
            <div class="grass level-2"></div>
            <!-- 추후 라인 3추가 -->
            <div class="grass level-1"></div>
            <div class="grass level-2"></div>
            <div class="grass level-0"></div>
            <div class="grass level-1"></div>
            <div class="grass level-0"></div>
            <!--  -->
            <div class="grass level-1"></div>
            <div class="grass level-0"></div>
            <div class="grass level-2"></div>
            <div class="grass level-0"></div>
            <div class="grass level-2"></div>
            <!--  -->
            <div class="grass level-1"></div>
            <div class="grass level-2"></div>
            <div class="grass level-0"></div>
            <div class="grass level-1"></div>
            <div class="grass level-0"></div>
          </div>
          <h3>저장소(Repositories)</h3>
          <div class="repo-card">
            <h4><a href="">html-css-clone</a></h4>
            <p>HTML/CSS 클론 코딩 프로젝트</p>
            <p><span class="lang-dot lang-html"></span> HTML ⭐ 112</p>
          </div>

          <div class="repo-card">
            <h4><a href="">html-css-clone</a></h4>
            <p>HTML/CSS 클론 코딩 프로젝트</p>
            <p><span class="lang-dot lang-js"></span> HTML ⭐ 112</p>
          </div>
        </section>
      </section>
    </main>
  </body>
</html>

CSS코드

/* CSS 변수 */
:root {
  --gh-dark: #0d1117;
  --gh-card: #161b22;
  --gh-green: #238636;
  --gh-blue: #68a6ff;
  --gh-border: #30363d;
}

/* 1단계 리셋 + 전역스타일 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--gh-dark);
  color: #c9d1d9;
  font-family: Arial, Helvetica, sans-serif;
}

/* 2단계 레이아웃( 2단 구조 핵심) */

header {
  display: flex;
  padding: 15px 20px;
  align-items: center;
  gap: 20px;
  background-color: var(--gh-card);
}

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

.gh-search {
  padding: 8px;
  background-color: var(--gh-dark);
  color: white;
  border-radius: 6px;
  border: 1px solid var(--gh-border);
}
.profile-layout {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  gap: 24px;
}
.sidebar {
  flex: 0 0 296px;
}

.main-content {
  flex: 1;
}

/* 3단계 컴포넌트 */
.avatar {
  width: 80%;
  border-radius: 50%;
  border: 1px solid var(--gh-border);
}

.username {
  font-size: 24px;
  color: white;
  margin-bottom: 15px;
}
.user-repo a {
  font-size: 15px;
  color: var(--gh-blue);
}

.biography {
  margin: 10px 0;
  font-size: 14px;
}

.skill-badge {
  display: inline-block;
  font-size: 12px;
  margin: 4px;
  padding: 4px 10px;
  border-radius: 20px;
}

.skill-badge.skill-html {
  background-color: red;
  color: white;
}
.skill-badge.skill-css {
  background-color: blue;
  color: white;
}
.skill-badge.skill-js {
  background-color: yellow;
  color: black;
}

.main-content h3 {
  margin: 20px 10px;
}

.grass-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 15px 0;
  max-width: 75px;
}
.grass {
  width: 12px;
  height: 12px;
  background-color: var(--gh-green);
}

.level-0 {
  background-color: var(--gh-card);
}
.level-1 {
  background-color: #0e4429;
}
.level-2 {
  background-color: #238636;
}
.repo-card {
  border: 1px solid var(--gh-border);
  border-radius: 6px;
  padding: 16px;
  margin-top: 10px;
}

.repo-card h4 a {
  color: var(--gh-blue);
  text-decoration: none;
}

.lang-dot {
  width: 12px;
  height: 12px;
  background-color: aqua;
  display: inline-block;
  border-radius: 6px;
}

.lang-html {
  background-color: red;
}

.lang-js {
  background-color: yellow;
}
/* 반응형처리 */
@media (max-width: 768px) {
  .profile-layout {
    flex-direction: column;
  }
}

.sidebar {
  flex: none;
  text-align: center;
}
.avatar {
  max-width: 200px;
  margin: 0 auto;
  display: block;
}
더보기

결과화면

'HTML_CSS > HTML_CSS' 카테고리의 다른 글

HTML_CSS 10강 (배달의민족 모바일 메뉴 만들기)  (0) 2026.04.22
HTML_CSS 9강 (Transition & 인터랙션)  (1) 2026.04.22
HTML_CSS 8강 (Position & z-index)  (0) 2026.04.22
HTML_CSS 7강 (핵심 개념 - 자주 쓰는 CSS 레이아웃 패턴 7가지)  (1) 2026.04.22
HTML_CSS 6강 (Flexbox & 배경)  (0) 2026.04.22
'HTML_CSS/HTML_CSS' Related Articles more