CSS 02

CSS 선택자

    10. 속성 선택자
    [속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지고 있는 요소를 선택
            = "apple" - 값이 "apple"인 것을 선택
            ~= "apple" - 값이 "apple" 혹은 "apple"과 다른값이 띄어쓰기로 있는경우
                ex) "apple banana" / "banana apple"
    [속성명 *= "속성값"] : 속성값이 포함된 문자를 가지고 있는 요소를 선택
    [속성명 $= "속성값"] : 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택
   [속성명 |= "속성값"] : 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고 있는 요소를 선택
        |= "apple" - 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택
    [속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 있는 요소를 선택
        ^= "apple" - "apple", "apple-tree", "apple_tree",
        "apple tree", "appletree"

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

        <ul>
            <li>김사과</li>
            <li>반하나</li>
            <li>이체리</li>
            <li>차두리</li>
        </ul>
        
        ul > li:first-child     -> li 요소 중에서 첫번째에 해당하는 요소
        ul > li:last-child      -> li 요소 중에서 마지막에 해당하는 요소
        ul > li:nth-child(x)    -> li 요소 중에서 x번째에 해당하는 요소
        ul > li:nth-child(odd)  -> li 요소 중에서 홀수번째에 해당하는 요소
        ul > li:nth-child(even) -> li 요소 중에서 짝수번째에 해당하는 요소

    12. 가상 요소 선택자
        ::before
            글, 이미지, 그라데이션 등을 요소 앞에 가상의 태그에 삽입
        ::after
            글, 이미지, 그라데이션 등을 요소 뒤에 가상의 태그에 삽입
        :link
            하이퍼링크가 연결됐을 때(기본 상태)
        :visited
            특정 하이퍼링크를 방문한 적이 있을 때
        :active
            마우스가 클릭하고 있을 때
        :hover
            마우스가 올라갔을 때

CSS의 컬러
    1. 색상 이름으로 표현
        red,whilte,black, ...

    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

컬러 사이트
    https://materializecss.com/color.html

CSS의 텍스트
    color
        텍스트의 색상을 설정
    letter-spacing
        텍스트 내에서 글자 사이의 간격을 설정
    word-spacing
        텍스트 내에서 단어 사이의 간격을 설정
    text-align
        텍스트의 수평 방향 정렬을 설정
    text-indent
        단락의 첫 줄의 들여쓰기를 설정
    line-height
        텍스트의 줄 간격(높이)을 설정
    text-decoration
        텍스트에 여러가지 효과를 설정하거나 제거하는데 사용
    text-transform
        텍스트에 포함된 영문자에 대해 대소문자를 설정
        uppercase, lowercase, capitalize
    font-variant
        소문자를 작은 크기의 대문자로 변경,
        소문자 크기의 작은 대소문자 설정
    text-shadow
        텍스트에 그림자 효과를 설정
        text-shadow:가로거리 세로거리 번짐정도 색상;
    white-space
        스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정
    overflow
        기준선을 벗어나 넘칠 경우 값들을 어떻게 처리할 지 설정
    text-overflow
        텍스트가 기준선을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정
    font-size
        텍스트의 크기를 설정
        px, %, em, rem
        px  : 스크린의 픽셀을 기준으로 하는 절대 크기 설정
        %   : 기본크기(16px)를 기준으로 하고 상대 크기 설정
                150% ---> 24px
    font-weight
        텍스트의 굵기를 설정
        기본 굵기는 숫자 400 / bold는 700
        숫자는 100~900 사용
    font-family
        글꼴을 설정
        하나의 글꼴을 설정, 여러개의 글꼴을 등록
        여러개의 글꼴이 등록되어 있는 경우, 웹 브라우저에서 순서대로 사용 여부를 판단한 뒤 적용
        글꼴 이름에 띄어쓰기가 포함되어 있는 경우 반드시 따옴표로 감싸주어야 함

        무료 웹 폰트
            구글폰트 : https://fonts.google.com

CSS의 배경
    background-color
        HTML 요소의 배경색을 설정
    background-image
        HTML 요소의 배경으로 나타날 배경 이미지를 설정
        배경 이미지는 기본 설정으로 바둑판 형식으로 반복되어 나타남
        background-image:url("이미지파일 경로");
    background-repeat
        배경이미지를 수평이나 수직 방향으로 반복하도록 설정
        repeat, repeat-x, repeat-y, no-repeat
    background-position
        반복되지 않는 배경 이미지의 상대 위치를 설정
        %나 px을 사용해서 상대위치를 직접 설정할 수 있음
        상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단

        left top            center top         right top
        left center         center              right center
        left bottom       center bottom    right bottom

        background-position : 가로위치값 세로위치값;
            10% 100px --> 가로로 10%이동, 세로로 100px 이동