[HTML,CSS] 4일차 ❺

Chapter5.
다양한 CSS 속성 다루기

---

1️⃣

배경 다루기 (Background)

24.html

---

속성	의미	예시/값
background-color	배경 색	yellowgreen
background-image	배경 이미지	url(images/black-cat.jpeg)
background-repeat	반복 여부	no-repeat / repeat / repeat-x / repeat-y
background-size	이미지 크기	200px 200px / cover / contain
background-position	이미지 위치	100px 50px / center
background-clip	배경 영역	border-box / padding-box / content-box
background-origin	배경 이미지 기준점	border-box / padding-box / content-box

---

핵심 포인트

• clip → 배경이 칠해지는 영역
• origin → 이미지 시작 기준
• size + repeat + position 세트로 자주 사용

---

코드 예시

div {
width: 300px;
height: 300px;
border: 20px double green;
padding: 20px;

background-image: url(images/black-cat.jpeg);
background-size: 200px 200px;
background-repeat: no-repeat;
background-position: 100px 50px;

background-clip: border-box;
background-origin: content-box;
}

 

---

2️⃣

색상 지정 방법 (Color)

25.html

---

방법	의미	예시
rgb()	Red/Green/Blue	rgb(0%,50%,0%)
rgba()	RGB + 투명도	rgba(0,128,0,0.5)
hsl()	색상/채도/밝기	hsl(300,50%,50%)
hsla()	HSL + 투명도	hsla(300,50%,50%,0.3)
HEX	16진수 색상	#ff00ff / #ff00ff99(투명도 포함)

---

포인트

• 투명도 조절 → rgba, hsla, HEX 8자리
• 직관적 색 조절 → HSL
• 짧게 표현 → HEX

---

예시 코드

p#one { color: rgb(0%,50%,0%); opacity: 0.5; }
p#two { color: rgba(0%,50%,0%,1); }
p#three { color: hsla(300,50%,50%,0.3); }
p#four { color: #ff00ff99; }

---

3️⃣

텍스트 꾸미기 (Text Styling)

26.html

---

속성	의미	예시
font-family	글꼴 지정	"Noto Serif KR", monospace
font-size	글자 크기	px / rem / em
font-weight	글자 두께	100 ~ 900
line-height	줄 간격	32px / 숫자 비율
text-align	텍스트 정렬	left / center / right / justify

---

포인트

• rem → html 기준, em → 부모 기준
• font-weight → 글자 가늘기/두껍기
• line-height → 글자와 글자 사이 여백

---

예시 코드

* { font-family: "Noto Serif KR", monospace; }
html { font-size: 8px; }
body { font-size: 32px; }
#first {
     font-size: 3rem;
     font-weight: 100;
     line-height: 32px;
     text-align: center;
}

---

4️⃣

실습 - 프로필 페이지 스타일링

profile.html

---

1️⃣ HTML 구조 이해

구역	태그	역할
페이지 제목	<h1>	자기소개 페이지 타이틀
프로필 컨테이너	<div class="profile-container">	전체 프로필 영역, CSS로 중앙 정렬 + 배경
프로필 사진	<img>	원형 사진, 중앙 정렬
이름	<h2>	이름 표시
소개	<div id="introduce">	자기소개 텍스트 영역
특징	<div id="fun-facts">	MBTI, 사투리, 성격 등 특징 목록
수평선	<hr>	영역 구분선
저작권	<span>	간단한 표시

---

2️⃣ CSS 핵심 정리

2-1. 기본 선택자

* {
     margin:0; padding:0;
     box-sizing:border-box;
     font-family: "Asta Sans", sans-serif;
}

• 모든 요소의 기본 여백 제거 + box-sizing: border-box
• 기본 폰트 지정

---

2-2. 컨테이너 스타일

.profile-container {
     padding:30px 80px;
     max-width:800px;
     margin:0 auto;
     background-color:#f9f9f9;
     border:1px solid #ccc;
     border-radius:10px;
     box-shadow:0 0 10px rgba(0,0,0,0.1);
}

• margin:0 auto → 중앙 정렬
• border-radius → 모서리 둥글게
• box-shadow → 살짝 그림자

---

2-3. 이미지 스타일

img {
     height:200px;
     border-radius:50%; /* 둥근 이미지 */
     display:block;
     margin:0 auto 20px; /* 중앙 정렬 + 하단 여백 */
}

• display:block + margin:0 auto → 가로 중앙 정렬

---

2-4. 텍스트 스타일

h1,h2,h3 { text-align:center; margin-bottom:30px; }

p, li {
     font-size:1em;
     color:#666;
     margin: 10px 0 20px 0;
}

• 제목은 가운데 정렬
• 본문 글자는 회색(#666), 여백 조절

---

2-5. 색상 및 배경

body {
  background-color:#e3f2fd;
  color:#333;
  width:600px;
  margin:auto;
}

• 페이지 전체 배경색
• 텍스트 색상
• margin:auto → 중앙 정렬

---

 

2-6. 구분선 & 여백

hr {
  margin:20px 0;
  border:0;
  border-top:1px solid #ccc;
}

• 영역 나누는 수평선
• 상하 여백 확보

---

 

2-7. 제목 폰트 크기

h1 { font-size:2.5em; color:#042d4f; }
h2 { font-size:2em; color:#333; }
h3 { font-size:1.5em; color:#555; }

• 시각적 계층 구조 강조 (h1 > h2 > h3)

---

💡 메모 포인트

1. 컨테이너 + 중앙 정렬 → 프로필 페이지 기본 구조
2. 이미지 둥글게 + 중앙 정렬 → 시각적 균형
3. 텍스트 크기 & 색상 조절 → 정보 계층 강조
4. box-shadow, border-radius → 카드 느낌, 시각적 부드러움
5. margin/padding 조절 → 영역 구분 & 여백 확보

---

5️⃣

요소의 유형 & display 속성

27.html

---

1️⃣ HTML 요소 유형

요소	기본	유형 특징
<p>	블록(block)	한 줄 전체를 차지, width/height 적용 가능
<span>	인라인(inline)	글자 영역만 차지, width/height 기본 적용 불가

---

2️⃣ display 속성

값	의미	예시
block	블록 요소처럼	<p> 기본값
inline	인라인 요소처럼	<span> 기본값
inline-block	인라인 + 블록	글자처럼 나란히 + width/height 가능
none	화면에 표시 안 함	p { display:none; } → 화면에서 안 보임

---

3️⃣ 핵심 포인트

• <p>와 <span>의 차이: 영역 차지 방식
• display:none → 요소 숨기기
• inline-block → 인라인처럼 나란히 배치 + 박스 크기 지정 가능
• width/height는 block 또는 inline-block에서만 적용 가능

---

4️⃣ 예시 코드

p {
  display: none;
  width: 100px;
  height: 100px;
}

• p 태그는 숨겨지고, width/height는 적용 가능하지만 화면에 안 보임

---

6️⃣

문서의 흐름 & float, clear

28.html

---

1️⃣ 문서 흐름 (Document Flow)

• HTML 요소는 기본적으로 위에서 아래, 좌에서 우 순서로 배치됨
• 블록 요소 → 한 줄 전체 차지
• 인라인 요소 → 글자처럼 나란히 배치

---

2️⃣ float 속성

속성	의미	예시
float: left	왼쪽으로 띄워서 다른 요소가 오른쪽으로 감싸도록	#second 이미지
float: right	오른쪽으로 띄움	#first 이미지
float 안 쓴 요소 → 정상 문서 흐름에 있음	float 요소 주변 글자가 감싸짐

---

3️⃣ clear 속성

속성	의미	예시
clear: both	좌우 float 모두 무시하고 아래로 내려 배치	<p> 태그

포인트

• float 한 요소가 있으면 그 다음 블록 요소가 주변 텍스트처럼 붙음
• clear → float 요소 아래로 강제로 내려서 겹치지 않게 함

---

4️⃣ 예시 코드

.container {
height: 400px;
border: 1px solid black;
}

#first { float: right; }
#second { float: left; }
p { clear: both; }

• #first → 오른쪽 정렬
• #second → 왼쪽 정렬
• <p> → float 된 이미지 아래 배치

---

 💡 메모 포인트

1. float → 요소를 띄워 텍스트/다른 요소 감싸기
2. clear → float 영향을 받지 않고 아래로 배치
3. 문서 흐름 이해 → float 안 쓰면 기본 block flow, 쓰면 감싸기 발생

---

7️⃣

CSS 위치(Position) 속성

29.html

---

1️⃣ 기본 position 유형

값	의미	특징
static	기본값	문서 흐름에 따라 배치, top/left/right/bottom 무시
relative	상대 위치	원래 위치 기준으로 이동, 공간은 그대로 차지
absolute	절대 위치	가장 가까운 position이 설정된 조상 기준으로 이동, 공간 차지 X
fixed	고정 위치	화면(viewport) 기준 고정, 스크롤에도 위치 유지
sticky	스크롤 시 조건부 고정	지정한 범위 내에서 고정

---

2️⃣ 예시 코드

div {
width:100px;
height:100px;
color:white;
background-color:orange;
}

/* 상대 위치 */
.rel {
position: relative;
top: 50px; left: 50px;
background-color: red;
}

/* 절대 위치 */
.abs { position: absolute;
right: 50px; top: 50px;
}

/* 고정 위치 */
.fixed { position: fixed;
right: 50px;
bottom: 50px;
}

/* 긴 스크롤 테스트 */
.scroll { height:2000px; }

---

3️⃣ 시각화

[문서 기본 흐름]
div.abs       → 절대 위치 (오른쪽 위 50px)
div.rel        → 원래 자리에서 +50px 이동 (붉은색)
div.scroll   → 긴 내용
div.fixed    → 화면 오른쪽 아래 고정 (스크롤해도 움직이지 않음)

---

4️⃣ 핵심 포인트

1. relative → 자기 자리 기준 이동, 주변 흐름 유지
2. absolute → 가장 가까운 position 가진 조상 기준 이동, 문서 흐름 무시
3. fixed → 화면 고정, 스크롤에도 위치 유지
4. top, right, bottom, left → position 값이 relative, absolute, fixed, sticky일 때만 적용

---

💡 메모 팁

• relative → “원래 자리에서 이동”
• absolute → “조상 기준 이동, 흐름 무시”
• fixed → “화면 고정”
• sticky → “특정 영역 안에서 스크롤 고정”

---

8️⃣

겹치거나 넘치는 요소

30.html

---

1️⃣ z-index (겹치는 순서)

속성	의미	특징
z-index	쌓임 순서(z축)	값이 클수록 위에 표시
적용 조건	position이 relative, absolute, fixed, sticky일 때만 효과

예시

.div1 { z-index: 99; } /* 가장 위 */
.div2 { z-index: 33; }
.div3 { z-index: 21; }
.div4 { z-index: 10; } /* 가장 아래 */

---

2️⃣ overflow (넘치는 콘텐츠 처리)

값	의미
visible	기본값, 내용 그대로 보여줌, 넘치면 보임
hidden	넘치는 내용 잘림
scroll	넘치면 스크롤 항상 표시
auto	필요할 때만 스크롤 표시

예시

.div1 {
  overflow: auto; /* 내용 길면 스크롤 생김 */
}

---

3️⃣ 시각화

z-index 높은 순서 → 위에 쌓임
[div1] orange (99)
[div2] red (33)
[div3] purple (21)
[div4] green (10)

• .div1 내용이 길어서 overflow:auto → 스크롤 가능
• z-index로 겹치는 순서 조절 가능

---

4️⃣ 핵심 포인트

1. z-index → 쌓임 순서 결정, 숫자가 높을수록 위
2. overflow → 콘텐츠 넘침 처리
3. position 없는 요소 → z-index 무시
4. 실습: overflow 바꾸면서 스크롤/잘림/보임 차이 확인

---

💡 메모 팁

• z-index와 overflow를 같이 쓰면 겹치고 길어지는 요소를 효율적으로 관리 가능
• 작은 박스로 겹치는 순서 시각화해두면 기억 쉬움

---

9️⃣

추가 선택자 & 형제 선택자

31.html

---

1️⃣ 속성 선택자 (Attribute Selector)

문법	의미	예시
[속성]	해당 속성이 있는 요소	img[alt] → alt가 있는 img
[속성="값"]	속성이 정확히 값과 일치	img[width="120"]
[속성$="값"]	속성 값이 끝나는 값	img[width$="0"]
[속성^="값"]	속성 값이 시작하는 값	[class^="btn-"]
[속성*="값"]	속성 값에 포함되는 값	[title*="고양이"]

---

2️⃣ 자손 & 자식 선택자

문법	의미	예시
A B	A 안에 있는 모든 B(하위 요소)	body em → body 안의 모든 em
A > B	A의 직계 자식 B만	p > em → p 안의 바로 아래 em

---

3️⃣ 형제 선택자

문법	의미	예시
A + B	바로 다음 형제	#sam + p → #sam 바로 다음 p
A ~ B	모든 다음 형제	#sam ~ p → #sam 뒤의 모든 p

💡 포인트: 형제 선택자는 뒤에 오는 요소만 적용 가능

---

4️⃣ 예시 코드

/* 속성 선택자 */
img[width$="0"] {
  border: 5px dashed red;
}

/* 자식 선택자 */
p > em {
  color: blue;
}

/* 형제 선택자 */
#sam ~ p {
  color: orange;
}

---

💡 메모 포인트

1. 속성 선택자 → 특정 속성/값 가진 요소 선택
2. 자손 vs 자식 선택자 → 하위 전부 vs 직계만
3. 형제 선택자 → 바로 뒤 + 모든 뒤 형제

---

🔟

의사 클래스 & 의사 요소

32.html

---

1️⃣ 의사 클래스 (Pseudo-class)

• 요소의 상태나 위치에 따라 스타일 적용
• 문법: selector:class

클래스	의미	예시
:hover	마우스를 올렸을 때	a:hover { background-color: gray; }
:active	클릭 중일 때	a:active { background-color: black; }
:nth-child(n)	부모 안에서 n번째 자식	li:nth-child(2n-1) → 홀수번째 li

💡 포인트: 요소 상태 또는 위치 기준

---

2️⃣ 의사 요소 (Pseudo-element)

• 요소 안의 특정 부분을 선택해서 스타일 적용
• 문법: selector::element (추천, 옛날 표기 :도 가능)

요소	의미	예시
::first-letter	첫 글자	a::first-letter { color:red; }
::before	요소 앞	a::before { content:"▶"; }
::after	요소 뒤	a::after { content:"보기"; }

 

💡 포인트: 실제 HTML 안에는 없지만, 스타일로 추가되는 부분

---

3️⃣ 예시 코드

li > a{
  display: inline-block;
  width: 80px;
  padding: 10px;
  text-decoration: none;
}

/* 마우스 올리면 */
a:hover {
  color: white;
  background-color: gray;
}

/* 클릭 중 */
a:active {
  color: white;
  background-color: black;
}

/* 홀수번째 li 글자 크기 */
li:nth-child(2n-1) {
  font-size: 20px;
}

/* a 요소 뒤에 텍스트 추가 */
a::after {
  content: "보기";
  color: yellow;
}

---

4️⃣ 시각화 요약

<ul class="menu">
  li:nth-child(1) → font-size:20px
      └ a → text + ::after "보기"
  li:nth-child(2) → font-size: 기본
      └ a → text + ::after "보기"

 

• 마우스 올리면 hover 적용
• 클릭 중이면 active 적용
• ::after → HTML에는 없지만 스타일로 "보기" 추가

---

💡 메모 포인트

1. 의사 클래스   → 상태/위치 기반 스타일 (:hover, :active, :nth-child)
2. 의사 요소      → 실제 HTML 없이 스타일로 부분 선택 (::after, ::before, ::first-letter)
3. 추천 문법: :: 사용

---

1️⃣1️⃣

실습 - 나만의 채팅방 만들기

chat.html

---

✅ 현재 코드 상태

• 상단에 user 영역 → 친구 정보 표시
• 가운데 chat-screen 영역 (아직 메시지 없음)
• 하단에 chat-form 영역 → 입력창 + 전송 버튼
• float 기반 레이아웃 사용

---

⚠️ 개선할 점

1. float 대신 flexbox 사용
float은 예전 방식이라, 유지보수가 불편해요.
→ display: flex;를 쓰면 가로 배치, 가운데 정렬 등이 훨씬 간단합니다.

.user {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  padding: 16px; height: 80px;
}

.user_column {
  margin-right: 10px;
}

 

2. 채팅 입력창 정렬 개선
버튼을 오른쪽에 붙이려고 float: right; 쓰셨는데, flex로 하면 더 깔끔합니다.

.chat-form_field {
  display: flex;
}

.chat-form_msg {
  flex: 1;
}

.chat-form_bt {
  width: 120px;
  border: none;
}

 

3. 채팅 메시지 공간 확보
지금 chat-screen에는 메시지가 표시되지 않는데, 메시지를 담을 div를 넣어줘야 합니다.

HTML 예시:

<main class="chat-screen">
  <section class="chat-screen_bar">
    ...
  </section>
  <section class="chat-messages">
    <div class="msg friend">안녕 😀</div>
    <div class="msg me">오! 잘 지내?</div>
  </section>
</main>

---

🚀 추천 흐름

1. UI 먼저 완성
   → 유저 정보 / 메시지 / 입력창이 보기 좋게 배치되도록
2. 메시지 전송 기능 추가 (JS)
   • textarea 입력 후 "전송" 누르면 .chat-messages에 div 추가
   • 자동 스크롤 내려가기 기능

---