[코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기

코딩/CSS 실습

[코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기

haehaee 2026. 3. 23. 12:48

.box:nth-child(odd) { - 홀수

.box:nth-child(even) { - 짝수

flex-direction: row; - 디폴트

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      width:700px;
      display:flex; /* 플렉스 컨테이너 지정 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }              
    p {
      text-align: center;
      font-weight: bold;
    }
    
    /* Do it! 주축의 방향을 지정하는 #opt1 ~ #opt4 스타일 만들기 */
    #opt1{
      flex-direction: row;          /* 왼쪽에서 오른쪽으로 */ 
    }
    #opt2{
      flex-direction: row-reverse;   /* 오른쪽에서 왼쪽으로 */
    }
    #opt3{
      flex-direction: column;         /* 위에서 아래로 */
    }
    #opt4{
      flex-direction: column-reverse;  /* 아래에서 위로 */
    }   
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
   </div>
  <div class="container" id="opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>            
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      display:flex;  /* 플렉스 컨테이너 지정 */
      justify-content: row; /* 주축의 방향을 지정 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }
    /* Do it! 줄바꿈을 지정하는 #opt1 ~ #opt3 스타일 만들기 */
    #opt1{
      flex-wrap: nowrap;           /* 한 줄에 표시 */
    }
    #opt2{
      flex-wrap: wrap;             /* 여러 줄에 표시 */
    }
    #opt3{
      flex-wrap: wrap-reverse;     /* 시작점과 끝점 바꿔 여러 줄에 표시 */   
    } 
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
   </div>          
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      display:flex;
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:10px;
    }             
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }
    
    /* Do it! 주축의 방향과 줄바꿈을 한꺼번에 지정하는 #opt1, #opt2 스타일 만들기 */
    #opt1{
      flex-flow: row wrap;   /* 왼쪽에서 오른쪽, 여러 줄 */     
    }
    #opt2{
      flex-flow: row nowrap;  /* 왼쪽에서 오른쪽, 한 줄 */         
    }   
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>        
</body>
</html>

justify-content: space-between; -> 비트윈이랑 어라운드를 위주로 씀 끝에 마진 없어서 딱붙?
justify-content: space-around; -> 스페이스 비트윈이랑 같은데 시작과 끝에 마진을 줘서 감싼다
justify-content: space-evenly; -> 전체 항목을 같은 간격으로 배치

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      display:flex;  /* 플렉스 컨테이너 지정 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }                  
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }
    /* Do it! 주축의 정렬 방법을 지정하는 #opt1 ~ #opt5 스타일 만들기 */
    #opt1{
      justify-content: flex-start;    /* 주축 시작점 기준으로 배치 */
    }
    #opt2{
      justify-content: flex-end;      /* 주축 끝점 기준으로 배치 */  
    }
    #opt3{
      justify-content: center;       /* 주축 중앙 기준으로 배치 */
    }
    #opt4{
      justify-content: space-between;      /* 시작점과 끝점 배치 후 중간 항목은 같은 간격으로 배치 */ 
    } 
    #opt5{
      justify-content: space-around;       /* 전체 항목을 같은 간격으로 배치 */ 
    }  
    #opt6{
      justify-content: space-evenly;       /* 전체 항목을 같은 간격으로 배치 */ 
    }   
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container"  id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
   </div>
  <div class="container" id="opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>            
  <div class="container" id="opt5">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>    
  <div class="container" id="opt6">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>   
</body>
</html>

margin-right: auto; ->오른쪽을 100% 다 사용해라 -> 왼쪽 벽에 붙음

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      width:700px;
      display:flex; /* 플렉스 컨테이너 지정 */
      justify-content: flex-end;  /* 주축 정렬 - 끝점에 맞춰서 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }

    /* Do it! 첫번째 박스만 시작점으로 옮기도록 margin 설정하기 */
    #box1 {
      margin-right: auto; /* 오른쪽을 100% 다 사용해라 -> 왼쪽 벽에 붙음 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box" id="box1"><p>1</p></div>
    <div class="box" id="box2"><p>2</p></div>
    <div class="box" id="box3"><p>3</p></div>
  </div>          
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      width:700px;
      display:flex; /* 플렉스 컨테이너 지정 */
      justify-content: flex-end;   /* 주축 정렬 - 끝점에 맞춰서 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }

    /* Do it! 마지막 박스만 끝점으로 옮기도록 margin 설정하기 */
    #box3 {
      margin-left: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box" id="box1"><p>1</p></div>
    <div class="box" id="box2"><p>2</p></div>
    <div class="box" id="box3"><p>3</p></div>
  </div>          
</body>
</html>

align-items 수직정렬 관리

align-items: center; 가장 자주 쓰임

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      width:100%;
      height:150px;
      display:flex;
      justify-content: flex-start;  /* 주축 정렬 방법 - 시작점 기준 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:20px;
    }                                       
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }

    /* Do it! 교차축 정렬 방법을 지정하는 #opt1 ~ #opt5 스타일 만들기 */
    #opt1{
      align-items: flex-start;   /* 교차축 시작점 기준으로 배치 */
    }
    #opt2{
      align-items: flex-end;     /* 교차축 끝점 기준으로 배치 */     
    }
    #opt3{
      align-items: center;       /* 교차축 중앙 기준으로 배치 */
    }
    #opt4{
      align-items: baseline;      /* 문자 기준선에 맞춰 배치 */
    } 
    #opt5{
      align-items: stretch;       /* 항목을 늘려 교차축에 가득차게 배치 */
    }  
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>
  <div class="container" id="opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p style="font-size:14px;">2</p></div>
    <div class="box"><p style="font-size:25px;">3</p></div>
    <div class="box"><p style="font-size:10px">4</p></div>
  </div>       
  <div class="container" id="opt5">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
  </div>            
</body>
</html>

justify-content: center; 가로 중앙 정렬
align-items: center; 세로 중앙 정렬

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>버튼을 화면 중앙에 배치하기</title>
  <style>
    /* Do it! 버튼을 화면 중앙에 배치하기 */
    * {
      margin:0;
      box-sizing: border-box;
    }
    body {      
      background:url('images/bg5.jpg') no-repeat left top fixed;
      background-size:cover;      
      display: flex;      /* 플렉스 컨테이너 지정 */
      justify-content: center;  /* 주축 정렬 방법 - 중앙 정렬 */
      align-items: center;  /* 교차축 정렬 방법 - 중앙 정렬 */
      min-height:100vh;  /* 브라우저 높이의 100% */
    }
    button {
      background-color:#ccc;
      font-size: 1.2em; 
      padding:1em 2em;
      border:none;
      border-radius:5px;    
      box-shadow:1px 1px 2px #fff;  
    }
  </style>  
</head>
<body>
  <button>클릭!</button>             
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1 1">
  <style>
    /* Do it! 플렉스 항목 간의 간격을 10px로 적용하기 */
    .container {
      width:650px;
      height:150px;
      display:flex;
      align-items:center;
      background-color:#eee;
      border:1px solid #222;
      gap: 10px;   /* 플렉스 항목 간의 간격 10px */
    }                              
    .box {    
      padding: 10px;
      width: 80px;
    }   
    .box:nth-child(odd) {
      background-color: rgb(255, 187, 0);
    }           
    .box:nth-child(even) {
      background-color: rgb(35, 220, 35);
    }
    p {
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box""><p>5</p></div>
  </div>          
</body>
</html>

HTML

<!DOCTYPE html>
<html lang="ko">
<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>Our Team</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="css/mysoul.css">
</head>
<body>
  <div id="container">
    <h1>Our Team</h1>
    <div class="row">
      <div class="column">
        <div class="card">
          <div class="img-container">
            <img src="images/member-1.png">
          </div>
          <h2>James Turner</h2>
          <p>Founder</p>
          <div class="social">
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
            <a href="#"><i class="fa-brands fa-github"></i></a>
            <a href="#"><i class="fa-solid fa-envelope"></i></a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="img-container">
            <img src="images/member-2.png">
          </div>
          <h2>Luna Hall</h2>
          <p>Developer</p>
          <div class="social">
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
            <a href="#"><i class="fa-brands fa-github"></i></a>
            <a href="#"><i class="fa-solid fa-envelope"></i></a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <div class="img-container">
            <img src="images/member-3.png">
          </div>
          <h2>Hope Carpenter</h2>
          <p>Designer</p>
          <div class="social">
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin"></i></a>
            <a href="#"><i class="fa-brands fa-github"></i></a>
            <a href="#"><i class="fa-solid fa-envelope"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
}

#container {
  padding: 1em 7em;
}

h1 {
  font-size: 3.5em;
  text-align: center;
}

.column {
  width: 100%;
  padding: 0.5em 0;
}

.card {
  background-color: #fff;
  color: #222;
  padding: 3.5em 1em;
  border-radius: 0.6em;
  box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card .img-container {
  width: 8em;
  height: 8em;
  background-color: #a993ff;
  padding: 0.5em;
  border-radius: 50%;
  margin-bottom: 2em;
}

.card img {
  width: 100%;
  border-radius: 50%;
}

.card h2 {
  font-weight: 500;
}

.card p {
  font-weight: 300;
  text-transform: uppercase;
  margin: 0.5em 0 2em 0;
  letter-spacing: 2px;
}

.social {
  width: 50%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.card:hover {
  background: linear-gradient(#6045ea, #8567f7);
  color: #fff;
}

.card:hover a {
  color: #fff;
}

a {
  text-decoration: none;
  color: #222;
}

a:hover {
  color: #fff;
}

@media screen and (min-width: 1024px) { /* 1024px뒤에 ; 하나때문에 빨간글씨 떳었음*/
  #container {
    padding: 1em;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 2em 1em;
    text-align: center;
  }

  .card {
    padding: 5em 1em;
  }

  .column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0 1em;
  }
}

'코딩 > CSS 실습' 카테고리의 다른 글

[코드 연습장]CSS: 가상 요소와 다양한 CSS 함수(수학, 필터) 활용 (0)	2026.03.26
[코드 연습장]CSS: 다양한 고급 선택자를 활용한 폼(Form)과 리스트 디자인 (0)	2026.03.25
[코드 연습장]CSS: 상대 단위(em/rem)와 유동적 이미지(Fluid Image) 기초 실습 (0)	2026.03.23
[코드 연습장] CSS 배경 꾸미기 (background-size, linear-gradient 등) (0)	2026.03.20
[코드 연습장] margin, padding, left-top등 박스 모델과 레이아웃 제어 (0)	2026.03.19

현재글[코드 연습장] CSS: Flexbox 기초 정렬 실습 및 반응형 프로필 카드 만들기

haehaee 님의 블로그

haehaee 님의 블로그 입니다.

속성선택자, 반응형웹, 가상클래스, 플렉스박스, Til, css, flexbox, ui구현, CSStransform, 가상요소, 코드연습장, 코딩공부, CSS레이아웃, 프론트엔드, CSS함수, CSSTransition, 웹퍼블리싱, 미디어쿼리, rem단위, 반응형이미지,

Today :
Yesterday :

haehaee 님의 블로그