CSS 2일차-선택자, 텍스트
10. 속성 선택자
HTML요소의 여러 속성들(src, href,type,class,...)을
이용해서 선택자로 사용하고 스타일을 적용
[속성명]{
스타일 적용
}
[속성명 = 값]{
스타일 적용
}
[속성명 ~= 값] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택
ex) css / css funny / funny css
(공백으로 나눠져 있어야 인식한다)
[속성명 *= 값] : 속성값이 포함된 모든 문자를 가지는 요소를 선택
*공백 또는 하이픈으로 나뉘든 어떤 경우든 속성값이 포함되면 선택된다.
ex) css/css funny /funny css / css-funny / css_funny / cssfunny .....
[속성명 |= 값] : 속성값이 접두사로 시작되는 문자중에서 완벽하게 일치하는 문자
또는 '-' 로 연결된 문자를 가지는 요소를 선택
ex) css/css-funny
[속성명 $= 값] : 속성값이 접미사로 끝나는 모든 문자를 가지는 요소를 선택( ^= 와 반대)
ex) css/ funny css / funny-css/ funny_css / funnycss..
[속성명 ^= 값] : 속성값이 접두사로 시작되는 모든 문자를 가지는 요소를 선택
ex) css/ css funny / cssfunny/ css_funny/ css-funny..
11. 순서에 따른 가상 클래스 선택자
클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택
<ul>
<li>김사과</li>
<li>반하나</li>
<li>이체리</li>
<li>차두리</li>
</ul>
요소:first-child :해당 요소들 중 첫번째 자식인것들만 선택
요소:last-child :해당 요소들 중 마지막 자식인것들만 선택
요소:nth-child(n) :해당 요소들 중 n번째 자식인것들만 선택
요소:nth-child(odd) :해당 요소들 중 홀수번째 자식인것들만 선택
요소:nth-child(even):해당 요소들 중 짝수번째 자식인것들만 선택
*nth-child(3n+1) -수식도 넣는것이 가능하다.
12. 가상 요소 선택자
::before
글, 이미지, 그라데이션 등을 요소 앞에 가상으로 삽입
::after
글, 이미지, 그라데이션 등을 요소 뒤에 가상으로 삽입 (드레그 조차 안됨)
:link
하이퍼링크가 연결된 상태일 때(기본상태)
:hover
마우스가 올라와 있을 때
:active
마우스로 요소를 클릭하고 있을 때
:visited
특정 하이퍼링크를 방문한 적이 있을 때
-----------------------------------------------------------------------------------------------------
>CSS 컬러
1. 색상 이름으로 표현
RED, WHILE, DEEPSKYBLUE,...
2. RGB 색상값으로 표현
rgb(0-~255,0~255,0~255)
rgba(0~255,0~255, 0~255, 0~1)-->alpha투명도(높을수록 불투명)
3. 16진수 색상값으로 표현
0 2 3 4 5 6 7 8 9 A B C D E F
- rgb 색상값을 16진수로 0~f 까지 범위를 지정
#0000FF ---> rbg(0,0,255)
#0000FF ---> #00F
>CSS 텍스트
1. color
텍스트의 색상을 설정, 기본색은 검정색
2. letter-spacing
텍스트 내에서 글자 사이의 간격을 설정
3. word-spacing
텍스트 내에서 단어 사이의 간격을 설정
4. text-align
텍스트의 수평 방향 정렬을 설정
left / center / right / justify
5. text-indent
단락의 첫 줄의 들여쓰기를 설정
6. line-height
텍스트의 줄 간격(높이)을 설정
ex) 0.7, 3, 20px, 50% 등등 다양한 방법으로 줄 수 있다.
7. text-decoration
텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
none, underline, line-through, overline
8. text-transform
텍스트에 포함된 영문자에 대한 대소문자를 설정
uppercase, lowercase, capitalize
10. text-shadow
텍스트에 그림자 효과를 설정
text-shadow : 가로거리 세로거리 번짐정도 색상;
11. white-space
스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정
normal, nowrap ,...
* nowrap :텍스트를 한줄에 정렬(가장 많이 씀)
12. overflow
기준선을 벗어나 넘칠 경우 값을 어떻게 처리할지 설정
visible(보여주기), hidden(숨기기)
13. text-overflow
텍스트가 기준선을 넘칠 경우 넘치는 텍스트를 어떻게 표현해줄지 설정
clip, ellipsis
*ellipsis: 넘치는 텍스트 ...으로 표현
14. fone-size
텍스트의 크기를 설정
px, %, em, rem
15. font-family
글꼴을 설정
하나의 글꼴, 여러개의 글꼴을 등록
여러개의 글꼴이 등록되어 있는 경우에는 웹 브라우저에서
순서대로 사용여부를 판단한 후 적용
글꼴 이름에 띄어쓰기가 있는 경우 반드시 따옴표로 감싸주어야 함
16. font-weight
텍스트의 두께를 설정
100~900 / bold
>무료 웹 폰트
구글폰트
http://fonts.google.com
눈누폰트
https://noonnu.cc