CSS 정리2

1) inline-block

span 태그와 같이 display 속성이 기본적으로 inline인 element는 너비와 높이를 지정하더라도 무시된다.

inline 속성의 특징을 가지면서도 너비와 높이를 지정할 수 있도록 하려면 display 속성을 inline-block으로 지정하면 된다.

inline은 내용물이 없으면 안보이지만 inline-block은 없어도 보인다.

2) 자주 쓰는 button 기본 설정

button,button:focus{
    outline: none;
    border: none;
    cursor: pointer;
}

3) 특정줄 수로 텍스트를 ...로 표현하며 자르는 방법 (with JS)

// main.js
const moreBtn= document.querySelector('.moreBtn');
const title= document.querySelector('.title');

moreBtn.addEventListener('click',()=>{
	moreBtn.classList.toggle('clicked');
  	title.classList.toggle('clamp');
});

// style.css
.title.clamp{
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2; // 2줄로 잘리게 한다!
	-webkit-box-orient: vertical;
}

'webkit-line clamp'라는 CSS 속성을 통해 블록 컨테이너의 내용을 지정된 줄 수로 제한할 수 있다.

이는 오직 아래의 조합으로만 작동한다.

• display:webkit-box; webkit-box-orient:vertical;
• display: webkit-inline-box; webkit-box-orient:vertical;

대부분의 경우 overflow:hidden;으로 설정하려고 한다.
그렇지 않으면 내용은 잘리지 않지만 줄임표는 지정된 줄 수 이후에도 계속 표시된다.

anchor element에 적용되면 반드시 끝부분이 아니라 텍스트 중간에서 잘릴 수 있다.

4) Background

색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한번에 지정 가능

- background-attachment:

배경을 뷰포트 내에서 고정할지, 컨테이닝 블록과 함께 스크롤할지 지정

• scroll;
  배경을 요소 자체에 고정. 요소에 스크롤 존재해도 배경은 함께 스크롤X
• fixed;
  배경을 뷰포트에 고정. 요소에 스크롤 존재해도 배경 함께 스크롤X
• local;
  배경을 요소 콘텐츠에 고정. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤
  

- background-image:

요소의 배경 이미지를 한 개나 여러 개를 지정한다. (쉼표로 연결)
맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼)위치한다.
border은 배경 이미지 위에, background-color는 밑에 그려진다.

• url('이미지 경로');

❗ 참고: 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 background-color는 지정해야 한다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문이다.

background-origin:

배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백내부 중 하나로 지정
attachment가 fixed인 경우 무시된다.

• border-box;
• padding-box;
• content-box;

- background-position:

각 배경 이미지의 초기 위치를 설정한다. 위치는 background-origin에 의해 설정된 position 레이어에 상대적이다.

• top;
• left;
• center;
• 25% 75%;
• bottom 50px right 100px;

- background-size:

• background-size 속성은 다음 방법 중 하나로 지정할 수 있습니다.

1. contain 또는 cover 키워드 값 사용.
2. 너비 값만 사용. 높이는 자동으로 auto가 됩니다. (단일 값 구문)
3. 너비와 높이 값을 모두 사용. 첫 번째 값은 너비로, 두 번째 값은 높이를 설정합니다. 각 값은 length, percentage, *auto를 사용할 수 있습니다. (두 개 값 구문)
   *auto: 배경 이미지의 원본 크기를 유지.

• contain;
  이미지가 잘리거나 찌글지지 않는 한도 내에서 제일 크게 설정
• cover;
  이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정 (일부 잘릴 수 있음
  

❗ shorthand로 한 줄에 작성시 bg-size는 position 바로 뒤에만 위치할 수 있으며 '/'문자로 구분해야 한다. (ex. center/80%)

- background-repeat:

한 개 값 구문은 두 개 값 구문의 단축 형태
(ex. repeat-x = repeat no-repeat)

• repeat-x;
• repeat-y;
• repeat;
  요소의 배경 영역을 채울 때까지 이미지를 반복
• space;
  요소가 잘리지 않을 만큼 이미지 반복
• round;
  가용 영역이 늘어나면 반복 이미지도 늘어나 여백 남기지 않음
• no-repeat;

5) Centering Tricks

1. flexbox이면, → 중심축 정렬: justify-content, 반대축 정렬: align-items 이용

2. flexbox가 아니면,

• margin:auto (수평 정렬)
  : 요소가 block level일 경우 한 줄에 하나씩만 들어가도록 자동적으로 margin이 오른쪽에 들어가도록 되어있는데, margin: auto를 사용하면 margin을 골고루 넣어주게 됨 → 다만 수평적으로만 중간 정렬 가능

• text-align:center (수평 정렬)
  : 텍스트 외에도 정렬가능, div같이 block level이어서 margin이 들어 있는 경우 정상 작동 X → margin:auto로 해야지만 적용가능

inline-block인 요소들은 정렬 가능

• transform:translate(50%, 50%)
  : x축에서 50%, y축에서 50% 이동하여 중간정렬 가능

• text-align:center + line-height:부모높이px(%로 하면 font-size를 지정하게 되어 안됨) (수직/수평 정렬)
  : line-height은 원래 폰트패밀리에 지정되어있는데 이를 임의적으로 바꿔주는 것임, 💥내용물이 한줄일 경우만 사용

6) Transform:translateX(100px) vs. position:relative; left: 100px;

1. position은 CSS2 버전, translate은 css3에 추가된 최신버전이다.
2. translate이 성능이 더 좋다
   (애니메이션이나 화면에 업데이트하는 용도로 쓸 때 차이가 큼)
3. 🌟중요🌟 position의 left:50%는 부모너비의 반이지만, translateX(50%)는 요소 자체 너비의 반이다.

7) display:none일 때 애니메이션 적용

display가 none으로 지정되어 있을때는 요소가 실제로 페이지상에 없기 때문에 애니매이션이 적용되지 않는다. 애니매이션은 요소가 (DOM요소) 페이지 상에 있는 상태에서만 색상, 위치, 회전등 속성변경이 적용된다.

따라서, display: none 대신에 opacity: 0 + pointer-events: none 조합으로 안보이게 하거나 visibility: hidden을 이용하자.

❗ 참고 자료
https://developer.mozilla.org/ko/docs/Web/CSS/background#attachment
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w