Layout2

학습한 내용

코드

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<!-- <div class="z-one"></div> -->
	<!-- <div class="z-two"></div> -->

	<!-- <div class="left-1"></div> -->
	<!-- <div class="right-1"></div> -->
<!--
	<header></header>
	<section>
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</section>

	<footer></footer>
-->
<!--
<section>
	<div class="left-2"></div>
	<div class="right-2"></div>
</section>
<div class="clearfix"></div>
<footer></footer>
-->
<!--
<div class="over-box">
	<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet youNice to meet youNice to meet youNice to meet youNice to meet you Nice to meet you Nice to meet you</p>
</div>
-->
<!--
	<div class="container">
		<div class="item one"></div>
		<div class="item two"></div>
		<div class="item three"></div>
	</div>
-->

<div class="center-1"></div>
<div class="center-2"></div>

</body>
</html>

css

.z-one{
	/*position: absolute;*/
	width: 200px;
	height: 400px;
	background-color: yellow;
	/*z-index: 10;*/}

.z-two{
	position: absolute;

	width: 200px;
	height: 300px;
	background-color: blue;
	/*z-index: 20;*/}

.left-1{
	float: left;
	width: 100px;
	height: 150px;
	background-color: blue;}

.right-1{
	float: right;
	width: 100px;
	height: 150px;
	background-color: green;}
/*
header{
	width: 100%;
	height: 100px;
	background-color: yellow;}

.left{
	float: left;
	width: 300px;
	height: 200px;
	background-color: lightpink;}

.center{
	float: left;
	width: 500px;
	height: 200px;
	background-color: blue;}
    
.right{
	position: fixed;
	float: right;
	width: 300px;
	height: 200px;
	background-color: seagreen;}

footer{
	clear: both;
	width: 100%;
	height: 100px;
	background-color: black;}

section {
	width: 1400px;
	height: 200px;
	background-color: orange;}
*/
/*
.left-2{
	float: left;
	width: 100px;
	height: 150px;
	background-color: greenyellow;}

.right-2{
	float: right;
	width: 100px;
	height: 150px;
	background-color: darkblue;}

footer{
	width: 100%;
	height: 100px;
	background-color: black;}

.clearfix{
	clear: both;}
section{
	overflow: hidden;
	width: 800px;
	background-color: orange;}
*/
/*
.over-box{
	overflow: hidden;
	overflow: scroll;
	overflow-x: scroll;
	width: 200px;
	height: 200px;
	background-color: yellow;}
*/

.container{
	display: flex;
	/*flex-wrap: wrap;*/
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;

	width: 1000px;
	height: 500px;
	border: solid 10px red;}

.item{
	width: 200px;}

.one {
	height: 100px;
	background-color: yellow;}

.two{
	height: 200px;
	background-color: blueviolet;}

.three {
	/*width: 900px;*/
	height: 300px;
	background-color: orange;}

.center-1{
	width: 300px;
	height: 300px;
	background-color: yellow;

	margin: 0 auto;}

.center-2{
	position: relative;
	width: 300px;
	height: 300px;
	background-color: blue;

	left: 50%;
	margin-left: -150px;}

학습내용 중 어려웠던 점

이해하기에 어려운 내용은 없었으나 여러가지 position조합에 대한 결과들과 flex들의 사용 조합, 중앙배치 공식들에 대한 공부를 익혀야할 것 같다.

해결방법

‘flexboxhelp’ - flex 공부
‘css center trick’ - 중앙배치 공식

학습소감

공부하는 게 재미있고 실무TIP도 알려주셔서 되게 유익하다고 생각된다.

Author And Source

이 문제에 관하여(Layout2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jihye0914/Layout2

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)