[Project 00] CSS-Grid 웹페이지만들기

Header

headline & navigation bar

1. Header

• 스크롤를 내렸을 때 최상단에 위치하도록 하였다.
• 본문과 구별되도록 라인을 추가하였다.

header {
    position: fixed;
    border-bottom: 1px solid #4a4a4a;
    grid-area: header;
    background-color: white;
    width: 100%;
}

2. Navigation bar

• hover
  각 탭에 마우스를 올리면 글자 색이 변하도록 하엿다.

a:hover {
color:#ffc200;}

• 각 탭에 마우스를 올리면 글자 아래로 하단바가 생성되도록 하였다.

nav a:nth-child(2):hover~.line{ // 상위태그의 두번 째 속성을 불러오는 코드
  transform: translate(140px); // 140px만큼 변화를 주는 코드.
} 
nav a:nth-child(3):hover~.line{
  transform: translate(270px);
}
nav a:nth-child(4):hover~.line{
  transform: translate(395px);
}

Main

Section-main, Section-About me, Section-Like

1. Paragraph

• 문단 내 문장 사이에 공간을 추가하여 가독성을 높였다.
  {line-height: 30px;}

2. Grid

• 사진을 4x3 형태로 정렬하기 위해 grid를 사용햇다.

.card {
    display: grid;
    grid-gap: 1px;
    grid-template-areas:
        "card1 card4"
        "card5 card8"
        "card9 card12";
    grid-template-columns: repeat(4,210px);
    grid-template-rows: repeat(3,210px);
    position: relative;
    margin-left: 200px;
}

Footer

Contact

1. Logo

• logo 이미지를 추가하여 메일/git/velog 로 이동할 수 있도록 하였다.

.logo {
  padding-left: 10px;
  padding-top: 10px;
  width: 20px;
  height: auto;
}

2. Mail 보내기

• title 이미지 위에 마우스 올렸을 때 "메일보내기" 문구가 나오도록 하였다.
• mailto 이미지 클릭 시 메일주소로 메일 보내기 기능을 추가하였다.
  (-> 네이버 웨일에서는 반응이 없다. 메일 앱으로 연결되어 메일을 보낼 수 있다고 한다.}

 <a href="mailto:5ongnaeu17@gmail.com" title="메일보내기">
   <img src="https://cdn.icon-icons.com/icons2/2119/PNG/512/google_icon_131222.png" class="logo">
</a>

해결해야 할 문제!!

1. Navigation bar: Hover

• Hover를 Headline에 추가하였는데 왜 다른 위치로 이동하는 것인가!!!!

2. Navigation bar & .card Grid

• Navigation bar에 fixed 속성을 줬는데 .card grid 영역이 왜 최상단으로 오는 것인가!!

웹페이지 보러가기