20210702

choigyeongshin·2021년 7월 2일

학습한 내용

레이아웃

html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

    <!--
	<div class="box-model">
		hello world
	</div>
    -->


    <!--
    <div class="margin-one"></div>
    <div class="margin-two"></div>
    -->

    <!--
    <div class="margin-parent">
    	<div class="margin-child"></div>
    </div>
    -->


    <!--
    <h1>Block</h1>
    <h1>Block</h1>
    <h1>Block</h1>


    <span>Inline</span>
    <span>Inline</span>
    <span>Inline</span>
    -->




    <!--
    <span class="inline">Inline</span>
    <span class="inline-block">Inline-Block</span>
    <img src="https://via.placeholder.com/200">
    <img src="https://via.placeholder.com/200">
    <img src="https://via.placeholder.com/200">
    <h1>Block</h1>
    -->


    <!--

    	1. margin-top  사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지...

    	2.top, right, bottom, left 속성을 사용할 수 있는지 

    	3.자식의 높이 값이 부모에게 영향을 주는지

    -->


    <!--
    <div class="static-parent">
    	<div class="static-child"></div>
    </div>
    -->


    <!--
    <div class="box1"></div>

    <div class="fixed-parent">
    	<div class="fixed-child"></div>
    </div>

    <div class="box2"></div>
    -->


    <!--
    <div class="box1"></div>

    <div class="relative-parent">
    	<div class="relative-child"></div>
    </div>
    -->


    <div class="box1"></div>

    <div class="absolute-parent">
    	<div class="absolute-child"></div>
    </div>

css

html, body {
	margin: 0;
	padding: 0;
}


.box-model {
	box-sizing: border-box;

	width: 200px;
	height: 200px;
	background-color: yellow;
	border: solid 10px red;

	/*margin: 100px 0 0 100px;*/
	padding: 100px 0 0 100px;

	/*margin-left: 100px;
	margin-top: 100px;
	margin-right: ;
	margin-bottom: ;

	padding-left: 100px;
	padding-top: 100px;
	padding-bottom: ;
	padding-right: ;
	*/
}



.margin-one {
	width: 100%;
	height: 100px;
	background-color: yellow;

	margin-bottom: 100px;
}


.margin-two {
	width: 100%;
	height: 100px;
	background-color: blue;

	margin-top: 100px;
}


.margin-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.margin-child {
	position: absolute;
	width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
}


/*
h1 {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;

	margin-top: 100px;
}

span {
	display: block;
	width: 100px;
	height: 100px;
	background-color: pink;

	margin-top: 100px;
}
*/



.inline-block {
	display: inline-block;

	width: 100px;
	height: 100px;
	background-color: yellow;
}

.inline, .inline-block, img {
	vertical-align: middle;
}


.static-parent {
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.static-child {
    width: 150px;
	height: 150px;
	background-color: blue;

	margin-top: 100px;
	/*top: 100px;*/
}


.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.fixed-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.fixed-child {
	position: fixed;
	width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	/*top: 100px;*/
}

.box2 {
	width: 300px;
	height: 2000px;
	background-color: green;
}



.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.relative-parent {
	width: 300px;
	/*height: 300px;*/
	background-color: yellow;
}

.relative-child {
	position: relative;

	width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	/*top: 100px;*/
}


.box1 {
	width: 300px;
	height: 200px;
	background-color: gray;
}

.absolute-parent {
	position: static;
	width: 300px;
	height: 300px;
	background-color: yellow;
}

.absolute-child {
	position: absolute;

    width: 100px;
	height: 100px;
	background-color: blue;

	/*margin-top: 100px;*/
	top: 100px;
}