CSS - 개요, 선택자!
CSS(cascading style seets)
cacading 연속화
웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. style을 정해주면 선택된 객체 들은 모두 해당 style로 덮어씌어진다.
스타일 시트 우선순위
스타일 시트를 적용하는 방법은 3가지가 있다.
1. 외부 스타일 시트 외부 css스타일 시트 파일을 참조
2. 내부 스타일 시트
한 문서내에 head 영역 안에서 스타일 지정
3. 인라인 스타일 시트
태그안에서 속성으로 스타일 지정
인라인 -> 내부 -> 외부 순으로 우선순위를 가진다.
내부 스타일 시트에서 에서도 태그명, 클래스, id를 선택자로 지정해 스타일 시트 적용이 가능하다.
id -> 클래스 -> 태그명 순으로 id가 최상위 우선순위를 가진다.
우선순위를 요약하면 다음과 같다.
태그명.아이디명 > 아이디명 > 태그명.클래스명 > 클래스명 > 태그(요소)명
<div id="box" class="test">Lorem ipsum dolor sit amet.</div>
div#box {
background-color:fuchsia;
}
#box {
background-color: lime;
}
div.test {
background-color: aqua;
}
.test {
background-color: green;
}
div {
background-color: red;
}
적용되는 색깔은 가장 밑에있는 red 가 아닌 fuchsia
만약 동일한 태그에 대한 스타일 시트를 정의한다면
가장 아래에 있는 스타일 시트가 적용된다.
div {
border-color: green;
border-width: 1px;
border-style: dotted;
}
p,div {
border: solid 1px gray;
text-align: center;
margin: 0;
}
우선순위를 무시하고 강제로 적용할 수 있는 키워드
!important가 있지만 사용을 권장하지 않음
border-color: red !important;이런식으로 뒤에 키워드를 붙인다속성(attribute)에 값을 지정할땐
:콜론을 사용한다.
css 단위
width, margin, padding, font-size 등 px등과 같은 단위를 붙인다.
html에선 기본단위가 px이라 숫자뒤에 단위를 생략해도 되지만
css에선 기본단위가 없다, 0을 제외하고 모든 숫자 뒤에 단위를 붙여야한다.
단위로 음수값도 사용 가능한데 잘못사용하면 겹쳐버린다….
절대길이 : cm, mm, in(inch 2.54cm 96px), pt(point), pc 등
상대길이 : em, vw, %, ex, ch, vh, vmin, vmax, px(해상도에 따라 크기가 달라짐)
CSS 선택자
스타일을 적용할 대상을 선택자(Selector) 라 한다, 이 선택자를 찾아 적용하는 과정이 가장 중요하다.
id명, class명
<div id="demo" class="team manager">Odio esse sequi quidem</div>
id, class 속성을 식별자로 사용 가능, id는 고유값, class는 여러 요소가 가질 수 있다
스타일 시트에서 class 명을 선택자로 지정하고 싶다면 .을 사용
.team {
border: solid 1px aqua;
}
id명을 선택자로 지정하고 싶다면 #을 사용한다.
#demo {
border: dotted 1px brown;
}
클래스명과 id는 선택자 지정에도 쓰이지만 사람이 유지보수 할때 알아보기 쉽게하는 역할도 한다.
ol.lst_realtime_srch li span.bx span.keyword em.num
위와 같은 css 선택자가 있을경우 다음과 같이 해석할 수 있다.
class명이 lst_realtime_srch인 ol태그 안의 li태그 내부
클래스명이 bx인 span태그 내부 클래스명이 keyword인 span태그 내부
클래스명이 num인 em인 태그 라 할수 있다.
그냥 .num으로 선택할 수 도 있지만 유지보수 입장에선 늘여쓰는게 명확하고 알기 쉽다.
결합자 (> + ~ ^)
div p - div 자식중 p
div#demo, div.demo - div 이면서 id 또는 class 가 demo
범위를 좁히려면 이러한 기호를 쓸 수 밖에없다.
특수함 범위를 선택해야할 경우가 있는데 이때 결합자를 사용하면 효율적이다.
div>p {
font-size: 20px;
color: red;
font-weight: bold;
font-variant: small-caps;
}
> 는 직계자식을 뜻한다. div 바로 밑의 p 만을 선택자로 지정한다.
div+p {
border-width: 10px;
border-style: dotted;
border-color: blue;
}
+ 는 div 에 인접한 바로 다음 p 를 뜻한다.
만약 div 와 p 사이에 다른태그가 있다면 적용되지 않는다.
div ~p {
border-width: 5px;
border-style: dashed;
border-color: green;
}
~ 는 div 와 형제레벨인 p 를 뜻한다.
단 div 뒤에있는 p 만 인식하고 앞의 태그는 인식하지 못한다.
a+div#in {
width: 200px;
padding: 10px;
background: aqua;
display: none;
}
a 인접한 div 중 id 가 in 인 요소
속성 선택자
요소에는 여러가지 속성을 지정할 수 있는데 이 속성의 값을 통해, 혹은 속성이 명시되어있는지를 통해 선택자로 지정할 수 있다.
input[type] { /* tpye속성이 명시되어 있다면 */
width: 400px;
}
input[type="password"] {
border-color: red;
}
input[title*="info"] { /* info가 포함되는 title을 선택자로 */
background-color: fuchsia;
}
input[title~="info"] { /* info단어가 포함되는 title을 선택자로 (공백으로 구분되야함)*/
background-color: maroon;
}
input[title$="info"] { /* info로 끝나는 title을 선택자로*/
background-color: red;
}
input[title^="info"] { /* info로 시작하는 title을 선택자로*/
background-color: blue;
}
input[title="info"] {
border-color: green;
}
input[title|="info"] { /* info단일 단어 혹은 - 하이폰으로 구분될 경우 선택자로 */
background: silver;
}
input[type="password"] { /* type 속성이 password 일 경우 */
border-color: red;
}
*과 ~의 차이는 공백으로인해 단어로 구분되는지, 해당 문자열이 포함되어 있는지이다.
<input type="text" title="_info_" /> 는title*=info 에 선택되지만 info 앞뒤에 공백이 없어서 title~="info"에는 걸리지 않는다.
<input type="text" title="_ info _" /> 이렇게 해야 title~="info"에 걸림
input[type="password"] {
border-color: red;
}
속성값을 기준으로 가능