CSS 3일차

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

반응형

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>상속(inherit)</title>
  <style>
    /* p {color: black;} */
    div{
      color: yellowgreen;
      /* p {color: black;} */
    }
  </style>
</head>
<body>
  <div>
    <p>inherit</p>
  </div>
</body>
</html>

상속(inheritance) 관점에서 이 코드는 CSS 속성이 부모에서 자식으로 어떻게 전달되는지를 보여주는 가장 기본 예시

✅ 코드 핵심 구조

<div>
  <p>inherit</p>
</div>

여기서 p 태그는 div 안에 포함된 자식 요소다.

그리고 CSS는 이렇게 되어 있음:

div {
  color: yellowgreen;
  /* p {color: black;} */
}

✅ 상속(Inheritance)이 적용되는 이유

CSS의 color 속성은 상속되는 속성이기 때문에
부모 요소(div)에서 지정한 color: yellowgreen이
자식 요소인 <p>에도 그대로 전달된다.

그래서 p 태그의 글자색도 yellowgreen으로 보인다.

✅ 주석 처리의 의미

✔ /* p {color: black;} */가 주석이라 비활성화됨

만약 이 코드가 주석이 아니었다면 p의 color가 black으로 설정되어
부모(div)의 색상 상속을 덮어썼을 것임.

하지만 지금은 주석 처리되어 있어 p에는 직접적인 color 지정이 없기 때문에
→ 부모 div의 color를 상속받는다.

✨ 정리 — 상속 개념만!

  • div는 color: yellowgreen을 가진다.
  • p는 별도의 color 설정이 없다.
  • color는 상속 가능한 속성이다.
  • 따라서 p는 부모 div로부터 yellowgreen을 상속받는다.

➡ 결과: 화면에 표시되는 텍스트 "inherit"는 yellowgreen 색으로 출력된다.

.variant{font-variant: small-caps;}

Lorem ipsum dolor sit.

.variant{font-variant: small-caps;}
	<p class="variant">Lorem ipsum dolor sit.

 

✅ 1) .variant { font-variant: small-caps; } 설명

.variant {
  font-variant: small-caps;
}

이 CSS는 클래스 이름이 variant인 요소에 대해
**글꼴 변형(font-variant)**을 적용하라는 의미야.

✔ small-caps란?

  • 일반 소문자를 기본 대문자보다 약간 작은 대문자 형태로 표시함
  • 원래 대문자는 그대로 두고
  • 소문자만 대문자처럼 보이되 크기만 작게 렌더링된다.

예시 비교:

텍스트 원본 small-caps 적용 시

Lorem ipsum LOREM IPSUM (대문자처럼 보임 but 소문자 부분은 약간 더 작음)

✅ 2) HTML 코드 설명

<p class="variant">Lorem ipsum dolor sit.</p>
  • <p> 태그에 variant 클래스가 지정됨
  • 그래서 위 CSS 규칙이 적용됨
  • 결과적으로 이 문장은 small-caps 형태로 표시됨

✨ 화면에 표시되는 모습 (대략)

원본 텍스트:

Lorem ipsum dolor sit.

small-caps 적용 후:

LOREM IPSUM DOLOR SIT.

하지만 완전한 대문자 변환이 아니라
기존 소문자보다 약간 작은 대문자로 렌더링된 것이 특징.

💡 폰트에 따라 small-caps 효과가 다르게 보이는 이유

  • small-caps는 폰트가 해당 글꼴 정보를 가지고 있어야 가장 예쁘게 표시됨
  • Times New Roman, Georgia 같은 서체는 잘 지원
  • 일부 서체는 small-caps가 없어 브라우저가 억지로 변형해서 표시할 수도 있음 → 덜 예쁨

✨ 요약

용어의미
baseline 글자가 놓이는 기준선
ascent 글자가 위로 올라가는 높이
descent 글자가 아래로 내려가는 높이
top/bottom 브라우저가 줄(rendering line)을 구성할 때 잡는 전체 범위
font-size 글자의 기본 크기(ascent + descent 중심)
line-height 줄 전체의 높이(줄 간 간격) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model</title>
  <style>
    p{
      /* margin-bottom: 20px; */
      /* margin: 20px; */
      margin: 20px 15px 10px 5px;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia cumque aspernatur odio? Quaerat voluptatem temporibus deserunt quisquam libero maxime rerum quam ex impedit? Ad quidem pariatur optio deserunt, quam cumque.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni ipsam est, quidem possimus facilis iusto perspiciatis fugit cumque vero. Placeat perferendis recusandae aliquid modi deleniti consequatur ipsam perspiciatis velit odit.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model</title>
  <style>
    p{
      /* margin-bottom: 20px; */
      /* margin: 20px; */
      /* margin: 20px 15px 10px 5px; */
      margin: 20px 15px 10px;
      /* top bottom right left 순으로 적용되고 지금 left가 없기 때문에 자동으로 right랑 같게 적용된다 */
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia cumque aspernatur odio? Quaerat voluptatem temporibus deserunt quisquam libero maxime rerum quam ex impedit? Ad quidem pariatur optio deserunt, quam cumque.</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni ipsam est, quidem possimus facilis iusto perspiciatis fugit cumque vero. Placeat perferendis recusandae aliquid modi deleniti consequatur ipsam perspiciatis velit odit.</p>
</body>
</html>

margin 겹침 현상 : 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것

margin에서 위아래는 영역이 겹치지만 양쪽으로는 겹치치 않는다

 

위 아래가 마진이 다를경우에는 사이즈가 좀 더 큰 마진으로 적용된다

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo veniam alias odio enim minus natus obcaecati sapiente, dolorem ipsum magni adipisci impedit totam sunt itaque quaerat velit sint! Ut?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet repellat facere, quisquam mollitia necessitatibus cumque provident, quae consequuntur nam suscipit ratione, quod inventore doloribus dolores! Incidunt aperiam similique hic.

박스 모델

박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩 (padding), 박스의 테두리(boeder) , 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model</title>
  <style>
    h1{
      padding: 10px;
      border-bottom: 5px solid black;
    }
    p{
      /* float: left;
      width: 200px; */
      /* margin-bottom: 20px; */
      /* margin: 20px; */
      margin: 20px 15px 10px 5px;
      /* margin: 20px 15px 10px; */
      /* top bottom right left 순으로 적용되고 지금 left가 없기 때문에 자동으로 right랑 같게 적용된다 */
      /* margin: 20px 15px; */
      /* margin에서 위아래는 영역이 겹치지만 양쪽으로는 겹치치 않는다 */
      /* border-color:aqua;
      border-style: outset;
      border-width: thick thin thin thick; */
      /* border-top: 10px outset rgb(101, 183, 243) */
    }
    .box {padding: 10px;
      border: 3px dotted blue; /*모든 테두리를 3px 파란색 점선*/
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo veniam alias odio enim minus natus obcaecati sapiente, dolorem ipsum magni adipisci impedit totam sunt itaque quaerat velit sint! Ut?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro amet repellat facere, quisquam mollitia necessitatibus cumque provident, quae consequuntur nam suscipit ratione, quod inventore doloribus dolores! Incidunt aperiam similique hic.</p>
  <hr>

  <h1>박스 모델</h1>
  <p class="box">박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩 (padding), 박스의 테두리(boeder)
    , 그리고 여러 박스 모델 간의 여백인 마진(margin) 등의 요소로 구성되어 있습니다.
  </p>
</body>
</html>

 

✅ 전체 코드 구성 요약

HTML에서는 <p> 두 개와 <h1>, 그리고 .box 클래스를 가진 <p> 하나가 있고,
CSS에서는 각각 margin, padding, border 등을 바꿔서 박스 모델을 실습하는 구조야.

🔍 CSS 설명

1) h1 스타일

h1{
  padding: 10px;
  border-bottom: 5px solid black;
}

✔ 역할

  • 제목(h1) 자체의 **안쪽 여백(패딩)**을 10px 준다.
  • 제목 아래에 굵고 검정색인 하단(border-bottom) 테두리를 그린다.

즉, 제목 텍스트가 더 넉넉하게 보이고
아래에 굵은 밑줄처럼 “구분선”이 생긴다.

2) p 태그의 margin 실습

p{
  margin: 20px 15px 10px 5px;
}

✔ 이 값은 margin 4방향 지정

방향 값

위(top) 20px
오른쪽(right) 15px
아래(bottom) 10px
왼쪽(left) 5px

즉, 단락(text block)이 상하좌우로 서로 떨어지게 배치된다.

💡 주석 안의 설명들은 박스 모델 학습용

예를 들어:

/* margin: 20px 15px 10px; */
/* top bottom right left 순으로 적용되고 지금 left가 없기 때문에 자동으로 right랑 같게 적용된다 */

→ 세 값만 주면 left는 right 값과 동일하게 적용된다는 설명.

/* margin에서 위아래는 영역이 겹치지만 양쪽으로는 겹치지 않는다 */

→ 수직 마진(margin-top, margin-bottom)은 '겹침(margin collapsing)'이 일어난다
→ 하지만 좌우 마진은 절대 겹치지 않는다.

마진의 핵심 원리까지 포함한 학습용 주석들이야.

3) .box 클래스

.box {
  padding: 10px;
  border: 3px dotted blue; /*모든 테두리를 3px 파란색 점선*/
}

✔ 역할

  • 텍스트 주위로 안쪽 여백(padding)을 10px 부여.
  • 파란색 점선(dotted) border 3px을 박스 전체에 적용.

즉, .box 단락은 박스 모델의 구조가 한눈에 보이도록 시각적으로 강조된 형태가 된다.

🔍 HTML 구조 설명

<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<hr>
<h1>박스 모델</h1>
<p class="box">박스 모델은 ...</p>

✔ 첫 번째·두 번째 <p>

  • margin 적용만 되어 있음.
  • 서로 사이에 마진이 “겹침”되어 위아래 간격이 합쳐져 보인다.

✔ <h1>

  • padding 적용, border-bottom 적용 (제목 구분선 효과)

✔ <p class="box">

  • padding + border가 적용된 박스.
  • 박스 모델의 구성요소(콘텐츠 → padding → border → margin) 를 직접 눈으로 확인할 수 있다.

🎯 결과적으로 이 예제에서 배우는 것

  1. margin 4방향 값의 의미 (top, right, bottom, left)
  2. margin이 1개/2개/3개 값일 때의 동작
  3. margin collapsing(마진 겹침) 개념
  4. padding과 border가 박스의 전체 크기에 영향을 주는 방식
  5. h1 밑줄(border-bottom) 활용
  6. 박스 모델 구조 시각화

이 코드는 CSS 박스 모델을 실습하는 수업에서 가장 표준적인 예시라고 보면 돼.

@import url('https://fonts.googleapis.com/css2?family=Diphylleia&display=swap');
* {
  font-family: "Diphylleia", serif;
  font-weight: 400;
  font-style: normal;
}

/* * {
  font-family: BatangChe, "Times New Roman", serif;
} */


p {
  text-align: center;
  color: blue;
  font-size: 1em;
  /* 2em -> 기본 브라우저 폰트의 2배 */
  font-weight: bolder;
  font-style: oblique;
  line-height: 2;
}

아래 CSS는 웹폰트 적용 + 전체 폰트 설정 + p 태그의 텍스트 스타일 지정을 단계별로 보여주는 예제

✅ 1) Google Fonts 불러오기

@import url('https://fonts.googleapis.com/css2?family=Diphylleia&display=swap');
  • Google Fonts에서 Diphylleia라는 글꼴을 불러오는 코드.
  • CSS의 가장 위에 있어야 정상 작동함.
  • 이 폰트는 나눔꽃과 같은 분위기의 가벼운 세리프체.

✅ 2) 전체 요소 기본 폰트 설정 (*)

* {
  font-family: "Diphylleia", serif;
  font-weight: 400;
  font-style: normal;
}

✔ 의미

  • 페이지의 모든 요소에 Diphylleia 폰트를 적용.
  • 만약 Diphylleia가 로드되지 않으면 자동으로 serif 계열 기본 폰트를 사용.
  • 기본 글꼴 두께를 **400(일반)**으로 지정.
  • 글꼴 스타일을 **normal(기울기 없음)**로 설정.

💡 이 코드는 전체 사이트의 기본 글꼴 스타일을 통일하는 역할을 함.

🗒️ 참고: 주석 처리된 코드

/* * {
  font-family: BatangChe, "Times New Roman", serif;
} */
  • 이전에는 Windows의 바탕체(BatangChe) 또는 Times New Roman을 사용했던 것.
  • 지금은 Google Fonts를 사용하므로 주석 처리된 상태.

✅ 3) p 태그 스타일

p {
  text-align: center;
  color: blue;
  font-size: 1em;
  font-weight: bolder;
  font-style: oblique;
  line-height: 2;
}

각 속성의 의미는 다음과 같아.

✔ text-align: center;

  • p 태그 내부 텍스트를 가운데 정렬.

✔ color: blue;

  • 글자 색을 파란색으로 지정.

✔ font-size: 1em;

  • 기본 폰트 크기(보통 16px) 그대로 유지.
  • 1em은 현재 요소의 기본 크기 기준 → 보통 16px과 동일.

💡 만약 2em이면 2배 크기, 0.8em이면 작아진다.

✔ font-weight: bolder;

  • 부모 요소보다 더 진하게 표시.
  • Diphylleia 폰트가 가벼운 느낌이라 bolder로 진하게 표현 가능.

✔ font-style: oblique;

  • 글꼴을 약간 기울인 형태로 표시.
  • italic과 비슷하지만 → 기울임이 기계적으로 조절된 느낌.

✔ line-height: 2;

  • 줄 간격을 2배로 늘림.
  • 줄바꿈 있었을 때 읽기 쉬워짐.

⭐ 전체 요약

적용 부위 설명

Google Fonts Diphylleia 폰트 로드
* 전체 요소에 Diphylleia 적용
p 스타일 가운데 정렬 + 파란 글씨 + 기울임 + 두꺼운 느낌 + 넓은 줄 간격

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BOX BORDER</title>
  <style>
    div {
      background-color: yellow;
      margin: 30px;
      padding: 20px;
      border: 5px solid red;
      width: fit-content;
      border-radius: 20%;
    }
    .circle {
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <h1>박스 모델</h1>
  <P>margin 30px, padding 20px, border 5px의 빨간색 점선</P>
  <hr>
  <div>
    <img src="/images/img1.jpg" alt="고양이" width="300px">
  </div>

    <img class="circle" src="/images/img5.jpg" alt="고양이">
</body>
</html>

 

✅ 전체 구조 개요

  • 첫 번째 <div> 안에 고양이 사진이 들어 있고,
    그 <div>에 margin, padding, border, background 등 박스 모델 속성을 적용함.
  • 두 번째 <img>는 .circle 클래스를 사용하여 완전한 원형 이미지로 만듦.

🔎 CSS 상세 설명

1) div 스타일

div {
  background-color: yellow;
  margin: 30px;
  padding: 20px;
  border: 5px solid red;
  width: fit-content;
  border-radius: 20%;
}

각 속성의 의미는 다음과 같아:

✔ background-color: yellow;

  • 박스(div)의 배경색을 노란색으로 지정.

✔ margin: 30px;

  • div 바깥 여백.
  • 주변 요소와 30px 거리 유지.

✔ padding: 20px;

  • div 내부 여백.
  • div 테두리(border)와 이미지 사이에 20px 공간이 생김.

✔ border: 5px solid red;

  • div에 빨간색 실선 테두리를 적용.
  • 두께는 5px.

✔ width: fit-content;

  • 내부 콘텐츠(이미지)의 크기에 맞춰 div 크기를 자동 조절.
  • 즉, 이미지를 감싸는 만큼만 div가 넓어진다.

✔ border-radius: 20%;

  • div의 모서리를 둥글게 만든다.
  • 20%는 네 모서리를 적당히 둥글린 형태.

2) .circle 클래스 — 원형 이미지 만들기

.circle {
  border-radius: 50%;
}

✔ 설명

  • border-radius를 **50%**로 설정하면 이미지가 정확한 원형이 된다.
  • 단, 이미지는 정사각형일 때 완전한 원이 됨.

📌 정사각형이 아닌 이미지라도 모서리가 최대한 둥글게 처리됨.

🔎 HTML 구조 설명

<h1>박스 모델</h1>
<P>margin 30px, padding 20px, border 5px의 빨간색 점선</P>
<hr>
  • 제목과 설명 문구가 있고 구분선 <hr>이 들어감.

✔ 첫 번째 박스

<div>
  <img src="/images/img1.jpg" alt="고양이" width="300px">
</div>
  • div 스타일이 적용되어
    • 노란 배경
    • 빨간 테두리
    • padding: 20px
    • margin: 30px
      등이 전부 시각적으로 표시됨.

📌 즉, 박스 모델 요소들을 한눈에 볼 수 있는 예시임.

✔ 두 번째 원형 이미지

<img class="circle" src="/images/img5.jpg" alt="고양이">
  • .circle 클래스가 적용되어 이미지가 둥글게 표시됨.
  • 프로필 사진 만들 때 쓰는 방식과 동일!

⭐ 전체 요약

요소 설명

margin div 바깥 여백
padding div 내부 여백
border div 외곽 테두리
background-color div 배경색
width: fit-content 내부 이미지 크기에 맞춰 div 크기 자동 조절
border-radius: 20% div 모서리 둥글게
.circle 이미지 전체를 원형으로

이 코드는 박스 모델 + 둥근 박스 + 원형 이미지까지 한 번에 배우는 좋은 예제야.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		h3 {
			border-left: solid 10px green;    /* 좌측 경계선 */
			padding-left: 20px;               /* 좌측 패딩 */
		}
		ul {
			border: solid 1px #cccccc;        /* 경계선 */
			background-color: #eeeeee;        /* 배경 색상 */
			padding: 10px 30px;                    /* 패딩 */
			border-radius: 10px;              /* 모서리 둥글게 */
      width: fit-content;
		}
		li {
			margin-top: 20px;                 /* 상단 마진 */
			line-height: 150%;                /* 줄 간격 */
		}
	</style>
</head>
<body>
	<h3>우대 정보</h3>
	<ul>
		<li>연령에 따른 우대 (나이 확인이 가능한 신분증 또는 서류 제시)<br>
			- 경로 : 만 65세 ~<br>
			- 청소년 : 만 13세 ~ 만 18세
		</li>
		<li>장애인 우대 (장애인등록증 제시) 우대가격<br>
			- 1일 이용권 우대가로 구입 가능<br>
			- 장애의 정도가 심한 장애인 : 본인+동반 1인
		</li>
		<li>국가유공자 우대 (증명서류 제시) 파크이용권 가격 보기<br>
			- 본인 + 동반 1인, 1일 이용권 50% 우대가로 구입 가능<br>
		</li>
	</ul>
</body>
</html>

📌 전체 구조 설명

구조는 크게 세 부분으로 구성돼:

  1. h3 제목 영역 — 좌측 초록색 굵은 라인으로 강조
  2. ul 박스 전체 — 연한 회색 배경 + 둥근 모서리 + 패딩
  3. li 목록 — 여백과 줄 간격으로 가독성 개선

1️⃣ <h3> 스타일 설명

h3 {
  border-left: solid 10px green;   /* 좌측 경계선 */
  padding-left: 20px;              /* 좌측 여백(텍스트와 선 사이 공간) */
}

✔ 무엇을 하나요?

  • 제목 왼쪽에 굵은 초록색 라인(10px) 을 붙여 강조.
  • 텍스트가 라인에 너무 붙어 보이지 않도록 20px 여백 확보.

→ 실제 사이트 카테고리 제목처럼 강조 효과를 준다.

2️⃣ <ul> 스타일 설명

ul {
  border: solid 1px #cccccc;   /* 회색 경계선 */
  background-color: #eeeeee;   /* 연한 회색 배경 */
  padding: 10px 30px;          /* 위·아래 10px / 좌·우 30px 공간 */
  border-radius: 10px;         /* 모서리를 둥글게 */
  width: fit-content;          /* 내용 너비에 딱 맞게 박스 크기 지정 */
}

✔ 역할

  • 전체 안내 박스의 형태를 만드는 핵심 부분
  • 밝은 회색 배경과 얇은 테두리가 안정적인 느낌 준다.
  • padding으로 내부 여백을 만들어 텍스트가 박스에 붙지 않도록 함.
  • border-radius: 10px 로 둥근 박스 형태 구현.
  • width: fit-content 덕분에 박스가 텍스트 길이만큼만 자동으로 맞춰짐
    → 너무 넓거나 화면 전체로 퍼지지 않음.

3️⃣ <li> 스타일 설명

li {
  margin-top: 20px;   /* 각 항목 간의 세로 간격 */
  line-height: 150%;  /* 글 줄 간 간격 1.5배 */
}

✔ 역할

  • 각 우대 항목 사이에 20px 간격을 줘서 목록이 답답하지 않게 보임.
  • line-height: 150%로 줄 간격을 늘려 읽기 편한 텍스트가 됨.

4️⃣ HTML 구조 설명

<h3>우대 정보</h3>
<ul>
  <li>연령에 따른 우대 …</li>
  <li>장애인 우대 …</li>
  <li>국가유공자 우대 …</li>
</ul>
  • <h3> 제목 → 카테고리 구분.
  • <ul> → 전체 안내 박스.
  • <li> → 각각의 우대 조건 텍스트.

줄바꿈을 위해 <br> 사용 → 단락 느낌 유지.

📌 전체 요약 (기능 중심)

요소 기능

h3 좌측 굵은 초록 라인 + 제목 강조
ul 연한 회색 박스 + 둥근 테두리 + 패딩 + 자동 너비 조절
li 각 항목 간 간격 확보 + 가독성 좋은 줄 간격

✔ 결과적으로 이 코드는?

→ 교재에 나오는 “박스 모델 + 리스트 스타일 + 제목 라벨” 실습을 깔끔하게 구현한 형태이며,
실무에서도 그대로 쓰일 만큼 기본기 좋은 구조야.

 

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

CSS 6일차 - float / clear  (1) 2025.12.11
CSS 5일차 background / position / z-index  (0) 2025.12.10
CSS 4일차 - 박스 모델을 구성하는 속성 / 지금까지 배운 html+css 정리  (0) 2025.12.09
CSS 2일차  (0) 2025.12.05
CSS 1일차  (1) 2025.12.04

관련글

티스토리툴바