[Wecode]HTML&CSSを使用した自己紹介ページ-1の作成

✍🏻 自己紹介ページの作成

今日は史伝学習の第1週目の課題を作成する自己紹介ページについての投稿をします.実は1~2年間、先端開発者になるために自分で勉強してきたと思っていましたが、今回の課題を通して、まだまだ足りない人だなと感じました.それでも、私が以前使っていたコードやDREAMコード製品の組み合わせを作るときに学んだコードもうまく利用できます.
完了した自己紹介ページ

🎞️ レイアウト

大まかなレイアウトはこのように設定されています.実際には、複数のページを接続して作成することを考えていましたが、現在は複数のページアプリケーションでしか実現できないため、1つのページからnavbarボタンで移動できる効率が低いようにレイアウトを設定しました.ボタン移動のレイアウトでブラウザにheightプロパティが設定されているだけで、1ページしか感じられません.

使用するすべてのコード

1. Header

<header>
        <div class="page_logo">
            <i class="fas fa-male"></i>
            <a href="#">Kyeom's Page</a>    
        </div>
        <nav id="navbar">
            <ul class="navbar_menu">
                <li class="navbar_menu_item" data-link="#me">About Me</li>
                <li class="navbar_menu_item" data-link="#skills">Skills</li>
                <li class="navbar_menu_item" data-link="#hobby">Hobby</li>
                <li class="navbar_menu_item" data-link="#gallery">Gallery</li>
                <li class="navbar_menu_item" data-link="#contact">Contact</li>
            </ul>
        </nav>
    </header>

タイトルのhtmlタグ.

/* Header */

header {
  height: 1300px;
  position: relative;
}

header:after {
  background-image: url(imgs/header_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0.5 !important;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
}

.page_logo {
  display: flex;
  font-weight: var(--weight-semi-bold);
  justify-content: center;
  font-size: 70px;
  padding: 300px;
  padding-bottom: 200px;
}

.page_logo i {
  margin: 20px;
}

.page_logo:hover {
  transition: 0.7s;
  color: var(--color-white);
}

.navbar_menu {
  display: flex;
  justify-content: center;
  font-size: var(--font-medium);
}

.navbar_menu_item {
  padding: 8px 12px;
  margin: 0 4px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--size-border-radius);
}

.navbar_menu_item:hover {
  transition: 0.7s;
  border: 1px solid var(--color-white);
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--size-border-radius);
}

タイトルのCSS属性.
タイトルの最も重要な機能は、スクロール時にバックグラウンド画面を固定し、navbarボタンをクリックすると対応するレイアウトに移動することです.
スクロール時の固定背景画面は、現在出前している民族のホームページやスターバックスのホームページでも見られる機能です.「わあ、それはどんな巨大なコードで実現された複雑な機能ですか?」恐怖と興奮がある.しかし、これを実現するには、想像以上に簡単なコードが1行必要です.

background-attachment: fixed;

background-attachmentプロパティをfixedに設定すると、バックグラウンドはビューポートに対して固定されるため、スクロールしてもバックグラウンドは一緒にスクロールせず、固定された状態になります.ただし、ここでは新しい問題が発生し、既存の<header>タグにバックグラウンド属性と不透明度属性を適用すると、headerタグの内部に存在するpage logo要素とnavbar要素にも透明度が適用されます.
この問題を解決するために、::afterのサブドクター要素をCSSの仮想要素<header>によって追加することができる.既存の<header>タグのサブセマンティック要素に背景要素と不透明度を設定した後、z-indexによってその要素のz軸方向を後に送信することで、不透明度が背景画面にのみ適用されることを確認することができる.

navbarのボタンをクリックしてレイアウトに移動する機能にはJavaScriptが必要です.まず、データセットを利用するためにnavbarメニューのHTML要素でdataset属性をカスタマイズします.

<nav id="navbar">
	<ul class="navbar_menu">
		<li class="navbar_menu_item" data-link="#me">About Me</li>
		<li class="navbar_menu_item" data-link="#skills">Skills</li>
		<li class="navbar_menu_item" data-link="#hobby">Hobby</li>
		<li class="navbar_menu_item" data-link="#gallery">Gallery</li>
		<li class="navbar_menu_item" data-link="#contact">Contact</li>
	</ul>
</nav>

Datasetプロパティをカスタマイズするには、data-(변수명)形式で値を入力して指定します.ここでは、データセットにlinkという変数を与え、レイアウトのid値として値を与えます.

// function about scroll smoothly
function scrollIntoView(e) {
  const scrollTo = document.querySelector(e);
  scrollTo.scrollIntoView({
    behavior: "smooth",
  });
}

// Handle scrolling when tapping on the navbar menu
const navbarMenu = document.querySelector(".navbar_menu");
navbarMenu.addEventListener("click", (event) => {
  const target = event.target;
  const link = target.dataset.link;
  if (link == null) {
    return;
  }
  navbarMenu.classList.remove("open");
  scrollIntoView(link);
});

これらはnavbarのjs関数です.最初にボタンをクリックすると対応するレイアウトにスクロールされるため、要素がWindow.scrollTo()になるように「スクロールIntoView」という関数が定義されています.ここで、behaviorは「スムーズ」値を適用し、よりスムーズなスクロールを実現します.navbar_menuのclass値を呼び出し、clickアクティビティをaddEventListenerで登録します.ここで、datasetのlink変数をロードするためにtarget変数にevent.target値、link変数にtarget.dataset.link値を格納する.link値がnullの場合はreturn文を使用します.link値が有効な場合は、前に宣言したscrollIntoView関数を使用してイベントハンドラを登録し、link値に割り当てられたレイアウトに移動します.

2. About Me
レイアウトの開始AboutMeレイアウトHTML&CSSを中心に作成された自己紹介ページなので、CSSアニメーション属性を多く使いたいです.ということで少しわけがわからなかったのですが、私の写真をぐるっと回してみたらどうなるかと思ったので、応用してみました.

#me img {
  display: block;
  margin: 30px auto;
  width: 400px;
  height: 400px;
  border-radius: 100% 100% 100% 100%;
}

#me img:hover {
  animation: rotation 2s infinite ease;
  transition: 3s;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

まず、画像を丸くするためにwidthとheightの値を等しく設定し、border-radiusの値を50%にします.そしてなんといっても、私はずっと回転していると少しめまいがすると思いますので、マウスをアップロードするとき、つまり:hoverの状態のときだけアニメをくれることにしました.アニメーションは回転2 sに無限回転を与えた.
また、3 D回転の感覚を与えるために@keyframes属性を使用し、Y軸0 degから360 degに回転するように設定した.

回転する石臼~
次の個人情報は、サスペンション時scale(1.2)とbluecolorです.

#me p:hover {
  transform: scale(1.2);
  color: var(--color-blue);
  transition: 0.5s;
}

(第2話継続)