Day 2-編み図面

101688 ワード

テキストリンク

1.勉強の内容

図面を描く

KakaoTalkの友達リストとメニューの作成

友達リスト

ULとLIはリスト

友達をクリックするとチャットルームの新しいページが開く
新しいページを開くときにaタグを使う

divタグで任意のスペースを作成し、同じ性質のコンテンツを組み合わせて作業する

https://placeholder.com/予め写真スペースを一時的に埋めておくことができる

footer:下にメニューがあるので使う

navタグ:メニュー作成用タグ

<meta charset="utf-8">

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>박지연</h3>
				<p>다정한 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>이유리</h3>
				<p>행복한 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>이진욱</h3>
				<p>멋진 사람</p>
			<div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50">
			<div>
				<h3>정해인</h3>
				<p>시크한 사람</p>
			<div>
		</a>
	</li>
</ul>


<footer>
	<nav>
		<ul>
			<li>
				<a href="#">메뉴1</a>
			</li>
			<li>
				<a href="#">메뉴2</a>
			</li>
			<li>
				<a href="#">메뉴3</a>
			</li>
			<li>
				<a href="#">메뉴4</a>
			</li>
		</ul>
	</nav>
</footer>

NAVERエコノミーM、フォーミュラリストの作成

経済的M
1.spanを使用して上部を作成する
2.基本的にKakaoの友達リストと似ている
3.div内に別のdiv(引き出しケース内の別の引き出し)を設置することができる
4.h 3はタイトル
5.p段落に設定

<meta charset="utf-8">

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50*80">
			<div>
				<span>경제M</span>
				<h3>부회장님의 취미생활</h3>
				<p>Hello World Hello World Hello World Hello World
				 Hello World Hello World Hello World
				 Hello World Hello World Hello World</p>

				 <span>머니그라운드</span>
				 <span>-</span>
				 <span>4일전</span>
			<div>
		</a>
	</li>
</ul>


<ul>
	<li>
		<a href="#">
			<img src = "https://via.placeholder.com/200*120">

			<div>
				<span>[푸드클래스] 송현경 요리 연구가</span>
				<h3>바삭하고 고소한 브런치</h3>
				<p>잘 구운 페이스트리 속에 부드럽고 진한 소스와 치즈가 듬뿍!</p>

				<div>
					<span>#오븐요리</span>
					<span>#베사멜소스</span>
				</div>

			</div>
		</a>
	</li>
</ul>

次のメイン画面を作成

上下区分

上部領域から左側(写真)、右側(文字)領域に再分割

右上・下から再分割

大きな写真
4枚の写真

<meta charset="utf-8">

<div>
	<!-- 왼쪽 -->
	<div>
		<img src="">
	</div>
	<!-- 오른쪽 -->
	<div>
		<!-- 오른쪽 상단 -->
		<div>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<!-- 오른쪽 하단-->
		<div>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
	</div>
</div>

<div>
	<ul>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/">
				<p></p>
			</a>
		</li>
	</ul>
</div>

<div>
	<!-- 왼쪽-->
	<div>
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/">
					<p></p>
				</a>
			</li>
		</ul>
	</div>
	<!-- 오른쪽-->
	<div>
		<!-- 오른쪽 상단 -->
		<div>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
		<!-- 오른쪽 하단-->
		<div>
			<ul>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
		</div>
	</div>
</div>

ニュースタイトル上部の作成

上部を囲む領域を作成

冠

タイトル下の小箱を左右に仕切る

内容・性質がそれぞれ異なり、ulとli、span

<meta charset="utf-8">

<div>
		<h3>인천 서구 아파트 시장에 무슨 일이</h3>
		<div>
			<!-- 왼쪽 -->
			<div>
				<span>헤럴드 경제</span>
				<span>입력 2021.05.03</span>
				<span>수정 2021.05.03</span>
			</div>

			<!-- 오른쪽 -->
			<div>
				<a href="#"><span>가</span></a>
				<a href="#"><span>나</span></a>
				<a href="#"><span>다</span></a>
			</div>
		</div>
</div>

ホームページの上部にプロキシを作成

navタグ使用

<meta charset="utf-8">

<header>
	<div>
		<h1>
			<a href="#">
				<img src="">
			</a>
		</h1>

		<nav>
			<ul>
				<li><a href="">Service</a></li>
				<li><a href="">Portfolio</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Team</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</nav>
	</div>

	<div>
		<h2>Welcome to our studio</h2>
		<h3>It's nice to meet you</h3>
		<a href="#">Tell Me More</a>
	</div>

</header>

helbakの下部を作成するには

1.脚注の使用
2.左右に分ける
3.左がメニュー
2.右の文字と画像

<footer>
	<!-- 왼쪽 -->
	<div>
		<ul>
			<li><a href="#">Terms and conditions</a></li>
			<li><a href="#">Cookies</a></li>
		</ul>
	</div>

	<!-- 중앙 -->
	<div>
		<a href="#"></a>
	</div>

	<!-- 오른쪽 -->
	<div>
		<p>Accepted paymnet methods</p>
		<ul>
			<li><img src=""></li>
			<li><img src=""></li>
			<li><img src=""></li>
			<li><img src=""></li>
			<li><img src=""></li>
		</ul>
	</div>
</footer>

kidsgaoホームページ移動画像

スペースをよりよく区切る

上端は画像、下端は文字の引き出し、収納ボックスには画像文字(自語性秒など)と内容

上の画像は雲とボウルの2種類の画像です

<meta charset="utf-8">

<header>
	
	<div>
		<img src="">
		<img src="">
		<img src="">
		<img src="">
		<img src="">
	</div>

	<div>
		<img src="">
		<img src="">
		<img src="">
	</div>

</header>

<div>
	<div>
		<!-- 왼쪽 -->
		<div>
			<img src="">

			<div>
				<img src="">
				<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
			</div>
		</div>

		<!-- 중앙 -->
		<div>
			<img src="">

			<img src="">
		</div>

		<!-- 오른쪽 -->
		<div>
			<img src="">

			<div>
				<img src="">
				<p>풍부한 올리브유를 넣어서</p>
			</div>
		</div>

	</div>

</div>

練習(NAVER漫画)

<div>
	<!-- 왼쪽 -->
	<div>
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/150">
					<div>
						<span>웹툰</span>
						<h3>[용사가 돌아왔다> 최신화 보러가기</h3>
						<p>누군가에겐 영웅, 누군가에겐 악당이라는 딜레마</p>
						<span>나락/풍백</span>
					</div>
				</a>
			</li>
		</ul>
	</div>

	<!-- 오른쪽 -->
	<div>
		<!--위-->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>웹툰으로 화요일 급속충전!</h3>
					<span>요일별 웹툰</span>
				</div>
			</a>
		
		</div>

		<!-- 중간 -->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>서준아 이젠 진짜 안녕</h3>
					<span>여신강림</span>
				</div>
			</a>
		
		</div>

		<!-- 아래 -->
		<div>
			<a href="#">
				<img src="https://via.placeholder.com/150">
				<div>
					<span>웹툰</span>
					<h3>호랑이들의 편식</h3>
					<span>호랑이 들어와요</span>
				</div>
			</a>
		
		</div>
	</div>
</div>

2.勉強中の難点

ラベルに対する理解度が低下.

開発執筆が未熟

結果が一致するか、比較できない.

3.解決方法

課外その他出所、自分でやってみる

4.勉強の心得

知っているようで分からない完了した結果が得られないためかもしれません.

Reference

この問題について(Day 2-編み図面), 我々は、より多くの情報をここで見つけました https://velog.io/@s_ongt_aemin/Day-2-설계도면-짜기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

RDLCレポートのデータの動的バインド

210823