6月29日Verlog

92045 ワード

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

学習の内容

Inline/Block

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

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

回線:1行出力、スペースを作成できず、上下に配置できない

Block:改行が発生しy軸に整列する場合、空間を作成して上下配置操作

を行うことができる.

KaKaoTalk友達リスト

(1)友達リスト

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

ul(+li):友達リストに優先順位がない

a:友達を選んでチャットルームに入る

div:友人リストから写真/テキスト

を分離

2<img src="https://via.placeholder.com/150">:画像を挿入する前にセットしておく->実際の操作Tip!

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

Naver

(1)経済Mタブ

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

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

div:ピクチャ/テキスト情報領域

を区別する

span:改行しないテキスト

を入力

p:入力テキスト

(2)フォーミュラタブ

	<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:画像/テキストの区別->本文/タグ内容の区別

Daum

(1)領域1

<div> <!--구역1 상단-->
		<div> <!--왼쪽 이미지-->
			<img src="https://via.placeholder.com/300">
		</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> <!--구역1 하단-->
		<ul>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="https://via.placeholder.com/50">
					<p></p>
				</a>
			</li>
		</ul>
	</div>

上/下区分->div

左側の画像/右側のリストを

の上部から区切る->div

の上部右側のリストのスペースで区切る->div上部と下部の各

記事は優先度がないので、ul(li)ラベル

を使用します.
(2)領域2

<div> <!--구역2를 구역1로부터 구분-->
		<div> <!--구역2 왼쪽-->
			<ul>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="https://via.placeholder.com/100">
						<p></p>
					</a>
				</li>
			</ul>
		</div>


		<div> <!--구역2 오른쪽-->

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

領域1から第2領域を区切る->div

左画像領域/右リスト領域の分割->div

右側のリスト領域を区別する空白基準->div>div>div>div

※エリアを区切る場合は、広い範囲で徐々に縮小していきます.

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

Agency

https://startbootstrap.com/previews/agency

	<header>
		<div> <!--상단 배너-->
			<h1>
				<a href="#">
					<img src="https://via.placeholder.com/100">
		    	</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

https://www.helbak.com/

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

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

		<div>
			<p>Accepted payment methods</p>
			<ul>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
				<li><img src="https://via.placeholder.com/50"></li>
			</ul>
		</div>
	</footer>

下部:フッター

Kids gao

http://sisikiller.dothome.co.kr/
(1)上端

<header>
		
		<div> <!--제목과 동물-->
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
		</div>


		<div> <!--구름과 잠자리-->
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
			<img src="https://via.placeholder.com/50">
		</div>

	</header>

(2)中間

	<div> <!--페이지의 중간 구역-->
		<div> <!--컨텐츠 영역-->
			<div><!--왼쪽-->
				<img src="https://via.placeholder.com/50">

				<div> <!--텍스트-->
					<img src="https://via.placeholder.com/50">
					<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
				</div>
			</div>

			<div> <!--중간-->    
				<img src="https://via.placeholder.com/50">
				<img src="https://via.placeholder.com/50">
			</div>
			
			<div> <!--오른쪽-->
				<img src="https://via.placeholder.com/50">

				<div> <!--텍스트-->
					<img src="https://via.placeholder.com/50">
					<p>빵의 표면을 촉촉하게 하는 풍부한 올리브유를 넣었습니다.</p>
				</div>
			</div> <!--오른쪽-->			
		</div> <!--컨텐츠 영역-->

	</div>

->上から下へ順に左、中、右
学習中の難点や未解決の問題
昨日と違って、講師の助けなしに既存のサイトを直接見て勉強するのは難しい.また、CSSをまだ勉強していないため、結果は満足できません.
ソリューションの作成
難しいと思いましたが、講師が詳しく説明してくれていたので、少し感覚を見つけることができました.divラベルは本当に多いようですね.
学習の心得.
早くCSS制作を勉強したいので、今日見たサイトに近いです.

Reference

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

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

Collection and Share based on the CC Protocol

ThreadLocalの原理を徹底的に理解する

20.高度なマッピング(1)