Dev Log#2-6月29日

99391 ワード

大邱AI学校 Webプログラミング開発ログ TIL html テキストリンク

今日の勉強内容

1.行内要素とBlock要素

Inline:1行の文字並列

Block:改行表示

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

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

産品¥2,000

回線:スペースサイズを設定できません.

Block:スペースのサイズを設定できます.

🚨 スペースのサイズ設定は、以下のcss値を設定することによって与えられます.

<style>
			

span {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

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

産品¥2,000

余白は、オブジェクトに移動するときに使用される属性で、座標を設定するときに使用される属性です.

回線:上下に作業を配置できません.

Block:上下配置が可能です.marging-top、marging-bottom、padding-top、padding-blottomを使用できます.

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;

}

産品¥2,000

2.実習01ココア友達リスト画面設計図

デザイナーがまだ設計作業中の場合は、https://placeholder.com/のWebサイトを使用して画像を事前に挿入し、修正することができます.(実務のコツ!)

div:受信ボックスロールは、クライアントが変更を要求するときに、より効率的に変更できます.

各レベルの内容はul、liラベルで処理されます.

<!DOCTYPE html>
<html>

<head>
 <meta charset="urf-8">
</head>

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

</html>

産品¥2,000

3.実習02 NAVER経済M画面設計図

前回の授業の学習内容に基づいて作成された

とKakaoの友达のリストの練習枠の差は多くありません

<!DOCTYPE html>
<html>

<head>

  <meta charset="urf-8">

</head>
<body>

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

	   <div>
	      <span>경제M</span>
	      <h3>참 열심히 살았는데 4.5억뿐인 무주택자의 호소</h3>
	      <p>이분에게 해줄 조언은 단 한 가지다. 열심히 살았다는 그 에너지를 총동원하여 지금이라도 열심히 임장을 다녀라. 더는 늦기 전에. 그리고 어서 내 집을 마련하도록 하라. 열심히 살았지만 내 집 한 채 없다는 것</p>

	      <span>레이달리오</span>
	      <span>-</span>
	      <span>1개월 전</span>
	   </div>
     </a>
   </li>

   <li>
     <a href="#">
	  <img src="https://via.placeholder.com/150x80">

	  <div>
	     <span>경제M</span>
	     <h3>금리 20% 적금 보유한 송은이, 티끌모아 태산 가능했던 과거 금리는?</h3>
	     <p>'티끌모아 태산'이라는 말은 이제 먹히지 않는 말인 것 같습니다. 아주 적은 금리로 인해 아무리 모아도 늘어날 생각을 하지 않아 답답하기만 하죠. 때문에 많은 분들이 주식이나 코인 등의 다른 재테크로 눈길을</p>

	     <span>꿀팁연구소</span>
	     <span>-</span>
	     <span>6일 전</span>
	  </div>
     </a>
   </li>

   <li>
      <a href="#">
	  <img src="https://via.placeholder.com/150x80">

	  <div>
	     <span>경제M</span>
	     <h3>아파트 구입이 어려워지자 전문가들이 사라고 권한 뜻밖의 재테크</h3>
	     <p>박스권 탈출 가능성 주목 건설주 파헤치기최근 조정 국면에 들어갔지만 건설사 주식은 작년 4분기부터 좋은 흐름을 보이는 중이다. 이 같은 상승세에 힘입어 10년 째 횡보했던 건설사 주식도 박스권을 탈피</p>

	     <span>비비드콘텐츠</span>
	     <span>-</span>
	     <span>3주일 전</span>
	  </div>
      </a>
   </li>

   <li>
      <a href="#">
         <img src="https://via.placeholder.com/150x80">

         <div>
            <span>경제M</span>
            <h3>'국내 최초' 찬사받았지만 한순간 사라진 기업</h3>
            <p>[MONEYGROUND 디지털뉴스팀] 시대가 빠르게 변하면서 기술도 급속도로 성장하고 있다. 이에 추억의 뒤안길로 간 전국을 강타했던 인기 기업들도 다수 보이는데, 청소년들 사이에서 큰 열풍을 끌고 왔던</p>

            <span>머니그라운드</span>
            <span>-</span>
            <span>2개월 전</span         
         </div>
      </a>
   </li>   
</ul>

	
</body>

</html>

産品¥2,000

4.実習03 NAVERフォーミュラ画面設計図

NAVER経済Mフレームワークと同様である.

ul>
  <li>
    <a href="#">

       <img src="https://via.placeholder.com/150x80">


       <div>
	
         <span>[푸드클래스]송현경 요리연구가</span>
	
         <h3>쌀로 만든 달콤한 디저트, 라이스푸딩</h3>
	
         <p>시나몬 파우더와 메이플 시럽으로 달콤함을 채운 이색 디저트 만드는 법</p>

	
        <div>
		
            <span>#프랑스가정식</span>
		
            <span>#디저트</span>
	
        </div>
					

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

産品¥2,000

5.実習04次の設計図

エリアを設けると、外から内へといった感じになります.

まず大きなフレームを設置し、それから小さなフレーム

を設置する.

は、上と下の2つの大きなフレームに分けられ、上部に4つの画像領域を左に揃え、テキスト領域を右に揃えます.また,テキスト領域を上,下の2つの部分に分けて処理する.


<!-- 상단 영역->
<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>
		
        <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>
		  <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>

6.実習05以下のニュース設計図

パラレルコンテンツの性質が異なる場合、ul、liタグは使用されず、spanタグが使用される.

<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

	<div>
		<h3>하반기 수도권 집값, 역대급 상승 오나</h3>
		<p>종 선행지표 줄줄이 급등</br>
		'매수우위지수' 다시 100 위로</br>
		'KB부동산전망지수' 120 넘어</br>
		경매 낙찰가율 119% 사상최고</p>
		<div>
			
			<!-- 왼쪽 -->
			<div>
				<span>헤럴드경제</span>
				<span>입력 2021.06.29 11:30</span>
				<span>수정 2021.06.29. 11:30</span>
			</div>

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

	
</body>

</html>

産品¥2,000

7.実習06代理指導

<!DOCTYPE html>
<html>

<head>
  <meta charset="urf-8">
</head>
<body>
 
 <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' Nice to Meet you</h3>
		  <a href="#">Tell me more</a>

	  </div>


	</header>

</body>

</html>

開発者ツールを使用すると、

画面がどのように整理されているかがわかります.

情報を使うときに使うラベル、スペースを使うときに使うラベル、いくつかのページを練習しました.

8.実習07 Helbak

デンマークショッピングモール

フィートのエリアを作り、春

の設計に従い、左側から

の作業を開始する.

<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

	
	<footer>

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

		<!-- 중앙 -->
		<div>
			<a href="#"><img src=""></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>

	

	
</body>

</html>

9.実習08 Kids Gao

上部領域の設計図作業を行う
📌 Kids Gao

最上端からトンボ部分まで

<!DOCTYPE html>
<html>

<head>

	<meta charset="urf-8">

</head>
<body>

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


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

</html>

種が下りてきて、紫草、女草、甘草のテキストの部分まで、

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

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

	  <!-- 오른쪽 -->
	  <div>
		  <img src = "">
		  <p>빵의 표면을 촉촉하게 해주는 글리세린과 오메가-9지방산이 풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
	  </div>


  </div>
  
</div>

きょうの学習後期

今日はサイト空間の設計図を直接練習する時間があります.🙌 今日の勉強を通じて、レイアウトを組織する前に、レイアウトをどのように書くかを考えることが大切だと思います.建物の初期設計が不適切であれば問題になるように、ウェブページを作成する際にもそれを知っています.開発者ツールを使用して、頻繁にアクセスするWebサイトのレイアウト、スペースレイアウトをチェックすることに慣れているはずです.今日は讲师のコードを见ながら一つ一つ仕事をする环境で、大きな困难はありません.ほほほ、明日も顽张って授业を受けて记录することを目标にします!😊 そして大切な復習も一緒に

Reference

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

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

Collection and Share based on the CC Protocol

ubuntuマウント

白駿1120号:文字列