내가 보려고 만든 블로그

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

스크롤시 아래서 위로 올라오는 애니메이션 처리하고 싶을때! 간단하게 설명하면 스크롤되는 높이값을 측정해서 그 높이에 있는 element에 active class를 추가하여 처리해주면된다! 코드는 아래와 같다 1. html 코드 Caption Section Text Random text Section Text Random text Section Text Random text 2. css .reveal{ position: relative; transform: translateY(150px); opacity: 0; transition: 2s all ease; } .reveal.active{ transform: translateY(0); opacity: 1; } 3. js window.addEventListen..

input box를 쓰다보면 clear 버튼을 사용해야할 경우가 있다. 따로 만들어도 되지만, 길이 체크 및 focus 체크까지 할게 많은데, 기본기능에 있으면 기본을 사용하는게 더 효율적이기 때문에 찾아보았다! 우선 input type은 search 로 사용하면 자동으로 만들어지는데, 기본 디자인은 이쁘지 않아서 수정해야할 경우가 대다수이다! 그래서 사용할 css는 input[type=search]::-webkit-search-cancel-button{ background: #000; } 으로 원하는 대로 변경해서 사용하면 된다. * 지금은 잘 사용하지는 않지만, ie의 경우 input[type=search] input[type=search]::-ms-clear 로 적용하면 된다!*

내가 원하는 크기 만큼만 출력하고 그 이상 입력되어있을 경우 ...를 출력하고 싶을때 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..

select 박스를 사용하려고 할때 커스텀하는게 귀찮아졌다 그래서 div로 select 박스를 만들고 있는데 나중에 까먹을까봐 미리미리 기록하기 제목 제목 내용 글쓴이 .select{ width: fit-content; background: #FFFFFF url("../public/img/icon/select-box-row.png") no-repeat scroll; border: 1px solid #b8b8b8; overflow: hidden; font-size: 18px; color: #666666; padding: 10px 0 10px 18px; width: 155px; } .select-ul{ list-style-type: none; overflow-x: hidden; overflow-y: auto..

기본적인 radio 박스에서 벗어나 내가 원하는 css를 적용하기 위한 방법이다. input[type=radio]{ background-color: #FFFF; -webkit-appearance: none; -moz-appearance: none; margin-left: 16px; border: 1px solid rgb(216, 216, 216); width: 14px; height: 14px; border-radius: 100%; } input[type=radio]:checked{ background-color: rgb(25, 118, 248); -webkit-appearance: none; -moz-appearance: none; margin-left: 16px; border: none; width:..

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성! box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none: 그림자 제거 x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수) blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려집니다. spread : 양수면 그림자를 확장하고, 음수면 축소합니다. color : 그림자 색을 정합니다. inset : 그림자를 요소의 안쪽에 만듭니다. initial : 기본값으로 설정..