CSS는 어떤 태그들에게 스타일 효과를 주는 언어다.
그렇다면 어떤 태그에 적용하는지를 정의하는 문법이 필요하게 되는데, 이때의 문법을 선택자 라고 한다.
선택자 {
속성1: 값1;
속성2: 값2;
}CSS는 위 처럼 선택자를 먼저 쓰고 중괄호 {} 안에 속성과 값을 적는 방식으로 이루어져 있다.
종류
태그 선택자
태그 전부에 스타일을 적용
태그이름 { 속성1: 속성값1; 속성2: 속성값2; }class 선택자
태그에서 설정한 class속성에 따라 스타일을 지정
.클래스명{ 속성1:속성값; 속성2:속성값 }id 선택자
태그에서 설정한 id속성에 따라 스타일을 지정
#아이디{ 속성1:속성값; 속성2:속성값; }부모 자식 선택자
태그 이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용 시킨다.
선택자1 선택자2 { 속성1:속성값; 속성2:속성값; }<html>
<head>
<style>
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; color: green; }
</style>
</head>
<body>
<div class="yellow_box">
<span>
yellow_box div 클래스 내의 span 입니다.
</span>
</div>
<div id="c_box">
<span>
c_box div 아이디 내의 span 입니다.
</span>
</div>
</body>
</html>다중 조건 선택자
css 선택자에서도 AND나 OR과 같은 선택자를 비슷하게 나마 사용할 수 있다.
태그이름#아이디 { 속성1:속성값; 속성2:속성값; }
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용 할 수 있다.(AND 연산)
#아이디, .클래스명{ 속성1:속성값; 속성2:속성값; }
태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; }쉼표(,)를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수도 있다.(OR 연산)
가상 클래스 선택자
선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다.
:link- 방문한 적이 없는 링크:visited- 방문한 적이 있는 링크:hover- 마우스를 롤오버 했을 때:active- 마우스를 클릭했을 때:focus- 포커스 되었을 때 (input 태그 등):first- 첫번째 요소:last- 마지막 요소:first-child- 첫번째 자식:last-child- 마지막 자식:nth-child(2n+1)- 홀수 번째 자식
.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }<html>
<head>
<style>
.box{
background-color: #09c;
padding: 10px;
margin-bottom: 20px;
}
.hover-box:hover{
background-color: orange;
}
.focus-input:focus{
background: red;
}
.container > div{
margin-top: 20px;
width: 100px;
height: 100px;
float: left;
background-color: orange;
}
.container > div:nth-child(2n+1) {
background-color: red
}
</style>
</head>
<body>
<div class="box hover-box">
마우스를 올려보세요.
</div>
<input class="focus-input" type="text" value="클릭해보세요">
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style="clear: both"></div>
</body>
</html>
React, React-Native Developer