[HTML/CSS] 자기소개 웹 페이지 제작 #2 - main.html

0. 사전 작업

CSS reset.css 작성

개발을 진행하다보면 태그마다 기본으로 설정되어 있는 값들 때문에 생각지 못한 오류와 이상이 발생할 가능성이 있다.
그래서 reset.css 파일을 만들어 태그의 기본값들을 초기화하였다.

@charset "UTF-8";

body, div, span,
h1, h2, h3, h4, h5, h6,
a, header, section, footer, nav,
img, form, figcaption, figure,
i, p {
  margin: 0;
  padding: 0;
  border: 0;
}

ol, ul {list-style: none; padding: 0; margin: 0;}
a {text-decoration: none;}

CSS reset 참고 : https://admm.tistory.com/12

1. main.html 작성

필요 태그

• <header>
• <nav>
• <section>
• <footer>
• <div>
• <p>
• <h>
• <ul>, <li>
• <a>

주요 구현 내용

1. 1단 하단 고정형(fixed) 레이아웃 배치

• position
• bottom
• left
• right

CSS의 position 속성을 fixed로 하고 bottom, left, right의 값을 0으로 지정하였다.

2. 메뉴 가로 배치

• float
• display
• 가상 요소 :after

먼저 리스트의 기호들을 없애주고 display를 인라인으로 변경하여 한 줄로 만든 뒤에 float로 각각 왼쪽과 오른쪽에 배치한다.
float를 사용한 뒤에는 가상 요소를 사용하여 float 상태를 해제해주지 않으면 개발 도중 예상치 못한 오류가 발생하여 힘들어질 수 있으므로 항상 주의하자!

3. 메뉴 마우스 오버 시 폰트 색 변화

• 가상 요소 :hover :visited :linked
• transition

기본 글자색을 지정한 후, :hover로 변경할 속성을 입력한다.
transition 속성으로 좀 더 부드러운 효과를 줄 수가 있다.

2. 해결되지 않은 문제

• © 나타나지 않음
  • 2021.5.4 해결
  • font.css의 웹 폰트를 다른 폰트로 바꾸는 것으로 해결함.

3. 보충해야 할 점

• 메인 애니메이션 효과
• 디자인에 추가할 요소 학습하여 적용해보기