선택자들
- 조금 특이한 선택자들
span.orange { 일치 선택자, 동시에 만족하는 요소 선택, 반드시 태그->클래스 순서로 선택자를 사용해야한다. 띄어쓰기 하는거 아니다.
color: red;
}
<span class="orange"></span>
ul > .orange { 자식 선택자, 선택자 ul의 자식 요소 .orange를 선택
}
<ul>
<li class="orange">
</ul>
div .orange { : 하위(후손) 선택자, 선택자 div의 하위 요소 .orange를 선택 띄어쓰기도 하나의 기호, 많이 씀
}
<div>
<ul>
<li class="orange"></li>
</ul>
<span class="orange"></span>
</div>
.orange + li { : 인접 형제 선택자, orange의 다음 형제 요소 li 하나를 선택
}
<ul>
<li class="orange"></li>
<li></li> : 얘만 선택됨
<li></li>
</ul>
.orange ~ li { : 일반 형제 선택자, .orange의 다음 형제 요소 li 모두를 선택
}
<ul>
<li class="orange"></li>
<li></li> : 얘만 선택됨
<li></li> : 얘도 선택됨
</ul>- 가상 클래스
a:hover { : 가상 클래스 선택자 hover
color: red;
}
a:active { : active, 마우스를 클릭하고 있는 동안 선택
}
a:focus { : focus, 요소가 focus가 되면 선택을 하게 된다.
}
.fruits span:first-child { : first-child, 선택자 span가 형제 요소 중 첫째라면 선택
}
.fruits h3:last-child { : last-child, 선택자 h3가 형제 요소 중 막내라면 선택
}
.fruits *:nth-child(2) { : NTH CHILD, 현재 요소 중 (n)째라면 선택
}
.fruits *:not(span) { : 부정 선택자, span이 아닌 요소 선택
}- 가상 요소
.box::before { : 가상 요소 선택자, 인라인 요소가 삽입됨, 가상의 요소를 만들어서 삽입하는 특징을 가진다. .boc 요소의 내부 앞에 내용을 삽입. 자주사용함.
content: "앞!";
}
반드시 content라는 속성의 내용을 비워두는 한이 있더라도 반드시 작성해주자
<div class="box">
여기에 내용이 삽입됨
Content
</div>
.box::after { : 가상 요소 선택자, 인라인 요소가 삽입됨, 가상의 요소를 만들어서 삽입하는 특징을 가진다. .boc 요소의 내부 뒤에 내용을 삽입. 자주사용함.
content: "뒤!";
}
<div class="box">
Content
여기에 내용이 삽입됨
</div>- 속성
[disabled] { : 속성 선택자, 특정 속성을 가진 것을 찾는다.
}
[type] { : 속성 이름만 찾아서 선택하는 것은 유용해 보이지 않는다.
}
[type="password"] { : 속성 type이면서 값이 password인것을 찾는다.
}상속
inherit를 사용하면 부모요소의 높이값이 강제상속될 수 있다.
선택자 우선순위
속성
속성을 설정할때는 3가지로 나누어서 만들면 쉽다.
1. 위치 설정
2. 크기 설정
3. 꾸미기 설정
추가적인 팁들은 여기에 작성한다.
0. 팁
최상위 클래스의 위치는 가급적 margin, padding으로 설정해야함. 보통 margin-left, margin-right는 auto로 두고 margin-top의 값을 바꾸어주어서 설정함
display : flex는 자식요소에게까지만 영향을 미치고 후손요소에는 영향을 미치지 않음
rem은 최상위 요소, em은 스타일을 지정한 요소의 폰트 크기를 곱한 값
0. 단위
위와 같이 존재하는데 위쪽 3개만 많이 쓴다.
1. 위치 설정
margin : 0, auto(top, right, botton, left | (top, bottom), (left, right) | (top), (left, right), (bottom))
padding : 0, (top, right, botton, left | (top, bottom), (left, right) | (top), (left, right), (bottom))
display : block inline inline-block
display : flex grid none
배치(반응형에서는 적게 쓴다)
position : static, relative(원래 자신을 기준), absolute(부모 요소를 기준이므로 조상과 관련없음), fixed
top : auto, 단위
bottom : auto, 단위
left : auto, 단위
right : auto, 단위
z-index : auto, 0~999
(* relative <=> fixed / absolute : 부모와 상호작용, absolute와 fixed 쓰면 display가 block이 됨)
플렉스 container
display : flex 시 블록처럼 수평정렬, inline-flex 시 인라인처럼 수평정렬
flex-direction : row(왼쪽 정렬), row-reverse(오른쪽 정렬 / column(위쪽 정렬), column-reverse(아래쪽 정렬)
flex-wrap : nowrap(줄 바꿈 없음), wrap(줄 바꿈)
얘네 많이 씀
justify-content : flex-start, flex-end, center (수평 정렬)
align-content : stretch, flex-start, flex-end, center (수직 정렬)
align-items : stretch, flex-start, flex-end, center (각 줄을 기준 - 한 줄일때 주로 사용)
flex : flex-grow flex-shrink flex-basis (flex: 1 하면 flex-basis가 0이 되어 최대 너비가 되려고 한다)
flex-grow : 0-999 너비 비율
flex-shrink : 0-999 감소 비율
flex-basis : 0-999 기본 너비
order : 0-999 : 정렬 순서
2. 크기 설정
인라인(a, button, i, img, input, label, script, select, span, textarea)
- 인라인의 크기만큼 자동으로 줄어든다.
블록(div, form, hn, header, section, table> - 블록은 가로는 최대로 늘어나고 세로는 콘텐츠 크기만큼 줄어든다.
height, width : px,em,% 이 주로 사용됨
max-width, min-width, max-height, min-height : px, em, % (관리자 클래스가 자식 클래스들의 크기 변화 제어시 사용)
3. 꾸미기 설정
색상표현
- 색상 이름 : red
- Hex 색상코드 : #000, #FFFFFF
- RGB : rgb(,,)
- RGBA : rba(,,,)
border : 선-두께(border-width) 선-종류(border-style) 선-색상(border-color)
- border-width : px, em, %
- border-style : none, solid, dashed(top, right, bottom, left)
- border-color : black, 색상, transparent(top, right, bottom, left)
- border-방향-속성
border-radius : 0, px, em, vw
요소의 크기 계산 기준을 지정 -> margin, padding 포함/배제 계산용
box-sizing : content-box, border-box
overflow : visible, hidden, auto
overflow-x
overflow-y
opacity : 0~1
글꼴
font-size : px, em, rem
font-weight : 100~900
font-style : normal, italic
line-height : 1~2, px, em, rem
font-family : sans-serif, serif, monospace
문자
color : rgb(0,0,0)
text-decoration : none, underline, line-through, overline
text-align : left, right, center, justify
text-indent : 0, px, em, rem
배경
background-color : 색상rgb(), transparent
background-image : url('경로'), none
background-size : auto, 단위, cover, cotain
background-repeat : repeat, repeat-x, repeat-y, no-repeat
background-position : top, bottom, left, right, center, 단위
background-attachment : scroll, fixed
