[패스트캠퍼스python] Django 홈페이지 실습: web font, a태그 밑줄제거, 마우스오버시 글자색상변경, float적용방법

파이썬 인강 자기계발 챌린지 23회차 미션

1. web font사용

폰트패밀리로 폰트를 지정해주었을 때, 만약 사용자가 해당 폰트를 다운로드해서 가지고 있지않으면 폰트 적용이 아예 안된다.
이를 방지하기위해 웹폰트를 사용하면 사용자가 굳이 다운로드하지않더라고 폰트가 적용된 채로 홈페이지를 볼 수 있다.

웹폰트는 무료도 있고 유료도 있지만 제일 유명한 구글폰트는 무료이다.

• 구글웹폰트

• 구글웹폰트깃허브 : 한글

• 눈누 : 한글폰트로 유로뿐만 아니라 무료상업용웹폰트도 쉽게 찾을 수 있다.

웹폰트 사용법은 간단하다. 웹폰트의 link태그를 복사하여 head태그 사이에 붙여넣기하면 된다.

2. a태그 밑줄제거 text-decoration: none;

a태그등을 링크를 나타나내는 태그를 사용하면 자동적으로 밑줄이 나타난다.
이를 없애주기 위해서 { text-decoration: none; }을 주면 된다

아래 1번은 a태그의 본래 그대로의 모습이고 이제 { text-decoration: none; }를 적용하면 3번처럼 밑줄이 없이 예쁘게 출력되는 것을 볼 수 있다.

3. 카테고리 기본 레이아웃만들기 display: block; + padding: 10px;

list-itmes밑에 있는 8개의 a태그를 한꺼번에 선택하는 방법에는 두가지가 있다.
편한 방법으로 선택해주면 된다.

1. 첫번째 방법 : .list-items a {}

   .list-items a{
       color: white;
       display: block;
       padding: 10px;
   }

2. 두번째 방법 : .list-items > a {}

   .list-items > a{
       color: white;
       display: block;
       padding: 10px;
   }

1번은 위의 태그가 적용되기 전의 모습이고 3번은 적용된 후의 모습이다.
패딩을 넓게 주어 사용자가 카테고리를 편하게 선택할 수 있도록 했다. 기본적으로 홈페이지 만들때 자주 사용되니 알아두면 좋다.

4. 가상클래스이용해서 마우스오버시 색상변경 구현

가상클래스를 이용하여 카테고리에 마우스를 올리면 글자색상을 변경해보자.
기존 글자색사은 흰색이고 해당 클래스에 마우스를 올리면 검정색으로 글자색이 변한다.

list-items > a:hover {
    color: black;
}

이러한 디자인으로 사용자에게 지금 어느 카테고리위에 마우스가 있는지 친절하게 알려주어 사용성이 올라간다.

5. float 적용방법

위의 이미지는 메인콘텐츠와 사이드콘텐츠에 각각 { float : left; }, { float : right; }를 주었다.
이로 인해 3가지 문제점이 발견된다.

1. 하늘색은 main태그인데 main영역이 메인콘텐츠와 사이드콘텐츠의 높이를 전혀 인지하지못하고 있어 히어로콘텐츠와 메인콘텐츠, 사이드콘텐츠의 높이를 함께 포함하고 있어야하는데 히어로콘텐츠의 높이만 인식하고있다.

2. 초록색은 footer태그인데 footer영역이메인콘텐츠와 사이드콘텐츠의 영향을 받고 있어 높이가 메인콘텐츠와 사이드콘텐츠만큼 올라와 있다.

float된 속성은 normal flow에서 벗어나기때문에 자기자신의 높이를 상위태그가 알지 못하게 된다.
normal flow에서 벗어났다는 의미는 해당 부분이 띄어져있다는 의미이다.
따라서 이에 영향을 받는 태그들에게 { clear : both; }를 해줘서 자신의 높이를 찾도록 해줘야한다.

1. 1번문제 해결방법 : float한 태그들을 div.container-float로 묶은 뒤 div.container-float에 가상요소를 주고 그 가상요소에 { clear : both; }를해준다.

   1. 메인콘텐츠와 사이드콘텐츠를 div.container-float안으로 감싸준다.

   2. .container-float에 가상요소를 주어 { clear : both; } 를 적용시킨다.

      .container-float ::after{ //가상요소after
         display: block;
         content: "";
         clear: both;
      }

2. 2번문제 해결방법 : footer { clear : both; }

   1. footer태그에 아래와 같이 { clear : both; }속성을 적용시킨다.

      .footer{
         clear: both; 
      }