2020/10/23 - [TIL(today I learned)] - 2020-10-23 TIL

 

2020-10-23 TIL

섹션 7:The World of CSS Selectors crucial! important nice to have Element Selector Adjacent Selector Class Selector Direct Descendent Selector ID Selector Attribute Selector Descendent Selector Pseu..

pgsb.tistory.com

2020/10/24 - [TIL(today I learned)] - 2020-10-24 TIL

 

2020-10-24 TIL

2020/10/23 - [TIL(today I learned)] - 2020-10-23 TIL 2020-10-23 TIL 섹션 7:The World of CSS Selectors crucial! important nice to have Element Selector Adjacent Selector Class Selector Direct Descend..

pgsb.tistory.com

 

Pseudo Elements

reference

developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

 

Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

developer.mozilla.org

- 플라스크(flask) 마크로 표시된 selector들은 test에 가까운 selector들 아직 실험적이고 보편적이지 않음.

developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

 

::first-letter (:first-letter)

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

developer.mozilla.org

developer.mozilla.org/en-US/docs/Web/CSS/::first-line

 

::first-line (:first-line)

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element.

developer.mozilla.org

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

 

::selection

The ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).

developer.mozilla.org

 

 

 

pseudo class는 앞에 colon 하나만 붙지만 pseudo elements는 앞에 colon이 두개 붙음 물론 브라우저는 이걸 신경쓰지 않는다. 그냥 pseudo elements를 쓸때 colon 하나만 써도 pseudo element selector로 인식한다.

::first-letter와 ::first-line은 그냥 명칭만 봐도 사용법이 보인다

::selection은 드래그된 element(content)에 스타일을 적용하는 selector

 

※colon : ,, semi-colon ;

 period, dot . ,, comma ,

 

 

The CSS Cascade

cascade 미국·영국 [kæˈskeɪd] 

1. 작은 폭포
2. 폭포처럼 쏟아지는 물
3. 풍성하게 늘어진 것

 

만약 같은 selector에 스타일이 충돌이 일어난다면 무엇을 우선할까에 대한 topic

결론부터 말하자면 나중에 오는 스타일을 적용한다.(order matter)

작성한 코드들의 가장 마지막에 오는것을 적용하고 

다른 링크가 있다면 링크의 순서도 나중에 오는것을 적용함.

<link rel="1" href="1.css">
<link rel="2" href="1.css">

=====css in 1.css
h1 {
	color: red;
}

h1 {
	color: purple;
}

=====css in 2.css
h1 {
	color: yellow;
}

만약 link 1만 적용하고 스타일을 적용할때 h1은 purple이 되고

      link 2까지 적용하면 h1은 yellow가 된다.

만약 link2를 먼저 적용하고 link1이 나중에 적용된다면

      h1의 색깔은 purple이 된다.

 

WTF is Specificity

reference

specificity.keegan.st/

 

Specificity Calculator

Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.

specificity.keegan.st

www.w3.org/TR/selectors-3/#specificity

 

Selectors Level 3

Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in perfor

www.w3.org

specific (specificity)

1. 구체적인, 명확한, 분명한
2. 특정한
3. 특유의, 독특한

 

 

같은 셀렉터가 충돌이 일어날경우 순서에 따라(order matter) 적용이 되지만

다른 셀렉터가 충돌이 일어날경우 어떻게 될까? -> 이경우엔 specificity(구체성)을 따른다.

specificity의 규칙에 따르면 id>class>element로 셀렉터의 구체성이 다르다.

좀더 구체적일수록 구체적인 부분에 스타일이 적용이 된다.

스코어로 예시를 들자면 id는 100 , class는 10 , element는 1로 브라우저가 계산해서 스타일을 적용한다.

물론 브라우저가 셀렉터의 우선순위적용을 스코어에 비유해서 말하는것이지 element가 100개가 와도 class 하나를 못이긴다.

 

※구체성이 비등하다면 순서에 따라 적용된다. 

 

TIP: Chrome Dev Tools & CSS

 

chrome dev tool을 통해서 하나의 요소에 어떤 스타일이 적용되고 specificity가 어떻게 되는지 알 수 있다.

일회성으로 코드를 작성해서 어떻게 적용되나도 바로바로 볼 수 있고 

필터를 통해서 특정한 selector를 search 해볼수도 있다.

되게 유용하다..

 

 

Inline Styles & Important

 

inline styles element와 important property는 잘 사용하지 않고 사용하기 적합하지 않지만 알아두어야 할 요소.

inline styles은 html element에 직접 스타일을 적용하는 것이다.

<div style="color:blue; border: 1px dashed currentcolor;">
  The color of this text is blue.
  <div style="background:currentcolor; height:9px;"></div>
  This block is surrounded by a blue border.
</div>

하지만 html에 스타일을 적을경우 confuse가 오게 되고 문서가 지저분해지게 되므로 잘 쓰지 않는다.

 

important rule도 모든 specificity를 무시하고 우선적으로 적용되기 때문에 원래 작성된 style들을 다 뭉개버려서 잘 쓰이지는 않지만 그래도 알아둘 필요가 있는 rule이다. 

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

 

Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

developer.mozilla.org

-> !important exception

<div class="foo" style="color: red;">What color am I?</div>
.foo[style*="color: red"] { 
  color: firebrick !important;
}

inline 스타일도 이기는모양이다..

좀 더 자세한건 mdn reference를 통해 더 알아보자.. 이정도만 알면 될듯하다..

 

CSS Inheritance

inheritance

1. 상속받은 재산, 유산; 상속

2. (과거·선대로부터 물려받는) 유산, 유전(되는 것)

 

특성을 상속하는것..(물려받는것)

컨텐츠의 상위 element의 style이 있다면 그 style을 inheritance받아서 그 style을 적용한다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inheritance Demo</title>
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <h1>The Header</h1>
    <section>
        <h2>The Subheader</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, quisquam quas placeat quam suscipit dicta
            inventore odio vero quasi perferendis. Aliquid ducimus nostrum impedit nam, illo praesentium hic deserunt
            ullam.Consequuntur esse eveniet error sequi labore facere eos, quaerat voluptate tenetur rem placeat quidem
            a aperiam voluptas optio voluptatem quos suscipit. Voluptas minima vel in deleniti provident alias libero
            enim.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, quisquam quas placeat quam suscipit dicta
            inventore odio vero quasi perferendis. Aliquid ducimus nostrum impedit nam, illo praesentium hic deserunt
            ullam.Consequuntur esse eveniet error sequi labore facere eos, quaerat voluptate tenetur rem placeat quidem
            a aperiam voluptas optio voluptatem quos suscipit. Voluptas minima vel in deleniti provident alias libero
            enim.</p>
    </section>
    <section>
        <h2>Another Subheader</h2>
        <form action="blah">
            <label for="username">Username:</label>
            <input type="text" placeholder="username" id="username">
            <button>Do Something</button>
        </form>
    </section>

</body>

</html>
body {
    color: purple;
}

section {
    color: aqua;
}

form {
    color: greenyellow;
}

button, input {
    color: inherit;
}

몇몇 element들은 inherit가 안되도록 기본값이 설정되어 있다. 

그럴경우에는 property의 value를 inherit로 바꿔서 inherit되게 바꿀수 있다.

 

mdn에서 스타일이 inherit되는 style인지 아닌지 확인할 수도 있다.

'TIL(today I learned)' 카테고리의 다른 글

2020-10-26 TIL  (0) 2020.10.26
2020-10-25 TIL(2)  (0) 2020.10.25
2020-10-24 TIL  (0) 2020.10.24
2020-10-23 TIL  (0) 2020.10.23
2020-10-22 TIL  (0) 2020.10.22

+ Recent posts

티스토리툴바