1주차 프로젝트 작업 마침
드디어 1주차 프로젝트 작업을 마쳤다.
1주차 프로젝트는 자기소개 웹페이지를 만드는 작업으로 html, css를 주로 사용하고 fixed navigation bar를 추가하는 미션을 이루어야 했다.
비록 내 마음에 쏙 드는 웹페이지는 아닐지라도,
처음에 원했던 효과의 반 이상을 적용했고 결과물이 예쁘게 나와주었다.
적용한 효과
1. 예쁜 글씨로 화면 왼쪽 상단에 JEANBAEK 나타내기
google fonts 사이트에서 아주아주 다양한 글씨체를 보고 적용할 수 있다.
(한국어 글씨체는 크게 다양하지 않아 조금 아쉬웠다.)
html 파일에 아래 태그 입력.
(google fonts 사이트에서 마음에 드는 글씨체를 선택하고, 오른쪽 상단의 네모박스를 눌러 Embed의 code를 복사해오면 된다.)
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" type="text/css">
css 파일에 아래 태그 입력.
body {
font-family: 'Open Sans', sans-serif;
}무료 폰트 사이트 : https://fonts.google.com/
2. fixed navigation bar 만들기
position을 fixed로 두고, top을 0으로 두어 화면 가장 윗쪽에 navigation bar를 고정시켰다.
입체감이 있으면 더 예쁠 것 같아서 box-shadow를 통해 옅고 얇은 그림자 효과를 주었다.
.topnav {
background-color: white;
background-size: 100%;
width: 100%;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1);
z-index: 111;
}3. 부드럽게 스크롤 움직이기
검색해보니, 단 한 줄의 굉장히 쉬운 코드였다.
html {
scroll-behavior: smooth;
}4. 내비바에서 메뉴를 누르면 각 할당된 sector로 scroll이 이동함
각 sector마다 a id를 통해 별도의 이름 (anoutMe, songs) 등을 준 후,
내비바에 있는 글씨 모두에게 a 링크를 할당해 주었다.
이로써 내비바에 있는 메뉴를 누르면 그 id가 할당된 sector로 이동하게 된다.
<div class="topnav" id="myTopnav">
<a href="#top"><h1>JEANBAEK</h1></a>
<div id="menu">
<a href="#aboutMe"> ABOUT ME </a>
<a href="#songs">SONGS</a>
<a href="#books">BOOKS</a>
<a href="#films">FILMS</a>
<a href="#travel">TRAVEL</a>
<a href="#여울">여울</a>
<a href="#footer">CONTACT</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
</div>5. 내비바에 커서 올릴 때 (hover), font-shadow 나타남
나는 올리브색을 좋아한다. 그리고 첫 화면의 배경 사진도 나뭇잎이다.
그래서 내비바에서 글씨에 커서를 올릴 때 올리브색의 shadow가 생기면 예쁠 것 같았다.
.topnav a:hover {
font-weight: bold larger;
text-shadow: 2px 2px #999966;
background-color: white;
color: black;
}6. 메인화면에서 스크롤을 올리면, 사진과 소개글이 나타남
어떤 내용을 넣을 지 구상하고, 그 내용 모두를 한 파일에 입력했다.
줄이 길어져 헷갈릴 수 있으므로 각 내용을 div로 묶은 후 id를 부여했다.
7. 내비바 아래에 배경화면 사진을 전체적으로 펼쳐놓고, scroll 움직여도 사진은 고정되어 있기
css 파일에서 해당 선택자를 지정하고,
background-image에 원하는 URL을, background-size는 cover, background-attachment는 fixed, background-position은 center top으로 입력한다.
.intro {
background-image: url("https://images.unsplash.com/photo-1501004318641-b39e6451bec6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1866&q=80");
background-size: cover;
background-attachment: fixed;
background-position: center top;
}무료, 저작권 없는 사진 고화질사진 모음 사이트 : https://unsplash.com
8. 첫 화면 중간의 화살표 누르면, 바로 아래의 내용부분으로 부드럽게 이동하기
화살표 부분에 a링크를 걸어 아래 sector의 id를 입력해줬다.
나뭇잎과 색상이 겹쳐 잘 안보일 수 있을 것 같아서, hover shadow 효과도 함께 주었다.
HTML
<div class="intro">
<a id="intro">
<h2>"Hello World! 나는 백은진이에요"</h2>
</a>
<p>
<a href="#aboutMe">∨</a>
</p>
</div>
CSS
.intro p a {
font-size: 68px;
font-weight: bolder;
color: #999966;
text-decoration: none;
}
.intro p a:hover {
text-shadow: 2px 2px DarkSlateGray;
}9. 화면 맨 아래 왼쪽에 위코드 사전 프로젝트 1주차인 점 나타내기
HTML
<a id="footer">© 2020 WECODE 13th : Week 1 of the Pre-Project</a>
CSS
.footer {
display: flex;
justify-content: space-between;
padding: 20px;
margin-top: 20px;
color: DarkSlateGray;
font-size: 16px;
}10. 화면 맨 아래 오른쪽에 아이콘 삽입하고, 각 아이콘 클릭 시 효과 나타내기
font awesome이라는 사이트에서 많은 양의 아이콘을 무료로 사용할 수 있게 제공하고 있다.
나는 아이콘에 깃허브, 벨로그, 인스타그램, 이메일전송 기능을 부여했다.
target _blank는 그 아이콘을 클릭했을 때, 새로운 페이지에서 사이트가 열릴 수 있도록 한다.
title은 아이콘에 커서를 갖다 댔을 때, 아이콘을 설명해준다.
나는 inline이 아닌 flex 디스플레이를 사용하고, space-between을 사용했기 때문에 (처음보는 기능이라 신기해서 써봤다.) 글 주변에 보기 좋게 공간을 마련하는 것에 시간이 많이 소요되었다. (인터넷-검사 기능을 통해 계속 시험해본 후 입력했다. )
HTML
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="icons">
<a href="https://github.com/JeanBaek" target="_blank" title="Github"><i class="fa fa-github"></i></a>
<a href="https://velog.io/@jeanbaek" target="_blank" title="Velog"><i class="fa fa-vimeo"></i></a>
<a href="https://www.instagram.com/jean.baek.kor/" target="_blank" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="mailto:jeanbaek710@gmail.com" target="_blank" title="E-Mail"><i class="fa fa-envelope-open"></i></a>
</div>
</body>
CSS
.footer .icons {
text-align: right;
margin-right: 22px;
}
.icons i {
font-size: 25px;
color: Gray;
padding-left: 8px;
padding-right: 8px;
padding-top: 0px;
padding-bottom: 8px;
}아이콘 (대부분)무료 사이트 : https://fontawesome.com/icons?d=gallery
11. 사용자 컴퓨터의 메일기능 사용해서, 웹페이지 통해 메일전송 가능하도록
굉장히 어려운 기능인 줄 알았는데, 그냥 a 태그의 mailto 기능을 사용하면 되는 거였다.
a 태그 내에서 mailto:내 메일주소를 입력해주면, 사용자가 해당 링크를 클릭하면 내 이메일주소가 입력된 메일창이 열린다.
<a href="mailto:jeanbaek710@gmail.com" target="_blank" title="E-Mail"><i class="fa fa-envelope-open"></i></a>취소한 효과
1. 낮/밤 버튼
만드려고 화면을 보니, 크게 중요하지 않은 기능인 것 같았다.
왜냐하면 이 웹사이트는 하얀배경과 검은글씨가 예쁜 글씨체를 통해 조화롭게 어우러지는 게 멋인데,
그 색이 반대가 되면 예쁘지 않을 것 같다.
추가로 적용하고 싶었던 효과
1. fixed navigation bar + dropdown box appears
너무너무 아쉬운 부분이다.
웹페이지를 구성하고 만들다 보니, 내가 좋아하는 것은 종류가 여러가지이기 때문에 메뉴에서 dropdown 박스를 통해 표현하면 깔끔하고 좋을 것 같았다.
그래서 이 효과를 적용하기 위해 계속 이런저런 방법을 시도해봤는데,
이 효과가 실행되다가도 navigation bar를 fixed 하면 dropdown box가 끝까지 나타나지 않았다.
2. while scrolling down, 화면 상의 섹터에 맞는 메뉴가 네비바에서 font shadowed 되는 것.
이 효과는 내가 웹페이지 작업을 끝냈다고 마음먹은 후, 마지막으로 웹페이지 상에서 이런저런 효과를 시도해보면서 떠오른 생각이다. 솔직히 코드가 더 지저분해져서 어제처럼 다시 코드를 짜는 일이 생길까봐 시도하지 못했다.
원하는 효과를 모두 이루지 못해 너무 아쉬웠지만,
이룬 효과가 더 많고 효과를 직접 찾는 과정에서 많이 배우고 익혔으니 그것에 만족한다. (지금으로서는)
한 개의 프로젝트를 집요하게 물고 늘어지면서 얻는 것이 많겠으나,
여러 개의 프로젝트를 진행하면서 얻는 것도 많을 것이다.
여기에서 멈추는 게 너무 아쉽지만, 현실의 일과 다음 프로젝트가 계속 있으니 에너지 사용량을 조절하는 것도 중요하다고 생각된다.
나는 아래의 사이트를 참고해서 내 웹페이지의 디자인을 구상했다.
https://ko.wix.com/website-template/view/html/1903?siteId=1c739dc1-197d-4e29-a054-7977927525ba&metaSiteId=876b6c89-bb84-43a2-a128-d2dac761364d&originUrl=https%3A%2F%2Fko.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fportfolio-cv%2Fpersonal#
자기소개 웹페이지 on Github:
https://jeanbaek.github.io/self-introduction-page/main1.html
