CSS 4일차 - 박스 모델을 구성하는 속성 / 지금까지 배운 html+css 정리

2025. 12. 9. 21:16ㆍ대우개발원 수업 내용/css로 웹 페이지 꾸미기

ppt 61~72

박스 모델의 성격과 display 속성
• 박스 모델의 성격
 블록 성격 : 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것
 인라인 성격 : 요소의 너비를 콘텐츠 크기만큼만 차지하는 것
 인라인 블록 성격 : 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 것

• display 속성 : HTML 태그가 기본으로 가지고 있는 박스 모델의 성격을 변경

display: block (블록 박스)

block

display: inline (인라인 박스)

inline

block

display: inline-block (인라인 블록 박스)

inline-block

block

구분 블록 박스 (display:block) 인라인 박스 (display:inline) 인라인 블록 박스 (display:inline-block)

줄바꿈	항상 새 라인에서 시작	새 라인에서 시작 못함 (줄 안에 배치)	새 라인에서 시작 못함 (줄 안에 배치)
배치	블록 박스 내부에만 배치	모든 박스 내 배치 가능	모든 박스 내 배치 가능
옆 요소 배치	옆에 다른 요소 배치 불가	옆에 다른 요소 배치 가능	옆에 다른 요소 배치 가능
width/height 조절	가능	불가능	가능
padding / border / margin	모두 조절 가능	margin-top/bottom 조절 불가	모두 조절 가능

 		ul {
			border: solid 1px #cccccc;        /* 경계선 */
			background-color: #eeeeee;        /* 배경 색상 */
			padding: 10px 30px;                    /* 패딩 */
			border-radius: 10px;              /* 모서리 둥글게 */
                        width: 400px ;
            
		}
		li {
			width: 100%;
			/* ul의 width의 400px의 100% */
			margin-top: 20px;                 /* 상단 마진 */
			line-height: 150%;                /* 줄 간격 */
		}

li의 width: 100%는 ul의 width 400px 꽉차게를 의미한다

box-sizing: content-box;

width, height 속성 적용 범위를 content 영역으로 제한

box-sizing: border-box;

width, height 속성 적용 범위를 border 영역으로 제한 => 박스 영역은 테두리까지

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    table, th, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    th, td { 
      padding:10px 20px; 
    }
    #container {
      width:600px;    /* 컨테이너의 너비 */
      border:none;    /* 테두리 없앰 */
      margin:0 auto;   /* 화면 중앙에 배치 */
    }
    .box {
      border:1px dotted #222;  /* 테두리 */
      padding:20px;  /* 패딩 */
      margin-bottom: 30px;  /* 마진 */
    }
    #description {
      border-top-left-radius:30px;   /* 왼쪽 위 모서리 라운딩 */
      border-top-right-radius:30px;  /* 오른쪽 위 모서리 라운딩 */
    }
    #package {
      border-bottom-left-radius:30px;  /* 왼쪽 아래 모서리 라운딩 */
      border-bottom-right-radius:30px;  /* 오른쪽 아래 모서리 라운딩 */
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="description" class="box">
      <h1>레드향</h1>
      <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
      <p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
      <p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
    </div>
    <div id="receipe" class="box">
      <h2>레드향 샐러드 레시피</h2>
      <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
      <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
      <ol>
        <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
        <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li>
        <li>드레싱 재료를 믹서에 갈아줍니다.</li>
        <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
      </ol>
    </div>   
    <div id="package" class="box">
      <h2>상품 구성</h2>
      <table>
        <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
          <col style="background-color:#eee;">
          <col>
          <col span="2" style="width:150px">
        </colgroup>
        <thead>
          <tr>
            <th>용도</th>
            <th>중량</th>
            <th>갯수</t>
            <th>가격</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">선물용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>35,000원</td>
          </tr>
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>52,000원</td>
          </tr>
          <tr>
            <td rowspan="2">가정용</td>
            <td>3kg</td>
            <td>11~16과</td>
            <td>30,000원</td>
          </tr>   
          <tr>
            <td>5kg</td>
            <td>18~26과</td>
            <td>47,000원</td>
          </tr>
        </tbody>        
      </table>      
    </div>
  </div>
</body>
</html>

✅ 전체 구조 먼저 설명

이 페이지는 크게 3개의 박스로 이루어져 있어:

상품 설명 영역 → #description
레시피 영역 → #receipe
상품 구성 영역(표) → #package

이 세 박스를 container 안에 넣어서
전체 페이지가 가운데 정렬되도록 만들었어.

또한 위쪽 박스는 위 모서리 둥글게,
아래 박스는 아래 모서리 둥글게 해서
3개가 연결된 하나의 카드처럼 보이도록 디자인한 것이 포인트야!

🟦 1. <style> 내부 CSS 설명

✔ (1) 기본 테이블 스타일

table, th, td {
  border:1px solid #ccc;
  border-collapse: collapse;
}
th, td { padding:10px 20px; }

테이블에 회색 선 생성
border-collapse: collapse : 테두리가 두겹이 아니라 한겹처럼 보이게 합침
셀(td/th)에 여백을 줘서 글자와 선 사이가 넉넉해짐

✔ (2) #container

#container {
  width:600px;
  border:none;
  margin:0 auto;
}

전체 박스를 감싸는 영역
width: 600px → 전체 내용 너비 고정
margin: 0 auto → 가운데 정렬

✔ (3) .box 공통 스타일

.box {
  border:1px dotted #222;
  padding:20px;
  margin-bottom: 30px;
}

세 박스 모두 공통적으로:

점선 테두리
안쪽 여백 20px
아래 박스와의 간격 30px

✔ (4) 모서리 둥글게 처리

#description {
  border-top-left-radius:30px;
  border-top-right-radius:30px;
}
#package {
  border-bottom-left-radius:30px;
  border-bottom-right-radius:30px;
}

맨 위 박스: 윗부분만 둥글게
맨 아래 박스: 아랫부분만 둥글게
→ 세 박스가 하나의 카드처럼 보이도록 만든 기법!

🟧 2. HTML 구조 상세 설명

⭐ 1) 상품 설명 박스 #description

<div id="description" class="box">
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
  ...
</div>

<h1> : 가장 큰 제목
<p> : 문단
<b> : 글자 굵게
<em> : 기울임체
<strong> : 강조, 굵고 의미적 강조

⭐ 2) 레시피 박스 #receipe

<div id="receipe" class="box">
  <h2>레드향 샐러드 레시피</h2>
  <p><b>재료 :</b> …</p>
  <ol> … </ol>
</div>

<h2> : 두 번째 크기의 제목
<ol> : 순서가 있는 리스트(자동 번호 붙음)
작성순서가 필요할 때 사용

⭐ 3) 상품 구성 박스 #package

여기서 **표(table)**가 등장함.

✔ 표의 기본 골격

<table>
  <caption>선물용과 가정용 상품 구성</caption>
  …
</table>

<caption> : 표 제목

✔ colgroup (표의 각 열 너비/스타일 지정)

<colgroup>
  <col style="background-color:#eee;">
  <col>
  <col span="2" style="width:150px">
</colgroup>

첫 번째 열 → 회색 배경
두 번째 열 → 기본
세 번째, 네 번째 열 → 너비 150px 적용

표 스타일을 열 단위로 제어하는 고급 기능!

✔ thead : 표의 제목 행

<thead>
  <tr>
    <th>용도</th>
    <th>중량</th>
    <th>갯수</th>
    <th>가격</th>
  </tr>
</thead>

<th>는 제목셀 → 굵게 + 가운데 정렬 기본 제공

✔ tbody : 실제 데이터

<tbody>
  <tr>
    <td rowspan="2">선물용</td>
    <td>3kg</td>
    <td>11~16과</td>
    <td>35,000원</td>
  </tr>
  …
</tbody>

여기서 중요한 것:

💡 rowspan="2"

"선물용"을 두 줄 합쳐서 하나로 표현하기 위해 사용함.

즉,

선물용 | 3kg | 11~16과 | 35,000원
        5kg | 18~26과 | 52,000원

이렇게 보이게 하는 기술!

🎯 이 코드의 핵심 요약

✔ 레드향 소개, 레시피, 상품 구성 → 3개의 .box로 분리

✔ container로 전체를 가운데 정렬

✔ 위쪽 박스만 위쪽을 둥글게 / 아래 박스만 아래쪽을 둥글게

✔ 표(table)에서 colgroup을 사용해 열 너비 & 배경 지정

✔ rowspan으로 선물용/가정용을 두 줄로 합침

→ HTML/CSS 과제에서 매우 잘 만든 정석 코드!

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Form Styling</title>
  <style>
    * {
      box-sizing: border-box;
      /*보더박스 기준!*/
      padding: 0;
      margin: 0;
    }
    body {
      background-color: #344a72;
      font-family: Raleway;
      color: white;
      line-height: 1.8;
    }
    a {
      text-decoration: none;
    }
    #container {
      width: 500px;
      margin: 30px auto;
      padding: 20px;
    }
    .form-wrap {
      background-color: white;
      color: #333;
      padding: 15px 25px;
    }
    h1, p {
      text-align: center;
    }
    label {
      /* display: block; */
      color: #666;
    }
    input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 20px;
    }
    button {
      /* display: block; */
      width: 100%;
      color: white;
      background-color: #49c1a2;
      padding: 10px;
      margin-top: 20px;
    }
    .bottom-text {
      font-size: 13px;
      margin-top: 20px;
    }
    footer {
      text-align: center;
      margin-top: 10px;
    }
    footer a {
      color: #49c1a2;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="form-wrap">
      <!--내용을 싸고 있음-->
      <h1>회원가입</h1>
      <p>회원 정보를 입력하세요</p>
      <form>
        <label for="first-name">First Name</label><br>
        <input type="text" name="firstName" id="first-name" />
            
        <label for="last-name">Last Name</label><br>
        <input type="text" name="lastName" id="last-name" />
            
        <label for="email">Email</label><br>
        <input type="email" name="email" id="email" />
            
        <label for="password">Password</label><br>
        <input type="password" name="password" id="password" />
            
        <label for="password2">Confirm Password</label><br>
        <input type="password" name="pasword2" id="password2" />
        
        <button type="submit" class="btn">회원가입</button>
     
        <p class="bottom-text">
          By clicking the Sign Up button, you agree to our
          <a href="#">Terms & Conditions</a> and
          <a href="#">Privacy Policy</a>
        </p>
      </form>
    </div>
    <footer>
      <p>Already have an account? <a href="#">로그인하러가기</a></p>
    </footer>
  </div>
</body>
</html>

📌 회원가입 Form 페이지 만들기 – HTML & CSS 완전 분석

이번 포스팅에서는 다음과 같은 깔끔한 회원가입 화면을 HTML과 CSS만으로 구현하는 방법을 소개합니다.

이 코드는 기본적인 Form 태그 구조, input 스타일링, 박스 정렬,
그리고 전체 화면 레이아웃 잡기까지 모두 포함하고 있어
HTML/CSS 학습 중인 분들에게 좋은 예제가 됩니다.

✨ 전체 코드 구조 요약

아래 페이지는 크게 3개의 영역으로 구성됩니다:

1️⃣ 전체를 감싸는 container
2️⃣ 실제 회원가입 화면(form-wrap)
3️⃣ 페이지 하단의 로그인 안내 footer

이제 각 부분을 상세하게 설명해볼게요.

🟦 1. 기본 설정 (CSS 초기화 + 배경 디자인)

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

✔ box-sizing: border-box

padding, border가 width 안에 포함되도록 해서 레이아웃 계산을 간단하게 만듦
모든 요소의 기본값을 동일하게 설정해주므로 흔히 “초기화 코드”로 사용됨

✔ padding / margin 0

브라우저 기본 여백 제거 → 정확한 디자인 작업 가능

body {
  background-color: #344a72;
  font-family: Raleway;
  color: white;
  line-height: 1.8;
}

✔ 화면 배경색 지정

진한 파란색 계열로 배경 지정 → 깔끔하고 안정적인 색감

✔ 전체 글꼴 설정

본문 기본 글씨체를 Raleway로 지정 (모던 느낌)

✔ line-height: 1.8

줄 간격을 넉넉하게 해서 읽기 편하게 만듦

🟧 2. 가운데 정렬 레이아웃 – #container

#container {
  width: 500px;
  margin: 30px auto;
  padding: 20px;
}

✔ width: 500px

회원가입 박스의 고정 너비

✔ margin: 30px auto

좌우 auto → 가운데 정렬
위아래는 30px 여백

✔ padding: 20px

container 안쪽 여백 확보 (글자들이 벽에 붙지 않도록)

🟨 3. 실제 회원가입 박스 – .form-wrap

.form-wrap {
  background-color: white;
  color: #333;
  padding: 15px 25px;
}

✔ 배경색을 흰색으로 설정

전체 배경이 파란색이기 때문에, 내용 영역은 대비가 잘 되도록 흰색 박스로 감쌌습니다.

✔ 글자색 #333

어두운 회색 → 검정보다 부드럽고 눈에 편안한 색

✔ padding

내용의 여백을 넉넉하게 주어 박스 형태를 더 깔끔하게 강조함

🟩 4. 제목과 부제목 정렬

h1, p {
  text-align: center;
}

"회원가입"과 그 아래 문구를 중앙 정렬하여
사용자에게 가장 먼저 눈에 들어오는 구조로 배치

🟫 5. 입력 폼(input) 스타일링

label {
  color: #666;
}
input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

✔ label

입력 항목 제목을 회색(#666)으로 → 시각적 위계 강화

✔ input 박스

width: 100% → 전체 줄을 채우도록
padding: 10px → 입력하기 편한 크기
border-radius: 5px → 부드러운 모서리
margin-bottom: 20px → 항목 간 넓은 간격

이 스타일링 덕분에 폼이 훨씬 깔끔하고 현대적인 느낌을 주게 됩니다.

🟧 6. 회원가입 버튼 스타일링

button {
  width: 100%;
  color: white;
  background-color: #49c1a2;
  padding: 10px;
  margin-top: 20px;
}

✔ width: 100%

버튼도 input과 동일하게 전체 폭을 차지

✔ 버튼 배경색 #49c1a2

신뢰감 + 모던 느낌의 초록색 계열

✔ padding: 10px

여백이 충분하여 클릭하기 쉬움

✔ margin-top 20px

입력창과 버튼 사이 적당한 간격

🟦 7. 약관 안내 텍스트

.bottom-text {
  font-size: 13px;
  margin-top: 20px;
}

회원가입 버튼 아래 표시되는 약관 안내 문구
작은 폰트 크기로 입력 요소보다 강조점을 낮춤

🟪 8. 하단 Footer – 로그인 링크 안내

footer {
  text-align: center;
  margin-top: 10px;
}
footer a {
  color: #49c1a2;
}

✔ footer는 form 바깥에 두어 독립된 영역으로 표시

로그인을 유도하는 문구는 페이지 가장 아래 배치하는 것이 UX적으로 좋음

✔ 링크 색상 통일 (#49c1a2)

버튼과 같은 색을 사용하여 디자인 일관성을 유지함

📌 9. HTML Form 구조 분석

<form>
  <label for="first-name">First Name</label>
  <input type="text" name="firstName" id="first-name" />
  ...
  <button type="submit">회원가입</button>
</form>

✔ <form> 태그

회원가입 정보를 서버로 보내기 위한 기본 구조

✔ <label for="id">

해당 id의 input과 연결되어 접근성이 좋아짐
(라벨 클릭 → input 포커스)

✔ <input type="text">, <input type="email">, <input type="password">

각 입력 항목의 종류를 명확히 지정
사용자가 입력하기 쉽고 브라우저 자동 검증도 작동함

✔ <button type="submit">

폼 제출 버튼

🎉 마무리 – 배운 점 정리

이 HTML/CSS 예제는 다음 핵심 기술들을 담고 있습니다:

✔ 박스를 가운데 정렬시키는 레이아웃 기법 (margin: auto)
✔ Form 태그의 기본 구조
✔ 입력창(input) 디자인
✔ 버튼 스타일링
✔ footer 영역 분리
✔ 전체 페이지를 카드 형태로 구성하는 디자인 패턴

회원가입 페이지 외에도
로그인 페이지, 프로필 입력 페이지 등 다양한 곳에 활용할 수 있는
기본기 탄탄한 폼 디자인입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>display 프로퍼티</title>
  <style>
    div {
      border: 2px solid yellowgreen;
      color: blue;
      background: aliceblue;
    }
    span {
      border: 3px dotted red;
      background: yellow;
    }
  </style>
</head>
<body>
  <h3>인라인, 인라인 블록, 블록</h3>
  <hr>
  나는 <div style="display: none;">
    div(none)</div>입니다.
  나는 <div style="display:block;">
    div(inline)</div>입니다.
  나는 <div style="display:inline-block; height: 50px;">
    div(inline-block)</div>입니다.
  나는 <div>div<span style="display: block;">
    span(block)</span>입니다.</div>  
</body>
</html>

아래 코드는 display 속성이 어떻게 요소의 배치 방식을 바꾸는지 보여주는 예시

✅ 1) inline 요소

(예: <span>, <a>, <b> 등)

특징

가로 방향으로만 공간 차지, 한 줄 안에서 흐르듯 배치됨.
width / height / margin-top / margin-bottom 적용 안 됨
→ 내용 크기만큼만 영역 차지.
줄 바꿈이 자동으로 일어나지 않고 옆 요소와 나란히 배치됨.

예시 느낌

나는 <span>span</span> 입니다.

→ 글자처럼 흐르는 방식.

✅ 2) block 요소

(예: <div>, <h1>, <p> 등)

특징

한 줄 전체(100%) 차지 → 자동으로 줄 바꿈 발생.
width / height 적용 가능
margin, padding 자유롭게 적용 가능

예시

나는
<div>div(block)</div>
입니다.

→ div는 항상 새로운 줄에서 시작하고 끝남.

✅ 3) inline-block 요소

(인라인 + 블록의 장점을 섞은 형태)

특징

한 줄에 나란히 배치(inline처럼) 된다.
동시에 width / height 적용 가능(block처럼).
배치의 유연성이 좋아 버튼, 메뉴 등에서 자주 사용됨.

예시

<div style="display:inline-block; height: 50px;">
  div(inline-block)
</div>

→ div가 줄 바꿈 없이 옆으로 배치되지만 크기 조절이 가능함.

✔ 코드에서 시각적으로 일어나는 일

① display:none

<div style="display: none;">div(none)</div>

→ 화면에 완전히 사라짐 (자리도 차지하지 않음)

② display:block

<div style="display:block;">div(inline)</div>

→ <div>는 원래 block임
앞뒤로 줄이 바뀌고 전체 너비를 차지함.

③ display:inline-block

<div style="display:inline-block; height: 50px;">
  div(inline-block)
</div>

→ 한 줄에 유지되면서 크기(height) 조절 가능

④ span + display:block

<span style="display: block;">span(block)</span>

→ 원래 inline인 span이 block으로 바뀌면서 새 줄에 배치

📌 한 줄 요약

display 줄바꿈 width/height 적용 특징

inline	❌ 안 됨	❌ 불가	텍스트처럼 흐름 속 배치
block	⭕ 됨	⭕ 가능	한 줄 전체 차지, 큰 박스
inline-block	❌ 안 됨	⭕ 가능	옆으로 배치 + 크기 조절 가능

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>속성</title>
  <style>
    * {
      box-sizing: border-box;
    }
    nav ul {
      list-style: none;
    }
    nav ul li {
      display: inline-block;
      border: 1px solid #222;
      padding: 20px;
      margin: 0 20px;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
  </nav>
</body>
</html>

이번 코드는 **메뉴(li)**에 display: inline-block을 적용한 사례

nav ul li {
  display: inline-block;
  border: 1px solid #222;
  padding: 20px;
  margin: 0 20px;
}

✅ inline-block을 사용한 이유(이 코드 기준 설명)

✔ 1) 메뉴가 가로로 나란히 배치됨 (inline처럼)

display: block이면 li가 한 줄 전체를 차지해서:

menu 1
menu 2
menu 3
menu 4

이렇게 세로로 내려가.

하지만 inline-block을 쓰면:

menu 1   menu 2   menu 3   menu 4

➡ 블록 요소가 가로 한 줄에 나란히 정렬됨.

✔ 2) width / height / padding / margin이 자유롭게 적용됨 (block처럼)

inline과 다르게 inline-block은 박스처럼 디자인이 가능해.

예를 들어 아래 속성들이 모두 잘 적용돼:

padding: 20px → 여백 잘 적용됨
margin: 0 20px → 메뉴 사이 간격 조절 가능
border → 박스 테두리 가능
width/height 지정 가능

📌 만약 inline이었다면?

padding은 위아래 적용이 이상하게 되고
width/height는 아예 적용조차 안 됨.

그래서 메뉴 박스처럼 생기지 않음.

✔ 3) inline-block은 줄바꿈 없이 박스 형태로 만들 수 있는 메뉴 디자인에 최적

웹사이트 메뉴(nav bar) 디자인에서는

가로 배치
일정한 여백
테두리나 배경색 적용
너비/높이 조절

이 필요하기 때문에 inline-block이 가장 적합.

이 때문에 메뉴 UI에서는 거의 기본처럼 쓰인다.

📌 inline / block / inline-block을 이 코드로 비교하면?

유형 가로 배치 width/height 적용 결과

inline	⭕ 가능	❌ 불가	글자처럼 붙어버리고 박스 디자인 불가
block	❌ 불가 (한 줄 전체 차지)	⭕ 가능	메뉴가 세로로 줄줄 내려감
inline-block	⭕ 가능	⭕ 가능	예쁜 네비게이션 메뉴 만들기 가능

✨ 결론 (이 코드가 inline-block을 쓴 이유)

👉 “가로로 나란히 배치하면서도

박스처럼 padding · margin · border를 줄 수 있기 때문!”

nav 메뉴처럼
**‘가로 정렬 + 박스 형태 디자인’**을 동시에 만족하려면
inline-block이 가장 적합한 속성이야.

<!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>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid #ccc;
    }

    div{
      /* HTML 요소의 오른쪽 5px, 아래쪽 5px 지점에 검은색 그림자(기본색) 생성 */
      box-shadow: 5px 5px; 

      /* HTML 요소의 오른쪽 5px, 아래쪽 5px 지점에 10px 만큼 흐릿한 검은색 그림자(기본색) 생성 */
      /* box-shadow: 5px 5px 10px;  */

       /* HTML 요소의 오른쪽 5px, 아래쪽 5px 지점에 10px 만큼 흐릿하고 10px 만큼 넓게 퍼진 검은색 그림자(기본색) 생성 */
      /* box-shadow: 5px 5px 10px 10px; */

       /* HTML 요소의 오른쪽 5px, 아래쪽 5px 지점에 10px 만큼 흐릿하고 10px 만큼 넓게 퍼진 회색 생성 */
      /* box-shadow: 5px 5px 10px 10px #ccc; */

      /* HTML 요소의 오른쪽 5px, 아래쪽 5px에 회색 그림자 생성 */
      /* box-shadow: 5px 5px #ccc;  */

      /* HTML 요소의 오른쪽 5px, 아래쪽 5px에 10px 만큼 흐릿하고 회색 그림자 생성 */
      /* box-shadow: 5px 5px 10px #ccc;  */
    }
  </style>
</head>
<body>
  <div>box shadow</div>
</body>
</html>

지금 코드는 **box-shadow(박스 그림자)**의 모든 주요 형태를 예제로 보여주는 코드

✔ box-shadow 기본 구조

box-shadow: 가로거리 세로거리 흐림정도 퍼짐정도 색상 inset;

순서대로 의미는:

가로 거리 (x-offset)
세로 거리 (y-offset)
흐림 정도 (blur-radius)
퍼짐 정도 (spread-radius)
색상 (color)
inset 여부 (내부 그림자 옵션)

✔ 코드에서 설명한 각 그림자 옵션

✅ 1. box-shadow: 5px 5px;

오른쪽 5px
아래쪽 5px
흐림 없음
기본 색: black

즉 그림자가 또렷함 → 그림자의 테두리가 선처럼 보임.

✅ 2. box-shadow: 5px 5px 10px;

blur(흐림)이 10px
그림자가 부드럽게 퍼진다.

흐림값이 들어가면 그림자가 자연스럽게 퍼지고 진하게 보이지 않음.

✅ 3. box-shadow: 5px 5px 10px 10px;

blur 10px + spread 10px

**spread(퍼짐)**이 추가되면 그림자의 영역 자체가 더 넓게 확장됨.

➡ “그림자가 전체적으로 더 커지고 존재감이 커짐”

✅ 4. box-shadow: 5px 5px 10px 10px #ccc;

퍼짐 + 흐림 + 색상 지정(#ccc = 연한 회색)

기본 검정 대신 회색 그림자를 씀.
자연스럽고 부드러운 웹 UI나 카드 디자인에서 많이 사용함.

✅ 5. box-shadow: 5px 5px #ccc;

흐림 없음
회색으로 바로 선 같은 그림자

➡ 또렷한 회색 그림자

✅ 6. box-shadow: 5px 5px 10px #ccc;

blur는 있지만 spread는 없음

흐림 있는 회색 그림자
➡ 가장 자연스럽고 현대적인 기본 그림자 스타일

✔ 한눈에 정리 (중요!)

옵션 설명

5px 5px	위치만 이동, 흐림 없음 → 선처럼 보임
5px 5px 10px	부드러운 그림자(흐림 추가)
5px 5px 10px 10px	그림자 자체가 더 넓어짐
5px 5px 10px 10px #ccc	회색 그림자 + 넓고 흐림
5px 5px #ccc	회색, 흐림 없음
5px 5px 10px #ccc	회색 + 부드러운 그림자

✔ 추가로 알아두면 좋은 것

✨ 1) inset 그림자 (내부 그림자)

box-shadow: inset 5px 5px 10px #999;

→ 바깥이 아니라 박스 안쪽으로 그림자가 생긴다.

✨ 2) 여러 개 그림자 사용 가능

box-shadow: 5px 5px 10px #333, -5px -5px 10px #eee;

2개 이상의 그림자도 가능.

'대우개발원 수업 내용 > css로 웹 페이지 꾸미기' 카테고리의 다른 글

CSS 6일차 - float / clear (1)	2025.12.11
CSS 5일차 background / position / z-index (0)	2025.12.10
CSS 3일차 (0)	2025.12.08
CSS 2일차 (0)	2025.12.05
CSS 1일차 (1)	2025.12.04

mycommit

태그

최근글

댓글

공지사항

아카이브

display: block (블록 박스)

display: inline (인라인 박스)

display: inline-block (인라인 블록 박스)

✅ 전체 구조 먼저 설명

🟦 1. <style> 내부 CSS 설명

✔ (1) 기본 테이블 스타일

✔ (2) #container

✔ (3) .box 공통 스타일

✔ (4) 모서리 둥글게 처리

🟧 2. HTML 구조 상세 설명

⭐ 1) 상품 설명 박스 #description

⭐ 2) 레시피 박스 #receipe

⭐ 3) 상품 구성 박스 #package

✔ 표의 기본 골격

✔ colgroup (표의 각 열 너비/스타일 지정)

✔ thead : 표의 제목 행

✔ tbody : 실제 데이터

💡 rowspan="2"

🎯 이 코드의 핵심 요약

✔ 레드향 소개, 레시피, 상품 구성 → 3개의 .box로 분리

✔ container로 전체를 가운데 정렬

✔ 위쪽 박스만 위쪽을 둥글게 / 아래 박스만 아래쪽을 둥글게

✔ 표(table)에서 colgroup을 사용해 열 너비 & 배경 지정

✔ rowspan으로 선물용/가정용을 두 줄로 합침

📌 회원가입 Form 페이지 만들기 – HTML & CSS 완전 분석

✨ 전체 코드 구조 요약

🟦 1. 기본 설정 (CSS 초기화 + 배경 디자인)

✔ box-sizing: border-box

✔ padding / margin 0

✔ 화면 배경색 지정

✔ 전체 글꼴 설정

✔ line-height: 1.8

🟧 2. 가운데 정렬 레이아웃 – #container

✔ width: 500px

✔ margin: 30px auto

✔ padding: 20px

🟨 3. 실제 회원가입 박스 – .form-wrap

✔ 배경색을 흰색으로 설정

✔ 글자색 #333

✔ padding

🟩 4. 제목과 부제목 정렬

🟫 5. 입력 폼(input) 스타일링

✔ label

✔ input 박스

🟧 6. 회원가입 버튼 스타일링

✔ width: 100%

✔ 버튼 배경색 #49c1a2

✔ padding: 10px

✔ margin-top 20px

🟦 7. 약관 안내 텍스트

🟪 8. 하단 Footer – 로그인 링크 안내

✔ footer는 form 바깥에 두어 독립된 영역으로 표시

✔ 링크 색상 통일 (#49c1a2)

📌 9. HTML Form 구조 분석

✔ <form> 태그

✔ <label for="id">

✔ <input type="text">, <input type="email">, <input type="password">

✔ <button type="submit">

🎉 마무리 – 배운 점 정리

✅ 1) inline 요소

✅ 2) block 요소

✅ 3) inline-block 요소

✔ 코드에서 시각적으로 일어나는 일

① display:none

② display:block

③ display:inline-block

④ span + display:block

📌 한 줄 요약

✅ inline-block을 사용한 이유(이 코드 기준 설명)

✔ 1) 메뉴가 가로로 나란히 배치됨 (inline처럼)

✔ 2) width / height / padding / margin이 자유롭게 적용됨 (block처럼)

✔ 3) inline-block은 줄바꿈 없이 박스 형태로 만들 수 있는 메뉴 디자인에 최적

📌 inline / block / inline-block을 이 코드로 비교하면?

✨ 결론 (이 코드가 inline-block을 쓴 이유)