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

★コード作成

Git LinkNAVERオーディオクリップ

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

●latter-spacing:ピッチ調整
例)

.audio-section .audio-header h2 {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.8px;
}

※ピッチ縮小0.8px●audio-containerでoverflow: hiddenが使用できない場合

今日のオーディオクリップに方向ボタンを表示しようとすると、containerにoverflow: hiddenが含まれている場合、

という結果になります.

#audio-main .audio-container {
    overflow: hidden;    
}

方向ボタンは、overflow: hiddenおよびfloatではなく、flex-betweenおよび

を用いる.

[html]
<div class="audio-container audio-flex-between">

[CSS]
#audio-main .audio-container {    
    align-items: flex-start;
}

●結果スクリーンショット(今日のオーディオクリップ)

●結果スクリーンショット(オーディオクリップオリジナル&私用プレイリストおすすめ)

●結果スクリーンショット(Live ON)

●結果カット(オーディオブックTOP 100&新出チャンネル)

□難点

授業内容にコードを書くときに追加すると、結果が望ましくないため、修正するのは難しいです.

□解決方法

作成した部分を個々にチェックし、数値を調整することでエラーを修正するのに時間がかかりました.

□勉強心得

学習コースは難しくありませんが、より似たように表現するために追加のコードを作成する場合、学生が間違いなく必要な結果を得るのは想像以上に難しいです.