21.08.25

🌱 REPOSITORIES

https://github.com/pyeonne/daegu-ai-school

https://github.com/pyeonne/portfolio

💻 PROJECT

Reset CSS & CSS variables

1. Reset CSS

reset.cssは、ブラウザからデフォルト設定のスタイル属性をすべて削除します.

normalize.cssは完全に初期化されたresetである.cssとは異なり、デザインを少し加工することができます.

normalize.cssを使用するのは、異なるブラウザ間でCSS設計の誤差を低減し、エラーを低減する方向にスタイルを再定義できるからです.

講師の状況が正常化するcssにリセットします.一般的にcssを使用し、通常は直接初期化作業を行う.
業務上はnormalizeです.cssをリセットします.cssよりも多く使われていますが、これは開発者の好みです.

2. CSS variables

:root {
    --black: #18181a;
    --brand-color: #9147ff;
    --font-size-16: 40px;
}

CSS変数は、CSS設計の一括変更に便利である.

変数名は直感的に分かりやすい.

IEには大きな限界がある.

#intro {
    --font-color: blue;
    --font-size: 50px;
}

CSSセレクタを使用すると、CSS変数の有効範囲を定義できます.

すべての範囲で機能するには、:root{}で完了する必要があります.

Responsive personal portfolio website

1.Portfolio

Swiper DemosではCSSモードを使用してpagerationが作成されています.

Demoボタンをクリックした後、対応するコンビネーションプロジェクトgithubにリンクします.まだアップロードするportfilioプロジェクトがないのでスキップ...

2. Project in mind

contactmeボタンをクリックしてcontactセクション

私はまだ一人で他の人のプロジェクトを完成するのに十分な能力がないと思います.この部分はまず注釈しなければなりません.

3. Testimonial

Swiper Demosではページングを使用してpagationが動的に作成されています.

4. Contact Me

grid連絡先とフォームを作成します.

フォームもコメント処理を先に行う必要がありますが、send messageボタンを押してメッセージを送信するには、先に実装する必要があります.

5. footer

gridとflexは導入作業を行った.

services、portfolio、contactmeクリックすると、対応するセクションに移動します.

SNSアイコンに対応する各SNSページが新しいタブページで開きます.

6. Show scroll up

function scrollHeader() {
    const nav = document.getElementById('header');
    // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag
    if (this.scrollY >= 80) nav.classList.add('scroll-header');
    else nav.classList.remove('scroll-header');
}
window.addEventListener('scroll', scrollHeader);

マウスをページの上部にスクロールできる矢印ボタンが作成されました.

💡 REVIEW

javascriptコード部分は何度も見て熟知してください!

Portfolioクローンコードが完了します.独自のスタイルで変更を開始する必要があります.