[html/css] display, position, ellipsis, transform

📘 display 속성

block은 일반적인 값으로 가로 한 줄을 다 차지한다
inline-block은 컨텐츠를 감싸는 정도의 크기를 가진다
none은 말 그대로 보이지 않게 해준다
flex은 컨텐츠를 빈공간없이 자연스럽게 배치해준다
grid은 grid-template-columns으로 비율을 나눠줄 수 있다
1fr 1fr 1fr는 1 : 1 :1이고 2fr 1fr 1fr는 2 : 1 :1으로 나눠진다

📘 position 속성

static는 요소를 일반적인 문서 흐름에 따라 배치한다
relative는 자기 자신의 위치를 의미하고 top left로 위치를 조정할 수 있다
absolute는 선언된 클래스의 부모 클래스를 기준으로 위치를 조정할 수 있다
sticky는 스크롤을 내려도 그 자리에 고정되도록 해준다

📘 font에 관한 scss

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

말줄임표를 선언할 수 있다
text-overflow: ellipsis; 는 정해진 넓이에서 텍스트가 벗어나면 말줄임표 '...'으로 표현해준다
white-space: nowrap; 는 연속 공백을 하나로 함치고 줄바꿈은
요소에서만 일어난다
overflow:hidden; 는 넘쳐흐르면 안 보이도록 설정한다

letter-spacing: normal;
letter-spacing: -0.3px

글자 간격을 조절한다

line-height: 2.5;
line-height: 3em;

줄 간격을 조절한다

📘 요소의 너비와 높이를 계산하는 방법

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

content-box는 컨텐츠의 테두리와 패딩 마진은 포함하지 않은 콘텐츠 영역만 포함한 것이다
border-box는 테두리까지 포함한 크기를 의미한다

📘 transform

transform: translate(120px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);

transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

translate는 x,y으로 좌표를 미는 것이고 rotate는 콘텐츠를 돌리는 것이다.

참고사이트
⛓️ https://developer.mozilla.org/ko/