내가 보려고 만든 블로그

툴팁이란? 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과 생각보다 툴팁을 사용할 일이 많은데 따로 js 없이 순수하게 툴팁을 사용해보자 tailwind를 이용한 tooltip 예제 Tooltip! 🤚tailwind에서 부모 hover시 자식 엘리먼트에게 무언가 옵션을 주고 싶다면? 1. 부모요소에 group 클래스를 추가 2. 자식 요소에 group-hover:flex 로 hover 관련 옵션을 추가 이렇게 하면 끗!

input type이 date일때는 placeholder가 적용되지 않는다 그래서 html 태그랑 css에 몇가지 추가로 적어주어야한다! HTML CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } 이렇게 해주면 적용한 플레이스 홀더가 잘 나오는걸 볼 수 있다

.container { display: flex; flex-wrap: nowrap; overflow-x: auto; .item { flex: 0 0 auto; } }

수평 스크롤 만들려고 했는데, 수평스크롤이 아닌 아래로 내려갈때 해결방안!! ul{ display: flex; } li{ margin-left: 8px; width: 77px; height: 77px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 77px; }

html 에서 button css를 변경할때 기본 스타일 지우는 방법!! 항상 검색해서 찾아서 글작성! -webkit-appearance: none; -moz-appearance: none; appearance: none;

특이하게도 mobile에서 스크롤을 출력해달라는 요청을 받았다 그래서 찾아본 모바일에서도 스크롤 출력하기! ::-webkit-scrollbar { -webkit-appearance: none; } ::-webkit-scrollbar:vertical { width: 10px; } ::-webkit-scrollbar:horizontal { height: 10px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }

@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 100; src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); } @font-face { font-family: 'Noto Sans KR DemiLight'; font-style: norma..

내가 원하는 크기 만큼만 출력하고 그 이상 입력되어있을 경우 ...를 출력하고 싶을때 CSS로만 처리해버리기 * 여러줄일때 p{ text-overflow: ellipsis; -webkit-line-clamp: 1; //원하는 라인수 -webkit-box-orient: vertical; display: -webkit-box; white-space: normal; overflow: hidden; line-height: 20px; height: 20px; } #2020/07/31 오타 수정!

그리드 레이아웃이란(Grid Layout)? 페이지를 여러 주요 영역으로 나누거나 크기 및 위치 문서 계층 구조의 관점에서 작성된 content 간 관계 정의하는데 아주 효율적인 레이아웃! 테이블처럼 세로 열과 가로 행을 기준으로 편하게 사용할 수 있다. 하지만 실질적으로 grid를 사용할 일이 없어서 잘 모르고 있다가 여러개의 일렬로 출력되는 데이터들을 2줄씩 출력하고 싶었다. 하지만 테이블을 이용하거나 flex를 이용하는 것보다 grid를 이용해서 하는 것이 더 효율적이라는 것을 발견! 만약 이러한 코드가 있다고 가정을 하자 .content_wrap{ width: 200px; height: fit-content; } .content_wrap .content{ height: 20px; backgroun..

content: ''; position: absolute; top: 50%; left: 50%; margin-top: -0.2rem; display: block; width: 0.35rem; height: 0.7rem; border-style: solid; border-color: var( --theme-color ); border-width: 0 0.2rem 0.2rem 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg);