CSS란 무엇인가?
css는 documents가 사용자에게 화면을 어떻게 보여질까를 기술하는 언어이다.
오늘날 웹표준 에서는 구조와 표현, 행위를 각각 분리해서 개발 하기를 권유한다.
구조 : 웹 컨텐츠에 의미를 부여한 마크업 소스 (HTML)
표현 : 마크업에 대한 시각적인 디자인을 표현 (CSS)
행위 : 브라우저의 상호작용과 동적인 표현을 담당 (JavaScript)
이전 포스팅 [CSS] CSS란 무엇인가? 를 참고하면, 내부 스타일 시트에서
style 태그로 기술하기 보다는, 외부 스타일 시트로 분리해서 사용하는 것이 각 구조화된 마크업에 따라
다양한 디자인을 할 수 있고, 가독성과 유지보수 측면에서 더 효율적이다.
CSS 선택자(Selector)?
선택자(Selector)란 말 그대로 원하는 element(태그)를 선택해주는 요소이다.
기본적인 css의 구성인 Rule Set은 다음과 같다.
selector{property:value}
selector - 선택자. {} 선언블록 이전의 element를 선택, 선언블록 안에 있는 내용을 선택자로 설정한 element에 적용.
{} - 선언블록. property(속성)와 value(값) 으로 이루어진 스타일 정의를 묶어놓음.
property - 해당 element에서 줄 속성을 지정. 공통속성과 element에서 지원하는 속성을 사용할 수 있다.
value - 해당 property에서 사용할 수 있는 값들을 지정함.
CSS 선택자의 종류
전체선택자
*{margin:0; padding:0}
전체 선택자는 html에서 모든 element(태그)에 같은 css 속성을 적용한다.
보통 어떠한 값을 초기화 할 때 사용하는데, 쓰기에는 간편하지만 모든 요소를 읽어내야 하기 때문에
로딩속도가 느려질 수 있다. 이를 방지하기 위해 초기화 css가 존재한다.
일반적으로 reset.css 혹인 Nomalize.css 등을 사용한다.
reset.css 참고 (http://heeya7.tistory.com/6)
Nomalize.css 참고 (http://heeya7.tistory.com/5)
태그선택자
div{margin:0; padding:0}
태그 선택자는 html 요소를 직접적으로 기술하는 선택자다.
element의 tab name을 직접 쓰는 방식으로, 문서 내의 모든 div가 적용되는 위험성이 있으므로
복합선택자 등을 활용하여 써야 한다.
클래스 선택자
/* css */
.className{margin:0; padding:0}
div.className2{color:red}
<!-- html -->
<div class="className className2">클래스 선택자 사용법</div>
클래스 선택자는 위와같이 element에서 class="propertyName" 형식으로 기술된 element를 찾아 스타일을 지정한다.
위의 예시를 보면 .className으로 className이라는 클래스명을 가진 div를 찾아, 스타일을 지정하였다.
그 아래 div.className2 라고 기술된 것은 'div태그중' className2라는 클래스명을 찾아 스타일을 지정한다.
이는 <p class="className2">스타일</p> 와 같은 코드에는 div가 아니기 때문에 적용되지 않는다.
아이디 선택자
/* css */
#idName{margin:0; padding:0}
div#idName{margin:0; padding:0}
<!-- html -->
<div id="idName">아이디 선택자 사용법</div>
아이디 선택자는 .className이 아닌 #을 붙인 #idName 으로 사용된다.
아이디 선택자를 사용할 때 주의할 점은, '단 한번만 유일하게 적용되는 value' 라는 것이다.
이는 html 문서에서 특정 id속성값은 오직 하나만 있어야 한다는 뜻이다.
id선택자는 웹 문서 내에서 요소의 배치 방법을 지정할 때 자주 사용된다.
복합 선택자
/* css */
.grand .parent{color:red} //적용 가능
.grand .child{color:blue} //적용 가능
.grand>.parant{font-weight:bold} //적용 가능
.grand>.child{font-weight:bold} //적용 불가능(child는 grand의 직계자식이 아님)
div+p{background:#c8c8c8;} //div태그의 직계자식중 p태그만 스타일 지정
div~p{color:green} //div와 형제관계(같은레벨)의 모든 p태그에 스타일 지정
/* html */
<div class="grand">
<p class="parant">부모태그</p>
<span class="child">자식태그</span>
</div>
<p>div.grand와 형제노드</p> // grand div와 형제레벨의 노드
<p>단락</p>
<span>텍스트</span>
<p>단락2</p>
E F{property:value} // E의 하위요소 F선택
E의 하위요소(자식, 자손 모두 포함) 중에서 F의 명칭을 가진 element를 선택한다.
E>F{property:value} // E의 직계자식 F선택
E의 바로아래요소(직계자식)인 element를 선택한다.
E+F{property:value} // E요소의 바로뒤 오는 직계자식 F선택
E요소의 바로 뒤에있는 직계자식 F만 선택한다. 두번째 F는 선택되지 않는다.
E~F{property:value} // E요소의 형제레벨의 모든 F선택
E요소와 같은 레벨의 모든 F태그를 선택한다.
속성선택자
속성선택자는 태그 안의 속성에 따라 스타일을 지정하는 선택자 방식이다.
값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높다.
<input type="text" value="check01" class="default red">
<input type="text" value="check02" class="default blue">
<input type="text" value="check03" class="default red">
<input type="text" value="check04" class="check red">
<input type="text" value="check05" class="check-test">
/* text 형식의 input태그 선택 */
input[type="text"]{width:200px; padding:5px}
/* red 클래스를 포함한 input태그 선택 */
input[class~="red"]{border:1px solid red}
/* check로 시작하는 class명을 가진 input 선택 */
input[class^="check"]{color:green}
/* blue로 끝나는 class명을 가진 input 선택 */
input[class$="blue"]{border:1px solid blue}
/* check라는 값이 포함된 value를 가진 input 선택 */
input[value*="check"]{text-align:right}
/* check로 시작하거나, check를 class명으로 포함하는 input 선택 */
input[class|="check"]{color:red}
E[attr] - 'attr' 속성이 포함된 E태그 선택
E[attr="val"] - 'attr' 속성의 값이 "val"과 일치하는 E태그 선택
E[attr~=“val”] - ‘attr’ 속성의 값에 “val”이 포함되는 E태그 선택
E[attr^=“val”] - ‘attr’ 속성의 값이 “val”로 시작하는 E태그 선택
E[attr$=“val”] - ‘attr’ 속성의 값이 “val”로 끝나는 E태그 선택
E[attr*=“val”] - ‘attr’ 속성의 값에 “val”’이 포함되는 E태그 선택
E[attr|=“val”] - ‘attr’ 속성의 값이 정확하게 “val” 이거나 “val~”로 시작되는 E태그 선택
