1.勉強の内容

(1)ページ練習
前回のレッスンの後、「NAVERオーディオクリップ」(https://audioclip.naver.com/)という名前の
ウェブページ閲覧サービスページの主左側領域の作業を行った.





△オリジナルページ






△実習ページ
(2)学習内容

ボタンが隠されている問題

css code

/* 화살표 버튼이 가려지는 문제를 해결하기 위해서 overflow:hidden;X 하고 align-items: flex-start; 사용 */
#audio-main .audio-container {
	/*overflow: hidden;*/
	align-items: flex-start;
}

/* 노란색 button원이 가려지는 문제로 overflow: hidden; 사용 x */


#audio-main .audio-main-left {
	/* 위와 같은 이유float: left;*/

	width: 660px;
	/*height: 100%;*/

}

#audio-main .audio-main-right {
	/*위와 같은 이유float: right;*/

	width: 330px;
	/*height: 100%;*/
	
}

改善された結果

リアルタイム操作

css code
image-wrapは相対的に指定され、imgは絶対的に指定され、上部に上書きされます.
x軸中央配列式でライブを中心に並べます.ライブ領域では枠をactiveと非activeの2種類に分けてcssコードを記述している.外の白はborderとpaddingのために同時に白を提供した.


◆borderとpaddingに白いテーブルを並べる

#audio-live .audio-body li .image-wrap {
	position: relative;
	width: 120px;
	height: 120px;
	border: solid 2px grey;
	border-radius: 50%;
}

#audio-live .audio-body li .image-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;
	border: solid 2px #ffffff;
	border-radius: 50%;
}


#audio-live .audio-body li .image-wrap .live-state {
	position: absolute;

	padding: 2px;
	border: solid 2px white;
	border-radius: 3px;
	background-color: #ffffff;

	bottom: -15px;
	/* x축 중앙정렬 공식 */
	left: 50%;
	transform:  translateX(-50%);
}


#audio-live .audio-body li .image-wrap .live-state .live {
	display: block;
	padding: 4px 8px;
	color: darkred;
	border: solid 2px red;
	border-radius: 3px;
	background-color: #ffffff;

	font-size: 10px;

}


#audio-live .audio-body li.active .image-wrap .live-state .live {
	border: solid 2px darkred;
	background-color: red;

	color: #ffffff;
}

2.実習

ダウンソース:
https://github.com/Yeonsu-Hong/Daegu_AI_school

3.困難な内容&解決方法

たいした困難はない.

4.感想

div tagに問題があったので、最初はcssの問題かと思っていたのですが、コードを削除するときに探していたら実力が増えているような気がしました.liveonの宿題はちょっと分かりにくいので、よく考えて、実際のページを真似してみましょう.このほか、gitとgithubの基本的な使い方はすでに身につけており、本を通じてコラボレーションに必要な機能を学び、整理してアップロードし、今週からjavascriptを独学で学ぶ内容もアップロードされます.