[front-end]/CSS

CSS

broship 2021. 1. 5. 21:25

1) css 는 rgb로 색을 표현

- rgb: red green blue 빛

- 표현방법:

1. #ffff00 두개씩 나눔 (00~FF)
2. rgba(255,255,0,0.5) ,로 나눔
3. blue 이렇게 바로 해도 됨

rgba의 a(alpha)는 투명도, 0.0~1.0(투명~불투명) 0.0 fully transparent and 1.0 fully opaque

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<style>
	/*테그명은 아무것도 없이*/
	body{ 
		background-color: #ffff00;
	}
    /* . 은 class*/
	.a1{ 
		color: violet;
	}
	.a5{
		color: rgba(255,255,0,0.5);
	}
    /*#은 id*/
	#a7{
		color: blue;
		font-size: 50px;
	}
</style>

<body>

<div class="a1">클래스1</div>
<div class="a5">클래스2</div>
<div id="a7">아이디1</div>

</body>
</html>

 

2) border padding margin

 

border는 테두리 크기
padding은 글씨와 테두리와의 간격
margin은 두 테이블 사이의 간격(둘다 겉의 테두리)

padding:20px (상우하좌 4개 모두 20px)
padding:20px 30px (상 우) (상하 20 좌우 30)
padding:20px 30px 50px 70px (상 우 하 좌)
padding:20px 30px 50px (상 우 하) 좌는 우처럼 30px

 

3)

.disstyle ul li 이건 disstyle 클래스 안에 ul 안에 li

#aa, #bb, #cc 이건 id aa, bb, cc 모두

'[front-end] > CSS' 카테고리의 다른 글

Semantic  (0) 2021.01.11
CSS 속성  (0) 2021.01.08