배웠던 거랑 접목시켜서 해봤는데 왜 안되는지 궁금해서 질문합니다.... - 인프런

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

[Part 04] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(모달창 제이쿼리 상호작용)

배웠던 거랑 접목시켜서 해봤는데 왜 안되는지 궁금해서 질문합니다.ㅠㅠ

해결된 질문

작성

158

먼저, 궁금한 점은 .modal-gnb를 클릭한 후, <a>태그 :hover 했을 때 왼쪽->오른쪽으로 crimson 색이 width: 0 -> width: 100%으로 완전히 다 채워지길 바라는데 부분만 되고 완전히 crimson색이 채워지지가 않습니다.

[Part 04] 비디오 백그라운드를 활용한 랜딩페이지 - 풀스크린 네비게이션(모달창 제이쿼리 상호작용) 지금 듣고 있는 이 수업과 HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1) > 마우스 올리면 배경이미지 변경하기 with jQuery 바로 이 전의 강의의 학습한 걸 접목시키고 싶어서 해봤는데 깔끔하게 안되네요.ㅠㅠ

이렇게 왕창 효과 넣어서 하는게 욕심인 건 알지만, 그래도 학습할 때 해보고 싶어서 해봤는데 아무래도 선생님의 도움이 필요할 거 같아요...ㅠㅠ

<html> / <css> 소스가 길어서 주소로 올립니다.!

http://yoonk2021.dothome.co.kr/VScode/html/videobg.html

검사-> Sources 들어가서 복사하셔서 한번 봐주세요 선생님ㅠㅠ 늘 감사합니다.

+)참고로, 오디오는 아직 수업을 듣지 않은 상태여서 없습니다.!

HTML/CSS jquery

답변 3

코딩웍스(Coding Works)

지식공유자

.modal-gnb {
  background-color: #000;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.gnb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  padding: 0;
  margin: 0;
}
.gnb li {
  /* 세로 배치를 위한 목적 */
  /* .gnb a 로 해서 display: block을 주면 a의 크기가 텍스트의 양 보더 커지는 것들의 채워지는 속도가 다른 것이랑 다르기 때문에 a는 인라인 요소를 유지해야 자연스럽습니다. */
  /* 네비게이션 참고하신 예제에도 ul li a 구조로 만들어져 있을거에요. */
}
.gnb li a {
  text-decoration: none;
  color: #fff;
  font-size: 4em;
  position: relative;
}
.gnb li a:before {
  content: attr(data-list);
  color: crimson; /* 색상을 crimson으로 하니까 a태그의 텍스트 흰색이 좀 보이네요. yellowgreen 같은 좀 덜 대비대는 색을 사용하세요. 만약 crimson을 사용하실 경우 아래에 text-shadow로 꼼수를 살짝 써주시면 좀 낫습니다. */
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.5s;
  text-shadow: 1px 1px crimson,
              -1px -1px crimson;
}
.gnb li a:hover:before {
  width: 100%;
}

yoonk

질문자

선생님! 네비게이션 만들 때, <div><a> / <ul><li><a>

이렇게 나눠서 쓰시는 모습을 여러번 얘기해주셨는데 아직 많이 부족해서 강의한 그대로에서 배웠던 거 해보자.! 라는 의미로 그 상태에서 바로 사용해봤는데 정말 선생님께 많이 배우고 있습니다. 흑흑

진짜 독학하는 저에게 선생님은 빛 그 자체예여..ㅠㅠ.!

알려주신 대로, 직접 다시 해보겠습니다.! 이어서 강의를 마저 듣고 하고 싶어서 댓글이 늦었는데 그 점 죄송하다는 말을 전하며 이제 오늘로써, 이 강의는 수업이 다 끝났는데 계속 복습은 복습대로 하면서, 바로 다음 강의에서 뵙겠습니다.! 그럼, 늘 감사합니다:)

코딩웍스(Coding Works)

지식공유자

제가 국비학원에서 학생들 가르칠 때 수동적인 학생들 자주 봅니다.
스스로 찾아서 하는 경우가 아예 없고 조금만 안되면 안된다고 손들어요.
처음 배우는거면 그럴 수 있지만 3개월 정도 지난 시점에도 너무 너무 자주한 것들...예를들어 구글 웹폰트 링크, 폰트어썸 CDN 링크 등등 너무 기본적인 것들이죠.
그런 학생들 보면 심난합니다. 그래서 가끔 학생들에게 이야기하죠.

"퍼블리싱 독학하는 사람들 있는데 어디 물어볼 곳도 없고 힘들지만 능동적으로 정말 열심히 합니다." 라고...

독학하는거 힘듭니다. 오래전 이야기지만 저도 독학했구요.
독학이 힘들지만 좋은 조력자가 있다면 적극적이고 능동적으로 학습하고 찾아가는 능력이 실무에서도 빛을 발하게 될거에요.

코딩웍스도 yoonk 님 항상 응원하겠습니다. 화이팅~!!

코딩웍스(Coding Works)

지식공유자

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>비디오 백그라운드를 활용한 랜딩페이지</title>
  <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=Open+Sans&family=Raleway:wght@300;400;700;900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <div class="modal-gnb">
    <ul class="gnb">
      <li><a href="#none" data-list="Attractions">Attractions</a></li>
      <li><a href="#none" data-list="Hotels & Spa">Hotels & Spa</a></li>
      <li><a href="#none" data-list="Shop & Dine">Shop & Dine</a></li>
      <li><a href="#none" data-list="Celebrate">Celebrate</a></li>
      <li><a href="#none" data-list="Promotions">Promotions</a></li>
    </ul>
  </div>

</body>

</html>

코딩웍스(Coding Works)

지식공유자

답변이 좀 늦었네요.

아래 코드를 보시면 아시겠지만 몇가지 덧붙이고 싶은건 구글 웹폰트는 css파일 내부에 @import로 링크하세요.

전체 코드가 좀 헛갈려서 네비게이션 필요한 부분만 다시 만들어서 아래에 코드 올렸으니까 참고하세요.

구체적인 설명은 주석으로 표시했어요.

인프런 커뮤니티 질문&답변

배웠던 거랑 접목시켜서 해봤는데 왜 안되는지 궁금해서 질문합니다.ㅠㅠ