開発ログ210706

28712 ワード

大邱AI学校レイアウトの基礎練習テキストリンク

7日目まとめ

これまで学んだhtmlパターン/CSS文法の実践を用いる.復習機会

学習内容

追加練習/成果物出力

基本レイアウトの練習

1.メニューボタンの作成

ターゲット(出力結果)

html

	<nav class="menu">
		<ul>
			<li>
				<a href="index.html">menu</a>
			</li>
			<li>
				<a href="kakao.html">kakao</a>
			</li>
			<li>
				<a href="naver.html">naver</a>
			</li>
		</ul>
	</nav>

プロジェクトフォルダの下にhtmlドキュメントが3つ作成されました.liラベルの下のaラベルにそれぞれリンクします.
CSS(1)

html, body {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
a {
	color: #000000;
	text-decoration: none;

イニシャルアクション

各タグのポーリングマージンとpaddingは0であり、

である.

ulラベルのlistスタイル(liの前の点)

を削除
マーク

aの色を黒に変更し、下線

を削除します.
CSS(2)

.menu li{
	/*display: inline-block;*/
	float: left;
	width: 100px;
	height: 50px;
	background-color: yellow;
	/*border: solid 1px red;*/
	border-top : solid 1px red;
	border-bottom : solid 1px red;
	border-left: solid 1px red;
	/*text-align: center;*/
	/*line-height: 50px;*/
	/*padding-top: 15px;*/
	/*padding-bottom: 15px;*/
}
.menu li:last-child {
	border-right: solid 1px red;
}
.menu li a {
	display: block;
	text-align: center;
	padding-top: 15px;
	padding-top: 15px;
}
.menu li a:hover {
	color: blue;
}

(1)領域の整列

liラベル:inline-block;プロパティをに変更できますが、blockプロパティ特有の余白が発生するためfloat:left;

によればliは3 Dプロパティを持つため、ulラベルの高さ値はサブプロパティの影響を受けません.オーバーフローulラベル:hidden;アプリケーション解決

(2)テキストの位置合わせ

領域の高さ値がある場合は、高さ値と同じ行-高さを使用して

をソートできます.

がない場合、テキスト整列とpadding top/bottomに同じ値を適用して

をソートすることができる.

ですが、以上の2つの場合、スーパーリンクがaラベルで包まれた文字を直接クリックした場合にのみ動作します.したがって、aラベルにブロックソートを付けます.(.menu li a以下)

(3)領域の境界清掃

liラベルに1 px枠線を適用すると、横に並んだリスト間の枠線がすべて露出し、2 px枠線になります.

そのため、上、下、左に1 pxボーダーを適用し、liのために仮想セレクタを作成し、右側にも1 pxボーダーを作成して

を解決する.

Kakaoの友達リスト

レイアウトターゲット

html

	<ul class="kakao-lists">
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">
				<div class="kakao-info">
					<h3>김민호</h3>
					<span>Minho Kim</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">
				<div class="kakao-info">
					<h3>박지연</h3>
					<span>다정한 사람</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">
				<div class="kakao-info">
					<h3>한예지</h3>
					<span></span>
				</div>
			</a>
		</li>
	</ul>

CSS(1)

.kakao-lists li img,
.kakao-lists li .kakao-info {
	vertical-align: middle;
}
.kakao-lists li img {
	border-radius: 20px;
	margin-right: 10px;
}
.kakao-lists li .kakao-info {
	display: inline-block;
}

画像タグをh 3およびspanタグを囲むdivタグとx軸に整列させる.
1.divラベルに表示:inline-block;適用
2.imgとdivラベルは垂直に揃えます:middle;適用
CSS(2)

.kakao-lists li a {
display: block;
}

aタグのdisplayをblockに設定し、すべてのリンクを同じx軸エッジ(img(友達写真)div(友達名/紹介領域)以外のすべてのリンクに適用します.
CSS(3)
.kakao-lists li {
margin-bottom: 20px;
}
.kakao-lists li a {
display: block;
padding-left: 25px;
}
.kakao-lists li img,
.kakao-lists li .kakao-info {
vertical-align: middle;
}
.kakao-lists li img {
border-radius: 20px;
margin-right: 10px;
}
.kakao-lists li .kakao-info {
display: inline-block;
}
.kakao-lists li .kakao-info h3 {
font-size: 18px;
margin: 0;
}
.kakao-lists li .kakao-info span {
font-size: 14px;
color: #c8c8c8;
}
すべての内容.画像エッジのスムーズ化、余白の調整、文字サイズの調整など.
結果出力

NAVER

NAVER-living

ターゲットレイアウト

html

	<ul class="living-lists">
		<li>
			<a href="#" class="image-link">
				<img src="https://via.placeholder.com/170x114">
			</a>
			<a href="#" class="info-link">
				<div class="living-info">
					<span>리빙</span>
					<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 살아요.</h3>
					<p>아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 아무말 </p>
					</div>
					<div class="date-warp">
						<span class="source">집꾸미기</span>
						<span class="date">2주일 </span>
					</div>
				</div>
			</a>
		</li>
	</ul>

aラベルでimgラベルとspan、h 3、pラベルのdivラベルをそれぞれ包む.

CSS

.living-lists {
	width: 750px;
	background-color: orange;
}
.living-lists .image-link, 
.living-lists .info-link {
	display: inline-block;
	vertical-align: middle;
}
.living-lists .image-link{
	margin-right: 21px;
}
.living-lists .info-link {
	width: 512px;
}

領域の整列
1.ulタグの全領域を750 pxに固定する
2.文字を含むdiv領域を512 pxに固定する
3.各ラベルに
display: inline-block;
vertical-align: middle;
整列x軸の適用
4.その他の零細利益のソート
結果出力

次の結果が得られます.

.living-info h3,
.living-info p {
	margin: 0;
	padding: 0;
}
.living-info p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
    max-height: 40px;
    line-height: 20px;
	text-overflow: ellipsis;
}

複数のCSSが追加されました.

h 3とpのマージンチャージを0に調整し、レイアウトをよりコンパクトにします.

pタグに関するcssは、後続の学習で

と記述される.

NAVER-ニュースタイトルとボタンについて

html

<div class="title-wrap">
		<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다</h3>
		<div class="btw-wrap">
			<div class="btn-left-wrap">
				<button type="button">좋아요</button>
				<button type="button">댓글</button>
			</div>
			<div class="btw-right-wrap">
				<button type="button">요약</button>
				<button type="button">크기</button>
				<button type="button">팩스</button>
				<button type="button">공유</button>
			</div>
		</div>
	</div>

ボタングループ:

2 divラベル
CSS

.title-wrap {
	border-top: solid 2px #000000;
	border-bottom: solid 2px #000000;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 15px;
}
.title-wrap h3 {
	margin-bottom: 20px;
}
.btw-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

borderおよびpaddingを領域全体に適用するdivタグ

h 3の下にマージン

を適用する.

display: flex;各サブラベルの領域を左右に分割
flexbox.helpサイトを使用してコード

を記述する
結果出力