경일게임아카데미 웹페이지를 복사 구현하기 위해 다양한 태그와 속성을 이용한다.

1. html태그

• div
  block속성을 가지고 있는 태그.
  연속으로 작성시, 높이(height)만큼의 가로영역을 모두 차지한다.
  그 다음 영역은 밑으로 떨어져 구현된다.
• span
  inline속성을 가지고 있는 태그.
  연속으로 작성시, 왼쪽부터 오른쪽방향으로 차례대로 구현된다.
• ul, li
  목록을 작성할때 사용하는 태그.
  li 태그안에 a태그 (앵커태그)를 넣어 사용한다.
  a태그에는 이미지도 들어갈 수 있다.
  a태그 속성값으로 아무것도 들어가지 않을때는 "#"을 사용한다.

<ul id="menu">
  <li><a href="#">집사소개</a></li>
  <li><a href="#">성장과정</a></li>
  <li><a href="#">발톱정보</a></li>
  <li><a href="#">커뮤니티</a></li>
  <li><a href="#">감자캐기</a></li>
</ul>

토막 확장자 상식
1. gif : 용량이 적고 뒷배경을 투명하게 할수 있다.
2. jpg : 용량은 적당하고, 뒷배경은 투명하게 할수 없다.
3. png : 용량이 많이들고, 뒷배경을 투명하게 할수 있다.
4. svg : 벡터방식으로 용량이 가장크고,
사이즈를 늘이고 줄여도 깨짐이 없다.
아이콘으로 많이 쓴다.

2. css속성

• position
  position: absolute;
  : body영역을 기준으로 요소를 움직이게 설정한다.
  position: relative;
  : 부모요소를 기준으로 움직이게 설정한다.

  position과 함께 쓰이는 속성값

  • top, right, bottom, left
    : 2방향을 정한 픽셀만큼 이동시킨다.
    4방향 설정은 불가능
  • z-index
    : 영역이 겹쳤을 시 화면 앞으로 보낼 것과 뒤로 보낼 것의 우선순위를 정한다.
    숫자가 높을 수록 앞으로 나온다.

  .visual-menu {
     /*width: 1920px;
     width: 100%;*/
     height: 42px;
     margin: 0 auto;
     position: relative;
     background-color: rgb(0,0,0,0.5);
     bottom: 39px;
  }

• list-style
  ul, li, href 등 부가적으로 붙는 것들을 조절해주는 속성값
  list-style: none;
  : li 사용시 앞에 붙는 동그라미를 없애주는 속성

  ul,li{
  	list-style: none;
  		}

• width: 100%;
  영역의 가로 한줄을 모두 사용하겠다는 뜻

• margin: 0 auto;
  위 아래로 margin 0을 설정하고, 좌 우는 자동으로 설정하게 도와주는 착한 친구.

  .header {
      width: 1200px;
      height: 100px;
      margin: 0 auto;
      box-sizing: border-box;
  }

• display: inline-block;
  inline속성을 block속성으로 바꿔주는 속성값.
  사용시 요소마다 빈 공간이 생긴다.

  .visual-menu > ul {
      margin: 0 auto;
      display: inline-block;
      padding-top: 9px;
  }

• float
  div를 정렬할 때 사용한다.
  block속성을 유지한 채 해당 요소를 설정 방향으로 이동시킨다.
  근처에 붙어있는 요소들도 영향을 받는다.

  해결법: 붙어있는 요소에도 float를 준다.

  .footer-menu {
      float: left;
      width: 1200px;
      padding: 20px 0 30px 0;
  }
  
  .footer-menu > ul > li {
      display: inline-block;
      float: left;
      width: 110px;
      box-sizing: border-box;
      font-size: 12px;
  }

• text-decoration
  a태그 사용시 밑에 그어져 있는 밑줄을 안 보이게 한다.

  a태그는 block형태로 바꾸거나 inline형태로 바꿔줘야 크기조절이 가능하다.

• text-align
  현재 영역에서 부터 정렬을 할 수 있다.

  * {
      margin: 0;
      padding: 0;
      text-decoration: none;
      color: aliceblue;
      text-align: center;
  }

• background
  요소의 배경색을 변경 할수있다.
  투명도 설정이 가능하다.

  .visual-menu {
      /*width: 1920px;
      width: 100%;*/
      height: 42px;
      margin: 0 auto;
      position: relative;
      background-color: rgb(0,0,0,0.5);
      bottom: 39px;
  }

• opacity
  선택자의 투명도를 조절한다.

  .visual-menu > ul > li > a.on{
      opacity: 1;
      background-color: black;
  }

3. clone 페이지 결과물

웹페이지 전체화면 캡처 방법
1. F12로 개발자도구 진입
2. Ctrl + Shift + P 동시에 입력
3. 모음집에서 "capture" 검색
4. 검색결과에서 "Capture full size screenshot" 클릭 후 저장