今日の勉強内容

1.

1) Inline, block

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

回線:エリアを指定できません.spanタグを使用してヘッダ領域にwidthとheightを指定しますが、領域は設定しません.

Block:領域を指定できます.頭部配置

同じタグを連続して行うと、横方向に接続され、結果出力時に領域を指定できません.改行が発生して領域を指定できます.
!! 着メロでエンコードした場合、回線に横出力はありません!!
w3schools.comサイトのHTMLリファレンスでは、行内の要素とblockの要素を特定してから使用したほうがいいです.
Inline
Inline
Inline

Block

Block

Block

2.KakaoTalkの友達リストを作成する

これまで学んだことをもとにKakaoTalkフレンドディレクトリの図面を作成します.

1）交友

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100">
			<div>
				<h3>박지연</h3>
				<p>다정한 사람</p>
			</div>
		</a>
	</li>
</ul>

友達リストは未格付けリストで、ulラベル

を使用します.

の友人のアイコン、名前、ステータス情報をクリックし、aラベルを使用して移動します.

img未定の場合、プレースホルダ.imgサイズ

の入力と配置

名、ステータスメッセージは文字要素であるため、後で変更するために画像から分離された空間として指定される.divタグ

の使用
Liラベルの中の情報は友達です.
複数の友達リストを作成するには、ulタグ内でliタグ以下を複数回繰り返します.

パク・ジヨン 多情な人

2)下部ラベルバーの作成

<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>

下のタブは、フッター領域として指定します.
navラベルとul/liラベルを使用してメニューを作成します.

メニュー1

を選びます。

を選びます。

を選びます。

3.Naver Posting領域実習

NAVERのホームページの後ろのエリアをデザインする練習をします.

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/150x80">
			
			<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 Hello World Hello World Hello World Hello World </p>

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

上で実習していたKakaoTalkの友人カタログと似たような構造になっています.

「経済M」.「金品場」「4日前」など、デザインの異なる文字にはspanラベルが使われています.その後head部分でCSSでデザイン.

Naverに示すように、左が写真で、右が文章の左右の位置がCSS部分です.

経済的M 副会長の趣味生活。 Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World 通貨基金 - 4日前

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/200x120">
						<div>
				<span>[푸드클래스] 송현경 요리</span>
				<h3>바삭하고 고소한 브런치</h3>
				<p>잘 구운 페이스트리 속에 부드럽고 진한 소스와 치즈가 듬뿍!</p>
				<div>	
					<span>#오픈요리</span>
					<span>#베샤멜소스</span>
				</div>
			</div>
		</a>
	</li>
</ul>

divタグにはdivタグを追加することもできます.

の画像サイズを指定し、乗算タグを*に指定すると認識できません.

[食品類]宋賢京料理 カリカリでおいしい朝食 焼いたクリームに柔らかく濃厚なソースとチーズがたっぷり入っています! #オープン料理 #ベシャメルちゃん

4.次のページの練習

<!--상단-->
<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>
			</ul>
		</div>
		<!--오른쪽 하단-->
		<div>
			<ul>
				<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="">
				<p></p>
			</a>
		</li>
		<li>
			<a href="">
				<img src="">
				<p></p>
			</a>
		</li>
		<li>
			<a href="">
				<img src="">
				<p></p>
			</a>
		</li>
		<li>
			<a href="">
				<img src="">
				<p></p>
			</a>
		</li>
	</ul>
</div>

の上部と下部の領域をdivラベルに分割すると、わかりやすくなります.

<!--상단-->
<div>
	<!--왼쪽-->
	<div>
		<ul>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
			<li>
				<a href="">
					<img src="">
					<p></p>
				</a>
			</li>
		</ul>
	</div>

の最初の画面とは異なり、右上隅は4つの画像とタイトルで構成されている.その部分だけulラベルで4つのliを記入します.

残りの

は、既存の

と同じです.
===

5.ニュースページ上部

<div>
	<h3>인천 서구 아파트 시장에 무슨 일이</h3>
	<!-- 왼쪽 -->
	<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>

頭の下の部分を左と右に分けます.
spanとaラベルを用途別に構成します.

仁川西区マンション市場で何が起きたのか。

ヘラルド経済
入力2021.05.03
修正2021.05.03
行きましょう。
わたしは
すべて

6.上部領域

<header>
	<!-- 상단바 영역-->
	<div>
		<h1>
			<a href="#">
				<img src="">
			</a>
		</h1>

		<nav>
			<ul>
				<li><a href="#">Services</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>

上端欄領域は、Excelのフレームが固定されているように、ページが上下に移動しても上端の部分に表示されます.navラベルで記入すればいいです.

7.下部領域

<footer>
	<!--왼쪽-->
	<div>
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
		</ul>
	</div>

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

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

HTMLを書くときは、左から右に順番に書くとわかりやすいです.

8.児童高ホームページ実習

<header>
	<div>
		<img src="로고그림">
		<img src="움직이는 동물1">
		<img src="움직이는 동물2">
		<img src="움직이는 동물3">
		<img src="움직이는 동물4">
	</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>빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9지방산이 풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
			</div>
	</div>
</div>

好奇心のある場所

今日の内容は、第1話と第2話で学んだラベルを持って、実際のサイトを見てから、画面の練習をします.難しいところはありませんが、気になるところがあります.
NAVERまたは次のホームページを用いて画面組織を行い,メイン画面に現れる情報や記事は毎日更新される.
毎回ホームページに載せるためにコードを書くのではなく、自動更新された情報と記事を同じフォーマットで符号化していると思います.

ソリューション

ソリューションとは言えませんが、実習が終わった後、実際に符号化されたソースコードを見る時間があります.そのコードを見て、まだ習っていないコードがたくさんありましたが、日付は実習時のように21.05.03に直接書くのではなく、dateと表記されていました.
まず、毎日更新する方法がまだ分かりません.それを学べばわかるはずだ
しかし,後でその内容を学習する際につなげて考えるために,ここの開発ログに記述する.

学習の心得.

意外と面白く、昇華textを使っていたので、Pythonの時のようにあまりミスが出なかったので良かったです.知らないタグ機能が必要なら検索して使うこともできるので、Excel関数を探しているような気がしますが…
このような機能もあるのではないでしょうか.検索すると、パソコンの達人たちがYouTubeやブログで親切に説明してくれます.ああ、これは本当にいいですか?作りながらしっかり応用すればいいです.
私は餅を食べればいいです.
新しいものは開発されないかもしれませんが...誰かが勉強しているのを見て勉強すればいい.
CSSを勉强して设计しなければならないなら设计を剽窃することはできません...コード文法は教えるとおりにすればいいと思います.
HTML自体は意外とシンプルで面白い…ブログでコードされているとは知りませんでしたが、昨日は姜先生についてコメントをブログに置いてから、ページを再開して実行し、スクリーンショットして、長い時間をかけて、今日は想像以上に早く完成しました.
HTMLを使うよりも着信音を使うのは難しい...