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

0. 코드 정리

font.css 파일 생성

main.html을 개발하면서 웹폰트를 사용하여 폰트를 style.css에 입력하였는데 코드가 정리가 안되는 느낌이 들었다.
그래서 따로 font.css파일을 만들어 폰트들을 모아놓았다.

@font-face {
     font-family: 'NIXGONM-Vb';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/NIXGONM-Vb.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

reset.css 변경

• <a> reset 값 추가
• font-family 폰트 지정

@charset "UTF-8";
@import "font.css";
html, body {
  font-family: 'NIXGONM-Vb', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cafe24Ohsquare', sans-serif;
}

...

a{text-decoration: none;}

1. style.css에서 코드 수정

About.html 코드를 작성하면서 메뉴바의 배경색과 글자색을 main.html과 다르게 적용해야겠다고 생각했다. 그래서 서로 충돌하지 않게 클래스를 추가하거나 값을 변경하였다.

2. About.html 작성

필요 태그

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

주요 구현 기능

1. 2단 하단 고정형 레이아웃

• float
• 가상 요소 :after
• position

2. 그림자 효과

• box-shadow

3. 원형 프로필 사진

• border-radius
• overflow

<div>안에 <img>를 포함시킨다. 이 때, <div>의 크기는<img>보다 작게 만든다. 그 후에 border-radius로 원 형태를 만들고 overflow 속성을 사용하여 div 밖으로 흘러넘치는 부분을 감춘다.

4. fontawesome을 이용한 아이콘 추가

<div class="icon">
    <a><i class="far fa-envelope fa-2x"></i></a>
    <a href="https://velog.io/@silviaoh"><i class="fab fa-blogger fa-2x"></i></a>
    <a href="https://github.com/silviaoh"><i class="fab fa-github-square fa-2x"></i></a>
</div>

fontawesome에서 제공하는 아이콘을 이용하였다.

3. 해결되지 않은 문제

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

4. 보충해야 할 점

• 메일 아이콘에 마우스 오버 시 이메일 주소 보여주기
• 아이콘에 마우스 오버 시 기능 추가
• 그 외 추가할 디자인 요소 학습하여 적용해보기