CSS
-
[css] animation 재생을 다시 실행할 수 있도록 처리ETC 2024. 8. 11. 18:58
css animation을 특정 이벤트가 발생할 때마다 재생시키고 싶을 때 아래와 같이 작성하는 케이스가 있다. play 위 예제에서 버튼을 누르면 100px * 100px의 빨간색 박스가 아래로 이동했다가 원위치될것이다. 그런데 처음 버튼을 눌렀을 땐 정상동작하는데, 두번째부터는 정상동작하지 않는다. 이 경우 아래와 같이 소스를 수정하면 된다. play 이유는 html 태그의 구조나 다시 랜더링할 속성 변경이 없어서 브라우저의 리플로우(reflow) 및 리페인트(repaint)가 일어나지 않아서인데, offsetWidth과 같이 읽기만해도 리플로우(reflow)를 유발시키는 속성을 호출하여 이를 해결할 수 있다. What forces layout/reflow. ..
-
-
[html] input file 태그를 커스터마이징하려면 label 태그를 이용해야 한다.ETC 2021. 5. 3. 21:48
input 태그는 그 자체로 디자인을 적용하기 까다로운 점이 있다. 따라서 디자인을 적용하고 싶다면 input 태그는 display: none; 으로 숨기고, label 태그를 연결한 뒤, label 태그에 CSS를 적용해야 한다. 아래는 input file tag와 label tag를 이용하여, 128 * 128 크기의 영역을 눌러 file 선택 창을 띄우는 방법 예시이다. css style 이 조금 가미되었지만 크게 중요하진 않다. 클릭하세요. 결과는 아래와 같이 나온다. 클릭하면 OS에 기본제공되는 파일 선택 화면이 표시된다.
-
[CSS] 유리처럼 보이는 CSS 효과를 생성할때 유용한 사이트ETC 2021. 1. 24. 19:34
2020 CSS 디자인 관련 트랜드를 보다가 우연히 찾아보게된 사이트이다. 특정 영역을 유리처럼 보이도록 반투명 바탕색을 입히는데 이를 Glass Morphism style 이라고 부른다. 사이트 링크는 아래와 같다. https://glassmorphism.com/ Glassmorphism - simple CSS generator Glassmorphism UI CSS generator glassmorphism.com 사이트에 접속해보면 해당 페이지 1개 뿐이며, SETTINGS를 조작하면 상단의 디자인과 오른쪽 CSS 코드가 변경되는것을 확인할 수 있다. 원하는 설정을 적용 후 COPY 버튼을 눌러 자신의 프로젝트에서 사용하면 된다.
-
[bootstrap] 부트스트랩을 더 아름답게 (bootswatch.com)ETC 2017. 5. 22. 23:43
URL : https://bootswatch.com/ 17가지의 부트스트랩 테마를 제공하는 사이트. 오픈소스이며 MIT 라이선스이기 때문에 사용 및 수정에 제약이없다. 해당 사이트로 들어가서 아래로 스크롤을 하면 제공하는 테마별 Preview와 Download 버튼이 있다. Download 버튼 옆에 css, less, scss 형식의 부트스트랩 테마 소스가 있으니 원하는 것을 찾아 선택하면 된다. 일부 브라우저에선 다운로드 메뉴가 아닌 파일자체가 브라우저로 열릴 수도 있다. 그땐 당황하지말고 Ctrl+S를 눌러 저장하면 된다. 해당 테마는 CDN 서비스로도 제공한다. CDN 서비스는 아래사이트로 들어가면 확인할 수 있다. CDN 서비스 URL : https://www.bootstrapcdn.com/bo..