어제 한 것에 이어서 웹 페이지를 만들고 레이아웃을 만드는 것을 계속 해보자.

오늘은 우선 visual 하단 메뉴바에 마우스 커서에 반응해 불투명해지는 기능을 구현하고

visual 아래의 contents section 일부를 만들어 볼 것이다.

각 부분의 명칭은 원본 웹 사이트를 기준으로 정했다.

1. hover

hover는 마우스 커서를 해당 element 위에 올리면 element가 반응해 변화를 일으키도록

하는 기능이다. CSS에 다음과 같이 추가해보자.

#visual > #visual_menu > ul > li > a:hover {
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.8);
}

이렇게 추가했으면 지난 번에 저장한 a.on에 관해 추가한 코드는

삭제해도 된다.

2. contents

contents는 크게 두 부분으로 나눌 수 있다.

왼쪽엔 수강할 수 있는 수업들의 리스트가 있고, 오른쪽엔 리뷰와 홍보 영상이 있다.

전체 <div>를 <div id="container"> 이라고 하고, 그 child element에 다시

<div>를 2개 만들어 옆으로 나란히 오게 배열하자.

왼쪽 <div> 와 오른쪽 <div>의 아이디를 각각 classes, review라고 명명한다.

2.1 Classes 구현

우선 왼쪽에 어떤 수업들이 있는지 알려주는 메뉴를 구현해보자.

각각의 수업를 <li> 를 이용해 표현할 것이다.

<div id="container">
  <div id="classes">
  </div>
  <div id="review">
  </div>
</div>

이제 css파일에서 container의 크기와 위치를 조정한다.

#container {
  width:1200px;
  margin: 0 auto;
}

이제 "classes"와 "review"가 이 container를 절반씩 차지하게 할 것이다.

마찬가지로 css 파일에서 위치, 크기를 설정해준다.

#container > #classes {
  float: left;
  width: 600px;
  background: blue;
#container > #review {
  float: right;
  width: 600px;
  background: red;  /* 배치가 되는지 확인을 위해 임시로 배경색을 대비시켜 넣는다. */

이제 왼쪽 영역의 메뉴들을 리스트 형태로 만들어 넣어보자.

<div id="classes">
  <ul>
    <li>
      <h2>
        <span> Game Architecture
        </span>
        게임 기획자
      </h2>
      <p>  /* <p> tag는 paragraph를 의미한다. */
        게임기획자를 위한 정석 Class
      </p>
     <a href="#">바로가기</a>
    </li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>  /*예시로 우선 리스트 중 하나만 작성후 복사 붙여넣기로 동일하게 작성 */
  </ul>
</div>

한 행에 2개의 <li>가 들어가야 하므로

리스트 내부의 요소들 각각 크기와 속성을 CSS에서 변환해 주어야 한다.

구체적인 폰트 크기와 배경색은 웹 사이트를 개발자도구를 열어서 값을 확인 후,

적절히 조정해주면 된다.

classes의 배경색은 삭제한 후, 다음처럼 코드를 추가한다.

#container > #classes > ul > li {
  float: left;
  width: 300px;
  padding: 20px;
  box-sizing:border-box;

#container > #classes > ul > li > h2 {
  font-size: 23px;
  color: #2d2d2d;
}

#container> #classes > ul > li > p {
  width: 50%;
  margin-top: 30px;
  font-size: 10px;

#container > #classes > ul > li > h2 > span {
  display: block;
  font-size: 12px;
  color: #4689e1;
}

#container > #classes > ul > li > a {
  display: inline-block;
  width: 100px;
  height: 30px;
  margin-top: 22px;
  font-size: 15px;
  text-align: center;
  background: #81b4f2;
  color: #fff;
}

여기까지 추가후, html을 새로고침하면 아래와 같이 나타난다.

이제 '바로가기' <a>를 약간 더 정밀하게 조정하기 위해 새로운 속성값을 추가한다.

가장 자리 모양을 변형해주는 border-radius 속성과

글자의 내부 위치를 조정하는 line-height 속성을 <a>의 내부에 추가해준다.

#container> #classes > ul > li > a {
  border-radius: 15px;  
  line-height: 30px;
}

2.2 그림 삽입 (border)

다음으로 CSS를 통해 그림을 삽입하는 방법을 알아보자.

그림을 'background'로써 삽입하기 위해 다음과 같이 background 속성을 사용해야 한다.

#container > #classes > ul > li {
  background: url('그림파일 경로') bottom 20px right 40px;
}

이렇게 삽입후 html 문서를 보면 바둑판 식으로 그림이 가득차게 배열되는 것을 볼 수 있다.

이를 방지하기 위해 no-repeat value를 넣어 수정해준다.

#container> #classes > ul >li {
  background: url('그림파일 경로') bottom 20px right 40px no-repeat;
}

각 리스트 별로 다른 그림을 추가하고 싶다면 리스트마다 다른 class 속성을 추가해

li 대신 "li.class이름" 을 CSS파일에 넣어주면 된다. 예를 들어 리스트의 첫 번째 항목만 그림을 넣고 싶다면

가장 윗줄에 있는 li에 class를 다음과 같이 추가해주고

<li class="c1">

css에서 다음과 같이 수정해주면 된다.

 #container> #classes > ul >li.c1 {
  background: url('그림파일 경로') bottom 20px right 40px no-repeat;
}

2.3 경계선 긋기

마지막으로 각각의 리스트들의 영역을 구분하기 위해 경계선을 추가하는 방법과 경계선 추가시

주의해야 할 점을 알아보자.

border를 넣을 때는 다음과 같은 형식을 따른다.

 border : 1px solid #FFF /* 굵기, 종류, 색 */

이 형식을 맞춰서 <li>에 border 속성을 다음과 같이 추가할 수 있다.

#container > #classes > ul > li {
  border: 1px solid #FFF;
}

이렇게 코드를 추가한 후 다시 브라우저에서 불러오면 경계선이 있는 것을 볼 수 있는데,

자세히 보면 경계선마다 굵기가 다르다는 것을 알 수 있다.

이는 경계선끼리 서로 겹칠 경우, 그 굵기가 중복되어 더 크기가 커지기 때문인데,

이를 피하기 위해 element의 상, 하, 좌, 우 중 지정한 부분만 border를 생성할 수 있다.

방법은 여러가지 있지만 여기서는 각 리스트들의 아래와 오른쪽에만 border를 주고,

container에 왼쪽, 위쪽 border를 줌으로써 각 border가 겹치지 않게 나타낼 수 있다.

  #container {
    border-left: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
  }

  #container > #classes > ul > li {
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }

2.3.1 border 사용시 주의할 점

border 또한 자체의 크기를 가지기 때문에 사이즈를 딱 맞춰서 레이아웃을 만들고

나중에 border를 추가할 경우 예상한 것보다 전체 element의 크기가 커져

줄이 예상치 못하게 바뀔 수가 있다.

이럴 경우, 추가된 border가 차지하는 픽셀의 총합만큼

parent element의 width를 늘려주면 해결할 수 있다.