안녕하세요! 온에듀링크 1기 챌린지에 참여하고 있는 ‘열정챌린저’입니다.

드디어 1주차 미션인 ‘나만의 포트폴리오 웹페이지 기획 및 뼈대 만들기’를 완료했습니다! 처음에는 빈 화면에 코드를 한 줄씩 적어나가는 것이 막막했지만, 막상 완성된 뼈대를 보니 정말 뿌듯하네요. 이번 주차 미션을 진행하면서 느꼈던 점들을 회고록으로 남겨봅니다.

1주차 미션 결과물

간단하게 제 소개와 진행했던 프로젝트, 그리고 연락처를 남길 수 있는 원페이지 형태의 포트폴리오를 기획했습니다. 전체적인 컬러는 신뢰감을 주는 블루 톤을 메인으로 사용했고, 시맨틱 태그(<header>, <section>, <footer> 등)를 활용해 마크업하려고 노력했습니다.

어려웠던 점과 해결 과정

가장 애를 먹었던 부분은 상단 네비게이션 바의 레이아웃 배치였습니다. 로고는 왼쪽에, 메뉴들은 오른쪽에 깔끔하게 정렬하는 것이 마음처럼 되지 않았습니다.

“아… float를 썼더니 브라우저 창을 줄일 때마다 메뉴가 아래로 툭툭 떨어지네”

처음에는 예전 방식대로 float 속성을 사용해 보려고 했지만 반응형에 취약했습니다. 이때 제공해주신 1주차 보충 강의의 Flexbox 파트가 정말 큰 도움이 되었습니다!

부모 요소에 display: flex; 와 justify-content: space-between;, align-items: center; 이 세 가지 속성의 조합으로 제가 원하던 완벽한 반응형 헤더를 단 3줄의 코드로 구현할 수 있었습니다. CSS의 신세계를 경험한 기분입니다.

느낀 점 (KPT 회고)

• Keep (유지할 점): 모르는 것이 생겼을 때 구글링하기 전에 먼저 공식 문서를 읽어보려고 시도한 점. 매일 1시간씩 꾸준히 코딩하는 습관.
• Problem (문제점): CSS 클래스 이름을 지을 때 직관적이지 못해서 (ex: .box1, .text-wrap), 나중에 코드를 다시 볼 때 헷갈렸습니다.
• Try (시도할 점): 다음 주차부터는 BEM 방법론을 조금씩 적용해 보거나, 나만의 확실한 네이밍 규칙을 정해두고 마크업을 시작해야겠습니다.

다음 주차 다짐

다가오는 2주차는 본격적인 자바스크립트(DOM 조작) 미션이 기다리고 있네요! 이번에 만든 정적인 포트폴리오 페이지에 다크모드 버튼 같은 동적인 생명력을 불어넣을 생각을 하니 벌써부터 기대가 됩니다.

다른 1기 동기분들이 올려주신 멋진 과제물들을 보면서 정말 많은 자극을 받고 있습니다. 우리 모두 끝까지 포기하지 말고 완주합시다! 온에듀링크 1기 화이팅!