css로 글자의 라인수를 제한하는 방법에는 여러가지가 있다.

한 줄로 제한하기(white-space)

css로 최대 라인 수를 한 줄로 제한하고 마지막에 …을 넣어줄 수 있다.

1
2
3
4
5
6

white-space: nowrap;
/* 텍스트가 띄어쓰기 되지 않게 한다 */
overflow: hidden;
/* 띄어쓰기 되지 않게 하고 넘친 부분은 숨긴다.*/
text-overflow: ellipsis;
/* 요소에 넘치는 부분을 ...로 대체하게 된다.*/

두 줄로 제한하기(webkit-line-clamp)

한 줄이 아닌 여러줄로도 제한할 수 있다.

-webkit-line-clamp 속성을 통해 최대 줄 수를 제한할 수 있다.

이를 사용하기 위해선 아래와 같은 css 속성 또한 적용해야 한다.

1
2
3
4

display: -webkit-box (또는 -webkit-inline-box)
-webkit-box-orient: vertical
-webkit-line-clamp: 3 (integer)
overflow: hidden;

최종 결과는 다음과 같다.

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

ref

CSS로 텍스트 라인수를 제한하는 방법

-webkit-line-clamp mdn

float 속성은 이미지를 배치하고 주변으로 텍스트를 흐르게 할 용도로 만들어졌다.

동시에 박스요소 끼리는 겹치게 만든다.

특징

1. 플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다.
2. 인접 후행 블록 요소는 플로팅 요소와 겹치고 인라인 요소는 플로팅 요소 주변으로 흐른다.
3. clear, flow-root 속성으로 해제할 수 있다.
   • clear는 블럭 요소에만 적용할 수 있다.
4. 컬럼을 배치하는 속성이 아니다.

해제하는 법

해제하는 법에는 여러 방법이 있다.

1. 부모 요소에 float 적용하기
2. 자식 요소의 마지막에 빈 element에 clear 속성 추가하기
3. 부모요소에 overflow:hidden 추가하기
4. 부모요소의 display를 inline-block으로 바꾸기
5. 부모요소에 after를 이용하여 clear속성 추가하기
6. 부모요소를 display:flow-root를 추가하기

float과 display

float 속성이 들어간 요소는 display가 block이 된다.

display 속성이 없어도 float을 사용하면 width/height 수직 margin/padding을 사용할 수 있다.

columns <’column-width’> || <’column-count’>

columns 속성을 사용하면 div 하나에서 세 개의 column으로 만들 수 있다.

1
2
3
4
5
6
7
8

 {
  columns: 310px 2;
  column-gap: 20px;
  column-rule: 20px solid #0002;

  break-inside: avoid;
  /* box 내부에서 자르지 않는다. */
}

https://flexboxfroggy.com/#ko
https://t.ly/2kOk

패딩과 마진은 부모요소의 너비를 기준으로 한다.

비율이 유지된 박스를 만들 수 있다.

종횡비 유지 비법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* 영상을 뷰포트에 맞춤하는 경우 유용 */
iframe {
  width: 100vw;
  height: 56.25vw;
}
/*사파리, 삼성 인터넷 지원 확인 필요  */
iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 100/56.25;
}

.utube {
  position: relative;
  padding-top: 56.25%;
}

.utube__iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

유용성

1. 누적 배치 변경(CLS) 문제 해결
2. 스켈레톤 UI를 제공할 때
3. 이미지 지연 로딩 기법을 사용할 때
   • 로딩되지 않은 이미지의 높이가 0으로 계산된다.
   • 높이를 기준으로 잡혀진 레이아웃은 깨질 수 있다.
4. content-visiblity: auto 속성을 사용할 때,

요소와 문서의 전체 높이를 일정하게 유지하는데에 필요.

수진 마진 병합

인접된 형제나 부모 자식 사이에서의 수직마진이 병합된다.

1. 블럭요소 사이에서만 발생한다.
2. 양수끼리, 음수끼리 만난 경우 절대값이 큰 값이 적용된다.
3. 양수와 음수가 만난 경우 두 값의 합이 적용된다.

이유

초기 스타일에 수직 마진이 있는 요소로 인해 양쪽 수진 마진에 발생하는 과도한 간격을 상쇄하기 위해 발생한다.

예외

• 최상위 요소(body)의 수직 마진.
• 부모의 display:flow-root
• 부모의 overflow:hidden|auto|scroll
• 부모의 padding-top/bottom 값이 0이 아닐 때.
• 부모의 border-top/bottom 값이 0이 아닐 때
• display:inline|inline-*
• float:left|right

레이아웃

display와 position등이 있다.

display

레이아웃의 한 요소이다.

changed display

position을 바꾸는 여러 속성들이 있다.

아래의 속성들을 사용할 경우 block:display를 굳이 사용할 필요가 없다.

1
2
3
4

position: absolute|fixed
float: left|right
/* changed display */
display:block

display:inline

요소들을 행으로 배치시키는 속성이다.

수평마진과 수평패딩만 적용할 수 있다.

수직패딩의 경우 다른 요소를 밀어내지는 못한다.

display:block

요소들을 열로 배치시키는 속성이다.

너비와 높이, 수평마진, 수직마진, 수평패딩, 수직패딩 전부 적용할 수 있다.

수직마진은 중첩된다.

display:inline-block

block과 inline-block의 특징을 전부 가지고 있는 속성이다.

수직마진은 중첩되지 않는다.

display:none

어떤 장치도 표시하거나 접근할 수 없다.

display:flow-root

블록 컨테이너가 되며 새로운 블록 형식 문맥이 된다.

• 포함된 float 요소는 컨테이너 끝에서 clear 된다.
• 부모 자식요소의 수직 마진을 병합하지 않는다.

display:flex

flex 컨테이너 박스를 생성한다.

• flex 형식 문맥을 설정한다
• 포함 아이템을 1차원 기반으로 배치.
• 격자에 구애 받지않는 배치가 가능하다.

display:grid

grid 컨테이너 박스를 생성한다.

• grid 형식 문맥을 설정한다
• 포함 아이템을 2차원 기반으로 배치
• 격자끼리 병합하는 배치가 가능하다.

position

position: static

배치 기준이 없다. 흐름에 따라 배치된다.

left, right, top, bottom, z-index를 사용할 수 없다.

position:relative

박스의 현재 위치가 배치의 기준으로 배치를 변경할 때에 다른 박스의 흐름을 깨지 않는다.

자식 또는 자손 요소의 absolute의 배치 기준이 된다.

left right top bottom z-index,inset을 사용할 수 있다.

position:absolute

일반적인 흐름에서 완전히 이탈한다.

부모 형제의 크기나 위치에 전혀 영향을 미치지 않는다.

조상 박스가 relative,absolute,fixed,transform일 때, 조상 기준으로 배치된다.

left tight top bottom z-index, inset을 사용할 수 있다.

position:fixed

뷰포트가 배치 기준이다.

조상요소에 transform 속성이 있으면 transform 속성이 있는 요소가 배치 기준이다.

left tight top bottom z-index, inset을 사용할 수 있다.

position:sticky

스크롤 포트가 배치 기준이다.

부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트 기준으로 고정된다.

부모 요소가 스크롤 밖으로 이탈하면 고정을 멈춘다.

left tight top bottom z-index, inset을 사용할 수 있다.

z-index

절대값이 아니며 부모요소에 종속된다.

z-index는 부모요소보다 높을 수가 없다.