Front End. Day05 CSS(2)

5일차는 4일차 마지막의 속성선택자부터 시작합니다.

 

속성 선택자는 태그 안에서 사용되는 속성들의 값에 따라 스타일을 지정할 수 있습니다.

 

 

< 속성 선택자 종류 >

 

1. [속성명 = "속성값"] -> 속성값이 완벽히 일치한 경우
2. [속성명 ~= "속성값"] -> 값이 속성값과 다른 값이 띄어쓰기로 있는 경우
3. [속성명 *= "속성값"] -> 속성값이 포함된 문자를 가지고 있는 요소
4. [속성명 $= "속성값"] -> 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택 
5. [속성명 |= "속성값"] -> 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로

                               연결된 문자를 가지고 있는 요소를 선택

                                ex) | = 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택

 

6. [속성명 $= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 요소를 선택

 

 

 

다음은 순서에 따른 가상클래스 선택자입니다

가상클래스 선택자는 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택해 스타일을 지정합니다.

 

예시)

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

 

 

< 가상클래스 선택자 종류 >

 

1. ul > li:first-child -> ul의 자식인 li요소 중에서 첫번째 해당하는 요소
2. ul > li:last-child -> ul의 자식인 li요소 중에서 마지막에 해당하는 요소
3. ul > li:nth-child(n) -> ul의 자식인 li요소 중에서 n번째에 해당하는 요소
4. ul > li:nth-child(odd) -> ul의 자식인 li요소 중에서 홀수번째에 해당하는 요소
5. ul > li:nth-child(even) -> ul의 자식인 li요소 중에서 짝수번째에 해당하는 요소

 

 

다음은 가상요소 선택자입니다.

 

가상요소 선택자는 내용의 일부만 선택해 스타일을 적용할 때 사용합니다.

가상 클래스와 구별하기 위해 클래스 이름앞에 콜론(:) 두개를 붙여 표시합니다

 

 

예시)

선택자::before
        글, 이미지, 그라데이션 등을 요소 앞에 가상의 태그에 삽입
        
선택자::after
        글, 이미지, 그라데이션 등을 요소 뒤에 가상의 태그에 삽입

 

 

< 주요 가상요소 선택자 >

 

 - :link : 하이퍼링크가 연결됐을 때(기본 상태)

 - :Visited : 특정 하이퍼링크를 방문한 적이 있을 때 

 - :active : 마우스가 클릭하고 있을 때

 - :hover : 마우스가 올라갔을 때

 

------------------------------------------------------------------------------------------

 

 

CSS의 컬러를 작성하는 방법은 세 가지가 있습니다.

 

 

1. 색상 이름으로 표현 

 

   red, white, coral, blue, purple...

 

2. RGB 색상 값으로 표현

 

  rgb(0~255, 0~255, 0~255)

  rgba(0~255, 0~255, 0~255, 0~1)

 

3. 16진수 색상값으로 표현

  rgb 색상값을 16진수(00~FF)로 바꾼 후 #과 연결해서 표현
            #0000ff(파랑색) ----> #00f
            #000000(검정색) ----> #000
            #ffffff(흰색) ------> #fff

 

 

예시)

<style>
	a:link{
    	color: lightblue;
        }
        
	a active{
    	color: #000;
        }
        
	a hover{
    	color: rgb(255, 255, 255);
        }
 </style>

 

 

 

< CSS의 텍스트 종류 >

 

 color : 텍스트의 색상

 letter-spacing : 글자 사이 간격

 word-spacing : 단어 사이 간격

 text-align : 텍스트 정렬
 line-height :텍스트의 줄 간격(높이)를 설정 (*장평)
 text-indent : 첫 줄의 들여쓰기
 text-decoration : 텍스트에 여러가지 효과를 설정하거나 제거
 text-transform : 텍스트에 포함된 영문자에 대해 대소문자를 결정
                      - uppercase, lowercase, capitalize

 font=variant : 소문자를 작은 크기의 대문자로 변경
 text-shadow : 텍스트의 그림자 효과를 설정
 white-space : 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정
 text-overflow : 텍스트가 기준선으로 벗어난 경우 텍스트를 어떻게 처리할 것인지 설정
 font-size : 텍스트의 크기를 설정
               - px, %, em, rem

 px: : 스크린의 픽셀을 기준으로 하는 절대 크기
       %: 기본크기(16px)를 기준으로 하는 상대 크기

font-family : 글꼴을 설정, 하나의 글꼴을 설정, 여러개의 글꼴을 등록

               - 여러개의 글꼴이 등록되어있는 경우 웹브라우저에서 순서대로 사용 여부를 판단해 적용합니다.

               - 글꼴 이름에 띄어쓰기가 포함되면, 반드시 따옴표로 감싸줘야합니다.

 

5일차는 여기까지 입니다.

CSS가 생각보다 많아서 5일차에도 안끝났었습니다. 아마 6일차나 7일차쯤이면 끝나지 않을까 싶네요