본문 바로가기
C++ 200제/코딩 IT 정보

css 셀렉터(selector 선택자) 띄어쓰기 의미, div id

by vicddory 2019. 4. 26.

css 셀렉터(selector 선택자)에서 띄어쓰기가 있을 때와 없을 때는 차이가 발생합니다.


우선, css id 셀렉터 selector 기본 문법은 이렇습니다.


1
2
3
4
/* Syntax */
#id_value { style properties }

[id=id_value] { style properties }
cs


css 셀렉터(selector 선택자) 응용하여 간단한 배경색 바꾸기 소스를 작성하면 아래와 같습니다.


▷ CSS

1
2
3
#identified {
  background-color: skyblue;
}
cs


▷ HTML

1
2
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
cs


▷ 결과


자, 여기까진 css 기초라서 다들 아실 겁니다.


그럼 제목처럼 css 셀렉터(selector 선택자) 띄어쓰기 의미는 어떤걸까요?


아래 같은 css 소스 코드가 있다고 예를 들어볼게요.


1
2
3
4
5
6
7
8
9
10
.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072";
    float: right;
    color: #b0c5d8;
...
...
...
}
cs


.panel-heading 뒤에 띄어쓰기가 있습니다. 이 경우 띄어쓰기 차이가 발생하는데요. 간략히 정리하면,


  • div[id='some'] : div id가 some이라면,
  • div [id='some'] : div 내부 id가 some이라면,


이렇게 분기 됩니다. 그래서 다 붙여쓸 경우와 띄어쓰기할 경우 결과가 달라집니다.


ⓒ written by vicddory

댓글