220915 헷갈렸던 개념 정리 (text-overfow, position속성, z-index, float)

지현·2022년 9월 14일

멋쟁이사자처럼 FE스쿨 3기

목록 보기

7/18

text-overflow

맨날 쓰려고 하면 까먹어서 구글에 검색하게 만드는 놈

text-overflow 속성은 부모 컨테이너를 넘어간 컨텐츠가 어떻게 보여질지 결정하는 속성입니다.

clip : 기본값입니다. 컨테이너의 끝에서 텍스트를 자릅니다.

ellipsis : 잘린 텍스트를 말줄임 표시로 나타냅니다.

💡 text-overflow 속성은 그 자체만으로 넘친 컨텐츠를 만들어서 처리하지 않습니다. 컨테이너에 overflow:hidden, white-space:nowrap 속성이 같이 사용되어야 합니다.
  /* 한 줄 말줄임 코드입니다. */
p {
	width:300px;     /* p 태그의 크기를 제한합니다. */
  	overflow:hidden; /* 요소를 넘어가는 컨텐츠를 숨깁니다. */	
/* 텍스트의 공백을 만났을때 어떻게 처리할지 설정하는 속성입니다. 
  nowrap은 공백을 만나도 줄바꿈하지 않습니다.*/
	white-space:nowrap; 
	text-overflow:ellipsis; 
/* 요소의 크기를 넘친 텍스트를 말줄임 처리합니다. */
}
/* 여러줄 말줄임 코드입니다. */
/* -webkit-box, -webkit-box-orient 속성은 웹표준 속성이 아닙니다. 
앞으로 삭제되거나 기능이 변경될 수 있기 때문에 주의가 필요합니다. */
p {
  overflow: hidden;
	/* 자식요소들의 배치를 지정하는 속성입니다. flex의 예전 버전입니다. */
  display:-webkit-box;
-webkit-line-clamp: 2; /*  블록 컨텐츠의 라인 수를 제한하는 속성입니다.*/
	/* 자식요소들의 배치를 수직으로 만드는 속성입니다. 
  flex-direction의 예전 버전입니다. */
  -webkit-box-orient: vertical;
}
-webkit-line-clamp 요소에 대하여,,, (처음 보는 속성) 왜 text-overflow : ellipsis 라는 말이 없는데 알아서 말줄임표가 될까...? => default가 auto로 되어 있어서 자동으로 적용되는듯, -webkit-line-clamp의 두번째 속성을 none으로 하면 ellipsis가 풀린다

🍊결론적으로 말줄임표 하는 쉬운 방법
width 속성으로 넓이를 제한하고 overflow : hidden 줘서 넘어가는 컨텐츠 숨기기, white-space:nowrap 속성으로 줄바꿈 없애주고 text-overflow:ellipsis 주기

position 속성

항상 쓰면서도 묘하게 헷갈리는 속성녀석,,, 정리해벌여

position : static (기본값)

html에 쓴 태그 순으로 정상적인 흐름(normal flow)에 따라 위치가 지정
left , top , bottom , right 속성 안 먹는다

position : relative

단어 자체의 뜻처럼 '상대적'인 속성

바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적

relative는 자신이 원래 있던 자리를 기억하는 친구입니다. 그래서 position: relative;라는 값을 주고 left : 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 됩니다.

position : absolute

absolute의 특징을 굳이 한 단어로 설명하자면 my way

absolute는 static을 제외한 position 속성값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 됩니다.

마치 relative가 static 속성값이었을 때의 자리를 유념하고 있는 것처럼요.
-포지션이 statics를 제외한 값의 부모를 기준!!

부모가 없으면 html기준!!

position : fixed

스크롤 움직여도 그 자리에 그대로 고정됨 네이버 검색창처럼

position : sticky

sticky(끈끈한, 끈적끈적한) 속성값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라붙는다 like 띠부띠부씰

IE 지원 X

예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <style>
      section {
          height: 1000px;
          border: 3px solid black;
      }
      h2 {
          position: -webkit-sticky;
          position: sticky;
          top: 0px;
          background: greenyellow;
          margin: 0;
      }
  </style>
</head>
<body>
  <h1>sticky test</h1>
  (section>h2{오늘의 메뉴$}+ul>(li>lorem)*3)*3
</body>
</html>

z-index

어떤 요소가 더 위로 나타나게 할지 결정할때 사용

static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮어버린다

부모가 z-index를 높여 자식 앞으로 나올 수 없고 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능

float

분명 배웠는데 flex / grid 배우고 방치해놔서 무족권 다시 정리해야 함

float : left/ right 하면 왼쪽 오른쪽 정렬 된다

자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다

b/c 대부분의 요소들 즉, 블록 레벨 요소와 인라인 요소들은 normal flow 에 따라 레이아웃이 결정되지만 float, position(absolute, fixed) 의 방법을 사용하면 normal flow 에서 벗어난다~

normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못합니다.
==> 레이아웃이 의도치않게 깨져벌임

🌱 해결하는 방법

컨테이너 요소에 overflow:hidden 혹은 overflow:scroll 등 overflow:visible 을 제외한 overflow 속성을 추가

부모요소에 높이값 직접 지정

자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적

clear 속성 사용하기

float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성사용

clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용 , 근데 보통 clear : both 사용한다

clear-fix 방법

CSS의 ::after 가상요소로 해결합니다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법 ==> clear-fix 라고 한다.

이렇게 하면 부모 요소와 이후에 float요소를 따라오는 현상까지 모두 다 해결되므로 display:block;대신 display:table;을 사용하기도 합니다.