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;
}'프론트엔드 개발 > HTML, CSS - 이론' 카테고리의 다른 글
| [CSS] 포지셔닝 (0) | 2023.02.25 |
|---|---|
| [CSS] 배경 꾸미기 (0) | 2023.02.24 |
| [CSS] 박스모델 1 (0) | 2023.02.23 |
| [HTML] Block 요소와 In-line 요소 (0) | 2023.02.18 |
| [CSS] 색 표현하기 (0) | 2023.02.17 |
