공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

CSS(Cascading Style Sheet)

  : 스타일이 적용되는 방식이 Cacading(단계적으로) 된다고 해서 붙여진 이름.

 

   스타일(Style)  : html 문서의 글꼴이나 색상, 정렬, 배치 등의 겉모습을 결정짓는 내용들을 의미한다.

   스타일 시트(Style Sheet) 

    : 스타일을 관리하기 쉽도록 한 군데 모아놓은 것을 의미.

      Style을 사용하면 웸 페이지의 내용과 디자인을 분리해서 관리할 수 있어서 편리하기 때문에 사용한다.

 

 

  ■ style 특징

  1. 상속된다
    : 태그들은 부모 요소와 자식 요소로 구성되어 있는데 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소라고 한다.
     스타일 시트에서는 부모 요소에 있는 속성들이 자식 요소에 똑같이 적용된다. (그러나 모든 요소들이 상속되지는 X)
  2. 단계적으로 적용된다
    : 여러 스타일이 동시에 있을 경우 우선순위에 따라 적용된다.
      같은 우선순위의 스타일이라면 가장 마지막에 정의된 스타일을 적용한다. (! important등으로 순위를 조정할 수도 O)
      선택자의 우선순위 :  id  >  class >  tag 

 

 

  ■ style의 형식

 

선택자{

   속성:속성 값;}

p{

   color:blue;}

 

 

  ■ style의 위치

  • 내부 스타일시트 : <head>와 </head>사이
  • 외부 스타일시트 : <link>를 사용
     <link href="외부 css파일 경로" rel="stylesheet" type="text/css">
     rel="stylesheet" 는 <link>로 연결하는 파일이 스타일시트 파일이라는 의미
     type="text/css" 스타일 시트 코드가 텍스트 파일로 된 css 유형이라는 의미 

 

 

 

선택자(Selector)

  : 속성이 어디에 적용되는지 표시

 

  ■ 선택자의 종류

  1) 전체 선택자 ( * )

    : 모든 요소에 스타일 적용

    ex) * {font-size:12px;} : 페이지의 모든 글자를 12px로 설정

 

  2) 태그 선택자

    : 특정 태그에 스타일 적용 

    ex) p { font-family:"돋움"; } : 웹 페이지의 모든 <p>안에 있는 글꼴을 돋움으로 설정

 

  3) 클래스 선택자 ( . )

    : 특정 클래스에 스타일 적용

    클래스 선택자를 사용하기 전에 미리 태그에서 클래스의 이름을 지정해줘야 한다.

    만약 클래스 선택자를 부분에만 이용하고 싶다면 <span>을 이용한다.

     ex) <p class="name"> : 이름 붙일 때는. 사용하지 X

          .name { color:red; } : 클래스 이름이 name인 태그의 글자색을 빨간색으로 설정(앞에 점(.)을 붙여야 한다.)

   

  4) id 선택자 ( # )

    : 특정 id에 스타일 적용

     클래스 선택자는 문서 안에서 여러 번 반복해서 사용할 수 있지만 id 선택자는 요소의 크기나 위치 등 레이아웃을 지정할 때 주로 사용하기 때문에 클래스 선택자와 달리 문서 안에서 한 번만 사용해야 한다.

     ex) <p id="id 선택자 이름"> : <p>의 id를 지정

     #id 선택자 이름 { 속성 : 속성 값; }  

 

    * 클래스 선택자와 id 선택자의 차이점 

  • 클래스 선택자 : 페이지 안에서 여러 번 사용 가능
  • id 선택자 : 페이지 안에서 한 번만 사용해야 함.

 

  5) 하위 선택자

    : 모든 하위 요소에 스타일 적용

     적용대상을 한정시킬 때 사용하는 선택자이다.

    ex) section p { color:red; } : <section>안의 모든 <p>안의 글자색을 빨간색으로 설정.

 

  6) 자식 선택자

    : 자식 요소에만 스타일 적용

    ex) section > p { color:red } : <section>안의 <p>중 자식 요소인 <p>의 글자색만 빨간색으로 설정

 

    * 하위 선택자와 자식 선택자의 차이점

  • 하위 선택자 : 자식 요소뿐만 아니라 그 밑의 자식 요소까지 계속 적용됨.
  • 자식 선택자 : 바로 밑의 자식 요소까지만 스타일이 적용됨.

 

  7) 인접 형제 선택자

    : 첫 번째 동생 요소에 스타일 적용

      같은 부모를 가진 형제 요소 중 첫 번째로 나오는 동생 요소에만 스타일을 적용한다.
     (같은 부모를 가진 요소들을 형제 요소라고 하는데 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.)

    ex) h1 + p { text-decoration:underline; } : <h1> 다음에 오는 <p>중 첫 번째 <p>에만 밑줄.

 

  8) 형제 선택자

    : 형제 요소에 스타일 적용

      인접 형제 선택자와 달리 모든 형제 요소에 다 적용된다.

    ex) h1 - p { text-decoration:underline; } : <h1> 다음에 오는 모든 형제 <p>에 밑줄.

 

  9) 그룹 선택자

    : 스타일 한꺼번에 정의

     여러 선택자를 묶어 한번에 스타일을 설정할 때 사용한다.

    ex) a, p { color:red; } : <a>와 <p>안의 글자색을 빨간색으로 설정.

 

 

 

속성 선택자(Attribute Selector)

  : [ ]안에 스타일을 적용하려는 속성을 지정하면 된다. 

   [속성] { 속성:속성 값; }

 

1) [속성 = 값]

  : 일치하는 요소에 적용

   주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용한다.

    ex) a [ target="_blank"] { background-color:blue; }

          : 링크 중에서 target="_blank"(새 탭으로 열리는)인 태그의 글자를 파란색으로 지정

  

2) [속성 ~= 값]

  : 하나만 일치해도 적용

   ~ (틸드)를 사용하면 속성과 값이 일치하는 요소를 찾아서 적용하는데, 이때 비교할 값이 여러 개일 경우 그중 하나만 일치해도 스타일을 적용한다.

   ex) [ class="button"] { border-radius:10px; }

       : class="button"처럼 값이 정확하게 일치하거나 class="flat button"처럼 여러 속성일 경우에도 적용된다.

         그러나 class="flat-button"이나 class="buttons"처럼 요소의 값이 정확하게 일치하지 않을 때는 적용 X

  

3) [속성 ^= 값]

  : 지정한 문자로 시작하는 속성에 적용

   ^ (캐럿)이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용한다.

  ex) a [ href^="http://" ] { font-style:italic; } : href 속성 값이 http://로 시작하면 기울임 꼴을 적용

 

4) [속성 $= 값]

  : 지정한 문자로 끝나는 속성에 적용

  ex) a [ href$=".zip" ] {background:url(zip_icon.gif) } : 압축파일이면 링크에 스타일을 적용

 

5) [속성 |= 값]

  : 지정한 값으로 시작하면 적용

  ex) a [ class|="red" ] { background:url(red.jpg); } : <a>중 class이름이 red로 시작하는 모든 요소에 배경그림 삽입.

 

6) [속성 *= 값]

  : 위치와 상관없이 해당 값이 포함되어 있으면 적용

  ex) p [ class*="accent" ] { font-style:italic; } : <p>중에 class이름에 accent가 들어가 있다면 기울임 꼴 적용   

 

 

 

가상 클래스(Pseudo Class)

  : 코드에는 실제로 존재하지 않지만 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.

 

   가상 클래스 선택자의 종류 

  1. 링크와 관련된 가상 클래스 선택자
  2. 위치를 기준으로 하는 가상 클래스 선택자
  3. 그 외의 가상 클래스

 

1. 링크와 관련된 가상 클래스 선택자

  1) :link

    : 아직 방문하지 않은 링크에 적용

     페이지의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 대한 스타일을 적용한다.

      ex) a:link { color:black; text-decoration:none; } : <a>중 텍스트 링크를 밑줄 없이 검은색으로 설정

 

  2) :visited

    : 한 번 이상 방문한 링크에 적용

    페이지의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용한다.

    방문한 페이지는 기본적으로 자주색(purple)으로 표시된다.

    ex) a:visited { color:black; } : 방문했던 링크를 검은색으로 표시 

 

  3) :active

    : 활성화되었을 때의 스타일

     해당 요소가 활성화되었을 때 스타일을 지정. 만약 링크라면 링크를 클릭했을 때 스타일

     ex) a:active { color:black; } : 클릭하는 순간 검은색이 되도록 설정

 

  4) :hover

    : 마우스 포인터를 올려놓았을 때의 스타일

    해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정한다. 롤오버(rollover)를 만드는 선택자이다.

    ex) a:hover { color:red; text-decoration:underline; }

     : 링크 위로 마우스 포인터를 올려놓으면 밑줄과 함께 글자색을 빨간색이 되도록 설정

 

  5) :focus

    : 초점이 맞춰졌을 때의 스타일

    커서를 갖다 놓는다거나 Tab을 눌러 초점을 이동했을 때의 스타일

    ex) p:focus { background-color:yellow; } : <p>의 텍스트 단락 위로 커서를 올려놓거나 키보드의 Tab을 눌러 텍스트 단락까지 왔을 때(초점이 맞춰졌을 때) 텍스트 단락의 배경색을 노란색으로 보이도록 설정

 

 

 

2. 위치를 기준으로 하는 가상 클래스 선택자

  1) :root

    : root요소에 스타일 적용

    html 페이지의 경우 root요소는 html이다. 문서 안에 전체적으로 똑같이 적용할 스타일이 있을 경우 사용한다.

 

  2) :nth-child(n) / :nth-last-child(n)

    : 자식 요소가 여러 개 있는 경우에 사용.

    여러 개의 항목이 일렬(가로나 세로) 나열되어 있는 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용하고 싶을 때 사용한다. 주로 메뉴 항목에 사용한다. nth-child(n)은 n번째 자식 요소에 스타일을 적용하고, nth-last-child(n)은 끝에서부터 n번째인 자식 요소에 스타일을 적용한다.

  •  div p:nth-child(3) : <div>안에서 3번째 자식 요소인 <p>요소에 적용
  •  div p:nth-child(odd), div p:nth-child(2n+1) : <div>안에서 홀수 번째의 자식 요소인  <p>요소에 적용 
  •  div p:nth-child(even), div p:nth-child(2n+0), p:nth-child(2n) : <div>안에서 짝수 번째의 자식 요소인 <p>요소에 적용 

 

  3) nth-of-type(n), nth-last-of-type(n)

    : 같은 태그가 여러 개 나열되어 있는 경우 사용

    같은 태그가 여러 개 나열되어 있고 class나 id를 사용하지 않았을 때, 몇 번째의 태그인지 지정해서 스타일을 적용할 수 있다.

  •  :nth-of-type(n)  : 앞에서 n번째 요소에 스타일 적용
  •  :nth-last-of(n)  : 끝에서부터 n번째 요소에 스타일을 적용

 

  4) :first-child, :last-child

    :  :first-child 는 첫 번째 자식 요소에 적용,  :last-child 는 마지막 자식 요소에 적용한다.

    ex) ul li:first-child { color:red; } : <ul>의 첫 번째 <li>자식 요소의 글자색을 빨간색으로 지정

 

  5) :first-of-type, :last-of-type

    : 형제관계에 있는 요소 중에서  first-of-type 은 첫 번째 요소에,  last-of-type 은 마지막 요소에 스타일을 적용한다.

 

  6) :only-child, :only-of-type

    : 요소가 하나뿐일 때 적용

     only-child 는 부모 요소 안의 자식 요소가 하나밖에 없을 때 스타일을 적용하며,  only-of-type 은  only-child 와 비슷하게 해당 요소가 유일한 요소일 때 스타일을 적용한다.

 

  7) :target

    : 앵커의 목적지가 되는 부분의 스타일

    ex)  #name:target { background-color:blue; } : #name인 곳으로 링크하게 될 경우 #name의 배경색을 파란색으로 설정.

 

  8) :enabled, :disabled, :checked

    : 예를 들면 사용자가 입력하게 해야 하거나 할 때는 텍스트 필드가 enabled 상태지만, 입력을 못하게 하고 보여주기만 해야 할 때는 disabled 상태이다.  이때 각각의 상태일 때 스타일을 :enabled와 :disabled를 사용해서 적용할 수 있다.

    :checked는 radio button이나 checkbox가 체크되었을 때 적용할 스타일을 지정한다.

    ex) textarea:disabled { cursor:pointer; } : 텍스트 영역 필드가 disabled상태일 경우 커서를 갖다 댔을때 내용을 입력할 수 있는 커서로 변하지 않고 포인터 형태로 표시되도록 설정.

 

 

 

3. 그 외의 가상 클래스

  : 실제로 존재하지 않지만 존재하는 것처럼 스타일을 지정할 수 있는 선택자

 

  1) ::before, ::after

    : 특정한 요소 앞, 뒤에 내용 생성

    특정한 요소의 내용 앞(::before)이나 뒤(::after)에 텍스트나 이미지를 추가하는 등의 내용을 만들 수 있다.

    ex) p::before { content:"내용 :"; } : 모든 <p>의 텍스트 단락 맨 앞에 "내용 :"이라는 내용을 추가

 

  2) ::selection

    : 드래그됐을 때 선택되는 영역의 스타일

    사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정할 수 있다.

    ex) ::selection { color:yellow; } : 마우스로 텍스트 부분을 드래그했을 때 노란색이 되도록 설정

 

  3) :not

    : 제외하고 적용

    ex) :not(h1) { color:blue; } : h1요소가 아닌 모든 요소의 글자색을 파란색으로 지정

 

 

 

저작자표시 비영리 변경금지

'Front end > HTML , CSS' 카테고리의 다른 글

[CSS] 박스모델 정리  (0) 2019.05.13
[CSS] Style 정리  (0) 2019.05.13
[CSS] WEB2 CSS 정리  (0) 2019.05.12
[HTML] form 관련 tag  (0) 2019.05.11
[HTML] html 태그 정리  (8) 2019.05.10

+ Recent posts

티스토리툴바