(김유선) 애플티비 사이트 퍼블리싱하기 (1일차)

요거 퍼블리싱하려고 한다 ㅎㅎ

https://www.apple.com/apple-tv-4k/

Apple TV 4K

 

 

 

근데 하다가 뤼튼 도움으로 되게 신기한 걸 발견했다!!

 

background-color : transparent라는 건데, Apple TV 4K 줄의 z-index가 더 위에 있는데 뒤에 있는 요소가 보인다!

내가 볼 때는 opacity 0을 준 것과 같아 보이는데 되게 신기했다. 

https://computer-science-student.tistory.com/397

찾아보니까 진짜 투명으로 만들어주는 거였다.

뤼튼~~ 너 정말 유용하다? ^^

 

위에 투명도를 어느정도 주면 반투명해지지만 번지지는 않는다.

근데 공식에서는 뿌옇게 비쳐보임

 

이거 한번 뭔지 찾아봐야지 ㅎㅎ

 

backdrop-filter: blur(20px);

라는 것인데 배경 색을 흐리게 해준다.

동영상 위에 로고가 있어서 로고 따오려고 마우스를 대봤더니 이미지가 figure라는 태그로 감싸져있었다.

https://codingeverybody.kr/html-figure-%ED%83%9C%EA%B7%B8/

HTML <figure> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

진짜 신기한 게 많네... 아직 내가 모르는 것도 있는가보다.

아직은 쓸 일 잘 없을 것 같음!

 

letter-spacing: -3px;

 

line-height: 1;

letter-spacing는 자간이다.

이걸 설정 안하고 하니까 영문자 사이가 너무 비어보여서 자간을 살짝 건드렸다.

이거 설정할 때 단위는 px다. 걍 숫자만 적으면 변경이 안됨

line-height는 줄 높이다.

행간 설정할 때 쓰면 좋을 듯!~ 기본은 1.2라고 한다. 얘는 걍 숫자만 적으면 됨