[クイックキャンパスNekaraku杯第2期]-23日目勉強

𕼧販売前の課題フィードバック
今日の午前中に前回HTML&CSSで作成した課題のフィードバックをいただきました.課題は,Web規格とWebアクセス性を遵守し,Figmaに設計されたCoopang登録サイトを作成することである.
まずはREADMEこれはmdについてのフィードバックですが、丁寧に書いてあるように努力していますが、人が一目で見たときはわかりやすく書いたほうがいいので、コードを一つ一つ入れるよりも、重要な部分を選んでREADMEに書いたほうがいいです.
次にHTMLについてのフィードバックです.HTMLでは、まず本体ラベルに要素を表示し、ヘッダーラベルのほかに、まずドキュメントタイトルに関するフィードバックを表示します.最初はheaderと書いてロゴを付けていましたが、これだと表記言語だけを見ていると、文書のタイトルが何なのかわからず、そうするとページのアクセス性が低下するので、h 1タグを使って文書にどのような情報が含まれているのかを教えてくれるはずです.2つ目はmainラベルに関するformラベルで、中に関連する情報の間でfieldsetを組み合わせて、より良い表示言語を創造するのに役立ちます.また、inputの電子メール画像ではなく、これらの画像をクリックすると、focusがinput要素として機能するような役割であり、実際のクーボン登録サイトでも見られることを考えると反映すべきだと思います(label属性で実現).登録されたボタン部分にbuttonのラベルを使用するのは正しいが、会員が入力すると他のページに移動するとUI上で似ているのでボタンを使用することができるが、buttonではなくaを使用してこの脈絡に合致する.これでHTMLフィードバックが終了し、CSSに移行します.
CSSでは特に何も言わないが、CSSセレクタを設定する際には、>を使用してサブエレメントを選択するよりも、クラス名を使用して拡張性を向上させる.outline: none属性についても述べ,この部分は授業中に行われた.それから、エンディングに書いた質問に答えて終わりました.
普段HTMLやCSSを書くときは、その設計に合わせてコードだけを書いているようですが、Webアクセスの観点や実際の業界の観点から、どのように書いた方が良いのか、専門的なフィードバックを得ているので、私が知っているHTML CSSは単なるものではないと思います.これらの言葉が簡単だと思っていた自分を反省し、後でHTML&CSSを扱う際に、フィードバックの部分を考慮してエンコードする習慣を身につけたいと思います.
💡 HTML&CSS練習
コンテンツの非表示

/* 숨김 콘텐츠 */
.a11y-hidden{
    background-color: yellow;
    /* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
    display: none;
}

置換

/* 숨김 콘텐츠 */
.a11y-hidden{
    background-color: yellow;
    /* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
    position: absolute;
    top: -9999em;
}

これにより、画面に表示されない場合に存在します.この方法ではアクセス性の問題はありませんが、負の値が設定されているため、位置値が変更され、スクロールが自動的に上に移動し、スクリーンリーダーが読み取っているスクリーンが消えます.

.a11y-hidden{
    background-color: red;
    /* 접근성 관점에서 display:none은 문제를 발생시킬 수 있음 */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: polygon(0 0, 0 0, 0 0);
    /* clip: rect(0, 0, 0, 0); */
    /* clip-path: inset(50%); */
    overflow: hidden;
}

これで交換完了です最小1 pxのスケール(0 pxが指定されていないのは、スクリーンリーダー上の仮想カーソルが移動しているためですか?)
マイナス利益、clip-pathについて
値をmargin-leftに設定すると、利益領域が減少するため、必要なuiを作成できません.
clip-path
clip-path-->ポイントを使用してフェースを作成する(詐欺モード)
clip-pathがサポートされていない場合は、clip: rect(0, 0, 0, 0);プロパティを使用します.
これらはすべてユーティリティクラスです!
注意:アクセス可能な非表示テキスト
ex)航空会社のネットアクセス事例についての話(大韓航空-->ARIAが守っているサイト)
メインメニュー
塗りつぶすと、画面のuiに少しずれがあり、以下の変更ができます.

/* 안내 링크 */
.member-service {
    /* display: flex; */
    /* justify-content: flex-end;
    column-gap: 10px; */
    margin: 0;
    padding: 0;

    list-style: none;
    font-size: 0;
    line-height: 0;
    text-align: right;
    padding: 2px 0;
    background-color: pink;
    /* 네거티브 마진의 동작원래 */
    /* margin-right: -10px; */
    position: relative;
    right: -10px;
}

なぜマッキンの携帯で解決するのか考えてみましょう.
メインメニューのレイアウトを決定するときに、サブ要素を水平に配置する方法-->postion: absolute解決!
タイトル部分のスペースを解決する方法-->テクニックの使用方法

.header {
    background-color: #fff;
    position: relative;
    border-radius: 0 0 15px 15px;
    padding: 0 30px;
    border-bottom: 1px solid red;
}

.menu {
    background-color: orange;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    /* 크기가 변동될 가능성이 없는 콘텐츠의 경우 다음과 같이 고정값을 줌 */
    height: 47px;
    /* 마진은 장벽이 없으면 투명해져서 안보이게 되는데 header에 border-bottom에 값을 주어 트릭을 주어 해결하는 방법도 있음(좋은 방법론은 아님) */
    margin-bottom: 50px;
}

これは良い解決策ではないので、両親のnavigationの部分にpadding-bottom:50pxを入れます.

.navigation {
    padding-bottom: 50px;
}

メニュー項目の整列

/* ie6에선 float와 margin의 방향이 같은경우 double로 계산됨(225px -> 450px) */
.menu .menu-item:first-child {
    margin-left: 225px;
}

したがって、以下の方法もある(menuではpadding-left:225px).

/* 메인메뉴 */
.menu {
    background-color: orange;
    margin: 0;
    padding-left: 225px;
    list-style-type: none;
    /* 크기가 변동될 가능성이 없는 콘텐츠의 경우 다음과 같이 고정값을 줌 */
    height: 47px;
}

aラベルとbuttonラベルの他のbox-sizeデフォルト
aラベル-->ボックスサイズデフォルト:content-box
ボタンラベル-->ボックスサイズのデフォルト:border-box
メニューの上の線を作成する方法border、ダンボールサイズに影響します.box-shadowのプロパティを使用して、サイズに影響しないファイルを作成できます.
下線の作成方法
このプロパティを使用して作成すると、ie 6から適用されません.これはブラウザ間で一致しません.そのため、他の方法が必要です.

text-decoration: underline #000;
text-underline-offset: 15px;

.is-active .menu-button::after {
    content: "";
    display: block;
    background: #000;
    height: 2px;
}

次のafter仮想要素セレクタを使用して置き換えると、ブラウザ間で操作することでWebのアクセス性を向上させることもできます.
メインメニューのグラデーションカラー
グラデーションを指定できるサイトがあります
Ultimate CSS Gradient Generator
エレメントセレクタのリスク
エレメントセレクタリスク

/* .menu-item {
    float: left;
} */


/* 요소 선택자의 위험성 */
.menu li {
    float: left;
}

要素セレクタfloat:leftを使用する場合、ui変更が発生すると、その部分はすべて変更されるので、通常はクラス名を使用してcssセレクタを使用することが望ましい.
メニュー項目の場所

.menu-item {
    float: left;
    position: relative;
}


.sub-menu {
    position: absolute;
    top: 47px;
    display: none;
    margin: 0;
    padding-left: 0;
    list-style: none;
    /* 서브 메뉴들이 한 줄로 표현되게 하기 위해 이 속성을 사용! */
    white-space: nowrap;
}


.menu-html, .menu-css, .menu-standards {
    left: 0;
}

.menu-accessibility, .menu-qna, .menu-archive {
    right: 0;
}

メニュー項目の下にあるアイコン
アイコンサイト:fontelloを使用
ユーザーアクセス性に関するWebサイト:NULI<-たまに参照してください.
ビジュアルバックグラウンドCSS

.visual::before, .visual::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    animation: fadeEffect 2000ms infinite alternate;
}
.visual::before {
    background-image: url("./images/ani_flower_01.png"), url("./images/ani_flower_02.png");
    background-position:  0 -10px, 670px 0;
}

.visual::after {
    background-image: url("./images/ani_flower_03.png"), url("./images/ani_flower_04.png");
    background-position: 300px 0, 800px 0;
    animation-delay: 1000ms;
}

背景は先に発表したものを上に!
背景位置がパーセンテージの場合とピクセルの場合の違いを知るには、50%の場合は中央揃えにする必要がありますが、30 px 40 pxと30%40%の動作は異なり、30 pxはその位置から動作し、40 pxは画像から動作しますが、パーセンテージには入れる画像が含まれます.
アニメーションテキストスキーム
アニメーション仮定:moveEffect

.visual-text {
    animation-name: moveEffect;
    animation-duration: 1000ms;
    /* fill mode가 기본으로 backwards로 되어있어서 원래대로 돌아감 --> forward사용! */
    animation-fill-mode: forwards;
}

@keyframes moveEffect {
    0% {
        font-size: 12px;
        color: rgba(0, 0, 0, 0);
        padding: 0;
    }
    100% {
        font-size: 24px;
        color: rgba(0,0,0,1);
        padding: 75px 0 0 400px;
    }
}

paddingを使用すると、問題が発生します-->css還流(パフォーマンスに関連)
paddingとmarginは大量の還流を発生し、性能が低下する

.visual {
    background-color: #fff1e6;
    height: 120px;
    position: relative;
}

.visual-text {
    animation-name: moveEffect;
    animation-duration: 3000ms;
    /* fill mode가 기본으로 backwards로 되어있어서 원래대로 돌아감 --> forward사용! */
    animation-fill-mode: forwards;
    margin: 0;
    position:absolute;
    background-color: lightgreen;
}

positionもパフォーマンスの低下(絶対と相対)を引き起こす

@keyframes moveEffect {
    0% {
        font-size: 12px;
        color: rgba(0, 0, 0, 0);
        transform: translate(0, 0);
    }
    100% {
        font-size: 24px;
        color: rgba(0,0,0,1);
        transform: translate(400px, 75px);
    }
}

position relativeのように動作(範囲が広い)translate属性はcss還流を生じない
.visual-textセレクタで

    /* 이렇게 작성해야 정상적으로 콘텐츠 크기만큼 범위를 잡음 */
    display: inline-block;

花アニメーションの作成(beforeとafterを使用)

@keyframes fadeEffect {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.visual::before, .visual::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    animation: fadeEffect 2000ms infinite alternate;
}

📚 学習するキーワード

境界利益

非表示

にアクセス可能

漸進的改良

white space