CSS 구조 및 선택자

23975 단어 selectorfrontendRuleCSS@propertyKDT 핀테크 서비스 프론트엔드

CSS

  1. CSS(Cascading Style Sheets)은 HTML이나 XML로 작성된 문서의 표기 방법을 기술하기 위한 스타일 시트언어로, HTML 태그에 디자인을 입혀준다.
  2. 오픈 웹의 핵심 언어 중 하나로, W3C 명세가 다양한 브라우저의 표준으로 작동하고 있다.
    현재 CSS버전은 4로 W3C 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적이기 때문에
    더이상의 버전 업은 없을 것이라는 전망이다.

CSS 구조

CSS의 전체 구조는 "rule set" 이라고 한다. 하지만 종종 줄여서 "rule" 이라고도 부른다.

선택자(Selector)

HTML 요소의 이름으로 CSS로 꾸밀 요소를 선택한다.

선언(Declaration)

꾸미고 싶은 요소의 속성을 명시한다.

속성(Property)

주어진 HTMl 요소를 꾸밀 수 있는 방법인다.

속성 값(Property Value)

주어진 속성을 위한 많은 가능한 결과 중 하나를 선택한다.

CSS 작성법

CSS를 작성하는 방법은 총 3가지이다.

1. 인라인 스타일
2. style 태그 작성
3. css 파일안에 작성

이렇게 방법은 3가지 이지만, 유지보수를 위해 css파일을 만들어 작성하는 것이 효율적이다.

선택자(Selector)

선택자(Selector)란?

스타일을 지정할 HTML 요소 대상을 말한다.
선택자는 결합자(공백, '>', '+')에 의해 하나 이상의 단순 선택자들의 연속(Chain)이다.
여러개를 선택해 동일한 스타일을 지정할 때엔 ( , ) 콤마를 사용해 그룹지을 수 있다.

전체 선택자(Universal Selector)

전체 선택자는 모든 요소(Element)를 포함하며 " * "로 표시한다.

* {
  padding: 0;
  margin: 0;
  border: 0;
}

타입 선택자(Type Selector)

요소(Element)를 선택자로 지정한다.
ex) body, div, h1, ul, li, span ..

div {
  width: 100%;
  height: 100%;
}

하위 선택자(Descendant Selector)

공백으로 분리된 두 개 이상의 선택자들로, '~안의 ~태그'를 모두 선택한다.

<style>
  p {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <div>
    <p> Hello </p>
  </div>
  <p> World! </p>
  <div>
    <p> What a nice weather! </p>
  </div>
</body>

자식 선택자(Child Selector)

자식 선택자는 선택하고자 하는 태그의 부모요소와 함께 부모요소 다음에 ' > ' 표시로 연이어 작성한다.
예시를 보면, body 부분의 모든 p태그가 아닌 body 안에 있는 모든 div태그 안의 p태그가 선택된다.

<style>
  div > p {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <div>
    <p> Hello </p>
  </div>
  <p> World! </p>
  <div>
    <p> What a nice weather! </p>
  </div>
</body>

인접 선택자(Sibling Selector)

인접 선택자는 ' + ' 로 분리된 두 개 이상의 선택자들로 만들어진다.
첫번째 선택자가 선택된 다음 가장 가까운 두번째 요소가 선택된다.

<style>
  p + h4 {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <h4> HAHAHA </h4>
  <span> Hello </span>
  <p> World! </p> /* 첫번째 선택자 */
  <h4> What a nice weather! </h4> /* h4 태그 중, 첫번째 선택자 바로 다음에 나오는 h4가 두번째로 선택된다. */
</body>

속성 선택자(Attribute Selector)

속성 선택자는 네가지 방식으로 표현된다.

1. 속성만 있는 경우

img[alt] { /* alt 속성을 가진 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

2. 속성에 값을 지정 할 경우

img[alt="cat"] { /* alt 속성 값으로 cat이 지정된 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

3. 속성에 값이 포함 될 경우

img[alt~="cat"] { /* alt 속성 값으로 cat을 포함하는 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

4. 속성 값으로 시작 할 경우

img[alt|=cat] { /* alt 속성 값으로 cat로 시작하는 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

아이디 선택자(ID Selector)

특정 아이디(#)를 가진 요소에만 사용되며,
id 속성을 가진 요소는 딱 하나만 허용된다.

h2#subject { /* 아이디가 subject인 h2 태그 선택 */
  color: red;
}

#subject { /* 아이디가 subject인 모든 태그 선택 */
  color: red;
}

클래스 선택자(Class Selector)

특정 클래스(.)를 가진 요소에만 사용되며,
class 속성은 여러 요소가 가질 수 있어 동일한 class명을 선택할 경우, 동시에 적용된다.

h2.subject { /* 클래스가 subject인 h2 태그 선택 */
  color: red;
}

.subject { /* 클래스가 subject인 모든 태그 선택 */
  color: red;
}

가상 클래스(Pseudo-Class)

가상 클래스는 스타일이 적용되는 대상이 요소나 속성, 속성 값에 따라 분류되지 않고 상황 에 따라 분류된다.

:first-child

지정한 태그의 첫번째 자식 요소를 선택한다.

<style>
  div > p:first-child {
  	font-weigth: bold;
  }
</style>
<body> // div의 첫번째 자식은 p 태그이기 때문에 스타일이 적용된다.
  <div class="textBox">
    <p>Hello World!</p>
    <span>What a nice day!</span>
</body>
<body>
  <div class="textBox"> // div의 첫번째 자식은 span 태그이기 때문에 스타일이 적용되지 않는다.
    <span>What a nice day!</span>
    <p>Hello World!</p>
</body>

:hover

요소 위에 마우스를 올려놓는 동안 설정한 스타일이 적용된다.

  <style>
  	a:hover {
      color: red;
    }
  </style>
  <body> // CSS MDN 글씨에 마우스를 올리면 글씨색이 red로 변경된다.
    <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a>
  </body>

:active

요소를 마우스로 눌렀다가 놓는 동안에 설정한 스타일이 적용된다.

  <style>
  	a:active {
      color: red;
    }
  </style>
  <body> // CSS MDN 글씨에 마우스를 눌렀다가 놓는 동안 글씨색이 red로 변경된다.
    <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a>
  </body>

:focus

텍스트 입력 양식에 마우스로 클릭하고 입력하는 동안 스타일이 적용된다.

  input:focus {
    border: 1px solid blue;
  }
  input:focus:hover { // 가상클래스를 결합해서 사용할 수 있다.
    border: 1px solid blue;
  }

가상 엘리먼트(Pseudo-Element)

어떤 요소의 내용에 대해 HTML에서는 최초의 줄이나 문자를 지정할 수 있는 방법이 없는데,
가상 엘리먼트를 이용하여 그것에 스타일을 적용할 수 있다.

::before, ::after

  div::before {
  	content: "";
  }
  div::after {
  	content: "";
  }

References

팀 소개 페이지 만들기
📝 [JS 공부기록] 자바스크립트 데이터와 알아야할 개념들

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage