Rendering Logic - 기초1

 

해당 글은 css josh강의를 요약 정리한 것 입니다.

css의 목표는 앱 콘텐츠의 레이아웃과 모양을 컨트롤 하는 것 입니다.

HTML태그에는 최소한의 몇가지 스타일이 실제로는 들어있는 것입니니다.

 

예를 들어 chrome에서 <a>태그에 제공하고 있는 기본스타일을 확인해봅시다.

a {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

실제로 브라우저는 이러한 기본 스타일로 가득찬 스타일 시트를 가지고 있습니다.

HTML사양의 몇가지 엄격한 규칙이 있지만 대부분은 브라우저의 고유의 스타일을 제공하고 있습니다. 

이 것이 같은 태그여도 브라우저마다 다르게 보이는 이유입니다.

 

보통 개발자들은 CSS reset 파일을 통해서 브라우저간의 일관성을 높이기도 합니다.

css reset에 대해서 자세히 알아보세요
https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0

 

Inheritance

/* html */
<p>
  I love <em>you</em>
</p>

/* css */
p {
  color: deeppink;
}

이 결과를 보면 모든 글자가 핑크로 되어있는 것을 확인할 수 있습니다! em에 적용하지 않았는데 왜 you에도 핑크색이 적용되었을까요?

이유는 CSS속성(특정 속성만)은 상속하기 때문입니다.

 

하지만 모든 CSS 속성이 상속되는 것이 아닙니다.

/* html */
<p>
  I lovs <em>you</em>
</p>

/* css */
p {
  border: 1px solid hotpink;
}

위의 예시의 결과는 어떨까요?

<em>태그에는 분홍 테두리가 적용되지 않은 것을 확인할 수 있습니다. 따라서 border css는 상속되지 않는 것을 알 수 있습니다.

 

만약 실제로 모든 CSS 속성이 상속이 된다면 그것은 오히려 불편함을 가중시킬 것입니다.

상속되는 대부분의 속성은 color, font-size, text-shadow같은 것 입니다.
(더 자세히 알고 싶으면 클릭! https://www.sitepoint.com/css-inheritance-introduction/#list-css-properties-inherit)

 

---

The Cascade

브라우저는 cascade알고리즘을 통해서 동작한다.

아래의 예제는 cascade알고리즘을 가장 잘 볼 수 있는 예제이다.

<style>
  p {
    font-weight: bold;
    color: hsl(0deg 0% 10%);
  }
  .introduction {
    color: violet;
  }
</style>
<p class="introduction">
  Hello world
</p>

<p>태그와 class에 각각 CSS 속성을 주었고, p태그에서 font-weight를 class에서 color속성을 꺼냅니다.

여러 선택자들의 같은 속성을 적용하면 서로 경쟁을 하게 되고 하나의 스타일만 적용이 되게 됩니다!

어떤 것이 이기는지 어떻게 결정하나요?

이 것은 selector의 특수성에 의해 결정됩니다.

selector들은 상대적인 힘들 가지고 있고 힘이 더 큰 선택자의 CSS 속성이 적용되게 됩니다!

(class > 태그)

 

Similarities with JS merging

자바스크립트에서 css의 cascade를 구현하는 방법은? spread operator를 사용한다!

const appliedStyles = {
  ...inheritedStyles,
  ...tagStyles,
  ...classStyles,
  ...idStyles,
  ...inlineStyles,
  ...importantStyles
}

해당 처럼 구현할 수 있고, 마지막 spread operator로 덮어지는 것이 가장 css의 상대적인 힘이 큰 ! css의 selector이다.

 

---

Directions

Direction이라는 주제를 통해 CSS의 수직방향과 수평방향의 구조를 알아보자!

 

우리가 출판물을 보면 수평의 방향으로 여러 단어와 미사여구 들이 모여서 하나의 문단이 만들어집니다.

문단은 수평으로 구성되는 것을 신문이나 뉴스를 보면 알 수 있습니다!

 

노란박스 수평(인라인) /&nbsp; 빨간 박스 수직(블록)

빨간 박스를 Block단위로 보고 노란박스를 inline으로 생각하면 이해가 쉽습니다!

- 블록방향은 레고와 같아서 블록위에 수직으로 쌓아갑니다

- inline방향은 수평방향으로 나란히 서있습니다. 

 

논리적 속성

위에서 브라우저는 기본적으로  HTML태그에 대해 기본적인 CSS속성을 가지고 있다고 했습니다.

<p>태그가 chrome에서 제공하고 있는 css 속성을 알아보면, 아래와 같습니다.

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

margin-block-start   은 어떤 속성 일까요? 왜 chrome은 이러한 속성을 사용하여 p태그의 css를 구성하였을까요?

그 이유는 모든 언어가 왼쪽에서 오른쪽 위에서 아래로 쓰는 것은 아니기 때문에, 만약 브라우저에서 아랍어로 전환하는 경우는 

아랍어는 오른쪽에서 왼쪽으로 작성하는 언어이기 때문에 오른쪽에 공백을 추가합니다.

 

논리적 속성에 자세히 알아보고 싶으면 gogo
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

CSS Logical Properties and Values - CSS: Cascading Style Sheets | MDN

 

---

Box Model

JS 면접에서 클로저와 프로토타입에 대해 묻듯이, CSS 면접에서 꼭 물어보는 질문이 

"박스모델이 무엇인가요?"라고 합니다.

 

Box Model은 CSS렌더링의 중요한 부분이기 때문에 깊게 아는 것이 중요합니다!

브라우저가 box모델을 통해 어떻게 레이아웃을 지시하고 렌더링할까요?

Layers

박스 모델을 구성하는 네 가지 관점을 다음과 같습니다!

겨울에 패딩을 입고 걸어가는 사람과 4가지 요소의 비유를 해보면

1. content : 사람 자신
2. padding : 사람이 입은 패딩의 충전재가 많을 수록 패딩의 크기가 커진다.
3. Border : 사람이 입은 패딩의 재질이다. 외모에 영향을 준다.
4. Margin : 개인 공간 그 사람에게 가까이 갈 수있는 최소의 공간

 

Box Sizing

css 속성에서 width가 100%라는 것은 어떤 것을 의미하나요?

브라우저의 해석은 우리가 생각하는 것이랑 약간 다를 수 있는데, 아래를 예상해보면,,

<style>
  section {
    width: 500px;
  }
  .box {
    width: 100%;
    padding: 20px;
    border: 4px solid;
  }
</style>
<section>
  <div class="box"></div>
</section>

결과는 위와 같은데 박스의 사이즈는 548x 48이 된다(548 = 500 + 20x2 +4*2. / 48 = 20x2 + 4x2)

 

이러한 것은 개발자가 원하는 게 아닌데, border과 padding까지 합산한 것을 500으로 원할 수 있다.

이를 제공하는 css 프로퍼티가 있는데, box-sizing: border-box  입니다

이렇게 변경하면 width 의 전체 길이가 500px가 되는것을 확인할수있다(추가)

 

---

Border

Border에는 기본적으로 세 가지 스타일이 있습니다.

• Border width : ex) 3px, 1em
• Border Style  : ex) soild, dotted 
• Border Color : ex) hotpink

=> Border는 위의 순서로 축약어로 한 번에 쓸 수 있습니다.

=> Border Style은 필수 필드입니다. 안 써주면 작동하지 않습니다!

.box {
  border: 3px solid hotpink;
}
.not-good {
  /* 🙅‍♀️ Won't work – needs a style! */
  border: 2px pink;
}
.good {
  /* 🙆‍♀️ Will produce a black, 3px-thick border */
  border: solid;
}

 

border 색상을 쓰지 않고 color를 지정하면 기본적인 글꼴 색이 border색이 됩니다.

만약 해당 동작을 명시적으로 지정하고 싶다면 border 마지막 필드에 currentColor를 사용해주면 됩니다!

=> 명시적으로 상속됨을 알려줌

 

Border Radius

border radius는 모서리 반경으로 테두리가 생깁니다.

border radius 또한 왼쪽위, 오른쪽 위, 오른쪽아래, 왼쪽 아래로 축약하여 사용할 수 있습니다.

 /* 축약 */
 border-radius: 10px 10px 40px 40px;
 
  border-top-left-radius: 8px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 32px;
  border-bottom-left-radius: 64px;

border radidus의 속성은 %또한 사용할 수 있습니다! (50% -> 원 모양)

 

Border vs Outline

border와 outline은 상당히 비슷합니다. 두 개의 차이점은 outline은 레이아웃에 영향을 미치지 않는다는 점이 다릅니다.

/* CSS */
.box {
  width: 100px;
  height: 100px;
  border: 4px solid darkviolet;
  outline: 4px solid deeppink;
}

/* HTML */

<div class="box"></div>
<div class="box"></div>

위의 코드의 결과

---

Margin

margin 속성은 elelment 주위의 공간을 증가시키는 속성입니다. 위에서 배운 것과 같기 주위의 개인공간으로 생각하면 쉽습니다.

 

Nagative margin

padding 과 border는 양수만 지원이 되는 것과 달리 margin은 음수도 지원을 합니다.

• 음수는 요소의 부모 밖에다 놓기도 한다. 

• 음수 margin은 sibling element들을 가깝게 할 수 도 있습니다.
• margin은 요소의 위치를 옮기는 것으로 이해하기 쉽지만 실제로 margin은 요소 간의 간격을 변경하는 것입니다.
• 또한 음수 margin은 모든 sibling element들의 위치에 영향을 줄 수 있습니다.

main {
  width: 200px;
  height: 200px;
  border: 3px solid silver;
}

.box {
  width: 25%;
  height: 25%;
  border: 3px solid;
  background: white;
}

.box.one {
  border-color: deeppink;
  margin-top: -50px;
}

/* html */
<main>
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</main>

 

Auto margins 

• margin에는 또 다른 기능이 있는데 contain의 child를 center로 배치할 수 있습니다.
• auto값은 가장 큰 사용가능한 간을 채우려고 합니다.
• 주의할 점은 이 동작은 수평으로만 동작이 됩니다. 
• 또 주의할 점은 auto 값은 명시적 너비를 가진 요소에서만 작동합니다. 

요즘은 flexbox와 grid를 사용하지만 auto margin이 필요없는 것이 아니라 활용법이 다릅니다.

margin : auto는 단일 자식에 선택적으로 적용할 수 있기 때문에 

이러한 서로 다른 도구들을 다양항 상황에 잘 사용하는 것이 중요합니다.

 

 

Exercise

아래의 핑크 타이틀을 미적인 요소를 위해서 밖으로 빼내고 싶다면 어떻게 해야할까요?

왼쪽 원하는 결과  / 오른쪽 default

Code

body {
  background: #222;
  padding: 32px;
}

.card {
  background-color: white;
  padding: 32px;
  border-radius: 8px;
}

h1 {
  background: deeppink;
  padding: 16px 32px;
  margin-bottom: 24px;
  margin-top : -48px;
  font-size: 2rem;
  text-align: center;
  border-radius: 4px;
}

/* html */
<div class="card">
  <h1>밖으로 title</h1>
  <p>
    어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~
    어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~
    어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~
    어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~
    어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~어쩌구 저쩌구~~~
  </p>
</div>