□NAVERオーディオクリップ3/3

★コード作成

Git LinkNAVERオーディオクリップ

1.オーディオクリップのメイン右側領域

●display: inline-blockの状態ではmargin: 0 auto;(x軸中央揃え)は適用されず、display: blockに変更すること
●結果スクリーンショット(人気チャンネル紹介&本日の発見)

●結果スクリーンショット(オーディオクリップ紹介)

2.オーディオクリップのメイン下部領域

●結果スクリーンショット

3.オーディオクリップカテゴリ領域

●nth-child()使用方法
①liラベルのうち奇数liラベルのみ適用(odd)
例)

.audio-category .audio-category-lists .category-list:nth-child(odd) a {
    background-color: green;
}

②liラベルのうち偶数liラベルのみ適用(even)
例)

.audio-category .audio-category-lists .category-list:nth-child(even) a {
    background-color: blue;
}

●結果断図(カテゴリ領域主)

□難点

特に難しい内容はありません

□解決方法

カリキュラムに基づいてコードを作成し、必要に応じてコードを変更しました.

□勉強心得

どの部分がパブリックエリアであり、どの部分がCSSコードを記述する必要があるかを徐々に理解しています.