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

jhyun_k·2022년 9월 14일
0
post-thumbnail

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 속성이 적용된 요소들을 인식하지 못합니다.
      ==> 레이아웃이 의도치않게 깨져벌임

🌱 해결하는 방법

  1. 컨테이너 요소에 overflow:hidden 혹은 overflow:scrolloverflow:visible 을 제외한 overflow 속성을 추가
  2. 부모요소에 높이값 직접 지정
  • 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적
  1. clear 속성 사용하기
  • float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성사용
  • clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용 , 근데 보통 clear : both 사용한다
  1. clear-fix 방법
  • CSS의 ::after 가상요소로 해결합니다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법 ==> clear-fix 라고 한다.
  • 이렇게 하면 부모 요소와 이후에 float요소를 따라오는 현상까지 모두 다 해결되므로 display:block;대신 display:table;을 사용하기도 합니다.

0개의 댓글