[Day4] CSS

Validator·2023년 6월 15일

CSS

CSS : Cascading Style Sheet
HTML 문서가 웹페이지를 출력해주는 파일이다. HTML로 기본 골격을 잡는다.
모양을 만들 때는 style이라는 속성을 사용할 수 있다. style 엘리먼트의 자식으로 CSS 문법을 사용해서 설정할 수 있다. 또 다른 방법으로는, CSS 파일을 불러와서 스타일을 지정해줄 수 있다. 현업에서는 대부분 CSS 파일을 불러와서 쓰는 방식을 사용한다.

CSS의 selector

선택자

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다.

이러한 목적으로 사용되는 것이 셀렉터(Selector)이다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.

전체 선택자 (Universal Selector) : *를 이용한다. HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다)

태그 셀렉터 (Type Selector) : 지정된 태그명을 가지는 요소를 선택한다.

클래스 선택자 (class selector) : class 속성 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다. HTML에서 class 값을 지정할 때, 띄어쓰기(공백)를 통하여 여러 개의 클래스를 동시에 지정할 수도 있다. 매우 유용하다.
클래스는 .(점)을 통해!

<!DOCTYPE html>
<html>
<head>
  <style>
    /* class 어트리뷰트 값이 container인 모든 요소를 선택 */
    /* color 어트리뷰트는 자식 요소에 상속된다. */
    .container { color: red; }
    /* not supported in IE */
    #p2 { color: initial; }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <div class="container">
    <p id="p1">paragraph 1</p>
    <p id="p2">paragraph 2</p>
  </div>
  <p>paragraph 3</p>
</body>
</html>

아래와 같이 클래스 셀렉터를 사용하여 미리 스타일을 정의해 두고, HTML 요소는 이미 정의되어 있는 클래스를 지정하는 것으로 필요한 스타일을 지정할 수 있다. 이것은 재사용의 측면에서 유용하다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* class 어트리뷰트 값이 text-center인 모든 요소를 선택 */
    .text-center { text-align: center; }
    /* class 어트리뷰트 값이 text-large인 모든 요소를 선택 */
    .text-large  { font-size: 200%; }
    /* class 어트리뷰트 값이 text-red인 모든 요소를 선택 */
    .text-red    { color: red; }
    /* class 어트리뷰트 값이 text-blue인 모든 요소를 선택 */
    .text-blue   { color: blue; }
  </style>
</head>
<body>
  <p class="text-center">Center</p>
  <p class="text-large text-red">Large Red</p>
  <p class="text-center text-large text-blue">Center Large Blue</p>
</body>
</html>

id 선택자 (id selector) : id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다.
id는 #(샵)을 통해!

<!DOCTYPE html>
<html>
<head>
  <style>
    /* id 어트리뷰트 값이 p1인 요소를 선택 */
    #p1 { color: red; }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <div class="container">
    <p id="p1">paragraph 1</p>
    <p id="p2">paragraph 2</p>
  </div>
  <p>paragraph 3</p>
</body>
</html>

어트리뷰트 셀렉터 (Attribute Selector) : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
    a[href] { color: red; }
  </style>
</head>
<body>
  <a href="http://www.poiemaweb.com">poiemaweb.com</a><br>
  <a href="http://www.google.com" target="_blank">google.com</a><br>
  <a href="http://www.naver.com" target="_top">naver.com</a>
</body>
</html>

심지어, attribute="value"값까지 특정해서, 해당 엘리먼트에 특정해서 스타일을 줄 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
    a[target="_blank"] { color: red; }
  </style>
</head>
<body>
  <a href="http://www.poiemaweb.com">poiemaweb.com</a><br>
  <a href="http://www.google.com" target="_blank">google.com</a><br>
  <a href="http://www.naver.com" target="_top">naver.com</a>
</body>
</html>

결합자 (combinator)

결합자는 규칙에 따라 선택자들을 결합하여 세밀하게 찾을 수 있게 도와준다.

자손 결합자 (A B)
: Descendant Combinator, A 뒤에 띄어쓰기를 하고 B를 쓴다. A의 하위 요소 중 B를 가지고 있는 모든 요소에 스타일을 준다. 즉, 바로 직계자손이 아니라 손자, 증손자까지 다 포함한다는 것이다.

자식 결합자 (A > B)
: Child Combinator, A를 쓰고 띄어쓰기를 한 후 >를 적고 또 띄어쓰기를 한다. 그 후 B를 적는다. 직계자손(1단계 아래 것)에만 영향을 준다는 것이 특징이다.

일반 형제 결합자 (A ~ B)
: General Sibling Combinator, 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다. 즉, 형제이면서 A 보다 뒤(아래)에 위치하는 모든 B에 영향을 준다는 것이다.

인접 형제 결합자 (A + B)
: Adjacent Sibling Combinator, 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다. 말 그대로 Adjacent한 형제에만 적용된다는 것이다. 바로 뒤라는 것은 코드 상으로 바로 아래 줄에 위치한다는 의미이다.

가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태란 예를 들어 다음과 같다.

마우스가 올라와 있을때

링크를 방문했을 때와 아직 방문하지 않았을 때

포커스가 들어와 있을 때

이러한 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.

가상 클래스는 마침표(.) 대신 콜론(:)을 사용한다. CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다.

CSS 선택자에서 띄어쓰기 한 것과 안 한 것의 차이는?

CSS 선택자의 적용 우선순위

16진수

CSS에서 글자의 길이 / 크기

px
in
%
- 퍼센트를 쓰는 것은 보통 부모의 길이를 기준으로 0% ~ 100% 까지
  설정한다.
vw, vh
- w는 width, h는 height, v는 viewport를 의미한다.
- viewport width, viewport height / 즉 화면의 크기를 기준으로
  잡는다는 의미이다.
- %와 마찬가지로 0 ~ 100까지 이며, 화면 크기를 기준으로 한다.
  만약 핸드폰 화면이 가로, 세로 전환이 된다면 해당 값도 바뀌게 되는 것이다. 심지어 핸드폰 화면을 아래로 스크롤 하여 주소창이 사라지게 되면 viewport 값이 변하게 된다.
em
- 부모의 font-size를 기준으로 한다.
- 부모의 font-size가 16px일 경우 엘리먼트에 1em을 적용할 경우,
  16px로 적용된다.
rem
- r이 뜻하는 것은 root이다. 즉 최상위 엘리먼트의 font-size를
  기준으로 한다. 최상위 엘리먼트라면 결국 html 엘리먼트를 의미한다.
- 만약 HTML의 font-size가 32px이라면, div의 font-size를
  2rem으로 설정한다면 64px이 적용되는 것이다.
- rem을 자주 쓴다. 왜냐하면 html의 값만 변경하여도 전체를 다 맞출 수 있기 때문이다.
  반응형 웹을 만들 때 중요한 개념이다!

CSS에서 margin 적용시 주의할 점

자식에게 margin을 적용하려고 하기 보다는, 차라리 부모에게 padding을 줘라. 자식에게 margin을 적용할 때, 자식의 margin이 부모를 침범하게 되면 원하지 않는 결과가 나올 수 있다.

Class 와 Id의 차이점은?

HTML에서 쓰는 id와 class라는 attribute는 겉보기에는 비슷한 것 같지만 중요한 차이점이 있다. id 속성은 태그에 유일한 이름을 붙이고 싶을 때 사용한다. 반면에 class 속성은 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 쓴다.

id 속성은 전체 페이지에서 단 하나의 요소에만 지정이 가능합니다.
사람으로 생각한다면,,
하나뿐인 사람 이름의 역할을 한다고 생각할 수 있습니다.
class 속성은 id 속성과 다르게 여러 번 반복해서 사용할 수 있습니다.
반복적으로 쓰이는 유형들을 유형별로 동일한 class로 분류하여 쉽게 관리할 수 있습니다.

중복 가능?
id 속성은 단 하나의 요소에만 쓸 수 있기 때문에 중복이 불가능하고
class 속성은 유형별로 동일한 class를 쓸 수 있기 때문에 중복이 가능합니다.

CSS에서 차이?
CSS에서 id 속성을 사용할 땐 id명 앞에 # 기호를 붙이고 쓰면 됩니다.
id속성은 유일하고 특별하기 때문에 CSS에서 쓰일 때 클래스보다 우선적으로 적용이 됩니다.
class 속성을 사용할 때는 class 명 앞에 .(마침표) 기호를 붙이고 쓰면 됩니다.

id속성은 유일하게 쓰이기 때문에 우선적으로 적용되며 중복이 불가하고,
class 속성은 반복적으로 쓰이는 유형들을 동일한 class로 분류하며 중복 가능합니다.