CSS selectors
- Universal :
*(전체선택자) - type :
Tag(태그 선택자) - ID :
#id(ID 선택자) - Class :
.class(Class 선택자) - State :
:(State 선택자) - Attribute :
[](속성 선택자)
예시코드
/*전체 선택자*/
* {
color: green;
}
/*태그 선택자*/
li {
color: blue;
}
/*ID 선택자*/
#unique {
color: pink;
}
/*Class 선택자*/
.black {
background: black;
}
/*State 선택자->Button에 Hover가 될때*/
button:hover {
color: red;
background: black;
}
/*속성 선택자->a태그에 href가 있는 값만 변경*/
a[href] {
color: purple;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ol>
<li id="unique">첫번째</li>
<li>두번째</li>
</ol>
<button>버튼1</button>
<button>버튼2</button>
<div class="black">나는 검정클래스야</div>
<div class="blue"></div>
<a href="naver.com">네이버</a>
<a href="google.com">구글</a>
<a>비어있는 값</a>
</body>
</html>결과화면
박스모델링
padding
- 컨텐츠 안에 들어가는 공간을 의미
.black{
width: 100px;
height: 100px;
background: yellow;
/*시계방향 순 top->right->bottom->left */
padding: 20px 20px 20px 20px;
/*값 하나만 넣으면 모든 위치 값을 20px로 정해줌*/
padding: 20px;
/*위아래만 하고싶거나 왼쪽 오른쪽만 하고싶을경우*/
padding: 20px 0px; /*위 아래만 적용*/
padding: 0px 20px; /*오른쪽 왼쪽만 적용*/
}margin
- 컨텐츠 밖에 들어가는 공간을 의미
- padding과 동일하게 사용
border
- 컨텐츠의 테두리를 표시한다.
.black{
width: 100px;
height: 100px;
background: yellow;
border-width:2px;/*선의 두께는 2px*/
border-style:solid; /*선의 스타일은 solid*/
border-color:red; /*선의 색깔은 red*/
/*width: 두께, style: 선 모양, color: 색상*/
border: 2px solid red; /*한줄로 간단하게도 사용가능*/
}다양한 css속성을 확인하려면 https://developer.mozilla.org/ko/docs/Web/CSS/Reference
이곳을 참조하세요!
프론트엔드 공부중입니다!