CSS/css 검색 결과

해당 글 4건

티스토리 코드블럭 오른쪽 위에 언어 표기하기

저는 간단하게 사용했던 언어와 나중에 해보고싶은 언어 정도만 해놓았는데, 해당 부분은 클래스명을 찾아서 스킨편집 -> html 편집 -> css 에 작성하시면 됩니다. 저랑 스킨이 달라서 적용이 안되는 부분이 있을 수도 있습니다. (hljs는 highlight.js로 들어가는 친구로 생각이 듭니다. 없으시다면 code의 first child에 적용하는 것도 좋은 방법인거 같습니다.) pre:has(code.hljs) { position: relative; } pre code.hljs::before { position: absolute; top: 4px; right: 10px; font-size: 12px; font-weight: 700; color: rgb(111, 111, 111); transition..
CSS/css 2022. 11. 22. 14:20

움직이는 프로그래스-바(Progress-bar) 만들기

저는 Tailwind CSS를 일부 사용하여 제작하였습니다. 대부분 relative/absolute 또는 꾸며주는 css들을 위주로 사용했습니다. 대각선으로 무한하게 움직이는 프로그래스-바 HTML 삽입 미리보기할 수 없는 소스 HTML CSS .progress-bar { min-height: 100%; width: calc(113px * 4); background-color: #1dd3d0; background-image: repeating-linear-gradient( 135deg, transparent, transparent 5px, #fff 5px, #fff 10px ); animation: slide 3s linear infinite; will-change: background-position;..
CSS/css 2022. 5. 17. 13:53

네이밍 케이스(표기법) 정리

kebab-case 케밥-케이스 하이픈(-)으로 단어를 연결하는 표기법 HTML 태그의 id나 class 속성으로 흔히 사용된다. PascalCase 파스칼 케이스 첫 단어를 대문자로 시작하는 표기법 snake_case 스네이크_케이스 언더바(_)로 단어를 연결하는 표기법 camelCase 카멜 케이스 낙타의 등 모양에서 따온 표기법 첫 단어는 소문자로 시작하고, 두 번째 단어부터 대문자로 작성 Hungarian Notaition 헝가리안 표기법 변수 및 함수의 이름 인자 앞에 데이터 타입을 명시하는 표기법 ex) strTest : String타입의 Test 변수명 공통 접두어 데이터 타입 b byte, boolean n int, short i int, short(주로 인덱스로 사용) c int, sho..
CSS/css 2022. 4. 26. 16:32

ul,li 표시자 정리 및 커스텀 하기

list-style 1. default 기본 모양은 동그란 점입니다. HTML 삽입 미리보기할 수 없는 소스 ONE TWO THREE 2. armenian armenian 언어인듯 하네요.. HTML 삽입 미리보기할 수 없는 소스 ONE TWO THREE 3. circle 채우지 않은 원 모양입니다. HTML 삽입 미리보기할 수 없는 소스 ONE TWO THREE 4. decimal 숫자로 표현해줍니다. HTML 삽입 미리보기할 수 없는 소스 ONE TWO THREE 5. decimal-leading-zero 01처럼 0으로 시작하는 숫자로 보여줍니다. HTML 삽입 미리보기할 수 없는 소스 ONE TWO THREE 6. disc 검은색 원 모양입니다. 물론 default와 같습니다. HTML 삽입 미리..
CSS/css 2022. 4. 20. 14:11