自己紹介ページの作成

Ellis SWエンジニア科目第2週金曜日挑戦

今周DOMと勉强して本当に疲れました.最後の授業は今まで習ったホームページを作るので、とても面白かったです.
木曜日の問題集はまだ終わっていません.私はこれらを書き終わってから解きます.

概要🗒

プロジェクト名:自己紹介ページの作成
企画と制作:芸恩
チャレンジ(個人)
制作時間|2022.04.15(1日)
使用ツール:HTML、CSS、JavaScript
リンク:自己紹介ページに移動

画面の設定🎨

1.ナビゲーションバー

JavaScriptを使用してナビゲーションバーを作成し、リンクをクリックするとこのセクションにスクロールします.

var aTags = document.querySelectorAll("header a");
for(var i = 0; i < aTags.length; i ++) {
    aTags[i].onclick = function(e) {
        e.preventDefault();
        var target = document.querySelector(this.getAttribute("href"));

        window.scrollTo ({
            'behavior': 'smooth',
            'top': target.offsetTop
        })
    }
}

JavaScriptコースで学んだScroll Navigationメソッドは、event.preventDefault();が特定の機能を停止する方法を示します.クリックすると、event.targetを使用してイベントが発生したターゲットオブジェクトを指し、デフォルトの機能は元の動作を停止する必要があります..getAttribute()要素の指定した属性値を返します.window.scrollTo ()指定のポイントまでスクロールします.ウィンドウを貼り付ける必要はありませんが、親要素に最も近いpadding、スクロールバー、border、および明示的に貼り付けられた.offsetTop要素の余白を含む相対的な位置に戻ります.親要素はposition:staticに設定されていません.

2.今後の目標

最上位のヘッダの内容
画像を選択すると、画像の透明度が低下し、後ろのテキストが表示されます.
一番簡単に見えるけど・・・ここで一番苦労しました...🤯
反反応協ページに関係なく、画面サイズを縮小しても画像は移動しますが、テキストは移動しません...

いったい何が問題なのか.どのようにcssコードを変換しても、移動していません...結局そのまま提出して、翌日には問題解決…!

反応型ネットワークではありません...縮小すると醜いけど問題解決!
翌日もずっと気を使っていて、位置値を全部外して、最初からグループ分けし直してborderで箱を確認していたので、成功しました...
要素たちがそれぞれ遊んでいるのではないでしょうか.

3.注目技術

関心のある技術は、スターバックスのクローンコードで学んだことを応用した.
コードペンを使用してサンプルコードを作成し、理解しやすいようにします.

4.ソフトウェアトラックで最も期待できる部分

それから少し疲れて、ほほほ、私にbackground-attachment: fixed;の背景のピクチャーだけをあげて終わりました

5.チームメイトのレーサーに言いたいこと

「p」李ゴヨン監督の時間に「dotdotdot」htmlを作成して適用したい!

<input type="button" value="click me✨" onclick="
	this.style.display='none'
	document.querySelector('#coworkersText').innerHTML = `텍스트 입력`
">

6.私のメッセージを伝えられる

これも授業中に習ったイメージスライダです!+テキストも変わりました

次のコードは右クリックjsコードです!

左ボタンが長すぎてスキップ

document.querySelector(".right-arrow").onclick = function () {
    var currentSlide = document.querySelector("#lck .slide.active");
    
    // 다음 형제를 가져오는 코드
    var nextSlide = currentSlide.nextElementSibling;
    
    // 다음 형제가 없을경우(마지막슬라이드일 경우)
    // 첫번째 형제로 바꿔줌
    if (nextSlide === null) {
        nextSlide = currentSlide.parentElement.firstElementChild;
    }
        
        // 부드러운 애니메이션 효과
        currentSlide.animate({
        opacity: [1, 0] // 100% => 0%
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        // 애니메이션 끝난 다음에 어디에 위치해 있을지
        // both , forward => 끝부분에 남아있음
        // both , backward => 첫번째에 남아있음
        fill: "both" 
    });
    currentSlide.classList.remove("active");
    nextSlide.animate({
        opacity: [0, 1] // 0% => 100%
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    
    // nextSlide에 active 클래스 추가
    nextSlide.classList.add("active");
}

説明>< td>>>>

	メソッド
	.previousElementSibling	前のエレメント(兄弟)
.nextElementSibling	次のエレメント(兄弟)を選択<<<<<	>><<<<	>>>	>	>	>	>	>>	>>>>	>>>>>>	>>	>>>	>>	>	>>
>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<	>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><<<<<<<<<
.parentElement		選択したElementにクラス名がある場合は削除し、ない場合は

を追加します.

7.ポッター

ツイッターショートカットキーとテキストをflexに整列

「テキストには異なる色が必要だから」「Designed and」「開発By」と入力し、cssを追加します.

footer .inner p::after { color: #1e293b; content: " YeonEunbin"; } 

8.上向きのボタン

最後に、これも私が教室で学んだScroll Up

function pageUp(e) {
    let target = document.getElementById(e)

    target.addEventListener("click", function() {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth'
        })
    })
}
pageUp("pageUpButton")