Inflearn Community Q&A
asked
border랑 solid 기능
Written on
·
207
2
8. css 자손 선택자 vs 자식선택자, 부모요소 vs 자식요소 강에서
border : 1px solid red ; 값을 다 주었는데
실시간 미리보기에서 박스 테투리가 안뜨고
data-brackets-id='751'
data-brackets-id='753'
< data-brackets-id='754'/div>
data-brackets-id='755'이렇게만 뜨는데 뭐가 오류인가요?
[제가 준 브라켓 값입니다.]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자손vs자식</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class = "box">
<div>
<div></div>
</div>
</div>
</body>
-------------------------------------------------------
.box {
border: 1px solid red;
width : 600px;
height: 200px;
}
. box > div{
border: 1px solid blue;
width: 300px;
height : 100px;
}
.box > div div{
border: 1px solid green;
width: 100px;
height : 100px;
background-color : #4524
}
HTML/CSSjquery웹 디자인
Answer 1
2
codingworks
Instructor
코딩웍스입니다.
선택자 공부하시는군요.
작성하신 html과 css는 문제 없는데 다만 css에서 점(.) 다음에 스페이스가 있네요.
아래 코드에서 굵은 글씨로 되어 있는 부분을 보시면 스페이스가 있어요.
그 스페이스를 지우셔야지 .box 바로 밑은 div에 파란색 보더가 적용됩니다.
처음 css를 공부하시는 분들이 겪는 사소한 실수에요. 저도 그랬구요~^^
. box > div → .box > div
-----------------------------------------------------------------------
. box > div{
border: 1px solid blue;
width: 300px;
height : 100px;
}
.box > div div{
border: 1px solid green;
width: 100px;
height : 100px;
background-color : #4524
}