Samla's Study

 

1. Border-Radius (둥근 모서리)

• boder-radius 속성 값으로 설정

<style>
	<!-- radius 속성 값 크기에 비례해서 둥그러짐-->
    .div1 {
    	border: 2px solid red;
        border-raidus: 5px;
        }
        
	<!-- radius 속성 값 상하좌우 각각 다르게 설정 가능함-->
    .div2 {
    	border: 2px solid blue;
        border-top-right-radius: 5px; <!--오른쪽 위-->
        border-top-left-radius: 50px; <!--왼쪽 위-->
        border-bottom-right-radius: 0px; <!--오른쪽 아래-->
        border-bottom-left-radius: 15px; <!--왼쪽 아래-->
        }

</style>

<div class="div1">radius 속성 값 크기에 비례해서 둥그러짐</div>
<div class="div2">radius 속성 값 상하좌우 각각 다르게 설정 가능함</div>

 

2. Background-Color (배경색)

• background-color 속성 값으로 설정

<style>
	<!-- 배경색을 지정해 줌-->
    .div1 {
    	background-color: yellow;
        }
        
	<!-- 배경색을 투명하게 둠(기본값)-->
    .div2 {
    	background-color: transparent
        }
        
    <!-- body태그에 넣어주면 페이지 전체 배경색 설정 가능-->
    body {
    	background-color: black;
        }

</style>

<div class="div1">배경색을 지정해 줌</div>
<div class="div2">배경색을 투명하게 둠(기본값)</div>

 

3. Box-Shadow (그림자)

• box-shadow 속성 값으로 설정 (기본값은 none)

<style>
	<!-- 그림자 가로 세로 위치만 설정해주면 그림자 생성 -->
    .div1 {
    	background-color: yellow;
        width: 400px;
        height: 200px;
        box-shadow: 30px 15px;
        }
        
	<!-- 그림자 색 설정 (기본값: black) -->
    .div2 {
    	background-color: yellow;
        width: 400px;
        height: 200px;
        box-shadow: 30px 15px red;
        }
        
   <!-- 그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가 -->
    .div3 {
    	background-color: yellow;
        width: 400px;
        height: 200px;
        box-shadow: 30px 15px 10px;
        }
        
    <!-- 그림자 흐림 크기(spread): blur 값 뒤에 값 추가 -->
    .div4 {
    	background-color: yellow;
        width: 400px;
        height: 200px;
        box-shadow: 30px 15px 10px 20px;
        }

</style>

<div class="div1">그림자 가로 세로 위치만 설정해주면 그림자 생성</div>
<div class="div2">그림자 색 설정 (기본값: black)</div>
<div class="div3">그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가</div>
<div class="div4">그림자 흐림 크기(spread): blur 값 뒤에 값 추가</div>

 

4. Box-sizing

• padding과 border 값을 설정하더라도 width, height 값 대로 요소의 크기가 설정되도록 해줌.
• box-sizing 속성 값을 "border-box"로 설정

<style>

	<!-- 모든 요소에 스타일 속성 부여 시 " * " 와일드카드 사용 -->
    * {
    	box-sizing: border-box;
    }
    
</style>