채택완료
css 정의부에서 클래스 들을 연이어 나열하는 것은?
css 정의부에서 아래처럼 클래스 들을 두개 스페이스를 두고 연이어 나열하는 것은
.sct_10 .sct_li {position:relative;float:left;margin:0 -1px 15px 0;border: 1px solid silver;padding: 20px;}
어떤 의미인가요? 헷갈리네요 ^^
답변 1개 / 댓글 9개
채택된 답변
+20 포인트
sct_10이라는 class를 가진 부모의 자식 중에 sct_li라고 하는 class를 가진 애한테 {} 안에 있는 스타일을 적용하겠다라는 의밉니다.
답변에 대한 댓글 9개
.sct_clear { font:bold 12px dotum; }
.sct_10 .sct_clear { color:red; }
<div class="sct_10"><span class="sct_clear">TEST</span></div>
<span class="sct_clear">SPAN</span>
이런 게 있다고 가정을 합니다.
여기에서 TEST라고 된 부분은 폰트가 굵어지고 12px에 폰트는 돋움으로 지정이 되고 폰트 색깔이 빨간색이 됩니다.
SPAN이라고 된 부분은 그냥 폰트 색깔만 빨갛게 변하고 맙니다.
class나 id가 엘리먼트에 붙어 있다고 해서 꼭 그게 css에 있는 건 아닙니다.
저렇게 된 건 selector 개념이라 보시면 됩니다.
DOM 구조를 아시면 쉽게 이해가 됩니다.
sct_10의 자식(sct_clear)에게만 color:red를 지정하겠다라는 의미거든요.
그러니 굳이 sct_clear가 따로 지정이 되어 있을 필욘 없습니다.
물론 모든 sct_clear라는 class를 가진 엘리먼트에 padding을 주고 싶다고 하면 말씀하신 것처럼 따로 지정하면 됩니다.
셀렉터 개념과 DOM 구조를 이해하시는 게 제일 좋아요.
.sct_10 .sct_clear { color:red; }
<div class="sct_10"><span class="sct_clear">TEST</span></div>
<span class="sct_clear">SPAN</span>
이런 게 있다고 가정을 합니다.
여기에서 TEST라고 된 부분은 폰트가 굵어지고 12px에 폰트는 돋움으로 지정이 되고 폰트 색깔이 빨간색이 됩니다.
SPAN이라고 된 부분은 그냥 폰트 색깔만 빨갛게 변하고 맙니다.
class나 id가 엘리먼트에 붙어 있다고 해서 꼭 그게 css에 있는 건 아닙니다.
저렇게 된 건 selector 개념이라 보시면 됩니다.
DOM 구조를 아시면 쉽게 이해가 됩니다.
sct_10의 자식(sct_clear)에게만 color:red를 지정하겠다라는 의미거든요.
그러니 굳이 sct_clear가 따로 지정이 되어 있을 필욘 없습니다.
물론 모든 sct_clear라는 class를 가진 엘리먼트에 padding을 주고 싶다고 하면 말씀하신 것처럼 따로 지정하면 됩니다.
셀렉터 개념과 DOM 구조를 이해하시는 게 제일 좋아요.
답변을 작성하려면 로그인이 필요합니다.
헉 근데 새벽 1:30분에??? 출근하실텐데 ㅎㄷㄷ