0730開発ログ

10511 ワード
大邱AI学校 テキストリンク

学習内容


NAVERエンターテインメントニュースmain-right,footer,NAVERゲームタイトル
githubソースコード

ent main-right



section-11


  • btn要素はinline-block属性であり、inline要素はデフォルトで空です.スペースなしでソートする場合は、flex-startを使用します.
  • afterを使用して、ビデオに含まれていないsection-11のより多くのビュー後矢印部分領域を作成します.
    • #ent-section-11 .bottom .more::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: gray;
    margin: 5px 0 0 5px;
    vertical-align: top;
}

    サスペンション効果

  • サスペンション効果を向上させるためにいくつかのコードを追加しましたが、作成中にサスペンション効果のあるクラスを作成しhtmlに適用するとより速くなることがわかりました.
    • .more:hover,
.source:hover,
#ent-section-12 ul li h4:hover,
#ent-section-12 ul li span:hover {
    text-decoration: underline;
}
/* 추후 적용해 볼 것 */
.underline:hover {
    text-decoration: underline;
}

    ent footer


  • news-footer部分が変形しています.
  • leftの最後のdivのborder-bottomはhtmlのstyleタグを使用します.
    • <div id="ent-section-4"  style="border-bottom: none;">

    game header


  • 芸能ニュースページの前と前で作ったページの感じの差は多くありませんが、ゲームページの感じは少し違います.彼はまた、新しい技術が多く使われているようで、各領域の属性が固定的に配置されているので、以前に作成したページよりも遅くなる可能性があると思います.
  • css初期化:共通属性flex、shadow、font-size、border-radius、font-weightなどをクラスとして作成し、準備します.
  • Ticketの下のソケットレイアウトは、場所をよりよく理解できます.
  • hsla()|新しいカラータグについて知りました.
  • 3つのバナーが並んで配置された領域にシャドウを表示させるために、同じ大きさのグレーの領域を各ボックスの後ろに配置し、移動時のみ表示します.
    • <div class="game-events-wrap flex-between">
  <div class="title-bg one"></div>
  <div class="event-wrap one">...
  </div>
  <div class="title-bg two"></div>
  <div class="event-wrap two">...
  </div>
  <div class="title-bg three"></div>
  <div class="event-wrap three">...
  </div>
</div>
    #game-header .game-events-wrap .title-bg {
    position: absolute;
    width: 407px;
    height: 264px;
    border-radius: 40px;
    background-color: rgb(42, 44, 52);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%);
}
#game-header .game-events-wrap .title-bg.two {
    left: 437px;
}
#game-header .game-events-wrap .title-bg.three {
    right: 0;
}

    読みやすさの悪いクラス名の原因

    react、angular、vueなどのJavaScriptベースのツールは、cssを適用するのに役立ちます.これらのツールを使用すると、開発者が直接符号化したクラス名とは異なるランダム文字列のクラス名が自動的に生成されます.

    難点

  • news-footerが作成されると、footerのborder-topはleftの最後のdivのborder-bottomと重複する問題がある..left div:last-childはあまり適用されず、最後のdivもコピーされているため、既存のクラスを変更するのは難しいです.

    • 解決策

  • html styleプロパティborder-bottomを直接使用して削除します.ログでは、枠線を削除する新しいクラスを作成して追加するだけなら、悪くないと思います.

    • 感想


    エンコードの際、詰まった場所で解決策が思いつかないこともありますが、ログを書いてから書き直すと思い出せないので、すぐに非常に簡単な解決策が見えてきます.長い内容を整理するたびに容易なことではありませんが、私にとっては有意義な2回目の勉強時間のようです.
    NettyソースのBootstrap
    bootstrapグリッドシステム