[CSS] 사용자 스타일과 선택자

MINJEE·2023년 11월 10일
CSSselector

SMHRD_4_HTML/CSS

목록 보기
3/8
post-thumbnail

CSS (Cascading Style Sheets)

: HTML 등 마크업 언어로 작성된 문서를 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어
  • HTML 은 웹페이지의 뼈대를 만드는 것
  • CSS 는 웹페이지를 디자인적으로 꾸미는 것 (색상, 글꼴 등)

스타일을 사용하는 이유

  • 스타일(style) : HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬과 같이 문서의 겉모습을 결정짓는 것
  • 웸 문서의 내용과 상관없이 디자인만 바꿀 수 있음
  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있음

    반응형 웹 디자인
    : 사용자가 PC, 모바일 어떤 것으로 접속하든 웹 브라우저의 크기에 맞게 화면 레이아웃을 자동으로 바꿔 주는 방법

사용자 스타일

인라인 스타일 (Inline style)

: 해당 요소의 시작태그 안에 `style = “속성:값;"` 작성
<태그명 style="속성1:속성값1; 속성2:속성값2;"> </태그명>
  • 간단한 스타일 정보라면, 스타일 시트를 사용하지 않고 적용 대상에 직접 표시 가능
  • 스타일을 적용할 요소에 직접 표시
  • 해당 요소에만 스타일 적용
  • 꼭 필요한 경우에만 사용하기 (이유 : 스타일 시트의 장점을 잃게 됨)
    <body>
  <p style="color:red; text-decoration:underline;">인라인 스타일 적용</p>
</body>

    인라인 스타일 적용

내부 스타일 시트 (Internal style sheet)

: 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
  • <head>태그 안에 <style>태그를 사용하여 작성하고, 그 안에 선택자{ 속성:값; } 정의
<head>
  <style>
    선택자 {
    	속성1:속성값1;
    	속성2:속성값2;
    }
  </style>
</head>
<head>
  <style>
    p {
    	color:red;
    	text-decoration:underline;
    }
  </style>
</head>

외부 스타일 시트 (External style sheet)

: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓은 스타일 정보
<head>
  <link rel="stylesheet" href="외부 스타일 시트 파일 경로">
</head>
  • <head>태그 안에 <link rel=”stylesheet” href=”외부스타일시트 파일경로”>을 사용하여, 스타일 정보를 따로 저장해 놓은 css파일을 연결
  • 특징
    • 유지 보수 편함
    • 가장 안정적임
    • 참고 : VSCODE에서 link:css 을 치고 Tab키를 누르면 <link rel=”stylesheet” href=”외부스타일시트 파일경로”> 자동 생성
    <!-- style.css파일을 연결해 놓은 html파일 -->
<head>
  <link rel="stylesheet" href="./style.css">
</head>
    /* style.css파일 */
 p {
    color:red;
    text-decoration:underline;
 }

스타일 적용 순서
1. 인라인 스타일
2. 내부/외부 스타일 시트
3. 웹 브라우저 기본 스타일



기본 선택자

  • 선택자 연습할 수 있는 게임 사이트 : CSS Diner
  • 기본 작성 형식 : 선택자 { 속성:값; 속성:값; }

선택자 종류

  • 전체 선택자 : * { 스타일 규칙 }
    • 문서의 모든 요소에 적용할 때 사용
    • 중요도가 낮아서 이미 적용된 속성이 있으면 전체선택자의 선언은 적용되지 않음
  • 타입(요소) 선택자 : 태그명 { 스타일 규칙 }
    • body, p, h1, li 등 태그명 으로 선택
    • 특정 태그를 사용한 모든 요소에 스타일 적용
    • 주의 : body선택자와 전체선택자는 다름
      • 전체선택자는 모든 요소 하나하나에 적용
      • body 타입선택자는 전체에 하나 적용
  • 클래스 선택자 : .클래스명 { 스타일 규칙 }
    • <태그명 class="class값"> 인 태그를 .class값 으로 선택
    • 특정 부분만 선택해서 스타일 적용
    • 여러 태그에 대해 동시에 적용 가능
  • 아이디 선택자 : #아이디명 { 스타일 규칙 }
    • <태그명 id="id값"> 인 태그를 #id값 으로 선택
    • 특정 부분을 선택해서 스타일 적용
    • 클래스 선택자와 차이점
      • 클래스 선택자는 문서에서 여러 번 적용할 수 있음
      • 아이디 선택자는 문서에서 한 번만 적용할 수 있음
    • 정의한 후 한 페이지에 한 번만 사용
  • 그룹 선택자 : 선택자1, 선택자2 { 스타일 규칙 }
    • 여러 선택자 선택하려면 컴마(,)로 사용
    • ex. h1,span
    • 요소, 아이디, 클래스 등 같이 사용 가능 ⇒ 점수는 합산!
  • !important : 선택자 { 스타일 규칙 !important; }
    • 선택자{ } 안에서 중요하고 무조건 적용되어야 하는 스타일 뒤에 !important 를 추가
    • 어떤 스타일보다 우선 적용하는 스타일
    • ex. h { color:yello !important; }

스타일 우선순위

: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용

중요도/점수 : 전체(0점) < 타입(1점) < 클래스(10점) < 아이디(100점) < 인라인스타일(1000점) < !important(10000점)

  • CSS의 'C'는 캐스케이딩(cascading)을 의미
    : 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미
    • 한 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정

1. 얼마나 중요한가?

  • 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
    • 사용자 스타일 : 컴퓨터 사용자가 지정한 스타일
    • 제작자 스타일 : 웹 문서를 제작한 제작자의 스타일
    • 브라우저 기본 스타일 : 웹 브라우저가 기본으로 정해 놓은 스타일

2. 적용 범위는 어디까지인가?

  • !import > 인라인 스타일 > id스타일 > class스타일 > type스타일
    • !import : 어떤 스타일보다 우선 적용하는 스타일
    • 인라인 스타일 : 태그 안에 style속성을 사용해 해당 태그만 적용한 스타일
    • id스타일 : 지정한 부분에만 적용되는 스타일 but 한 문서에 한번만 적용 가능
    • class스타일 : 지정한 부분에만 적용되는 스타일 , 여러 번 적용 가능
    • type스타일 : 특정 태그에 적용한 스타일
  • 중요도가 같은 스타일이라면, 스타일 적용 범위에 따라 우선순위 정할 수 있음
  • 스타일 적용 범위가 좁을수록(필요한 요소에만 적용할 스타일일수록) 우선순위가 높아짐
  • 단, !important 를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아짐

3. 소스 코드의 작성 순서는?

  • 중요도와 적용범위가 같다면, 스타일을 정의한 소스 순서로 우선순위 정해짐
  • 소스에서 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀
<style>
  p { color : black; }
  p { color : blue; }
</style>

<p style="color:red;">안녕</p>
<p> 반갑습니다 </p>
<p> 오늘 날씨가 참 좋네요 </p>

4. 선택자의 점수는 합산하여 계산된다.

  • 예시1.
<style>
  #menu li.coffee { }
</style>

는 아이디 + 타입 + 클래스 = 100 + 1 + 10 = 111점

  • 예시2.
<style>
  .list li:hover { }
</style>

는 클래스 + 타입 + 반응 = 10 + 1 + 10 = 21점


예시

<head>
  <style>
    * {color : red;} /*0점*/
    h2 {color : green;} /*1점*/
    p#hello {color : pink;} /*101점*/
    p.hi {color : gray;} /*11점*/
  </style>
</head>
<body>
  <h1>제목1</h1>
  <h2>제목2</h2>
  <p class="hi" id="hello">.hi#hello인 p</p>
  <p class="hi">.hi인 p 첫번째</p>
  <p class="hi">.hi인 p 두번째</p>
</body>

선택자 예시



고급 선택자

계층 선택자 (연결 선택자)

 : 특정 요소를 계층적 구조로 선택
  1. 자식 선택자 : 부모 > 자식 { 스타일 규칙 }
    • 부모의 지정된 자식만 선택
    • A > B : A요소의 바로 밑의 요소 중에서 B인 요소 선택
  2. 자손(하위) 선택자 : 부모 자손 { 스타일 규칙 }
    • 부모의 지정된 모든 자손을 선택
    • A B : A요소의 하위 모든 요소 중에서 B인 요소 선택
  3. 형제(후행) 선택자 : 자식 ~ 형제 { 스타일 규칙 }
    • 자식의 형제 중 지정된 모든 형제 (자식은 적용x)
    • A ~ B : A요소와 같은 부모를 가진 형제 요소들 중 B인 요소 모두 선택
  4. 인접형제(근접후행) 선택자 : 자식 + 형제 { 스타일 규칙 }
    • 자식과 가장 가깝게 지정된 형제를 선택
    • A + B : A요소와 같은 부모를 가진 형제 요소들 중 가장 먼저 나오는 B요소 선택
<!-- 예시 : 계층 선택자 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
      .rule > strong {
      	color: red; /* rule클래스값을 가진 부모의 자식 중 strong인 자식에만 빨간색 글씨 적용  */
      }
      .rule li {
      	color: green; /* rule클래스값을 가진 부모의 자손 중 li인 모든 자손에게 녹색 글씨 적용 */
      }
      .rule > ol > li+li {
      	background-color:red;  /* 근접 후행 선택자 : rule클래스값을 가진 부모의 자식 ol의 자식 li의 형제
        				 			중 가장 가까운 li인 형제만 빨간 배경색 적용 */
      }
      .rule > ol > li ~ li {
      	text-align:center; /* 후행 선택자 : rule클래스값을 가진 부모의 자식 ol의 자식 li의 형제 중
        				        li인 모든 형제에게 가운데 정렬 적용 */
      }
	</style>
</head>
<body>
	<div class="rule">
		<strong>연수생 수칙</strong> <!--첫번째 스타일 적용-->
		<ol>
          <li>지각하지 않기</li> <!--두번째 스타일 적용-->
          <li>결석하지 않기</li> <!--두번째+세번째+네번째 스타일 적용-->
          <span>(불가피할 땐 담임선생님께 꼭 말하기)</span>
          <li>복습하기</li> <!--두번째+네번째 스타일 적용-->
		</ol>
	</div>
	<div id="rule"></div>
</body>
</html>

계층 선택자


속성 선택자

: 요소의 속성을 기반으로 선택
  • 점수는 클래스 선택자와 동일하게 10점

  1. [속성] 선택자 : [속성] { 스타일 규칙 }

    • 해당 속성이 있는 요소를 선택
    [href] { color:red; } /*href속성이 있는 요소를 선택*/
    a[href] { color:red; } /*href속성이 있는 a태그를 선택*/

  2. [속성=값] 선택자 : [속성 = 값] { 스타일 규칙 }

    • 속성이 지정한 값인 요소를 선택
    li[class="coffee"] { color:red; } /*class속성 값이 coffee인 <li\>태그를 선택*/

    <li class="coffee"> 는 선택
    <li class="ade"> 는 선택x

  3. [속성~=값] 선택자 : [속성 ~= 값] { 스타일 규칙 }

    • 지정한 속성값이 포함된 요소
    • 단어별 로 포함하는지 판단
    • 여러 값 중에서 특정 속성값이 포함된 속성 요소
    [class ~= button] { /*class값 중에 button이 있는 요소*/
    box-shadow: rgba(0,0,0,0.4) 4px 4px; 
}

    <p class="flat"> 선택x
    <p class="button"> 선택
    <p class="flat button"> 선택

  4. [속성|=값] 선택자 : [속성 |= 값] { 스타일 규칙 }

    • 지정한 속성값이 포함된 요소
    • 단어별로 포함하는지 판단 (하이픈도 포함)
    • 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택
      ([속성~=값] 선택자는 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않음)
    a[title ~= us] { /*title 값 중에 us가 포함된 단어가 있는 요소*/
    color: blue; 
}

    <a href='#' title="us-english"> 선택
    <a href='#' title="us"> 선택
    <a href='#' title="u"> 선택x

  5. [속성^=값] 선택자 : [속성 ^= 값] { 스타일 규칙 }

    • 지정한 속성값으로 시작하는 요소
    a[title ~= en] { /*title 값이 en으로 시작하는 단어가 있는 요소*/
    color: blue; 
}

    <a href='#' title="english"> 선택
    <a href='#' title="en"> 선택
    <a href='#' title="e"> 선택x

  6. [속성$=값] 선택자 : [속성 $= 값] { 스타일 규칙 }

    • 지정한 속성값으로 끝나는 요소
    a[href ~= html] { /*href 값이 html으로 끝하는 단어가 있는 요소*/
    color: blue; 
}

    <a href='file1.html'> 선택
    <a href='file2.xls'> 선택x

  7. [속성*=값] 선택자 : [속성 *= 값] { 스타일 규칙 }

    • 지정한 속성값의 일부가 일치하는 요소
    a[href *= w3] { /*href 값이 w3과 일부 일치하는 요소*/
    color: blue; 
}

    <a href='https://www.w3.org/TR'> 선택
    <a href='https://caniuse.com/'> 선택x


가상 클래스

반응 선택자

: 사용자 동작에 반응하는 가상 클래스 선택자
  1. a:link { 스타일 규칙 } : 방문하지 않은 링크에 스타일 적용
  2. a:visited { 스타일 규칙 } : 방문했던 링크에 스타일 적용
  3. 요소:hover { 스타일 규칙 } : 지정한 요소에 마우스 포인터 올려놓았을 때 스타일 적용
  4. 요소:active { 스타일 규칙 } : 지정한 요소를 활성화(클릭)했을 때 스타일 적용
  5. 요소:focus { 스타일 규칙 } : 지정한 요소에 포커스가 맞춰졌을 때 스타일 적용
    • 마우스 포인터를 올려놓거나, Tab을 눌러 입력 커서를 이동했을 때
  • 예시
    li:hover { color:red; }
li:active { color:blue; }
    li요소에 마우스를 올리면 글씨가 빨간색으로, 클릭하면 파란색으로 변한다

상태 선택자

: 요소 상태에 따른 가상 클래스 선택자
  1. a:target { 스타일 규칙 } : 앵커 대상에 스타일 적용
    • 앵커로 연결된(목적지) 부분의 스타일을 쉽게 스타일 적용 가능
    <style>
  #intro:target {
    background-color: #blue;
  }
</style>
...
<nav class="navi">
  <ul>
    <li><a href="#intro">이용 안내</a></li>
    ...
  </ul>
</nav>
<div id="intro">
  <h2>이용 안내</h2>
  ...
</div>
    이용 안내 앵커 태그 클릭 시, 연결된 div#intro 부분의 스타일 적용
  2. 요소:enabled { 스타일 규칙 } : 지정한 요소를 사용할 수 있는 상태일 때 스타일 적용
  3. 요소:disabled { 스타일 규칙 } : 지정한 요소를 사용할 수 없는 상태일 때 스타일 적용
    • 텍스트 영역 필드(textarea)를 사용해 회원 약관을 보여줄 때는 사용자가 입력할 수 없도록 disabled속성을 지정해야 하는데, 이 때 disabled속성인 텍스트 영역 필드에 스타일을 쉽게 적용할 수 있음
  4. 요소:checked { 스타일 규칙 } : 선택한 요소의 스타일 적용
    • 폼의 라디오 박스, 체크 박스에는 선택된 항목에 checked라는 속성이 추가되어, 이 대상에게 쉽게 스타일 적용 가능
  5. 요소:not(선택자) { 스타일 규칙 } : 지정한 요소가 아닐 때 선택해서 스타일 적용
    • 스타일을 적용하려고 하는 필드를 나열하는 것보다 적용하지 않느 필드를 나열하는 것이 더 적을 경우 사용
    input:not([type="radio"]) { 스타일 } /*input태그 중 type이 radio가 아닌 요소*/

구조 가상 클래스

: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일 적용
  1. 요소:only-child { 스타일 규칙 } : 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택
  2. :first-child { 스타일 규칙 } : 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소 선택
  3. :last-child { 스타일 규칙 } : 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 선택
  4. :nth-child(n) { 스타일 규칙 } : 부모 안에 있는 모든 요소 중에서 n번째 자식 요소 선택
    • :nth-child(2n+1) 또는 :nth-child(odd) : 부모 안에 있는 모든 요소 중 홀수 번째 자식 요소에 스타일 적용
    • :nth-child(2n) 또는 :nth-child(even) : 부모 안에 있는 모든 요소 중에서 짝수 번째 자식 요소에 스타일 적용
    <style>
  ul li:nth-child(2n) {
    background-color:aquamarine ;
  }
</style>
...
<ul>
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
  <li>네번째</li>
  <li>다섯번째</li>
</ul>
  5. :nth-last-child(n) { 스타일 규칙 } : 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소 선택

  6. A:only-type-of { 스타일 규칙 } : 부모 안에 A요소가 하나뿐일 때 선택
  7. A:first-type-of { 스타일 규칙 } : 부모 안에 있는 A요소 중 첫번째 요소 선택
  8. A:last-type-of { 스타일 규칙 } : 부모 안에 있는 A요소 중 마지막 요소 선택
  9. A:nth-of-type(n) { 스타일 규칙 } : 부모 안에 있는 A요소 중에서 n번째 요소 선택
  10. A:nth-last-of-type(n) { 스타일 규칙 } : 부모 안에 있는 A요소 중에서 끝에서 n번째 자식 요소 선택

가상 요소

  1. 요소::first-letter : 첫 번째 글자에 스타일 적용
  2. 요소::first-line : 첫 번째 줄에 스타일 적용
    <style>
  li::first-letter { color:red; }
</style>
...
<ul class="list">
  <li>첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
  <li>네번째</li>
  <li>다섯번째</li>
</ul>
  3. 요소::before : 내용 앞에 콘텐츠 추가
  4. 요소::after : 내용 뒤에 콘텐츠 추가
    <style>
  li.hi::after { 
    content: "HI!!";
    font-size: x-small;
    padding: 2px 4px;
    border-radius: 2px;
    background: #f00;
    color: #fff;
  }
</style>
...
<ul class="list">
  <li class="hi">첫번째</li>
  <li>두번째</li>
  <li>세번째</li>
  <li class="hi">네번째</li>
  <li>다섯번째</li>
</ul>
profile
MINJEE
개발, 분석 배운 내용 정리하기!
이전 포스트

[HTML] HTML 요소

다음 포스트

[CSS] 텍스트 스타일

1개의 댓글

comment-user-thumbnail
Lee
2023년 11월 16일

이해하기 쉬운 글 감사합미다 ^..^ 비공개 절대 금ㅈㅣ⭐️✨🤩💫🌟💛

답글 달기