코딩자율학습단 19기 | 20일차 학습일지(END) – 최종프로젝트(２)_포트폴리오·컨택트 섹션 완성 + 반응형(Media Query) + 자바스크립트 효과 적용

오늘 학습 정보

• 날짜/Day: 2026/02/06 (Day20)
• 교재 범위: ~ 13.11 유효성 검증하기 (p.553 ~ p.585)

• 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처

오늘의 핵심 키워드 3개

• 핵심 키워드 1: 섹션 레이아웃(Portfolio/Contact) 마무리
• 핵심 키워드 2: 반응형 처리(미디어 쿼리 + rem 기준 폰트)
• 핵심 키워드 3: JS 동작(타이핑/스크롤 헤더/부드러운 이동)

개념 정리

2-1) Portfolio 섹션 구성(HTML/CSS)

역할: 작업 결과물을 “카드(썸네일+텍스트)” 형태로 보여주는 영역 구성

핵심 포인트: 반복되는 카드 구조를 일정한 래퍼/클래스로 통일해 스타일 적용이 쉬운 형태로 만듦

짧은 예시(코드):

<section class="portfolio-me" id="portfolio">
   <div class="container">
      <div class="portfolio-inner">
         <div class="thumb"></div>
         <div class="text">
            <h3>Package Design</h3>
            <p>BRANDING</p>
         </div>
      </div> 
   </div>
</section>

2-2) Contact With Me 섹션 + 폼 UI 디테일(HTML/CSS)

역할: 연락처 정보 + 사용자 입력 폼을 한 화면에서 제공

핵심 포인트:

• 좌/우 영역으로 나눈 뒤(정보 hookup / 입력 폼) 입력 UI는 input/textarea에 동일한 디자인 규칙 적용
• :focus에서 테두리/그림자 효과로 “현재 입력 중” 상태를 명확히 표시

짧은 예시(코드):

/* textarea 포커스 시 강조 */
section.contact .contact-me .right .form-group textarea:focus{
   outline:none;
   border:1px solid #719ECE;
   box-shadow:0 0 10px #719ECE;
}

/* 버튼 스타일 */
section.contact .contact-me .right button{
   width:100%;
   padding:1rem;
   background-color:#f78b00;
   border:none;
   color:white;
}

2-3) 반응형 적용(Media Query) + rem 기준 스케일링

역할: 화면 너비에 따라 레이아웃/크기를 자동 조정해서 “작아져도 보기 편한” UI 유지

핵심 포인트:

• 기준 해상도(예: 1140px, 992px, 768px, 576px, 400px 등)를 잡고 max-width 조건으로 분기
• 전체 크기 스케일은 html{ font-size: … }로 조절하고, 여백/글자 크기는 rem 중심으로 설계하면 한 번 에 비율 조정 가능

짧은 예시(코드):

/* 기준점 설정 */
@media screen and (max-width:1140px){ }
@media screen and (max-width:992px){ }
@media screen and (max-width:768px){ }
@media screen and (max-width:576px){ }
@media screen and (max-width:400px){ }

/* rem 스케일 조정(예시) */
@media screen and (max-width:992px){
   html{ font-size:14px; }
}
@media screen and (max-width:768px){
   html{ font-size:13px; }
}

2-4) 자바스크립트 적용(타이핑 효과 + 스크롤 헤더 + 부드러운 이동)

역할: “정적인 페이지”를 사용자가 체감하는 동적 페이지로 만들기

핵심 포인트: 최종 프로젝트에서 동적으로 처리한 포인트가 3개로 정리됨

(1) 메인 타이핑 효과

핵심 포인트: 문장을 배열로 두고(txtArr), 현재 문장을 split(“”)로 쪼갠 뒤 shift()로 한 글자씩 추가 / pop()으로 한 글자씩 삭제

짧은 예시(코드):

const spanEl = document.querySelector("main h2 span");
const txtArr = ['Web Publisher','Front-End Developer','Web UI Designer','UX Designer','Back-End Developer'];
let index = 0;
let currentTxt = txtArr[index].split("");

function writeTxt(){
   spanEl.textContent += currentTxt.shift();
   if(currentTxt.length !== 0){
      setTimeout(writeTxt, Math.floor(Math.random() * 100));
   }else{
      currentTxt = spanEl.textContent.split("");
      setTimeout(deleteTxt, 3000);
   }
}

function deleteTxt(){
   currentTxt.pop();
   spanEl.textContent = currentTxt.join("");
   if(currentTxt.length !== 0){
      setTimeout(deleteTxt, Math.floor(Math.random() * 100));
   }else{
      index = (index + 1) % txtArr.length;
      currentTxt = txtArr[index].split("");
      writeTxt();
   }
}
writeTxt();

(2) 스크롤 시 헤더 스타일 변경

핵심 포인트: 스크롤 위치가 0보다 크면 header에 active 클래스를 추가(배경/애니메이션 등 적용)

짧은 예시(코드):

const headerEl = document.querySelector("header");
window.addEventListener("scroll", function(){
   const browserScrollY = window.pageYOffset;
   if(browserScrollY > 0) headerEl.classList.add("active");
   else headerEl.classList.remove("active");
});

(3) 메뉴 클릭 시 부드러운 스크롤 이동

핵심 포인트: 버튼에 data-target을 달아 “어디로 이동할지”를 HTML에서 선언하고, JS에서 공통 처리

짧은 예시(코드):

*html
<button data-animation-scroll="true" data-target="#portfolio">Portfolio</button>

*js
const scrollMoveEl = document.querySelectorAll("[data-animation-scroll='true']");
for(let i=0;i<scrollMoveEl.length;i++){
   scrollMoveEl[i].addEventListener("click", function(){
      const target = this.dataset.target;
      const targetEl = document.querySelector(target);
      const browserScrollY = window.pageYOffset;
      const targetScrollY = targetEl.getBoundingClientRect().top + browserScrollY;
      window.scrollTo({ top: targetScrollY, behavior: "smooth" });
   });
}

2-5) 유효성 검증(HTML/CSS Validator)

역할: 작성한 HTML/CSS 코드가 표준 문법에 맞는지 확인(오타/구조 문제 조기 발견)

핵심 포인트: 책에서 안내한 입력 방식(코드 직접 붙여넣고 검사)으로 “에러/경고 없음”을 확인

참고 링크 텍스트(책에서 안내한 링크)

• HTML Validator : https://validator.w3.org/#validate_by_input
• CSS Validator : https://jigsaw.w3.org/css-validator/#validate_by_input

이슈 로그

• 작성한 HTML/CSS 코드가 표준 문법에 맞는지 확인 절차가 직접 하나하나 확인하려면 매우 힘든데 이제는 위 사이트를 이용할 예정입니다.

학습단 도서

• 「코딩 자율학습 HTML + CSS + 자바스크립트」