드림코딩 by 엘리_CSS 셀렉터, 기초 이론 정리.

CSS(Cascading Style Sheet)

 

 

CSS는 우리가 잘 정리한 HTML 페이지를 아주 stylish하게 꾸며주는 역할을 한다.

 

1. 의미, 정의

2. 선택자 (selectors)

 - 우리가 정의한 tag들을 골라주는 역할을 한다.

3. 스타일링

4. 헷갈리는 컨셉

5. ** Flex box

 

1. CSS의 의미와 정의

CSS의 약자는 Cascading Style Sheet의 약자인데 

여기서 Style Sheet는 뭔가 style을 잘 정리한 문서 한장을 의미한다고 생각할 수 있다면

Cascading은 위에서 아래로 연속해서 떨어지는 느낌으로 

 정의된 세부적인 정의가 있다면 그것을 쓰고 정의되 있는것이 없다면 다음 기본으로 지정된 것으로 넘어가는 것을 이야기 한다.

 

 

웹사이트를 styling 할때 크게 3가지로 나눠서  생각할 수 있다.

Author style 

 - 우리가 작성하는 style sheet

 - 우리가 웹사이트를 만들때 제공하는 CSS파일을 의미함

User style

 - 사용자가 styling 하는것

 - 예를 들어 브라우저상에서 dark모드로 쓸것인지, 아님 글자크기를 조정하고 싶은지 사용자의 취향에 맞게 브라우져에서 styling을 바꿀 수 있다. 

Browser

 - 브라우저상에서 기본적으로 지정된 style이 있다.

 

 

그래서 Cascading은 우리가 정의한 style이 최고의 우선순위를 가지고

우리가 정의해 놓은 styling이 없다면 바로 사용자가 지정한 style로 간다.

그리고 사용자가 지정해놓은 styling이 없다면 브라우저에서 기본으로 지정한 style로 넘어가게 된다.

이렇게 우리가 지정한 style → 사용자가 지정한 style → 브라우저에서 지정한 style 

이런식으로 떨어지는 느낌이 cascading 이다.

 

이 cascading의 연결고리를 끊어내는 것이 딱 하나가 있는데 바로 !important 이다.

가능하면 !important는 사용하지 않는것이 좋다.

 

HTML을 배울 때 커다란 body 라는 상자안에 여러가지 item들을 마구마구 넣는 것이 아니라 

body안에서도 커다란 section들로 나누고 

또 커다란 section 안에서도 작은 단위의 box로 나눠서 여러가지들을 정리해야 된다.

그 중에 큰 이유는 box대로 잘 나눠야 네이블링이 쉽기 때문이다.

이렇게 네이블링이 잘 되어있다면 CSS를 꾸밀때 어떤 요소를 골라서 할지 고르는게 쉬워진다. 

 

2. CSS의 선택자 (selectors)

 

 

selector 라는 것은 HTML의 어떤 tag를 고를껀지를 규정하는 문법이다.

 

selector을 작성해서 내가 어떤 tag를 고르고 싶은지 명시한 다음에 

괄호안에 내가 꾸미고 싶은 property를 넣고 value를 넣으면 된다.

구체적으로 tag 가까이 설정된 property와 value 들이 우선순위가 높아지는 것을 확인 할 수있다.

 

 

1. universal selector

 - 모든 seletor을 선택하는 것이다.

2. type selector

 -  tag 이름 작성 후 괄호를 넣으면 된다. 

3. id selector

 - #(해쉬마크)를 이용해서 아이디이름을 작성후 괄호를 열고 property와 value를 작성한다.

4. class selector

 - .(dot)을 이용해서 작성한다.

5. state selector

 - if 같은 button이라도 :hover을 넣으면 특수효과를 넣어줄 수 있다.

6. attiribute selector

 - 속성값에 따라서도 style을 바꿀수 있다.

 

3. CSS Styling 

* div box styling

div는 block level의 element 요소이기 때문에 한줄을 margin이 다 차지하고 있고

여기서 padding을 지정해주면 box가 커지는것을 볼수있는데 

padding은 content 안에 들어가있는 spacing을 말하고,

margin은 content 밖에 들어가는 spacing을 말한다.padding은 각각 side에 따로 sizing을 따로 넣을 수 있는데 top, bottom, left, right 으로 spacing을 넣을 수 있다.padding : 시계방향으로 top → right → bottom → left 순서대로 작성 가능하다. (margin도 마찬가지)padding : top과 bottom right와 left 작성 

 

http://flukeout.github.io/ 

CSS Diner

 

게임을 통해서 selector들을 쓰는 연습을 해본다.

 

1. Type Selector : Select elements by their type

 - Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.

 

2. ID Selector : Select elements with an ID (#id)

 - Selects the element with a specific id. You can also combine the ID selector with the type selector.

3. Descendant Selector : Select an element inside another element (A B, #id B)

 - Selects all B inside of A. B is called a descendant because it is inside of another element.

 - You can combine any selector with the descendent selector.

 

4. Class Selector : Select elements by their class (.classname)

 - The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.

5. Combine the Class Selector (A.classname)

 - You can combine the class selector with other selectors, like the type selector

 - ul.important selects all ul elements that have class="important"

 

6. Comma Combinator : Combine, selectors, with... commas! (A, B)

 - Thanks to Shatner technology, this selects all A and B elements. 

 - You can combine any selectors this way, and you can specify more than two.

 

7. The Universal Selector : You can select everything! (*)

 - You can select all elements with the universal selector!

8. Combine the Universal Selector (A *)

 - This selects all elements inside of A.

 

9. Adjacent Sibling Selector : Select an element that directly follows another element. (A + B)

 - This selects all B elements that directly follow A. 

 - Elements that follow one another are called siblings. 

 - They're on the same level, or depth.

 - p + .intro selects every element with class="intro" that directly follows a <p>

 

10. General Sibling Selector : Select elements that follows another element (A ~ B)

 - You can select all siblings of an element that follow it.

 -  This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.

 

11. Child Selector : Select direct children of an element

 - You can select elements that are direct children of other elements. 

 - A child element is any element that is nested directly in another element.

 - Elements that are nested deeper than that are called descendant elements.

 

12. First Child Pseudo-selector : Select a first child element inside of another element ( :first-child)

 - 가상선택자

 - You can select the first child element. 

 - A child element is any element that is directly nested in another element.

 - You can combine this pseudo-selector with other selectors.

 - :first-child selects all first child elements.

 

13. Only Child Pseudo-selector : Select an element that are the only element inside of another one. ( :only-child)
 - 가상선택자

 - You can select any element that is the only element inside of another one.

 - ul li:only-child selects the only <li> element that are in a <ul>.

 

14. Last Child Pseudo-selector : Select the last element inside of another element ( :last-child)

 - 가상선택자

 -  You can use this selector to select an element that is the last child element inside of another element.

 - Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child

 - ul li:last-child selects the last <li> elements inside of any <ul>.

 

15. Nth Child Pseudo-selector : Select an element by its order in another element ( :nth-child(A) )

 - 가상선택자

 - Selects the nth (Ex: 1st, 3rd, 12th etc.) child element in another element.

 - div p:nth-child(2) selects the second <p> in every <div>

 

16. Nth Last Child Selector : ( :nth-last-child(A) )

 - Select an element by its order in another element, counting from the back

 - This is like nth-child, but counting from the back!

 - :nth-last-child(2) selects all second-to-last child elements.

 

17. First of Type Selector : ( :first-of-type)

 - Select the first element of a specific type

 - Selects the first element of that type within another element

 

18. Nth of Type Selector ( :nth-of-type(A) )

 - Selects a specific element based on its type and order in another element - 

 - or even or odd instances of that element.

 - div:nth-of-type(2) selects the second instance of a div.

 

19. Nth-of-type Selector with Formula ( :nth-of-type(An+B) )

 - The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

 - span:nth-of-type(6n+2) selects every 6th instance of a span, starting from (and including) the second instance.

 

20. Only of Type Selector ( :only-of-type )

 - Select elements that are the only ones of their type within of their parent element

 - Selects the only element of its type within another element.

 - p span:only-of-type selects a <span> within any <p> if it is the only span in there.

 

21. Last of Type Selector ( :last-of-type )

 - Select the last element of a specific type

 - p span:last-of-type selects the last <span> in every <p>.

 

22. Empty Selector ( :empty )
 - p:empty selector는 안에 자손이 없다.

 - Selects elements that don't have any other elements inside of them.

 - div:empty selects all empty <div> elements.

 

23. Negation Pseudo-class ( :not(X) )

 - Select all elements that don't match the negation selector

 -  :not(#fancy) selects all elements that do not have id="fancy".

 - div:not(:first-child) selects every div that is not a first child. 

 

24. Attribute Selector ( [attribute] )
 - Select all elements that have a specific attribute

 - Attributes appear inside the opening tag of an element, like this: <span attribute="value">.

 - a[href] selects all <a> elements that have a href="anything" attribute.

 

25. Attribute Value Selector ( [attribute="value"] )

 - Select all elements that have a specific attribute value

 - Attribute selectors are case sensitive, each character must match exactly.

 

26. Attribute Starts With Selector ( [attribute^="value"] )

 - Select all elements with an attribute value that starts with specific characters

27. Attribute Ends With Selector ( [attribute$="value"] )

 - Select all elements with an attribute value that ends with specific characters

28. Attribute Wildcard Selector ( [attribute*="value"] )

 - Select all elements with an attribute value that contains specific characters anywhere

 - A useful selector if you can identify a common pattern in things like class, href or src attributes.

 - character가 어디에 있던지 사용가능하다.