Search
K
🖋

CSS 선택자 Practice

Selector (1)

태그 선택자를 사용해 스타일을 적용시켜 봅니다.
tag {
background-color: navy;
}

Selector (2)

클래스 선택자를 사용해 스타일을 적용시켜 봅니다.
.class {
background-color: orange;
}

Selector (3)

아이디 선택자를 사용해 스타일을 적용시켜 봅니다.
#id {
background-color: orange;
}

Selector (4)

HTML 구조에 따라 엘리먼트를 선택해서 스타일을 적용할 수 있습니다.
/* div 태그 내부에 있는 "모든 p 태그" 에게 해당 스타일을 적용 */
div p {
background-color: navy;
}
/* div 태그의 "직계 후손 p 태그에게만" 해당 스타일을 적용 */
div > p {
background-color: pink;
}

margin

margin은 엘리먼트의 바깥쪽 여백과 관련된 속성입니다.
div {
margin: 10px;
}

padding

padding은 엘리먼트의 안쪽 여백과 관련된 속성입니다.
div {
padding: 10px;
}

font family

CSS를 사용해 HTML 태그 내부의 텍스트에 원하는 폰트를 적용시킬 수 있습니다.
p {
font-family: "Font Name"
}