학습내용

middle dot 쓰는 법

1. HTML 유니코드 사용
   작은 점 : ·, ·, ·
   굵은 점 : •
   ex)<span>&#183;</span>
2. CSS \00B7
   ::before와 같은 pseudo-element를 채우는 content 속성.
   content: "\00B7";

CSS content 속성은 생성한 값으로 요소를 대체합니다. content 속성으로 추가한 요소는 "익명 대체 요소"입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/content

| 쓰는 법

first-element의 앞에는 없도록 initial(전역), none, normal(조합 안 됨) 다 적용된다.
#main-footer .corp_lists li:first-child::before {
  content: initial;
}

#main-footer .corp_lists li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background-color: #e4e8eb;
  margin: 0 8px;

  vertical-align: -1px;
}

vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

대체 요소(replaced element)

CSS의 대체 요소(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/Replaced_element

• 전형적인 대체요소 : iframe, video, embed, img
• 특정 경우에만 대체요소 : option, audio, canvas, object + CSS content속성을 사용해 추가한 객체(익명 대체요소)

일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, vertical-align 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.

1. object-fit : 대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.

• fill : 비율이 깨지더라도 꽉 차게끔.
• contain : 비율 유지하면서, 박스에 들어가게끔.
• cover : 비율 유지하면서 잘려나가도 가득 채우게끔.
• none : 크기 조절 없음.
• scale-down : none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택함.

2. object-position : 대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.

• 속성값 : <position>
• 초기값 : 50% 50% 중앙

학습후기

pseudo-element와 pseudo-class의 차이가 잘 실감나지 않았었는데, 오늘 middle-dot, |를 실습하면서 pseudo-element가 실제 html에 없는 가상의 요소라는 것이 이해가 되었다. 그와 달리 pseudo-class는 요소가 어떤 상태일 때를 지정하는 것임으로 이해했다.