HTML & CSS : Flex box로 웹사이트 레이아웃 구성해보기 실습

Flex box로 웹사이트 레이아웃 구성해보기 실습

Flex box로 웹사이트 레이아웃 구성해보기 실습

css파일

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container { width: 100%; }

header {
	width: 99%;
	height: 100px;
	margin: 5px;
	border: 3px solid #ccc;
	font-family: 'Do Hyeon', sans-serif;
	text-align: center;
	font-size: 2em;
	animation: color 1s infinite, color 1s infinite alternate;
}

header h3 { margin-top: 15px; }

@keyframes color {
	from { 
		color: red;
		border: 3px solid green;
	}
	to {
		color: green;
		border: 3px solid red;
	}
}

.st_box {
	width: 99%;
	height: auto;
	margin: 5px;
	margin-right: 10px;
	flex-direction: row;
	background-color: #FFF;
	color: white;
	text-align: center;
        background-size: cover;
} 

footer {
	width: 99%;
	height: 100px;
	margin: 5px 5px 0px 5px;
	background-color: #555;
	color: white;
	text-align: center;
	font-size: 0.5em;
}

footer p { padding-top: 20px; }

@media all and (min-width: 800px) and (max-width: 2000px) {
	section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.st_box { width: 48%; }
	#section5 { flex: 2 2 0; }
}

@media all and (min-width: 1200px) {
	section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.st_box { width: 32%; }
	#section5 { flex: 2 2 0; }
}

img {
	margin: 0;
	padding: 0;
        width: 100%;
        height: 100%;
        filter: grayscale(50%);
}

 

 

 

 

 

 

 

 

 

출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)

사진 출처 : Pixabay