오늘 학습 정보
- 날짜/Day: 2026/02/05 (Day19)
- 교재 범위: ~13.6 배경 영역(p.523~552)
- 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처
오늘의 핵심 키워드 3개
- 핵심 키워드 1: 헤더 구조(header/nav) + flex 정렬
- 핵심 키워드 2: 메인(히어로) 배경 합성(linear-gradient + url) + 중앙 정렬(flex)
- 핵심 키워드 3: 섹션 레이아웃(float/clearfix) + 카드 hover + 배경 고정(background-attachment)
개념 정리
2-1) 프로젝트 기본 세팅(문서 뼈대/외부 리소스 연결)
역할: HTML 기본 문서 구조를 만들고(메타/타이틀), 아이콘 폰트(CDN)와 CSS 파일을 연결
핵심 포인트: lang, meta charset, viewport, link rel=”stylesheet” 흐름을 먼저 고정해두면 이후 작업이 안 정적
짧은 예시(코드):
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Final Project</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body></body>
</html>2-2) 헤더 영역 만들기(로고 + 메뉴 배치)
역할: 상단 헤더에 로고/메뉴를 한 줄로 배치하고, 스크롤 시에도 가독성 유지
핵심 포인트:
- 구조는 header > .container > (h1 + nav)로 단순화
- 정렬은 display:flex + justify-content:space-between + align-items:center
- 겹침/고정은 position:fixed + z-index로 처리
짧은 예시(코드):
*html
<header>
<div class="container">
<h1><button>SU</button></h1>
<nav>
<ul>
<li><button>About</button></li>
<li><button>Features</button></li>
<li><button>Portfolio</button></li>
<li><button>Contact</button></li>
</ul>
</nav>
</div>
</header>
*css
header{
position:fixed;
top:0;
z-index:1;
width:100%;
padding:1rem;
color:white;
}
header .container{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}
header nav ul{ display:flex; }
header nav ul li{ padding:10px; }
header button{
background:transparent;
border:0;
cursor:pointer;
color:inherit;
}2-3) 메인 영역 만들기(히어로 화면)
역할: 첫 화면을 “가득 채우는” 메인 영역 구성 + 텍스트/버튼을 가운데에 배치
핵심 포인트:
- 화면 높이 기준:
height:100vh - 배경 합성: linear-gradient(…) , url(…)로 어두운 오버레이 + 이미지
- 중앙 정렬:
display:flex + justify-content/align-items:center + text-align:center - 애니메이션: @keyframes로 반복 동작(예: 마우스 아이콘 up/down, 커서 blink)
짧은 예시(코드):
*html
<main id="main">
<div class="container">
<h4>Welcome</h4>
<h2>I`M A <span>Front-End Developer</span></h2>
<p>Lorem ipsum...</p>
<button class="download">DOWNLOAD CV</button>
<button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>
</div>
</main>
*css
main{
width:100%;
height:100vh;
color:white;
background:
linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("images/me.jpg")
center center;
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
main button.download{
background-color:transparent;
border:3px solid white;
border-radius:20px;
padding:1rem 2rem;
margin-top:3rem;
color:white;
font-weight:bold;
cursor:pointer;
}
main button.mouse{
background-color:transparent;
border:none;
color:white;
font-size:2rem;
position:absolute;
bottom:1rem;
left:50%;
transform:translateX(-50%);
animation:upDown 1s ease-in-out infinite;
}
@keyframes upDown{
0%{ bottom:1rem; }
50%{ bottom:1.5rem; }
100%{ bottom:1rem; }
}2-4) 섹션 영역 구성(About Me / What I Do) + 배경 영역(13.6)
역할: 메인 아래에 섹션을 “반복 가능한 패턴”으로 만들고, 중간 배경 영역으로 시각적 분리
핵심 포인트:
- 섹션 공통 스타일: section에 동일 폰트/패딩 적용, nth-child(2n)으로 짝수 섹션 배경색 처리
- About Me 레이아웃: float로 좌/우 50% 분할 + ::after clearfix로 레이아웃 깨짐 방지
- What I Do 카드: 3단 배치(폭 30% + 간격은 margin으로) + :hover로 배경/글자 색 변경
- 배경 영역(Background): div.bg로 단순 구분하고 background-attachment:fixed로 고정 느낌
짧은 예시(코드):
*css
/* 섹션 공통 */
section{
font-family:"Poppins", sans-serif;
padding:5rem 0;
}
section:nth-child(2n){
background-color:#f8f8f8;
}
/* About Me: float + clearfix */
section .about-self::after{
content:"";
clear:both;
display:block;
}
section .about-self .left,
section .about-self .right{
width:50%;
float:left;
}
section .about-self .left img{ max-width:100%; }
/* What I Do: 카드 hover */
section .do-me .do-inner{
background-color:#fff;
width:30%;
padding:2rem;
float:left;
margin-right:5%;
cursor:pointer;
}
section .do-me .do-inner:last-child{ margin-right:0; }
section .do-me .do-inner:hover{
background-color:lightcoral;
color:white;
}
/* 배경 영역(13.6): 고정 배경 */
.bg{
background:url("./images/background.jpg") center center;
background-size:cover;
background-attachment:fixed;
height:650px;
}
*html
<!-- What I Do 다음에 배경 영역 -->
<div class="bg"></div>이슈 로그
- float 기반 레이아웃은 clearfix 처리를 빼먹으면 부모 높이가 0처럼 보이는 문제가 생길 수 있어서,
::after{
학습단 도서
- 「코딩 자율학습 HTML + CSS + 자바스크립트」
“코딩자율학습단 19기 | 19일차 학습일지 – 최종프로젝트(1)_헤더/메인 레이아웃, 섹션 구성, 배경 영역 고정 효과”에 대한 2개의 생각