Jewelry Blog

# CSS

# css layout

BFC(Block Formatting Context)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다.

float, absolute로 배치된 요소, inline-blocks, table-cells, table-caption 그리고 visible(그 값이 viewport에 전파되었을 때는 제외)이 아닌 overflow가 있는 요소들이 새로운 Block Formatting Context를 만듭니다.

BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다:

float의 값이 none이 아님. position의 값이 static도 아니고 relative도 아님. display의 값이 table-cell, table-caption, inline-block, flex, inline-flex임. overflow의 값이 visible이 아님. BFC에서 각 박스의 왼쪽 바깥 모서리는 포함하는 블록의 왼쪽 모서리에 닿습니다(right-to-left 포맷에서는, 오른쪽 모서리에 닿음).

BFC collapse시에 인접한 블록 레벨 박스 사이의 수직 마진. collapsing margins에 대해 자세히 읽어보세요.

ref: https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/css-questions.md

# Position

relative, fixed, absolute, static 요소의 차이점은 무엇인가요?

위치가 정해진 요소는 계산된 position 속성이 relative, absolute, fixed, sticky 중 하나인 요소입니다.

static - 기본 위치. 요소가 평소와 같이 페이지에 위치합니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.

relative - 요소의 위치가 레이아웃을 변경하지 않고, 자체에 상대적으로 조정됩니다. (따라서 배치되지 않은 요소의 간격을 남겨 둡니다.)

absolute - 요소가 페이지의 평소 위치에서 제거되고, 가장 가까운 relative 부모 블록이 있는 경우 지정된 위치에 배치됩니다. 그렇지 않으면 최상위 블록에 의존됩니다. absolute로 배치된 박스는 margin을 가질 수 있으며 다른 margin과 충돌하지 않습니다. 이 요소는 다른 요소의 위치에 영향을 주지 않습니다.

fixed - 요소는 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않습니다.

sticky - sticky는 relative와 fixed의 하이브리드입니다. 요소는 지정된 임계값을 넘을 때까지 relative 위치로 처리되며, 특정 지점에서 fixed 위치로 처리됩니다.

# absolute 포지셔닝 대신 translate()를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?

translate()은 CSS transform의 값입니다. transform이나 opacity를 변경해도 브라우저의 reflow나 repaint가 다시 발생하지 않고 컴포지션만 실행되는 반면, 절대 위치를 변경하면 reflow가 발생합니다.

transform을 사용하면 브라우저에서 이 요소를 위한 GPU 레이어가 생성되지만, 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 translate()가 더 효율적이며, 매끄러운 애니메이션을 위한 페인트 시간이 짧아집니다.

translate()을 사용할 때는 절대 위치를 변경할 때와 달리 원래 위치(일종의 position: relative)를 그대로 사용합니다.

ref

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/css-questions.md

https://developer.mozilla.org/en/docs/Web/CSS/position

# text-ellipse

.some-class {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 3;
  height: 3.6rem;
  line-height: 1.2rem;
}

중요한건 웹킷이 아니면, line clamp를 처리못하므로,

3줄이 넘어가도 작동합니다.

그래서 height를 line height의 3배로 줘서, 3줄이 넘어가면

자동으로 자르게 했습니다. 크기는 동적으로줘서 크기변경에 상관없이 작동하도록 구현.

그리고 overflow속성을 없애면, 그냥 설정해놓은 태그영역을 벗어나므로 주의하세요!

# white-space

div의 width는 충분한데 내부의 텍스트가 의도치않게 개행될때가 있다.

그럴땐 아래의 스타일 속성을 추가해주면 된다.

  white-space: nowrap;

← Snapshot Test →