css 정의부에서 클래스 들을 연이어 나열하는 것은?
본문
css 정의부에서 아래처럼 클래스 들을 두개 스페이스를 두고 연이어 나열하는 것은
.sct_10 .sct_li {position:relative;float:left;margin:0 -1px 15px 0;border: 1px solid silver;padding: 20px;}
어떤 의미인가요? 헷갈리네요 ^^
답변 1
sct_10이라는 class를 가진 부모의 자식 중에 sct_li라고 하는 class를 가진 애한테 {} 안에 있는 스타일을 적용하겠다라는 의밉니다.
오 그렇군요 ^^ 감사합니다.
헉 근데 새벽 1:30분에??? 출근하실텐데 ㅎㄷㄷ
일이 있어서 좀 늦게 잤습니다. ㅎㅎ
아 정말 눈 빠지겠네요.
관련 질문인데요
다른 분이 답변 주셨는데도 또 헷갈려서요 ㅎ
http://sir.kr/qa/117729?page=1&page=1&unanswered=0&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85&cwin=&vsst=&vpage=1#c_117748
정확히 뭐가 궁금하신 건지 잘 모르겠습니다. ㅎㅎ
갱쿤님 말씀이 맞다면
.sct_li와 .sct_clear 둘다 단독으로 정의가 나와있어야 하는거 아닌가요?
그런데 단독으로 정의나온게 없는거 같아서요
헷갈리네요 ㅎ
.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 구조를 이해하시는 게 제일 좋아요.
지금 접속했어요 ㅎ
잘 읽어보겠습니다. 진짜 많이 고맙습니다 ^^
하시는 일 잘되세요 ㅎ
안녕하세요 ^^ 다른 일 하다가 지금 다시 보고 있는데요
그럼 갱쿤님의 답변이 맞는말인가요? 갱쿤님의 답변으로 정의를 기억했더니
이상하게 헷갈리네요-_-;
관련글
http://sir.kr/qa/117729?page=1&page=1&unanswered=0&s_tag=%EC%98%81%EC%B9%B4%ED%8A%B85&cwin=&vsst=&vpage=1#c_117748
아 알것같아요 ^^ 감사합니다.^^
