TIL 01 | html, css, gh-pages

📌 CSS로 splash screen 만들기

CSS 애니메이션으로는 element를 완전히 제거할 수 없다.

그래서 CSS로 SPLASH SCREEN을 만들기 위해서, animation에 forwards 속성을 추가하여 마지막 속성 값(final property value)을 마지막 키프레임으로 정하고 애니메이션이 끝나도 유지되도록 시킨다.

@keyframes animation_name {
from {
transform: translateY(90deg);
 }
to {
transform: none;
 }
}

div{
animation: animation_name 1s ease-in-out forwards;
}

다만 element가 완전히 없어지는 것이 아니기 때문에 visibility : hidden;을 추가하여 마우스 클릭을 무시하게 한다. 요소를 숨길 때 쓰면 안되는 방법이고, 요소를 완벽히 숨기려면 js를 사용해야 한다.

+display:none 눈에 보이는 화면만 없앰
+visibility:hidden 기능까지 숨김. 마우스로부터 숨길 수 있어도 완전히 숨기지는 못함

📌 focus-within

이 property는 내부적으로 focus된 element가 있는지 알려준다.

div:focus-within {
}

div 내부에 어떤 element가 focus 되어있다면 이라는 뜻이다.

📌 gh-pages 쉽게 이용하기

모든 수정과 commit은 master branch에서.

Github Desktop을 이용하여 쉽게 gh-pages를 이용하는 방법이다.

• 준비사항

gh-pages라는 새로운 branch를 만들어 준다. 글자 토씨 하나라도 틀리면 안된다.

이 말고는 없다. 아래와 같은 순서를 잘 지키고, 경로가 깃허브와 다르지 않고, 특수문자로 시작되는 파일 없고 그러면 웬만하면 오류가 안날 것이다.

1. Github Desktop에서 master branch가 선택된 상태로 코드 수정
2. master branch에서 commit, origin push
3. branch - gh-pages 선택
4. 상단 바 branch - update from master 클릭
5. gh-pages push
6. githup 페이지 deployment 링크 클릭

무료이다 보니까 바로바로 링크가 업데이트 되지 않는다. 또한 링크가 업데이트 되었어도, 수정 내용이 바로 반영되지 않고 조금 기다려야 반영되는 경우가 있다. 나는 처음에 내가 뭐 잘못한 줄 알고 이것저것 다 건드렸었는데 시간 지나니까 제대로 다 반영되어 있었다는 슬픈 이야기😥

📌 z-index

z-index는 레이어의 순서를 나타낸다. display나 position이 있으면 레이어를 갖게 된 것이다. (기존의 것과는 다른 새로운 레이어)

z-index의 기본값은 0이며, 1,2,3, ... 으로 나타낼 수 있다.

z-index는 absolute position이나 fixed position에 대해서 설정할수 있다.

( 고정하는 요소가 생기면 다른 element와 다른 레이어를 갖게 되며, 이에 따라서 magin 값으로 조정을 해줘야 하는 필요도 생긴다. )