[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 14 ~ 15[4주차]

❤️Liked 느낀 점

날씨가 따뜻해서 그런지 집에 날벌레들이 하나 둘 나타나기 시작했고,
수업 듣는 내내 제 주변을 계속 날라다니길래 집중이 그렇게 썩 되지는 않았습니다..
그리고 이 번 회차에서 다룬 내용들이 평소 깊게 다루지 않았던 내용들이라 어려운 부분들이 많았고,
처음 알게된 부분도 많아서 새롭게 느껴져서 한 번 복습으로 안 되겠다고 느꼈습니다..

✏️Learned 공부한 내용

텍스트 줄바꿈 제어

word-break

• 텍스트가 자신의 콘텐츠 박스 밖으로 넘어갈 때 줄을 바꿀 지 지정합니다.
• 값
  • normal(초기값)
    • 기본 줄 바꿈 규칙을 사용합니다.
    • 영어는 단어 단위로, 한글은 글자 단위로 줄바꿈이 됩니다.
  • break-all
    • overflow를 방지하기 위해서는 어떠한 두 문자 사이에도 줄 바꿈이 발생할 수 있습니다.
    • (한중일 텍스트 제외)
  • keep-all
    • 한중일 텍스트는 단어 중간에서 줄바꿈이 일어나지 않으며, 어절 단위로 줄을 바꿉니다.
    • 다른 언어의 경우 일반적인 줄바꿈 방식(normal)과 같습니다.

overflow-wrap

• 정의
  • 이 속성은 원래 MS의 'word-wrap'으로 도입됐지만, 지금은 'overflow-wrap'으로 표준화되었으며, 두 용어는 동의어입니다.
  • 브라우저가 단어를 중간에 끊지 않고 줄바꿈할 지를 결정해서 텍스트가 내용 칸 밖으로 넘치지 않도록 해줍니다.
  • 브라우저는 단어가 줄 안에 모두 들어가지 않을 때만 줄바꿈을 한 번 수행해, 텍스트가 칸 밖으로 넘치지 않도록 합니다. 
• 값
  • normal
    • 단어가 너무 길어 컨테이너를 초과해도 줄바꿈이 발생하지 않으며, 줄바꿈은 일반적인 지점에서만 이뤄집니다.
  • break-word
    • 긴 단어가 컨테이너를 넘지 않도록, 단어 중간에서 줄바꿈을 허용해 임의의 지점에서 줄을 바꿉니다.

white-space

• 정의
  • 요소가 공백 문자를 처리하는 법을 지정합니다.
• 값
  • normal
    • 연속 공백을 하나로 합칩니다.
    • 개행 문자도 다른 공백 문자와 동일하게 처리합니다.
    • 한 줄 이 너무 길어서 넘칠 경우 자동 줄바꿈 됩니다.
  • nowrap
    • 연속 공백을 하나로 합칩니다
    • 줄 바꿈은 <br> 요소에서만 일어납니다.
  • pre
    • 연속 공백을 유지합니다.
    • 줄 바꿈은 개행 문자와 <br> 요소에서만 일어납니다
  • pre-wrap
    • 연속 공백을 유지합니다.
    • 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어 넘칠 경우 자동 줄바꿈 됩니다.
  • pre-line
    • 연속 공백을 하나로 합칩니다.
    • 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동 줄바꿈 됩니다
  • break-spaces
    • 다음 차이점을 제외하면 pre-wrap과 동일합니다
      • 연속 공백이 줄 끝에 위치해도 공간을 차지합니다.
      • 연속 공백 중간과 끝에서도 자동 줄바꿈이 됩니다
      • 유지된 연속 공백은 요소 바깥으로 넘치지 않고, 공간도 차지하므로 박스의 본래 크기(min-content, max-content)에 영향을 줍니다

	개행 문자	스페이스. 탭	자동 줄 바꿈	줄 끝 공백
normal	병합	병합	o	제거
nowrap			x
pre	유지	유지		유지
pre-wrap			o	넘침
pre-line		병합		제거
break-spaces		유지		줄 바꿈

 

말줄임표

한 줄만 나오게

• white-space: nowrap; 속성을 사용하면 텍스트는 한 줄로 출력되며, 넘치는 텍스트는 잘리게 됩니다.
• overflow: hidden;과 text-overflow: ellipsis;를 추가하면 넘친 부분이 잘리고 말줄임표가 표시됩니다.
• 자식 콘텐츠에 의해 부모 요소의 너비가 결정되는 경우에는 다음과 같이 설정합니다.

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

여러줄만 나오게

• 비표준 벤더 프리픽스 방식(-webkit-line-clamp)을 사용해야 합니다

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

• 과거에는 height와 line-height를 활용해 말줄임표 없이 지정된 줄 수만큼 텍스트를 제한하는 방법이 사용되었습니다.

레이아웃 최소화

정의

• 웹 페이지 로드나 동적 콘텐츠 추가 시 화면 요소들이 갑작 이동되는 것을 방지해 사용자 경험을 개선하는 것입니다.

문제점

• 사용자 혼란: 페이지를 읽거나 상호작용할 때 갑작스러운 레이아웃 변화가 혼란을 줄 수 있습니다.
• 잘못된 상호작용: 버튼이나 링크의 이동으로 인해 잘못 클릭할 수 있습니다.
• 불안정한 경험: 페이지가 불안정하게 느껴져 웹사이트에 대한 신뢰를 잃을 수 있습니다.
• 렌더링 시간 증가: 레이아웃 이동 시 브라우저가 페이지를 다시 렌더링해야 하여 성능에 악영향을 미칠 수 있습니다.

최소화 방법

• 고정 크기 설정: 이미지나 비디오에 미리 공간을 할당하여 페이지 레이아웃의 이동을 방지합니다.
• aspect-ratio 속성 사용: 반응형 웹에서 이미지나 비디오의 비율을 설정하여 안정적인 레이아웃을 유지합니다.

position

정의

• 웹 페이지 요소의 배치 방식을 결정합니다.
• top, right, bottom, left 속성을 사용해 요소의 구체적인 위치를 지정할 수 있습니다.

값

• static
  • 기본값 입니다.
  • 문서 흐름에 따라 배치되며, top, right, bottom, left, z-index 속성이 영향을 미치지 않습니다.
• relative
  • 요소를 문서 흐름에 따라 배치하되, top, right, bottom, left 속성으로 위치를 조정할 수 있게 합니다.
  • 요소는 원래 차지하던 공간을 유지하며, 다른 요소에는 영향을 주지 않습니다.
  • z-index가 auto가 아닌 경우 새로운 쌓임 맥락을 생성합니다.
  • 주요 용도는 하위 absolute 요소의 컨테이닝 블록을 만드는 것입니다.
• absolute
  • 요소를 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소를 기준으로 배치합니다.
  • 조상 요소가 없으면 뷰포트를 기준으로 배치됩니다.
  • 요소는 공간을 차지하지 않으며, top, right, bottom, left 속성으로 최종 위치를 결정합니다.
  • z-index가 auto가 아니면 새로운 쌓임 맥락을 생성합니다.
• fixed
  • 요소를 뷰포트를 기준으로 고정하여, 스크롤 시에도 화면의 같은 위치에 유지됩니다.
  • 요소는 문서 흐름에서 제거되며, top, right, bottom, left 속성으로 최종 위치를 설정합니다.
  • z-index로 쌓임 순서를 제어할 수 있습니다.
  • 상위 요소에 transform, perspective, 또는 filter 속성이 적용되면, 요소는 뷰포트 대신 그 조상을 기준으로 배치됩니다
• sticky
  • 요소를 문서 흐름에 따라 배치하되, top, right, bottom, left 속성으로 오프셋을 적용합니다.
  • 오프셋은 다른 요소에 영향을 주지 않으며, 요소는 항상 새로운 쌓임 맥락을 생성합니다.
  • 요소는 가장 가까운 스크롤 가능한 조상 또는 블록 레벨 조상을 기준으로 "스크롤 동작"을 따릅니다.
  • 주의 : 스크롤 가능한 조상이 없다면 "끈끈한" 동작이 보이지 않을 수 있습니다.

배치 유형

• 위치 지정 요소 : position 속성이 relative, absolute, fixed, 또는 sticky인 요소. 즉, static이 아닌 모든 요소입니다.
• 상대 위치 지정 요소 (relative): 원래 위치를 기준으로 top, right, bottom, left로 오프셋을 지정합니다.
• 절대 위치 지정 요소 (absolute, fixed): 컨테이닝 블록의 모서리를 기준으로 top, right, bottom, left로 위치를 설정하며, 바깥 여백을 더할 수 있습니다. 새로운 블록 서식 맥락을 생성합니다.
• 끈끈한 위치 지정 요소 (sticky): 일반적으로 상대 위치로 배치되지만, 설정된 임계값을 넘으면 화면에 고정됩니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.

절대 위치 지정 요소

• height와 width가 auto일 때: 콘텐츠에 맞춰 크기가 조절됩니다.
• top과 bottom 지정하고 height가 auto일 때: 요소는 사용 가능한 수직 공간을 가득 채웁니다.
• left와 right 지정하고 width가 auto일 때: 요소는 사용 가능한 수평 공간을 가득 채웁니다.
• top과 bottom 지정 시: top이 우선 적용됩니다.
• left와 right 지정 시: direction이 ltr (영어, 한국어 등)이면 left가 우선 적용되고, rtl (페르시아어, 아랍어, 히브리어 등) 이면 right가 우선 적용됩니다.

inset

• left, right, top, bottom 속성의 단축 속성으로, 모든 방향에 동일한 값을 지정할 수 있습니다.

Stacking Context

기본 레이어링 규칙 이해하기

• 마크업 순서: HTML 문서에서 등장하는 순서대로 쌓이며, 후속 요소가 이전 요소 위에 표시됩니다.
• position: relative: 마크업 순서와 관계없이 앞으로 나와 보입니다.
• 텍스트와 이미지: 일반적으로 background 속성보다 위에 표시됩니다.

스태킹 컨텍스트

• 정의: 요소가 독립적인 쌓임 맥락을 형성하여 기본 레이어링 규칙과 상관없이 쌓입니다.
• 조건:
  • position: absolute 또는 relative와 z-index가 auto가 아닌 경우
  • position: fixed 또는 sticky
  • Flex Items 중 z-index가 auto가 아닌 경우
  • opacity가 1보다 작은 경우
  • transform 속성이 none이 아닌 경우

😔Lacked 부족한 점

미디어 쿼리를 사용해 브라우저 크기에 따라 화면을 조정할 때, 사용자의 관점에서 어떤 방식이 더 효율적인지 파악하기 어려웠습니다.

🙏🏻Longed For 앞으로 바라는 점

• 사용자 관점에서 개발하기
• 마지막으로 한 번 더 체크하기
• 체력 기르기