コース名称:大邱AI学校一般コース
講座:ネットワークプログラミング金仁権31 NAVERオーディオ1 210605(1/3)
件名:html/css

NAVERオーディオクリップページコピー

NAVERのオーディオクリップページをコピーしました.上部領域を作成し、上部領域も左右に分けてオブジェクトを配置します.「上部領域のオブジェクトを左右に分けて再配置しなければなりませんか?」考えました.

実際のNAVERのオーディオクリップページ

<header id="audio_header">
		
	<div class="audio-container ">
			
		<nav id="audio_nav" class="audio-flex-between">
				
			<div class="audio-nav-left audio-flex-between">
				<h1 class="audio-logo">
					<a href="#">audio clip</a>
				</h1>

				<ul class="audio-flex-end">
					<li><a class="active"href="#"><span>홈</span></a></li>
					<li><a href="#"><span>랭킹</span></a></li>
					<li><a href="#"><span>연재 채널</span></a></li>
					<li><a href="#"><span>오디오북</span></a></li>
					<li><a href="#"><span>카테고리</span></a></li>
					<li><a href="#"><span>이벤트</span></a></li>
				</ul>
			</div>

			<div class="audio-nav-right audio-flex-between">
					
				<div class="search-wrap audio-flex-start">
					<i class="icon-search"></i>
					<input type="text" placeholder="무엇을 찾으세요?">
				</div>

				<div class="profile-wrap">
					<img src="https://via.placeholder.com/32" class="profile-img">
					<a class="btn-login" href="#">로그인</a>
				</div>

			</div>

		</nav>

	</div>

</header>

NAVERオーディオクリップページを作成する人の正確な意図は分かりませんが、今予想できるのはmainエリアくらいで、コンテンツを構成するオブジェクトのレイアウトに合っていると思います.

メニューを構成する領域は、以前の複数のメニューと同様に、.activeセレクタを使用してアクティブ化を表す.

<ul class="audio-flex-end">
	<li><a class="active"href="#"><span>홈</span></a></li>
	<li><a href="#"><span>랭킹</span></a></li>
	<li><a href="#"><span>연재 채널</span></a></li>
	<li><a href="#"><span>오디오북</span></a></li>
	<li><a href="#"><span>카테고리</span></a></li>
	<li><a href="#"><span>이벤트</span></a></li>
</ul>

#audio_header .audio-nav-left li a {
	display: block;

	padding: 12px 13px 17px 12px;

	font-size: 17px;	
}

#audio_header .audio-nav-left li a.active {
	font-weight: 700;
}

#audio_header .audio-nav-left li a span {
	position: relative;
	display: inline-block;
	height: 21px;
}


#audio_header .audio-nav-left li a.active span:after {
	position: absolute;
	display: block;
	content: '';
	border-bottom: solid 3px #222222;
	border-radius: 1.5px;

	z-index: 1;

	left: -4.5px;
	right: -5.5px;
	bottom: -17px;
}

以前の作業では、下線を表すときにborder-bottomのプロパティが使用されていました.しかしここでは:after属性を用いて設計し,3次元属性と位置値を与える属性を用いて設計した.下線の大きさおよび位置は、left、right、およびbottomを使用して共通に設定される.
開発者一人一人が便利な方法を持っています.知らない立場に立って、この方法に便利さやメリットがあるかどうか分からない.しかし、別の新しい方法を学ぶことは意味があると思います.
講義の講師はためらって私たちにこのような設計方法を教えてくれた.次元プロパティや高さ、幅などの概念を使用する必要があるのに比べて、オブジェクトのサイズを強制的に大きくしたり、オブジェクトの位置を移動したりするのは理解しにくいのではないでしょうか.その後計画された他の部分では、この方法を使用します.
2005年に車勝元が主演した「血の姉」は、時代を題材にした映画と犯罪/推理を題材にした映画だ.この映画は当時、残忍な監督で19歳では見られないという評価が多かったが、「熱が下がるタイプ」と呼ばれ、「五体分視」や「五人分視」と呼ばれることが多く、マスコミでは初めて知られた.これは重要な物語ではありません.

Review

今日の授業には何の難点もない.ただコピーをする過程で、既存の方法とは少し違う方法に触れ、著者の意図を考えた.「スペースをどのように分割し、どのプロパティを適用して設計しましたか?」背中を考えて、コードの仕事について行きました.経験を積むことで、完成した作品を見て、プロデューサーの考えを少しでも見極めたい.