기말 홈페이지 만들기 - 1

쿠키런이 팬들 자유롭게 쓰라고 팬키트까지 줫으니 써도 되겟지? ㅇㅇ

솔직히 이거 쓰는거두 그레이존이라 

상업적 이용 아니잖어

어디 배포해서 실제 쓰게 할거도 아니고...

 

암튼

교양 과제라 부트스트랩을 사용하긴 하지만,,, style로도 직접 넣어보기로 한다

 

 

 

네비게이션 - 글자 마우스오버 할때 아래 이미지 뜨게

사실 텍스트가 이미지로 바뀌길 바라지만 어떻게 하는지 몰름

    <nav
      class="navbar bg-body-tertiary navbar-expand-md"
      style="padding-left: 15px; padding-right: 15px"
    >
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img
            src="images/CRKlogo.png"
            alt="쿠킹덤로고"
            style="width: 70px; height: auto"
          />
        </a>

        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">

          <ul class="navbar-nav list-container my-2">
            <li class="nav-item">
              <a class="nav-link" href="arena.html">아레나 공략</a>
              <img
                class="hover-image"
                src="images/Madeleine_Excited.png"
                alt="아레나 공략 이미지"
              />
            </li>
            <li class="nav-item">
              <a class="nav-link" href="guild.html">길드전 공략</a>
              <img
                class="hover-image"
                src="images/Eclair_Excited.png"
                alt="길드전 공략 이미지"
              />
            </li>
            <li class="nav-item">
              <a class="nav-link" href="event.html">이벤트 공략</a>
              <img
                class="hover-image"
                src="images/Custard_shy.png"
                alt="이벤트 공략 이미지"
              />
            </li>
            <li class="nav-item">
              <a class="nav-link" href="decor.html">왕국 꾸미기</a>
              <img
                class="hover-image"
                src="images/admire.png"
                alt="왕국 꾸미기 이미지"
              />
            </li>
          </ul>
        </div>
      </div>
    </nav>

 

 

아래 첫 섹션

%로 하면 이미지가 화면 사이즈에 따라 바뀌구 픽셀로 하면 고정이넹

   <section id="kingdom-bg">
      <div class="container">
        <div
          
          style="display: flex; justify-content: center; align-items: center"
        >
          <img
            class="mt-5"
            src="images/gingerbrave.PNG"
            alt="용감한쿠키"
            style="width: 60%; height: auto"
          />
        </div>
        <h2
          class="fw-bold mb-3"
          style="
            margin-top: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          모험은 이제부터 시작이야!
        </h2>
        <p class="mb-5" style="display: flex; justify-content: center; align-items: center">
          어떤 모험이 기다리고 있을까?
        </p>
        <div class="d-flex justify-content-evenly px-5 mt-4 w-50 m-auto"></div>
      </div>
    </section>