핑구

01.기초 선택자 본문

JAVA 웹 개발/6. CSS

01.기초 선택자

코딩 펭귄 2022. 8. 13. 17:59
📅 2021.10.12

CSS 작성 방법

  • 선택자: 특정 HTML 태그를 선택할 때 사용하는 기능으로 태그를 선택하여 원하는 스타일과 기능 적용이 가능하다.
    선택자{속성: 속성값;}
    속성 값 뒤 세미콜론은 해당 속성 값이 마지막인 경우에는 생략 가능하지만, 붙이는 것을 권장한다.
  • 스타일 시트의 종류
    • 내부 스타일 시트: <head> 태그 내부의 <style> 태그 안에 존재하는 스타일 시트이다.
    • 외부 스타일 시트: .css 파일을 만든 후 읽어오는 방법으로 사용하는 스타일 시트이다.
    • 인라인 스타일 시트: 태그 안에 스타일 정보를 넣는 것을 말한다.

 

기초 선택자

    • 모든 선택자: 전체적으로 적용된다. 기본적으로 선택자의 경우 아래에 동일한 부분의 스타일이 다르게 지정되어 있는 경우 아래 스타일로 덮어 씌워지지만, 모든 선택자의 경우 아래에 있어도 전체적으로 덮어 씌워지지 않으며, 스타일이 존재하지 않는 부분에만 적용된다.

      📝 작성 방법
      *{속성: 속성값;}
  • 태그 선택자: 해당 태그 부분에 적용된다

    📝 작성 방법
    태그{속성: 속성값;}

  • 아이디 선택자: HTML 문서 내 해당하는 아이디 속성을 가진 태그만 선택할 때 사용된다. 아이디는 고유해야 하기 때문에 태그마다 달라야 한다. 아이디 선택자를 한 번에 여러 개 사용하는 경우 쉼표(,)로 연결하여 사용할 수 있다.

    📝 작성 방법
    #아이디{속성: 속성값;}

  • 클래스 선택자: HTML 문서 내 여러 개의 태그를 동일한 클래스 명으로 지정하여 선택할 때 사용된다. 따라서 그룹으로 묶는 경우 유용하다.

    📝 작성 방법 .
    클래스명{속성: 속성값;}

  • 속성 선택자: 기본 선택자 뒤에 []를 사용하여 속성과 속성 값을 사용하여 스타일을 지정할 수 있다.

    📝 작성 방법
    태그[사용할 속성명=속성값]{속성: 속성값;}
    → 속성 값이 완벽하게 일치하는 곳에만 스타일을 적용한다.

    태그[사용할 속성명~=속성값]{속성: 속성값;}
    → 공백으로 구분했을 때 완벽하게 일치하는 속성 값을 포함하는 곳에 스타일을 적용한다.

    태그[사용할 속성명|=속성값]{속성: 속성값;}
    → -로 구분했을 때 완벽하게 일치하는 속성 값을 포함하는 곳에 스타일을 적용한다.

    태그[사용할 속성명^=속성값]{속성: 속성값;}
    → 가지고 있는 속성 값이 선택자에 작성된 속성 값으로 시작하는 곳에 스타일을 적용한다.

    태그[사용할 속성명$=속성값]{속성: 속성값;}
    → 가지고 있는 속성 값이 선택자에 작성된 속성 값으로 끝나는 곳에 스타일을 적용한다.

    태그[사용할 속성명*=속성값]{속성: 속성값;}
    → 가지고 있는 속성 값에 선택자에 작성된 속성 값이 포함되는 곳에 스타일을 적용한다.

  • 자손 선택자: 바로 아래에 있는 요소에 접근할 때 사용한다. 자손 선택자를 여러 번 사용하여 후손에 접근하는 것이 가능하다.

    📝 작성 방법
    #아이디>태그{속성: 속성값;}

  • 후손 선택자: 하위 요소에 접근할 때 사용한다. 후손 선택자가 자손 선택자보다 큰 개념이기 때문에 후손 선택자를 이용하여 자손에 접근 가능하다.

    📝 작성 방법
    #아이디 태그{속성: 속성값;}

  • 동위 선택자: 같은 레벨에 있는 것을 동위 관계라고 하며, 바로 뒤에 있는 요소에 접근하는 경우, 뒤에 있는 요소 모두에 접근하는 경우 두 가지로 사용 가능하다.

    📝 작성 방법
    #아이디+태그{속성: 속성값;}
    → 같은 라인 안에서 바로 뒤에 있는 곳에 스타일을 적용한다.

    #아이디+태그{속성: 속성값;}
    → 같은 라인 안에서 뒤에 있는 모든 곳에 스타일을 적용한다.

  • 반응 선택자: 사용자의 움직임에 따라 달라지는 선택자로 active와 hover 두 가지가 존재한다.

    📝 작성 방법
    #아이디:active{속성: 속성값;}
    → 클릭하는 경우 해당 스타일이 활성화된다.

    #아이디:hover{속성: 속성값;}
    → 마우스를 올리는 경우 해당 스타일이 활성화된다. cursor 속성을 이용하여 마우스 커서 모양도 변경 가능하다.

    <커서 모양 속성>
    - pointer: 클릭 가능한 손 모양으로 변경된다.
    - move: 움직이는 것이 가능하게 보이는 모양으로 변경된다.
    - crosshair: 드래그가 가능하게 보이는 모양으로 변경된다.

  • 상태 선택자: 입력 양식의 상태에 따라 선택되는 선택자이다.
    • 체크 상태의 input 태그 선택: 체크박스에서 체크된 박스의 스타일이 활성화된다.

      📝 작성 방법
      input[속성=속성값]:checked{속성: 속성값;}

    • 초점이 맞춰진 input 태그 선택: 해당 input 부분을 값을 입력하기 위해 클릭하는 경우 스타일이 활성화된다.

      📝 작성 방법
      #아이디:focus{속성: 속성값;}

    • 사용 가능/불가능한 input 태그 선택: 드롭박스에서 선택이 가능한/불가능한 항목에 대한 스타일을 지정할 수 있다.

      📝 작성 방법
      선택이 불가능한 경우
      option:disable{속성: 속성값;}

      선택이 가능한 경우
      option:enable{속성: 속성값;}
  • 구조 선택자: 특정한 위치에 있는 태그를 선택하는 선택자이다.
    • 일반 구조 선택자: 위치로 먼저 구분하기 때문에 지정한 위치에 해당하는 태그가 있는 경우에만 스타일을 지정한다.

      📝 작성 방법 
      #아이디 태그:first-child{속성: 속성값;}
      → 제일 첫 부분에 스타일을 적용한다.

      #아이디 태그:last-child{속성: 속성값;}
      → 마지막 부분에 스타일을 적용한다.

      #아이디 태그:nth-child(2n){속성: 속성값;}
      → 수열을 이용하여 짝수 번째 부분에 스타일을 적용한다.

      #아이디 태그:nth-last-child(4){속성: 속성값;}
      → 뒤에서부터 4번째 부분에 스타일을 적용한다.

    • 형태 구조 선택자: 태그 별로 구분하며, 해당 태그 중 해당 순서인 부분에 스타일을 적용한다.

      📝 작성 방법 
      #아이디 태그:first-of-type{속성: 속성값;}
      → 제일 첫 부분에 스타일을 적용한다.

      #아이디 태그:last-of-type{속성: 속성값;}
      → 마지막 부분에 스타일을 적용한다.

      #아이디 태그:nth-of-type(2n){속성: 속성값;}
      → 수열을 이용하여 짝수 번째 부분에 스타일을 적용한다.

      #아이디 태그:nth-last-of-type(4){속성: 속성값;}
      → 뒤에서부터 4번째 부분에 스타일을 적용한다.
  • 문자 선택자: 태그 내부에서 특정 조건의 문자를 선택하는 선택자이다.

    📝 작성 방법 
    #아이디 태그::first-letter{속성: 속성값;}
    → 첫 번째 글자에 스타일을 적용한다.

    #아이디 태그::first-line{속성: 속성값;}
    → 첫 번째 라인에 스타일을 적용한다.

    #아이디 태그::after{속성: 속성값;}
    → 태그 내용의 맨 뒤에 스타일을 적용한다.

    #아이디 태그::before{속성: 속성값;}
    → 태그 내용의 맨 앞에 스타일을 적용한다

    #아이디 태그::selection{속성: 속성값;}
    → 드래그 했을 때 스타일이 변경되도록 한다.

  • 부정 선택자: 지금까지의 선택자에 대해 반대로 적용하는 선택자이다.

    📝 작성 방법
    #아이디 태그:not(:선택자){속성: 속성값;} 
    /* 홀수 번째만 스타일을 변경하는 경우*/
#test4 li:not(:nth-child(2n)){background: gray;}
저작자표시 비영리 동일조건 (새창열림)