반응형
그리드 연습
위와 같은 그리드 레이아웃을 만들어주세요!
<!DOCTYPE html>
<html>
<head>
<title>그리드 연습</title>
<meta charset="utf-8" />
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="red"></div>
<div id="orange"></div>
<div id="yellow"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="indigo"></div>
<div id="purple"></div>
</body>
</html>
body {
margin: 0;
}
/* 전체 */
div {
width: 100%;
height: 800px;
float: left;
}
/* 개별 */
#red {
background-color: #FF0000;
width: 100%;
height: 200px;
}
#orange {
background-color: #FFA500;
width: 25%;
height: 200px;
}
#yellow {
background-color: #FFFF00;
width: 50%;
height: 200px;
}
#green {
background-color: #008000;
width: 25%;
height: 200px;
}
#blue {
background-color: #0000FF;
width: 50%;
height: 200px;
}
#indigo {
background-color: #4B0082;
width: 50%;
height: 200px;
}
#purple {
background-color: #800080;
width: 100%;
height: 200px;
}본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |