22-09-14-TIL

Text

line-height

글자 라인 높이 지정하여 텍스트 라인과 라인 사이 간격 조정

normal : 기본 높이, 폰트 유형에 따라 다름
number : 숫자로 값 지정 (배수)
px, em, % : 고정 값 지정

letter-spacing

글자 사이의 간격 조절

normal: 기본 간격
px, em, rem : 단위만큼 간격 추가

text-align

정렬

left : 왼쪽 정렬 (기본값)
right : 오른쪽 정렬
center : 중앙 정렬
justify : 마지막 라인 제외하고 양쪽 끝으로 정렬

가로 정렬, 세로 정렬
padding, margin 속성 추가하여 사용

블록 레벨 요소, 인라인 요소

한 줄 다 차지 -> display: inline; 사용 가능 (구역 사용 가능)
인라인 요소 -> 넓이 값 설정 불가능, 높이값도 안됨
			패딩은 적용 가능, 마진은 좌,우만
            

vertical-align

인라인 요소의 수직 정렬

baseline : 베이스라인을 부모의 베이스라인에 맞춰 정렬
sub : 부모의 아래첨자 baseline에 맞춰서 정렬
super 
top : 상단의 위치를 감싸고 있는 공간의 상단으로 정렬
text-top : 상단의 위치를 부모 요소 폰트의 상단으로 정렬
bottom : 하단의 위치를 전체 라인의 하단으로 정렬
text-bottom : 하단의 위치를 부모 요소 폰트의 하단으로 정렬
middle : 위치를 부모 베이스라인 + x-height 절반에 해당하는 위치로 정렬 (가운데가 아님!!!!)

이미지 요소에 공간이 남는 이유??

이미지가 기본적으로 인라인 요소이기 때문에 베이스라인이 존재
-> 밑에 공간이 생기므로 vertical-align:top; vertical-align: bottom;으로 공백 제거

text-indent

들여쓰기 공간
텍스트 시작하기 전 빈 공간 설정

mm, cm
px, em, %

text-decoration

텍스트에 붙는 라인을 꾸미는 속성
상,하단에 라인 생성 가능 (종류, 색상)

폰트의 종류에 따라 라인이 잘리는 경우 발생 -> 스타일로 사용 X
주로 <a> 태그 밑줄 같은 스타일 변경

text-overflow

부모 컨테이너 넘어간 컨텐츠를 어떻게 보여줄지 결정하는 속성
clip : 기본 속성 (텍스트 자름)
ellipsis : 잘린 표시를 말줄임 표시로 나타냄

컨테이너에 overflow:hidden, white-space:nowrap 속성 같이 사용하기!!

overflow:hidden -> 넘친 컨텐츠 숨기기
white-space:nowrap -> 넘어가더라도 줄바꿈하지 않음
text-overflow:ellipsis -> 넘친 텍스트 말줄임 처리

position

HTML 태그 위치 지정

position: static

기본 속성

position: relative

상대적인 속성
static (원래 자신이 있어야하는 위치) 에서 변경
위치를 움직이더라도 다른 콘텐츠들 레이아웃에 영향을 미치지 않음

position: absolute

my way
static 제외한 속성값을 가진 가장 가까운 부모 박스 내의 기준으로 위치함

부모 값이 relative 이면 자식은 그 위치를 기준으로 옮겨간다.

position: fixed

스크롤 올리거나 내릴 때, 현재 보고 있는 화면, 뷰포트 기준으로 해당 위치에 계속 존재함

position: sticky

조상에 스크롤이 존재한다면 가장 가까운 부모 요소 콘텐츠에 달라 붙음

z-index

요소들이 겹치는 경우 어떤 요소를 더 위에 나타나게 할지 결정

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

Float

요소를 띄워서 좌,우로 정렬하는 속성을 가짐
그림을 따라 흐르는 텍스트 레이아웃을 구현
블록 박스 요소 정렬하는 기본적인 방법

float:left, float:right

왼쪽, 오른쪽 정렬

블록 박스 태그 vs float 속성 태그

블록 박스 태그 -> 가로폭으로 전체 한 줄 차지하여 다음 요소는 그 밑으로 존재

float: left -> 콘텐츠 크기만큼 차지하고 인라인 요소처럼 한 줄에 나란히 배치가 가능

주의

인라인 요소에 float 적용 -> display 속성 값이 자동으로 block으로 변경됨 -> 인라인 요소도 width, height, margin, padding 자유롭게 사용 가능

자식들이 모두 float 속성을 가질 때 컨테이너 요소가 자신의 높이를 자식들의 높이만큼 반영하지 못함

해결 방법

1. 부모 요소에 overflow 속성 추가
   overflow:hidden
   overflow:scroll
   overflow:visible
   float 적용된 요소를 컨테이너가 인식하도록 만들어줌
2. 부모 요소 높이 값 직접 지정
   변경 될 때마다 수정해줘야해서 비효율적
3. clear 사용
   float 사용된 요소 바로 다음 형제 요소에 clear 속성 사용
   clear:left
   clear:right
   clear:both
   주로 clear:both 사용
4. clear-fix 사용
   ::after 가상요소로 해결