Devlog 6月29日オンラインとblock

62694 ワード
html テキストリンク

1.学習内容


1. Inline vs Block


htmlの中で最も重要な内容
htmlタグは大きく分けて行内要素とblock要素(入門レベル)

1. Inline


字を1列に並べて、スペースを空けることができません.
marify-top(座標設定プロパティ)を使用すると移動しません.つまり、仕事を上下に配置することはできません.(充填も同じ)

2. Block


テキストを改行し、y軸で位置合わせしてスペースを作成します.(例-cssを使用)
marging-topを使用すると動作します.つまり、上下配置(paddingと同じ)を使うことができます

単純な違い(cssなし)


同じマークを連続して記入しても改行がない場合はInline、Block
html
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>

css
<style>
	span {
		width: 300px;
		height: 300px;
		background-color: yellow;
		
       	 	margin-top: 100px;
		margin-bottom: 100px;
		
                padding-top: 100px;
		padding-bottom: 100px;
	}

	h1  {
		width: 300px;
		height: 300px;
		background-color: yellow;

		margin-top: 100px;
		margin-bottom: 100px;

		padding-top: 100px;
		padding-bottom: 100px;
	}
</style>

2. Make kakao screen(basic)



友達同士(同級)-ul使用
設計図を作るときは2つの面を考慮しなければならない:1.コンテンツを移動するときにどれだけ移動できるか(cssに関連)、2.似たような性質を持つcontentを1つの空間に包むかどうか(次の例の画像は1つしかありません.2文字あるのでdivで文字を包む)
実務小贴士:imgでは、デザイナーが仕事を完成していない場合は、imgにhttps://via.placeholder.com/150動作を表すを入れます.150で50 x 50または数値を変更すると、対応する写真が得られます.
設計図面だけですが、この設計図面を無視すると、建物を建て直す必要があるかもしれません.(繰り返し練習)
html
<ul>
	<li>
		<a href="#"> 
        		<img src="https://via.placeholder.com/100x50">
			<div>
				<h3>박지연</h3>
				<p>다정한 사람</p>
			</div>
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100x50">
			<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>

3. Naver Menu Practice



単語で表記された-spanは、同じ性質を持っているのでdivラベルで囲まれています
<ul>
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/100x80">
			<div>
				<span>경제M</span>	
				<h3>부회장님의 취미생활</h3>
				<p>Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World</p>

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

引き出しキャビネット(div)内にはもう一つの引き出しキャビネット(div)もあります
表示レイアウトの設計はすべてcssによって制御されます
<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>

4.daumスクリーン設計図の作成（basic）


上下をdivで区切る
ヘッダーとフッター、navを使用する部分が混同されている場合は、まずdivラベルを使用してグラフィックを作成します.
<!-- 위쪽 -->
<div>
	<!-- 왼쪽 -->
	<div>
		<a href="#">
			<img src="https://via.placeholder.com/200x120">	
	</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="">
				<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>

キャラクタの異なるlist面ul-liタグを使用せずにspanを使用
<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>

5.エージェントWebサイトのタイトルの作成


  <header>
	<div>
		<h1>
			<a href="#">
				<img src="smartbootrap.png">
			</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>

6.helbakのWebサイトの下部を作成する


<footer>
	<!-- 왼쪽 -->
	<div>
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
		</ul>	
	</div>
	<!-- 중앙 -->
	<div>
		<a href="#"></a>
	</div>
	<!-- 오른쪽 -->
	<div>
		<p>Accpeted 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>

2.学習内容の難点


昨日よりもボリュームが少なく、復習の時間も多いので難しくはありませんが、前回習った選択部分やarticle部分を直接実習した経験がないので、設計図を作るとき、どこに置くべきか分かりません.

3.解決方法


まだ解決されていない問題ですが、先生が教えてくれた複数のサイトをブラウズしたり、多くのページソースを見たりして比較することは、慣れるしかないようです.

4.勉強の心得


何が創造の楽しみなのかを知った.まだまだ足りないことはたくさんあると思いますが、勉強を続ける自信があり、自分のサイトを作りたいと思っています.
原生js電子時計
原生js実装tabタブ