2022년 01월 24일

📚 오늘 도전하고, 배운 것

CSS

margin

margin 축약은 TROUBLE로 기억하기

• T: margin-top
• R: margin-right
• B: margin-bottom
• L: margin-left

min-width, max-width

min-width는 요소의 최소 너비를 설정한다. 따라서 브라우저의 너비가 줄어들 때, min-width 크기 이하로는 줄어들지 않도록 설정하는 것 min-width는 요소의 최대 너비를 설정한다. 요소의 너비가 max-width보다 커지지 않도록 설정한다.

min-height, max-height

min-height는 요소의 최소 높이를 설정한다. 브라우저의 높이가 줄어들 때, min-height 크기 이하로는 작아지지 않도록 설정하는 것 max-height는 요소의 최대 높이를 설정한다. 요소의 높이가 max-height보다 커지지 않도록 설정한다.

text-indent

text-indent 속성은 들여쓰기 또는 내어쓰기를 만든다. 양수면 들여쓰기가 되고, 음수면 내어쓰기가 된다. 텍스트가 보이지 않도록 하기 위해 text-indent:-9999px를 넣기도 한다. 하지만 눈에 보이지 않는다고 브라우저가 렌더링을 하지 않는 것이 아니기 때문에 다음과 같이 작성하면 성능에 도움이 된다고 한다.¹

.label {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

css 길이 단위

• CSS 길이 단위

Sass, SCSS

• Sass-mixin-include

중첩의 기능

선택자를 중첩하면 자식 선택자에 해당 규칙을 작성하는 것이다.
&을 붙이면 자식 선택자의 의미가 없어진다.
아래 코드에서는 a:hover가 되는 것

a {
  color: #000;
  text-decoration: none;
  &:hover {
    background: #d9e9ff;
  }
}

🤔 학습하면서 궁금하거나 어려웠던 점

🌅 내일은 무엇을?

• 백준 알고리즘 문제 풀기

🖋 log

• 점심때 가족들과 칼국수를 먹으러 갔다. 집 근처에 맛있는 칼국수 집이 있다는 것은 행운이다.