210712

3273 ワード
開発ログ 大邱AI学校 テキストリンク

🎊学習の内容


css media queries
x軸揃えから幅折りたたみに切り替えるとy軸揃えに切り替わります
.media-menu {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	justify-content:  space-between;
	align-content: center;

	width: 700px;
	background-color: black;
}

.media-menu a {
	color: black;
	text-decoration: none;
}

.media-menu li {
	width: 150px;
	background-color: yellow;
	border: solid 5px red;
	padding: 5px 15px;
	text-align: center;
}

@media (min-width: 320px) and (max-width: 767px) {
	.media-menu {
		flex-direction: column;
		align-items: flex-start ;
		width: 190px;
	}

	.media-menu li {
		margin-bottom: 10px;
	}

	.media-menu li:last-child {
		margin-bottom: 0;
	}
}

widthを折りたたむと並べ替えてヘッダーfixedを解放します
.intro {
	display: flex;
	position: fixed; /* 고정 */

	width: 100%;
	height: 80px;
	background-color: #ffffff;
}

.intro h1 {
	width: 50%;
	height: 80px;
	background-color: black;
}

.intro nav {
	width: 50%;
	height: 80px;
	background-color: yellow;
}

.intro nav ul {
	display: flex;

	list-style: none;
	padding: 0;
	margin: 0;
}

.intro nav ul li {
	width: 33.3333%; /* 동일 영역 설정 */	
	height: 80px;
}

.intro nav ul li:nth-child(1) {
	background-color: blue;
}

.intro nav ul li:nth-child(2) {
	background-color: gray;
}

.intro nav ul li:nth-child(3) {
	background-color: green;
}

main {
	width: 100%;
	height: 2000px;
	background-color: gold;

	padding-top: 80px; /* 상단과 겹쳐지면서 안보임 */
}

@media (min-width: 320px) and (max-width: 767px) {
	.intro {
		position: static; /* 고정 풀기 */

		flex-direction: column;
		height: 160px;
	}

	.intro h1 {
		width: 100%;
	}

	.intro nav {
		width: 100%;
	}

	main {
		padding-top: 0; /* 다시 복구 */
	}
}

さんだんへんかん
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	width: 1140px;
	margin: 0 auto;
	background-color: pink;
}

.column {
	width: 355px;
	background-color: #ffffff;
	border: solid 2px red;
	margin-bottom: 10px;
}

.column:nth-child(4),
.column:nth-child(5),
.column:nth-child(6) {
	margin-bottom: 0; /* 4, 5, 6번째만 공백 없애기 */
}

.column img {
	width: 100%;
	vertical-align: middle; /* 미세 공백 */
}

.image-info {
	padding: 20px 0;
	text-align: center;
}

.image-info h2 {
	margin: 0;
}

@media (min-width: 540px) and (max-width: 720px) {
	.container {
		width: 720px;
	}

	.column:nth-child(4) {
		margin-bottom: 10px; /* 다시 생성 */
	}
}

@media (min-width: 320px) and (max-width: 539px) {
	.container {
		box-sizing: border-box;
		width: 100%;

		padding: 0 20px ;
	}

	.column {
		width: 100%;
	}

	.column:nth-child(4),
	.column:nth-child(5) {
		margin-bottom: 10px;
	}
}

メディアクエリの適用方法
1.cssファイルとして管理する
2.移動css単独管理
3.headでのスタイルラベルの使用
次の内容はgithubにアップロードされます.

学習内容の難点


Media queryの詳細

🎁解決策


前の授業を復習する

🎉学習の心得.


以前習ったことを一つ一つ使って、だんだん慣れてきました.問題は私が慣れただけだ.😲 早く私の頭の中にすべてが浮かんでほしい...
hadoopは中国語の出力の文字化けしを解決します
白駿11866号:ジョセフス問題0