Dev log-2、HTMLベース#2
90109 ワード
学習の内容
ビジネステクノロジ
ラベル
divを使用して、複数の情報を一度に移動するための収納ボックス(設計図)を作成します.サンプル画像は、imgプレースホルダなどのサイトに使用されます.
設計者の画像ファイルがまだ完成していない場合に使用することが望ましい.
<!-- -->を使用して注釈を行い、区別を容易にする複数の
divタグを使用して、1つの領域を上、中、下または左、右などの領域に分割します.画像を挿入するときは、1つの画像を順番に入れます.
今日のbodyタグ-main、section、articleの追加説明
mainタグは透過機能をサポートするために使用され、role|タグはmainとして指定される.sectionタグ代表領域の内容h必須タグarticleタグ代表領域の内容h必須タグ実習1-KakaoTalk友達情報UIの作成
<body>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/100x50">
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<div>
<h3>박지연</h3>
<p>다정한 사람</p>
</div>
</a>
</li>
<li>
<a href="#">
<img>
<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>
実験2-Naver UI-1の作成
<body>
<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</p>
<span>머니그라운드</span>
<span>-</span>
<span>4일 전</span>
</div>
</a>
</li>
</ul>
</body>
実習3-Naver UI-2の作成
<body>
<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>
</body> 
実験4-以下のUI-1を作成する
<!-- 상단 -->
<div>
<!-- 왼 -->
<div>
<img src="https://via.placeholder.com/100x100">
</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="#">전기차 소유주 18%</a></li>
</ul>
</div>
<!-- 오 하단 -->
<div>
<ul>
<li><a href="#">S클래스 끝판왕 마이바흐</a></li>
<li><a href="#">그랜저 또 너야?</a></li>
<li><a href="#">제네시스 G70 가격</a></li>
<li><a href="#">기아 K8 하이브리드</a></li>
<li><a href="#">국산차 10대 중 9대 기아</a></li>
</ul>
</div>
</div>
</div>
<!-- 하단 -->
<div>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>2천만원대 전기차</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>장갑차보다 더 강력한</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>도로에 그려진 지그재그</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>2021년 4월 국산차</p>
</a>
</li>
</ul>
</div>
練習5-次のUI-2の作成
<div>
<!-- 왼 -->
<div>
<ul>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>우리의 썸머</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>윤여정에게 오스카</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<p>여성배우 시절</p>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50x50">
<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="#">강하늘X천우희</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>
実習6-ネット新聞タイトルUIの作成
<body>
<!-- 상단 -->
<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>
</body>
練習7-ブートサイトUIの作成
<body>
<header>
<div>
<h1>
<a href="#">
<img src="https://via.placeholder.com/50x10">
</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>
</body>
実験8-helbakサイトUIの作成
<body>
<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="https://via.placeholder.com/30x20"></li>
<li><img src="https://via.placeholder.com/30x20"></li>
<li><img src="https://via.placeholder.com/30x20"></li>
<li><img src="https://via.placeholder.com/30x20"></li>
<li><img src="https://via.placeholder.com/30x20"></li>
</ul>
</div>
</footer>
</body>
実習9-Kids GaoサイトUI-1の作成
<header>
<div>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/100x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
</div>
<div>
<img src="https://via.placeholder.com/100x100">
<img src="https://via.placeholder.com/100x100">
<img src="https://via.placeholder.com/100x50">
</div>
</header>
練習10-Kids GaoサイトUI-2の作成
<div>
<div>
<!-- 왼 -->
<div>
<img src="https://via.placeholder.com/50x50">
<div>
<img src="https://via.placeholder.com/100x50">
<p>자초 어성초 감초를 넣어서 피부진정 및 항염 효과가 있답니다.</p>
</div>
</div>
<!-- 중 -->
<div>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/200x200">
</div>
<!-- 오 -->
<div>
<img src="https://via.placeholder.com/50x50">
<div>
<img src="https://via.placeholder.com/100x50">
<p>풍부한 올리브유를 넣어서 보습 효과도 뛰어나답니다.</p>
</div>
</div>
</div>
</div>
学習中の難点や未解決の問題
pTAGとspanTAGの用法が混同されているため、それぞれの用法解決策
pタグは段落の作成に使用され、spanタグはテキストの装飾に使用されます.学習の心得.
bodyラベルを学ぶよりも、学んだことをもとに、実習を通じて作成します.実際に習ったラベルで直接作ってみると面白いのでもっとラベルを学んで応用したいです私が実際の仕事で学んだことを書いているのを見て、私もできるだけ早く自分のページを作りたいと思っています.
Reference
この問題について(Dev log-2、HTMLベース#2), 我々は、より多くの情報をここで見つけました https://velog.io/@kangsanz/개발일지-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol