정신과 시간의 방

1. border

block 요소의 테두리를 뜻함.

/* 	border: 굵기 선모양 색깔 
	ex- boder: 2px solid black
    	border: 1.5vmin dotted darkorange*/

/*	border-top, bottom,left,right
	각각 하나씩 설정도 가능.*/

2. box-sizing

box-sizing: content-box;
/*	box의 너비는 border와 padding 값을 뺀 순수 글의 너비로 설정되고, 
	border와 padding 값은 그 위에 얹어 진다.
    
    ex) width: 440px이면, 글의 너비가 440px가 되고, 
    	border와 padding 값은 440px이라는 박스 크기에 +alpha가 된다.*/
        
box-sizing: border-box;
/*	box의 너비는 border, padding, 글의 너비 다 합친 값이다. 
	
    ex) width: 440px이면, 글의 너비 + 보더 + 패딩 전부 해서 440px이다. 
    	border나 padding 값이 커지면, 그만큼 글의 너비는 작아지고 아래로 길어진다.*/

3. border-radius

/*테두리를 얼마나 둥그렇게 만들 것인가*/

boder-radius: 2em
/*우상단, 좌상단, 우하단, 좌하단 전부 똑같이 2em만큼의 기울기 가진 곡선이 됨*/

border-radius: 24px 0; 
/*첫 번째 요소: 왼상단, 우하단 
  두 번째 요소: 우상단, 좌하단*/

border-radius:12px 24px 48px 96px;
/*좌상단부터 시계방향*/

4. overflow

부모 요소보다 자식요소의 크기가 더 클 때 어떤 식으로 표현할 것인지 결정하는 속성이다.

overflow: auto;
/*자식 요소의 크기가 부모보다 더 커지면, 
한정된 부모 요소 내에서 자식 요소를 다 볼 수 있게 자동 스크롤이 생긴다.*/

overflow: visible;
/*스크롤 + 부모 요소 크기 무시하고 윈도우 창 내에서 표현할 수 있는 한 자식 요소 크기 전부 표현*/

overflow: hidden;
/*자식 요소가 얼마나 크든 상관없이, 부모요소에서 보여줄 수 있는 부분까지만 보여줌. 스크롤 x */

overflow: srcoll;
/*무지성 스크롤 생성 (자식 요소가 크든 작든)*/

overflow: scroll hidden;
/*	이중 적용도 가능 (이 경우 x축은 scroll, y축은 hidden 따로 적용) 
	but 최대한 자식 요소 다 보여주는 visible은 x축 y축 따로 적용 불가 따라서 이중 적용 안됨.*/
    
overflow-x:~~;
overflow-y:~~;
/*각각 따로 적용도 가능*/

5. box-shadow

/*

box-shadow: inset 여부 offset-x offset-y blur-radius spread-radius color

** inset 	- 	그림자가 내부에 있다. outset - 그림자가 외부에 있다. 
** blur 	-	그림자의 번진 정도
**spread	-	그림자가 퍼지는 정도

*/

box-shadow: inset 4px 4px 4px 4px 4px grey;

6. 스스로 해보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>실습용 페이지</title>

  <link rel="stylesheet" href="./1_style.css">
</head>
<body>
<div class="outer">
  <div class ="inner">
    Son
  </div>
</div>

  </body>
</html>

/*
border
box-sizing
border-radius
overflow
box-shadow

  */

  /* div.outer{
    background-color: aqua;
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
    font-size: 24px;
    overflow: auto;
  } */

div.inner{
    color: navy;
    text-align: center;
    font-size: 10vw;
    width: 50vh;
    height: 50vh;
    line-height: 50vh;
    border: 24px solid darkcyan;
    box-sizing: content-box;
    border-radius: 50%;
    box-shadow: 4px 4px 4px 4px gray;
    
  
  }

저작자표시

[CSS] 박스 모델 2

1. border

2. box-sizing

3. border-radius

4. overflow

5. box-shadow

6. 스스로 해보기

티스토리툴바