[14기 과제] HTML, CSS - 포트폴리오 만들기

네비게이션 바

웹사이트 상단에서 흔히 볼 수 있는 네비게이션 바를 구현해보고자 했다.

html 파일에 header와 nav 태그를 사용해서 구조를 먼저 잡고

header 안에 있는 요소들을 가로로 정렬하고 간격을 벌리기 위해 style.css 파일에 이러한 속성들을 사용했다.

CSS 속성:

• display: 요소의 배치 방식 : flex; 가로/세로(정렬, 간격 조정) : block; 세로 : inline; 가로

• align-items: 세로 방향 정렬 : center; 위아래 가운데 정렬

• justify-content: 가로 방향 정렬 : space-between; 양쪽 끝으로 밀어냄

• padding-left: 왼쪽 내부 여백

• padding: 전체 내부 여백 (padding-left를 덮어쓴다)

• background-color: 배경 색상

배운 것

1. 포트폴리오 웹사이트를 만들기 전 디자인과 구조를 대충 생각만 하였더니 만드는 과정에서 수정을 정말 많이 할 수 밖에 없었다. 그러면서 집을 짓는 방식처럼 구체적으로 뼈대를 먼저 잡고 디자인을 먼저 구상하는 것이 우선이구나라는 생각이 들었다.

1. index.html 파일의 이름을 함부로 바꾸면 안 된다는 것. <index.html>파일을 <home.html>로 변경하면 vercel이 이를 인식하지 못 한다는 걸 알게 됐다.

문제

네비게이션 바에 'HOME'을 누르면 error page가 계속 뜬다. html 구조를 다시 확인하면서 수정도 하고 <index.html> 이라고 잘 적혀 있는지 확인도 했지만 해결되지 않았다. 결국, Vercel에서 본 포트폴리오 project를 지우고 새로 만들어서 실행 시켰더니 해결은 됐지만 아직도 원인이 무엇인지 모르겠다.