CSS 정리 2

자세한 사항은 아래 본문에서 참고하세요

이 내용은 modzilar developer 사이트에서 내용을 정리하기 위해 적었습니다.

내용은 원문 내용으로 기술 되었습니다. 정확한 정보는 해당 웹페이지 링크 를 참조 하세요.

 

Specificity

더높은 우선 순위를 갖게 되고 브라우저에서 요소를 스타일해야 하는 규칙으로 선택 하고 있습니다.

스타일 적용시 일반 스타일을 미리 설정 한 다음, 다른 요소에 대해 class를 작성하는 것입니다.

브라우저가 우선 순위를 계산하는 방법을 살펴보겠습니다.

 

Thousands:

:선언이 인라인 스타일인

style

속성 안에 있으면, 열에서 1점. 선언이 없으면 1000점

Hundreds:

:전체 선택자에 포함된 각 ID 선택자에 대해 1점

Thens:

class 선택자, 속성 선택자, pseudo-class 1점

ones:

이 항목에서 각 선택자 or 전체 선택자 내 포함된 pseudo-element 에 대해 1점

!important : 모든 계산을 무효화 하는 특별 CSS가 있음. casecade를 무시하게 됨. 그러나, 반드시 필요한 경우가 아니면 절대 사용하지 않는것이 좋음

---

Selector list

i could also combine these into a selector list, by adding a comma between them.

h1 { 
  	color: blue; 
	} 

.special { 
  color: blue; 
}
/* add comma */
h1, .special { 
  color: blue; 
} 
/* new line */
h1, 
.special {
  color: blue; 
} 

Type selectors

when you gorup selectors in this way, if any selector is invalid the whole rule will be ignored.

---

Types of selectors</3>

there are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job.

Type, class, and ID selectors

   1. h1{ }
   2. .bpx { }
   3. #unique { }

Attribute selectors: this group of selectors give you different ways to select elements based on the presensce of a certain attribute on an element:

   a[title] { }
   /* or even make a selection based on the presensce of an attribute with a particular value */
   a[href="https://example.com"] { }

Pseudo-classes and pseudo-elementsthe group of selectors include pseudo-classes, which style certain states of an element.

Combinators

The final group of selectors combine other selectors in order to target elements within our documents.

---

Block and inline boxes

block boxces and inline boxes. These characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page:

the box will break onto a new line.
the box will extend in the inline direction to fill the space available in its container. box will become as wide as its contaner, filling up 100%
th width and height properties are respected
padding, margin and border will causes other elements to be pushed away from the box

the box will not break onto a new line
width and height properties will not apply
vertical padding, margins, and boredrs will apply but will not cause other inline boxes to move away from the box
horizantal padding, margins, and borders will apply and will casuse other inline boxes to move away from the box.

display values lkies flex. If we set display:flex; on an element, the outer display type is block but the inner display type is changed to flex. Any direct children of this box will become flex items and will be laid out according to the ruels set out in the flexbox

at this point, we'd better also explain inner and outer display types. As mentioned above, boxes in CSS have an outer display type,

---

what is the css box model?

Parts of a box

content box

:the area where your content is displayed, which can be sized using properties like width and height

padding box

: the padding sits around the content as white space;

border box

: the border box wraps the content and any padding

margin box

: the margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements.

the alternative css box model

it is rather inconvenient to have to add up the border and padding to get the real size of the box, and you would be right css had an alternative box model introduced som tiem after the standard box model.

 

 

 

html {
box-sizing : border-box;
}

* , *::befor, *::after {
box-sizeing : inherit;
}

자세한 사항은 아래 본문에서 참고하세요

이 내용은 modzilar developer 사이트에서 내용을 정리하기 위해 적었습니다.

내용은 원문 내용으로 기술 되었습니다.

정확한 정보는 해당 웹페이지 링크 를 참조 하세요.

developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/%EC%83%81%EC%9E%90_%EB%AA%A8%EB%8D%B8

상자 모델