6月29日

54466 ワード

CSS 大邱AI学校 html テキストリンク

1）学習内容

図面の作成
1.KakaoTalkの友達リストを作成する

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
    
	<body>
		<ul>
        	<li>
            <a href="#">
            	<img src="https://via.placeholder.com/80">
                <div>
			<h3>박지연</h3>
			<p>다정한 사람</p>
                </div>
            </a>
            </li>
            <li>
            <a href="#">
            	<img src="https://via.placeholder.com/80">
                <div>
			<h3>박지연</h3>
			<p>다정한 사람</p>
                </div>
            </a>
            </li>
            <li>
            <a href="#">
            	<img src="https://via.placeholder.com/80">
                <div>
			<h3>박지연</h3>
			<p>다정한 사람</p>
                </div>
            </a>
            </li>
            <li>
            <a href="#">
            	<img src="https://via.placeholder.com/80">
                <div>
			<h3>박지연</h3>
			<p>다정한 사람</p>
                </div>
            </a>
            </li>
        </ul>
    </body>
</html>

友達リストの順番は重要ではないので、ul、li(よく一緒に使う)

を使います.

をクリックしてaを使用してチャットルーム

に移動します.
imgを使用して

プロファイルの写真を挿入します(https://via.placeholder.com/150->操作プロンプト、まだ使用する画像が指定されていない場合は使用します;数値を変更する場合はサイズを変更します)

divを使用して名前とステータス名を1つのグループにグループ化(divは任意のパーティション化->類似の姓をグループ化することができる)

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

KakaoTalk下部のメニューはfooterとして指定され、最下部の操作

メニューの構成にnav(ナビゲータ)

を使用

メニューもul、li

を使用

をクリックして別のウィンドウに移動し、aを使用します.
2.NAVERエコノミーM、レシピ

<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/150x80">
			<div>
				<span>경제M</span>
				<h3>부회장님의 취미생활</h3>
				<p>Hell WorldHell WorldHell WorldHell World
				Hell WorldHell WorldHell WorldHell World
				Hell WorldHell WorldHell WorldHell WorldHell World</p>
				<span>머니그라운드</span>
				<span>-</span>
				<span>4일 전</span>
			</div>
		</a>
	</li>
</ul>

ul、liは

を使用

をクリックして別の場所に移動し、

を使用します.

画像を挿入するためのimgで、サイズは150*80

です.

divを使用して任意の領域

を作成

経済M-span

h 3タイトル

p:本文

を挿入

通貨基金-4日前:span

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

の画像を別のウィンドウに押すので、aとimg

食品類~~divをソースファイルとして指定

#オーブン料理#ベサメルソースも1つのdivに指定できます-->divの中でdivを指定できます!

3. news

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

divを使用して、領域

を指定します.

タイトル:h 3

divでdiv(左、右パーティション作成)

を指定します.

spanを使用して

テキストを記述
4. helbak.com( https://helbak.com/ )

<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>
			<li><img src=""></li>
		</ul>
	</div>
</footer>

divによるパーティション化(左、中、右)

一番下の部分フッター

5. agency ( https://startbootstrap.com/previews/agency )

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

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

	<div>
		<h2>Welcome To Our Studio</h2>
		<h3>IT'S NICT TO MEET YOU</h3>
		<a href="#">TELL ME MORE</a>
	</div>
</header>

ヘッダ

として指定する.

の一番上のdivとして指定し、h 1とマークし、画像のimgとa

に使用します.

メニュー:nav,ul,liの各5つのメニュー

を生成する.

は別のdivを指定し、フラグではないが強調されたフォントであるため、h 2,h 3は

を用いる.
6. kidsgao( http://sisikiller.dothome.co.kr/ )

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

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

ヘッダーを指定し、2つのdiv(実行時に何も表示されない)

に分けます.

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

は、この領域を表すタイトル情報がないため、div設定

divにおけるコンテンツ領域を囲むdiv設定

左、中、右の3つのdiv、区分領域

左側:画像のimg、さらに文字を囲むdiv

を設定する

本文文字:p

を使用

Ctrl+/=注釈ショートカット

2）学習内容の難点

最初は設計図面の作成についていけなくて、バタバタして、立ち止まってよく考えて、やっと理解しました.最後にkidsgaoをするときにdivエリアを間違えました.

3）解決方法

復習だけが解決策だと思って、動画をもう一度見ました.
開発ログを書いて、もう一度見る予定です.
kidsgaoが知っている表示領域のタイトル情報を復習していない場合は、divを任意に設定し、divの内容にdivを設定し、その中で領域を分割して行うことができます.書いてあってまた紛らわしくてもう一度見なきゃ

4）勉強の心得

今~~も混同せず、作成可能です.わざとコピーを貼らずに、一歩ずつ書きます.なんでもないかもしれませんが、これでベースからやると、ジャンプボードになります…!デザイン図面は今も一定の感じがします.ゾーンを順番に指定し、その中で指定し、また...!

Reference

この問題について(6月29日), 我々は、より多くの情報をここで見つけました https://velog.io/@rona-kim/6월-29일

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

Collection and Share based on the CC Protocol

78. Subsets

Javaマルチスレッドプログラミングコアテクノロジー-生産者消費者モデル