자기소개 페이지 만들기

페이지 만드는 것보다 내가 누구인지 내가 뭘 좋아하는지 생각해내는데에 더 오랜 시간이 걸렸다.😅

강의 들을 때는 그냥 이해하고 넘어갔던 내용들이 직접 만들어보려니 적용이 어려웠다. 어디에 뭘 써야하고, 이름은 뭘로 짓고.. 역시 직접 만들어봐야 한다.

만들면서 기억하고 싶은 부분들 기록해보자

📖 네비게이션 바 (20.10.11)

1. 세로 가운데 정렬

  .navbar{
      height: 60px;
      line-height: 60px;   
  }

height 와 똑같이 line-height 주면 가운데 정렬된다.
구글링해보니 다양한 방법이 있던데 우선은 이게 가장 간편해서

2. list 가로

li{
      float: left;
  } 

float 개념은 다시 보고 정리해야지

3. 상단 고정

position: fixed; 

4. 네비게이션 바와 본문이 겹쳐지는 문제

네비게이션 바 position: fixed; 했더니 본문의 맨 윗부분과 겹치는 문제가 발생했다. 본문에 네비게이션 바 높이만큼 padding-top 줬더니 해결됐다.

📖 Favorite 페이지 (20.10.13)

1. 이미지 마우스 오버 시 어둡게

 .products img:hover{
    opacity: 0.2;
  }

:hover 추가하고 opacity 속성 주면 됨

2. 이미지 경로

background-image: url('../images/xx.jpg');
상위 폴더로 갈때 . 이 아니라 .. 임 (쩜 두개!!!!!!!!)
계속 파일 찾을 수 없다고 에러 떠서 한참 고생했는데 하하😂

3. 이미지 마우스 오버 시 글 나타나도록

• html

 <div class="products">
    <div class="text">
      <p>xxxx</p>
    </div>
  </div>

• css

   .text{
    width: 300px;
    height: 300px;
    background:#000000; 
    opacity:0; 
    padding:40px 20px;
    }

  .products:hover .text{
    opacity: 0.6;
    text-align:center; 
    color:#ffffff;
  }

마우스 오버 시, 사진 어두워지면서 흰 글씨 나타나도록

4. 여러줄 글씨 세로 가운데 정렬

세로 가운데 정렬에는 여러 방법이 있다.
navigation bar 만들때 사용했던 line-height 적용하는 방법이 통하지 않아서
여러 방법을 찾아보던 중, 간단하고 여러 개에 한 번에 적용되는 방법을 찾음
table-cell 로 만들어서 세로 가운데 정렬 시키는 방법

• html

 <div class="products">
    <div class="text">
      <p>xxxx</p>
    </div>
  </div>

• css

.products {
    display:table;
}
.text {
    display:table-cell;
    vertical-align:middle;
}

📖 Footer (20.10.13)

1. 항상 페이지 우측하단 고정 (스크롤 내려도)

  .footer{
      text-align: center;
      position: fixed;
      bottom: 0;
      right: 0;
  }