[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/[email protected]/NIXGONM-Vb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cafe24Ohsquare';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/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단 하단 고정형 레이아웃
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. 보충해야 할 점
- 메일 아이콘에 마우스 오버 시 이메일 주소 보여주기
- 아이콘에 마우스 오버 시 기능 추가
- 그 외 추가할 디자인 요소 학습하여 적용해보기
Author And Source
이 문제에 관하여([HTML/CSS] 자기소개 웹 페이지 제작 #3 - About.html), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silviaoh/HTMLCSS-자기소개-웹-페이지-제작-3-About.html저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
