지난번에 자기소개 페이지를 구상하고 Main, Info Pag까지 간단하게 작성한 것에 이어 모든 페이지를 완성하고 기본적인 구성은 잡을 수 있었다. 만드는 과정을 돌이켜본 후 직접 부딪혀 도전하여 새로 배운 것들, 부족한 것들, 미흡했던 부분에 대해 짚고 넘어가보자.
Main Page
메인 페이지는 깔끔하게 두 줄의 문구로 개발자로서 성장하는 "나"를 표현하고 싶었다.
background-color: #111;를 사용해 어두운 배경에 흰 글씨로 깔끔함을 강조했다.
Header
헤더 부분은 왼쪽 상단에 이름의 이니셜로 로고를 만들어 <a>를 이용해 메인 페이지로 링크되고 오른쪽 상단에는 Main, Info, Favorite의 3개의 페이지로 링크되도록 하였다.
<header class="header">
<nav class="navigation">
<a href="index.html" class="logo"><img class="logo-pic" src="logo.jpeg"></a>
<ul class="nav-ul">
<li><a href="index.html" class="nav-menu">Main</a></li>
<li><a href="info.html" class="nav-menu">Info</a></li>
<li><a href="favorite.html" class="nav-menu">Favorite</a></li>
</ul>
</nav>
</header><nav>를 Flex Container로, <a>와 <ul>을 Flex item으로 생각하여 justify-content: space-between;을 통해 가로 정렬을 하였다.
*** 내가 생각했던 배치는 <ul>아이템들이 조금 더 가운데로 정렬되는 모습이엇다. Flex 레이아웃 관련 공부를 조금 더 해보고 고쳐보겠다.
*** position: fixed;를 사용해 메뉴 상단에 고정시켜놓으려 했는데, 레이아웃 자체가 망가지는 모습을 보였다. 헤더 아래 <div>에 적용한 코드를 살펴보고 고쳐보겠다.
Flex Box
코딩을 하면서 인상깊게 느낀 것중 하나는 Flex 레이아웃이 페이지를 구상하는데 정말 자주 쓰이면서도 편리하면서 중요하다는 것이었다. Flex 레이아웃을 만들기 위한 기본적인 구조는 다음과 같다.
<div class="container">
<div class="item">helloflex</div>
<div class="item">abc</div>
<div class="item">helloflex</div>
</div>부모 요소인 div.container를 Flex Container라 하고 자식 요소인 div.item들을 Flex Item이라 부른다. 컨테이너 자체가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 특정 형태로 배치된다.
display: flex
Flex 아이템들은 가로 방향으로 배치되고, Item 내용물의 width만큼 차지하며 heigt는 컨테이너의 높이만큼 늘어난다.
flex-direction: row;
속성 값에 따라 가로, 세로, 역순으로 배치된다.
flex-wrap: nowrap;
컨테이너에 아이템을 담을 공가닝 없을때 줄바꿈을 어떻게 할지 결정하는 속성이다.
justify-content: flex-start, flex-end, center, space-between, spce-around;
"justify"는 메인축 방향으로 아이템을 정렬하는 속성이다. "Align"은 수직축 방향 정령을 의미하며, 이 두가지 속성은 웹페이지를 구성할때 가로, 세로 정렬을 위해 계속적으로 사용한 요소이기에 숙지해놓도록 해야겠다.
align-items: stretch, flex-start, flex-end, center, baseline;
*** 코딩을 직접 해보며 Float, Flex, Grid 3가지 개념에 대해 명확히 이해해야겠다고 생각했다. 자기소개 페이지 만들기가 끝난 후 관련 자료를 찾아보고 TIL로 작성해보겠다.
Footer
헤더와 같이 Flex를 적용했으며 flex-direction: column으로 정렬하고 align-items, justify-contetn 모두 Center로 적용했다.
나의 Velog는 target:_blank로 새 창에 띄워지도록 했고 <a href="mailto:email@email.com" >와 같이 mailto를 붙여 내 메일로 자동으로 링크되도록 하였다.
<footer class="footer">
<h3 class="contact">Contact Me</h3>
<div class="contact-icon">
<a href="https://velog.io/@hkja0111" target="_blank" ><img class="velog" src="velog.jpeg"</a>
<a href="mailto:qkqndudnxld@gmail.com" ><img class="email" src="email.jpeg"</a>
</div>
<p>Free Contact : 010 3890 2027</p>
</footer>*** 조금 더 다양한 Contact 요소를 넣고 싶었으나 Facebook, Instagram같은 SNS를 안하기에 밋밋한 감이 있는 것 같다. 따로 추가할 것은 없을지 생각해보자.
Info Page
Info Page는 나의 사진과 간단한 소개 글귀로 단순하게 마무리했다. 글귀마다 링크를 추가해볼까도 생각했지만 괜히 난잡해지는 것 같아 보류햇다.
Info도 마찬가지로 사진을 담는 <div>와 문구를 담는 <div>를 아이템으로 하여 Flex를 Row 방향으로 적용했다.
이미지 원형으로 나타내기
사각형의 이미지를 자연스럽게 원형으로 나타내기 위해 border-radius를 사용해보았다.
.box{
width: 450px;
height: 450px;
overflow: hidden;
border-radius: 70%;
margin-right: 60px;
}
#info-picture{
width: 100%;
height: 100%;
object-fit: cover;
}바깥 콘테이너를 border-radius:70%로 둥글게 주고, 그 안의 이미지를 넣고 object-fit: cover;를 이용해 비율을 맞추고 overflow: hidden;으로 넘치는 부분을 숨겨주었다.
