CSS & HTML 기초(10)

min_chan·2024년 3월 28일
CSShtml
0

CSS & HTML

목록 보기
10/10
post-thumbnail

22.넥슨(가변 레이아웃,이미지 커지며그림자와 fade효과,아이콘 공통클래스,한 줄 말줄임

html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <meta name="viewport" content="width=1004" />
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="description"
      content="즐거움이 가득한 넥슨 게임, 모든 게임을 한 곳에서 만나보세요."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://ossamuiux.com/test/" />
    <meta property="og:title" content="넥슨" />
    <meta
      property="og:description"
      content="즐거움이 가득한 넥슨 게임, 모든 게임을 한 곳에서 만나보세요."
    />
    <meta
      property="og:image"
      content="http://ossamuiux.com/test/images/common/20230315195155CAKTKJ.jpg"
    />
    <title>넥슨</title>
    <link rel="icon" href="images/common/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" href="images/common/favicon.jpg" />
    <!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
      rel="stylesheet"
    /> -->
    <!-- <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet"> -->
    <!-- 타임스탬프 코드로 캐싱방지 -->
    <link rel="stylesheet" href="css/common.css?v=<?php echo time(); ?>" />
    <link rel="stylesheet" href="css/main.css?v=<?php echo time(); ?>" />
  </head>
  <body>
    <div id="skip_navi">
      <a href="#container">본문바로가기</a>
    </div>
    <div id="wrap">
      <main id="container">
        <section class="main_game">
          <div class="inner">
            <div class="game_top">
              <h2>전체게임</h2>
              <a class="link_btn" href="#" target="_blank" title="새창 열림">
                <i class="community_sns_icon"></i>

                모바일 게임 커뮤니티 모아보기</a
              >
              <div class="search">
                <input type="search" placeholder="게임명 검색" />
                <button type="button" class="search_btn">
                  <span class="blind">search</span>
                </button>
              </div>
            </div>
            <div class="filter">
              <a class="active" href="#">#전체</a>
              <a href="#">#얼리 스테이지</a>
              <a href="#">#Windows</a>
              <a href="#">#macOS</a>
              <a href="#">#steam</a>
              <a href="#">#전체</a>
              <a href="#">#얼리 스테이지</a>
              <a href="#">#Windows</a>
              <a href="#">#macOS</a>
              <a href="#">#steam</a>
              <a href="#">#전체</a>
              <a href="#">#얼리 스테이지</a>
              <a href="#">#Windows</a>
              <a href="#">#macOS</a>
              <a href="#">#steam</a>
              <a href="#">#전체</a>
              <a href="#">#얼리 스테이지</a>
              <a href="#">#Windows</a>
              <a href="#">#macOS</a>
              <a href="#">#steam</a>
              <a href="#">#전체</a>
              <a href="#">#얼리 스테이지</a>
              <a href="#">#Windows</a>
              <a href="#">#macOS</a>
            </div>
            <ul class="game">
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="./images/BlEa21085006355.png" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/3gQU21103609518.png" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="FC온라인" />
                  </div>
                  <div class="txt_wrap">
                    <strong>FC온라인</strong>
                    <div class="type">스포츠</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="메이플스토리" />
                  </div>
                  <div class="txt_wrap">
                    <strong>메이플스토리</strong>
                    <div class="type">RPG</div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img
                      src="images/2ZeX12172054310.jpeg"
                      alt="프라시아 전기"
                    />
                  </div>
                  <div class="txt_wrap">
                    <strong>프라시아 전기</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      MMORPG
                    </div>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="img_wrap">
                    <img src="images/2ZeX12172054310.jpeg" alt="던전앤파이터" />
                  </div>
                  <div class="txt_wrap">
                    <strong>던전앤파이터</strong>
                    <div class="type">
                      <em class="event">EVENT</em>
                      ACTION RPG
                    </div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

css

/* 컬러 변수 */
:root {
  --point-color1: #07f;
  --point-color2: #2be283;
  --txt-color-400: #9fa1a7;
  --txt-color-500: #4a4e57;
  --txt-color-600: #17191d;
}
#wrap {
  min-width: 1004;
  background: #f8f9fa;
}

.main_game {
  padding-bottom: 300px;
}

.main_game .inner {
  width: 1280px;
  margin: 0 auto;
}

.main_game .game_top {
  display: flex;
  align-items: center;
}

.main_game .game_top h2 {
  font-family: 'NEXONLv1Gothic', sans-serif;
  font-size: 24px;
  color: var(--txt-color-600);
  margin-right: 15px;
}

.main_game .game_top .link_btn {
  font-family: 'NEXONLv1Gothic', sans-serif;
  color: #4a4e57;
  display: flex;
  align-items: center;
}

.main_game .game_top .link_btn:hover {
  color: var(--point-color1);
}

.main_game .game_top .link_btn:hover i {
  background-position-x: -50px;
}

.main_game .game_top .link_btn::after {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../images/set_newpage.svg);
  margin-left: 5px;
}

.main_game .game_top .link_btn:hover::after {
  background-position-x: -50px;
}

.main_game .game_top .search {
  /* flex아이템에 마진 auto 사용 시 반대방향 끝까지 밀림 */
  margin-left: auto;
  position: relative;
}

.main_game .game_top .search input[type='search'] {
  height: 44px;
  width: 100%;
  border: none;
  background: none;
  border-bottom: 1px solid #dde1e5;
  padding: 0 40px 0 3px;
}

.main_game .game_top .search_btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  /* svg로 해야 적용가능 */
  -webkit-mask: url(../images/search_FILL0_wght300_GRAD0_opsz24.svg) no-repeat
    center center / 20px;
  mask: url(../images/search_FILL0_wght300_GRAD0_opsz24.svg) no-repeat center
    center 20px;
  background: var(--txt-color-600);
  border: none;
}

.main_game .game_top .search_btn:hover {
  background: var(--point-color1);
}

.main_game .filter {
  margin-top: 20px;
  background: #fff;
  height: 100px;
  padding: 0 30px;
  display: flex;
  /* 두 줄 가운데 정렬 */
  align-content: center;
  flex-wrap: wrap;
  gap: 17px 16px;
}

.main_game .filter a {
  padding: 0 10px;
  line-height: 21px;
  color: #9fa1a7;
  transition: all 0.2s;
}

.main_game .filter a:hover {
  color: var(--point-color1);
}

.main_game .filter a.active {
  background: var(--txt-color-600);
  color: #fff;
  border-radius: 11px;
}

.main_game .game {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 24px;
  margin-top: 35px;
}

.main_game .game li {
  /* flex-wrap으로 내려간 경우 간격의 총합 / 컬럼 수 만큼 빼야함 */
  width: calc(25% - 72px / 4);
  transition: box-shadow 0.5s;
}

.main_game .game .img_wrap {
  position: relative;
  overflow: hidden;
}

.main_game .game .img_wrap::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  opacity: 1;
  /* 페이드 효과에 cubic-bezier 사용하지 말 것 
  페이드 효과에는 시각적으로 차이가 없음*/
  transition: all 0.15s;
}
.main_game .game .img_wrap img {
  transition: all 0.2s;
}

.main_game .game li:hover .img_wrap::after {
  opacity: 0;
}

.main_game .game li:hover .img_wrap img {
  transform: scale(1.1);
}

.main_game .game .txt_wrap {
  height: 120px;
  background: #fff;
  padding: 24px 24px 0;
}

.main_game .game .txt_wrap strong {
  font-size: 16px;
  font-family: 'NEXONLv1Gothic', sans-serif;
  color: var(--txt-color-600);
  margin-bottom: 10px;
  display: block;
}

.main_game .game .txt_wrap .type {
  color: var(--txt-color-400);
}

.main_game .game .txt_wrap .event {
  color: var(--point-color1);
  font-weight: 700;
}

.main_game .game li:hover {
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
}

@media (max-width: 1412px) {
  .main_game .inner {
    width: 954px;
  }

  .main_game .game li {
    /* 48px / 3 = 16px */
    width: calc(100% / 3 - 16px);
  }
}
profile
min_chan
이전 포스트

CSS & HTML 기초(9)

0개의 댓글