CSS의 기본

정의

• 캐스케이딩 스타일 시트의 약자.
• 여러 스타일이 같은 요소에 적용될 수 있다.
• CSS는 규칙으로 작동한다.

 

CSS 규칙이란?

선택자(스타일링하는 대상)과 선언(스타일링 방법)의 조합

 

핵심 개념

Selector(선택자), Property(속성), Value(값)

• selector
  
  • 요소 선택자
    • div
  • 클래스 선택자
    • .blog-post
  • 아이디 선택자
    • #main-title
  • 속성 선택자
    • [disabled]
  • 전체 선택자
    • *
    • 거의 쓰이지 않음. 대신 body 태그 선택자를 사용하는 게 나음
• property
  • background-color
  • width
  • color
  • margin
  • display
  • etc..
• value
  • red
  • 30%
  • #fa923f
  • 10px
  • block
  • etc..

 

 

값의 종류

값은 프로퍼티와 연관되어있으며 대략 네 가지로 나눌 수 있다.

• 사전 정의된 옵션 값 (헥스코드, 숫자를 값으로 사용하지 않고 사전에 정의된 값만 사용)
  • display: block
  • overflow: auto
• 색상
  • background: red
  • color: #fa923f
  • color: #ccc
• 길이, 크기, 숫자 (픽셀, 퍼센트, 일반 정수 사용)
  • height: 100px
  • widht: 20%
  • order: 1
• 함수
  • background: url(...)
  • transform: scale(...)

 

 

우선순위

 

뒤로 갈 수록 우선순위가 더 높다.

 

상속 >> 브라우저 기본 스타일 >> 전체선택자 >> 태그 선택자 >> 클래스, 의사 선택자, 속성 선택자 >> ID선택자 >> 인라인 스타일 >> !important

 

 

스타일링 적용 방식

1. 선택자의 우선순위를 계산한다

2. 더 구체적인 선택자가 적용된다.

3. 우선순위와 구체성이 동일하면 나중에 선언된 규칙이 적용된다.

 

 

결합자란?

 

첫번째 h1 태그에만 특정 속성을 부여하고 싶다.

가장 먼저 class를 할당하는 방법이 떠오른다. 하지만 재사용할 속성이 아니기 때문에 class는 부적절하다. 그렇다면 id는 어떨까? 이미 section에 id가 있기 때문에 의미론적으로 id를 사용하는건 별로다.

 <section id="product-overview">
           <h1>Get the freedom you deserve.</h1>
</section>
<section id="plans">
           <h1 class="section-title">Choose Your Plan</h1>
</section>

 

 

이런 상황에는 결합자를 사용하는 게 좋다.

결합자는 HTML 요소간의 관계를 이용하여 특정 요소에만 속성을 부여하는 것을 말한다. 여러 선택자를 하나로 합칠 수 있는 것이다. 이해가 어려우니 코드를 보자.

 

이렇게 만들면 product-overview id가 부여된 태그 내의 모든 h1 태그를 읽게 된다.

#product-overview h1 {
    color: white;
    font-family: 'Oswald';
}

 

참고로 결합자는 더 높은 수준의 명시도를 가진다. 정보값이 많은 규칙이 정보값이 적은 규칙보다 우선시되기 때문이다. 즉, 구체적인 규칙일수록 명시도가 올라간다. 따라서 h1{} 보다 우선순위가 높다. 명시도는 이렇게 동일한 요소에 여러 CSS 규칙이 적용될 때 발생하는 충돌을 해결한다.

 

크게 네 개의 결합자가 있다. 참고로 div + p + a 처럼 선택자를 여러개 결합할 수 있다.

 

 

결합자 종류

1. 인접 형제 결합자 (Adjacent Sibling)
결합하려고 하는 선택자 사이에 +를 붙인다.

직속 형제(동일한 수준)에만 스타일이 적용된다.

즉, 예시에서 h2 바로 뒤에 오는 p 태그만 빨간색이 된다. h2 태그 뒤에 p가 여러개 와도 첫번째 p만 선택된다는 점에 주의하자.

h2 + p {
	color : red;
}

<div>
	<h2>Not Applied</h2>
        <p>CSS Applied</p>
        <h2>Not Applied</h2>
        <h3>Not Applied</h3>
        <p>Not Applied</p>
        <h2>Not Applied</h2>
        <p>CSS Applied</p>
</div>

 

 

2. 일반 형제 결합자 (General Sibling)

결합하려고 하는 선택자 사이에 ~를 붙인다.

인접 형제 결합자보다 더 유연하다. 인접 형제 결합자처럼 같은 부모를 공유하지만 선택자들이 동일한 수준에 있기만 하면 된다.

h2 ~ p {
	color : red;
}

<div>
	<h2>Not Applied</h2>
        <p>CSS Applied</p>
        <h2>Not Applied</h2>
        <h3>Not Applied</h3>
        <p>CSS Applied</p>
        <h2>Not Applied</h2>
        <p>CSS Applied</p>
</div>

   

 

3. 자식 결합자 (Child)

결합하려고 하는 선택자 사이에 >를 붙인다. 직속 자식에게만 스타일이 적용된다.

따라서 예시에서 article 태그의 자식인 p에는 적용이 안 된다.

div > p {
	color : red;
}

<div>
	<div>Not Applied</div>
        <p>CSS Applied</p>
        <div>Not Applied</div>
        <article>
        	<p>Not Applied<p>
        </article>
        <p>CSS Applied</p>
</div>

 

4. 자손 결합자 (Descendant)

결합하려고 하는 선택자 사이에 공백을 넣는다.

이 결합자에서는 수준이 중요하지 않다. 직속 부모일 필요도, 직속 자식일 필요도 없다. 두 번째 요소가 첫 번째 요소의 자손이기만 하면 된다. 가장 많이 쓰인다.

div p {
	color : red;
}

<div>
	<div>Not Applied</div>
        <p>CSS Applied</p>
        <div>Not Applied</div>
        <article>
        	<p>CSS Applied<p>
        </article>
        <p>CSS Applied</p>
</div>

 

결합자는 편리하지만 직접 선택자보다 성능이 안 좋다는 단점이 있다. 모든 결합자가 성능을 떨어뜨리는 것은 아니다. 몇가지 예시를 보자.

페이지 내에 id가 많지 않은데 id를 선택했기 때문에 괜찮다. 이처럼 id, class 는 성능이 뛰어나다.

만약 h1 자리에 *가 있었다면 성능이 떨어졌을 것이다.

#product-overview h1 {
    color: white;
    font-family: 'Oswald';
}

 

 

결합자 응용

ol 태그 내부에 li 태그가 여러개 있다. 여기서 첫번째 li 태그를 제외한 모든 li 태그에 동일한 스타일을 적용하고 싶다면 어떻게 해야할까? 첫번째 li를 제외한 모든 li에 class를 할당할까? 비효율적이고 유지보수가 어렵다. 인접 형제 결합자를 사용하면 효율적으로 스타일을 적용할 수 있다. li + li 를 하면 동일한 부모를 가진 li 중에서도 앞에 li태그가 있는 경우에만 적용된다. 따라서 첫번째 요소를 제외한 모든 li에 스타일을 적용할 수 있다. 일반 형제 결합자를 사용해도 같은 결과를 얻는다.

	<ol>
            <li>
                Style the above <code>&lt;h1&gt;</code> tag to use any color of your choice and a
                <code>sans-serif</code> font.
            </li>
            <li>
                Style all <code>&lt;code&gt;</code> tags to use the <code>monospace</code> font-family and have red
                text.
            </li>
            <li>
                Use a class selector to ensure that the <code>&lt;code&gt;</code> elements in the second
                <code>&lt;li&gt;</code> element have a different color (e.g. green).
            </li>
            <li>
                Switch the order of the rules you created and use the dev tools of your browser to understand how
                specifity resolves conflicts (for the <code>&lt;code&gt;</code> elements).
            </li>
            <li>
                Set a default font (e.g. sans-serif) for the entire content of your page and use "Inheritance" to change
                the font of the <code>&lt;li&gt;</code> items, too.
            </li>
            <li>
                Use a combinator to give all <code>&lt;li&gt;</code> elements but the first one (!) a black background
                and white text color (don't worry if the numbers disappear).
            </li>
            <li>
                Use another combinator to now give all <code>&lt;li&gt;</code> inside an <code>&lt;ol&gt;</code> element
                a black background and white text color.
            </li>
        </ol>

 

 

 

공부할 때 참고하면 좋은 사이트

CSS 프로퍼티, 의사 클래스, 요소 등 자세히 나와있음

외울 필요 없다. 주로 사용하는 프로퍼티는 20개 정도. 프로퍼티를 클릭하면 프로퍼티 구성 방법과 사용해야하는 값이 나온다.

https://developer.mozilla.org/ko/docs/Web/CSS/Reference

 

CSS 명시도에 대해 더 알고 싶을 때

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity