CSS와 선택자

성보경·2022년 10월 4일

CSS selector 선택자

CSS

목록 보기

2/2

CSS

css는 Cascading Style Sheets의 약자로 웹페이지의 외관과 레이아웃을 꾸미는 역할을 한다.

CSS 작성법

🔸 inline style sheet

각각의 HTML 요소 위한 스타일이다.
스타일을 적용하고 싶은 요소의 태그에 작성한다.
적용하고자 하는 속성이 2개 이상인 경우, 각 선언 끝에 ;를 적어야 한다.

🔸 internal style sheet

html 파일의 <head>태그 안에 <style> … </style> 형식의 스타일 태그를 넣는다.

🔸 external style sheet

html 파일 외부의 .css file에 스타일 정의를 작성한다.
이 방법의 경우 스타일을 적용할 html 파일에서 head 안에 <link> 요소를 추가해야 한다.

이 방식은 하나의 외부 css파일을 사용해서 한 사이트의 여러 웹페이지에 같은 스타일을 적용할 수 있다는 장점이 있다. 즉, 각 페이지가 아닌 사이트에 걸쳐서, css파일만 수정하면 연결시킨 모든 html파일에 적용된다.

🔸 여러 방법 사용하면?

external, internal, inline 방식으로, 한 element에 각가 다른 스타일을 적용시키면 어떤 스타일이 적용될까?

다음의 룰을 따라, 모든 style sheets가 한 가상의 스타일로 합쳐진다.

1순위. inlien style sheet
2순위. internal style sheet stored in head section
3순위. External style sheet
4순위. web browser default value

공통적으로 적용되는 스타일은 <body>의 스타일에 정의하는 것이 편리하다.

selector(선택자)

🔸 css의 구성

css 문법은 다음과 같이 세 부분으로 구성된다.

selector(선택자): 스타일을 적용시키고 싶은 html 요소를 나타낸다.
property(특성): css 스타일의 이름
value(값): css 스타일의 값

위와 같은 스타일을 적용시키면, 페이지 안에 있는 모든 <p>태그에 적용된다.

결론적으로 selector는 css는 html요소를 찾기 위해 사용된다.

🔸 type selector

html 요소의 태그 이름으로 선택한다.

h1{color: blue;}

<!DOCTYPE html>
<html>
  <head>
	<link rel stylesheet " href ="mystyle.css>
  </head>
  <body>
    <h1> This is a headline. </h1>
    <p> This is fist paragraph. </p>
    <p> This is second paragraph. </p>
  </body>
</html>

🔸 universal selector

페이지 안에 있는 모든 요소를 선택한다.

*{color: blue;}

🔸 pseudo-element

한 요소의 특정 부분에만 스타일을 적용시키고 싶을 때 사용한다.

selector::pseudo-element{
	property: value;
}

::first-line -> 텍스트의 첫 줄만 스타일 적용
::first-letter -> 텍스트의 첫 글자만 스타일 적용

🔸 pseudo-class

선택자의 특정 state를 정의한다.

selector:pseudo-class{
	property: value;
}

:link -> 방문되기 전의 링크에 적용한다.
:visited -> 방문된 후의 링크에 적용한다.
:hover -> 마우스 포인터가 요소 위에 있는 동안에 적용한다.
:active -> 왼쪽 마우스 버튼를 누르는 동안에 적용한다.

🔸 attribute selector

특정 속성을 가진 요소를 선택한다.

[type]{color: blue:}

[attr = val] -> 특정 속성과 값을 가진 요소
[attr |= val] -> 특정 값으로 시작하는 특정 속성을 가진 요소
[attr ~= val] -> 특정 단어를 포함하는 속성값을 가진 요소
[attr ^= val] -> 특정값으로 시작하는 속성값을 가진 요소
[attr $= val] -> 특정값으로 끝나는 속성값을 가진 요소
[attr *= val] -> 특정값을 포함하는 속성값을 가진 요소

🔸 id selector

id 속성을 사용해서 특정 html 요소를 선택한다.

#basic{color: blue;}

<!DOCTYPE html>
<html>
  <head>
	<link rel stylesheet " href ="mystyle.css>
  </head>
  <body>
    <h1 id="basic"> This is a headline. </h1>
    <p> This is fist paragraph. </p>
    <p> This is second paragraph. </p>
  </body>
</html>

🔸 class selector

class 속성을 사용해서 html 요소를 선택한다.

#basic{color: blue;}

<!DOCTYPE html>
<html>
  <head>
	<link rel stylesheet " href ="mystyle.css>
  </head>
  <body>
    <h1 class="basic"> This is a headline. </h1>
    <p class="basic"> This is fist paragraph. </p>
    <p> This is second paragraph. </p>
  </body>
</html>

🔸 Descendant selector(자손)

모든 자손 요소에 적용한다.

div p{color: blue;}

<!DOCTYPE html>
<html>
  <head>
    <link rel stylesheet " href ="mystyle.css>
  </head>
  <body>
    <div> <p> Descendant relationship </p>
      <span> <p> Child relationship </p ></span>
    </div >
  </body>
</html>

div태그 하위에 있는 모든 p태그에 적용한다.

🔸 child selector

직속 자식 요소만 적용한다.

div > p{color: blue;}

<!DOCTYPE html>
<html>
  <head>
    <link rel stylesheet " href ="mystyle.css>
  </head>
  <body>
    <div> <p> Descendant relationship </p>
      <span> <p> Child relationship </p ></span>
    </div >
  </body>
</html>

🔸 adjacent sibling selector

인접한 형제 요소만 적용한다.

div + p{color: blue;}

div태그 바로 다음에 오는 형제 요소 p태그에 적용한다.

🔸 general sibling selector

모든 형제 요소를 적용적용한다.

div ~ p{color: blue;}

div태그 후에 있고, 형제 관계에 있는 모든 p태그에 적용한다.

🔸 selector group

여러 선택자를 나타낼 때는 ,로 구분한다.

성보경

이전 포스트