Samla's Study

 

1. Box Model 구성

• Content : 실제 내용
• Padding : 내용과 테두리 사이의 여유공간
• Border :  테두리
• Margin : 현재 요소와 다른 요소 사이의 여백

2. Margin

<style>
<!-- 상하좌우 각각 다른 넓이를 지정할 경우 -->
.p1 {
	padding-top: 50px;
    padding-right: 60px;
    padding-bottom: 70px;
    padding-left: 80px;
    }

<!-- 상하좌우 각각 다른 넓이를 한 번에 지정할 경우 -->
<!-- 위에서부터 시계방향으로 돌아감 -->
.p2 {
	padding: 50px 60px 70px 80px;
    }
    

<!-- 상하좌우 같은 넓이를 한 번에 지정할 경우 -->
.p3 {
	padding: 50px;
    }

<!-- 상하와 좌우만 다른 넓이를 지정할 경우 -->
<!-- 상하와 좌우 순서로 입력 -->
.p4 {
	padding: 50px 30px;
    }
    
</style>

<p class="p1">padding의 상하좌우 각각 다른 넓이를 설정합니다.</p>
<p class="p2">padding의 상하좌우 각각 다른 넓이를 한 번에 설정합니다.</p>
<p class="p3">padding의 상하좌우 같은 넓이를 설정합니다.</p>
<p class="p4">padding의 상하와 좌우만 다른 넓이를 설정합니다.</p>

 

3. Padding

<style>
<!-- 상하좌우 각각 다른 넓이를 지정할 경우 -->
.p1 {
	margin-top: 50px;
    margin-right: 60px;
    margin-bottom: 70px;
    margin-left: 80px;
    }

<!-- 상하좌우 각각 다른 넓이를 한 번에 지정할 경우 -->
<!-- 위에서부터 시계방향으로 돌아감 -->
.p2 {
	margin: 50px 60px 70px 80px;
    }
    

<!-- 상하좌우 같은 넓이를 한 번에 지정할 경우 -->
.p3 {
	margin: 50px;
    }

<!-- 상하와 좌우만 다른 넓이를 지정할 경우 -->
<!-- 상하와 좌우 순서로 입력 -->
.p4 {
	margin: 50px 30px;
    }

<!-- 가운데 정렬 -->
<!-- 브라우저가 알아서 양쪽 여백을 반반씩 분배 -->
.p5 {
	padding-right: auto;
    padding-left: auto;
    }
    
</style>

<p class="p1">margin 상하좌우 각각 다른 넓이를 설정합니다.</p>
<p class="p2">margin 상하좌우 각각 다른 넓이를 한 번에 설정합니다.</p>
<p class="p3">margin 상하좌우 같은 넓이를 설정합니다.</p>
<p class="p4">margin 상하와 좌우만 다른 넓이를 설정합니다.</p>
<p class="p5">가운데 정렬 합니다.</p>

 

4. Content - width, height

<style>
	<!-- 가로 세로의 값을 지정합니다.-->
	.p1{
    	width: 500px;
        height: 200px;
    }
    
    <!-- 가로 세로의 최소값을 지정합니다.-->
    .p2{
    	min-width: 500px;
        min-height: 200px;
    }
    
    <!-- 가로 세로의 최대값을 지정합니다. -->
    .P3{
    	max-width: 500px;
        min-height: 200px;
    }
</style>

<p class="p1">가로 세로의 값을 지정합니다.</p>
<p class="p2">가로 세로의 최소값을 지정합니다.</p>
<p class="p3">가로 세로의 최대값을 지정합니다.</p>

 

4-1. Content - overflow

• content나 width에 maximum값을 설정했을 때 컨텐츠의 내용이 그 최대값을 초과할 경우 처리

<style>
	<!-- 옵션: visible (기본값, 내용물이 그대로 보임, 넘치면 넘치는대로.) -->
	.p1{
    	width: 300px;
        height: 200px;
        overflow: visible;
    }
    
    <!-- 옵션: hidden (넘치는 내용은 아예 안보임) -->
    .p2{
    	min-width: 300px;
        min-height: 200px;
        overflow: hidden;        
    }
    
    <!-- 옵션: scroll (스크롤바가 생성됨) -->
    .P3{
    	max-width: 300px;
        min-height: 200px;
        overflow: scroll;
    }
    
    <!-- 옵션: auto (내용이 넘칠때만 스크럴바가 생성됨) -->
    .P4{
    	max-width: 300px;
        min-height: 200px;
        overflow: auto;
    }
</style>

<p class="p1">Overflow 옵션: visible - TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
<p class="p2">Overflow 옵션: hidden - TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
<p class="p3">Overflow 옵션: scroll - TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
<p class="p4">Overflow 옵션: auto - TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>

 

5. Border

<style>
	<!--border 한 줄로 설정하기 // 두께, 타입, 컬러 순서 -->
    .p1{
    	border: 2px solid red
    }

	<!-- border 상하좌우 따로 지정해주기-->
    .p2{
    	border-top: 3px dotted blue;
        border-right: 2px dashed red;
        border-bottom: 5px solid purple;
        border-left: 1px dashed yellow;
    }

	<!-- boder 없애기 // none 혹은 0 값으로 설정-->
    .p3{
    	border: none;
    }

</style>

<p class="p1">border 한 줄로 설정하기</p>
<p class="p2">border 상하좌우 따로 지정해주기</p>
<p class="p3">boder 없애기</p>