css

애니메이션 토글 버튼 만들기 See the Pen Untitled by Give J (@Give-J) on CodePen. 1. HTML 2. CSS .toggle-btn .switch { position: relative; display: inline-block; width: 46px; height: 28px; } .toggle-btn .slider { position: absolute; cursor: pointer; inset: 0px; background-color: rgb(241, 244, 246); transition: all 0.4s ease 0s; border-radius: 34px; } .toggle-btn .slider::before { position: absolute; content:..

텍스트 말줄임 표시하기 1. HTML 가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 가나다라마바사아자차카타파하 2. CSS strong{ text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } text-overflow :ellipsis 텍스트가 컨테이너 넘어갈 때 말줄임표 표시 지정 display: -webkit-box; 줄 수 및 상자방향 제어 -webkit-line-clamp: 2; 표시할 줄의 수 : 2개로 지정 -webkit-box-orient: vertical; 상자가 수직으로 쌓임 overflow: hidden; 지정된 줄 수 이..

Select 박스 화살표 없애기 🩸이슈 발생 select 박스 기본 화살표 없애고 커스텀해보자. 🩹이슈 해결 1.Html 선택해주세요. 옵션1 2. CSS select { -webkit-appearance: none; /* 크롬 화살표 없애기 */ -moz-appearance: none; /* 파이어폭스 화살표 없애기 */ appearance: none; /* 화살표 없애기 */ display: inline-block; border: 1px solid #dbdbdb; width: 100%; } .select_renewal{ background: url(/img/landing/ic-arrow-down-grey-24px.png) no-repeat 95% 50%; border-radius: 6px; } .in..

체크박스 커스텀 하기 , 버튼 눌림 CSS 🩸이슈 발생 체크박스 커스텀해보기. 버튼 모양의 형태로 눌렸을 때에도 CSS 다르게 주어야한다. 🩹이슈 해결 1. Html 01. 선택해주세요. (중복 선택 가능) 1번선택지 2번선택지 3번선택지 * label for= "" 의 값과 input type="checkbox"의 id는 동일해야 한다. 2. CSS input { display: none; } .skinTypeCheck{ height: 280px; width: 470px; } .skinTypeCheck ul{ font-size: 15px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; font-weight: 500; line-heigh..

CSS Flex 속성 사용 방법 🩸이슈 발생 이제 잘 안 쓰인다는 테이블, float 대신 flex 사용해 보기 1. Flex 기본 사용 구조 2. Container 적용 속성 - 배치방향 : flex-direction - 줄 넘김 : flex-wrap - 정렬 : 메인 축 방향 / 수직 축 방향/ 여러 행 정렬 3. 예시 * Grid 속성과의 차이점 Flex Grid 레이아웃 방향 수평 모든 방향 아이템 크기 자유로움 (유동적) 미리 정의됨 (고정적) 특징 레이아웃 변화 없을 때 사용 🩹이슈 해결 1. Flex 사용 기본 구조 : html, css 아이템1 아이템2 아이템3 .container{ display: flex; } 2. Container 적용 속성 1. 배치 방향 : flex-directio..

자바스크립트 툴팁, 툴팁 박스 만들기 🩸이슈 발생 클릭 시 수정/ 삭제 버튼 나타나는 툴팁 박스 뜨게 하기 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen. 💡유의사항 바탕(배경)을 눌러도 툴팁 박스가 닫히도록 구현했다!

자바스크립트 카테고리 기능 만들기 🩸이슈 발생 페이지 추가 안하고 한 페이지 내에서 카테고리 만들어보기. 🩹이슈 해결 See the Pen Untitled by Give J (@Give-J) on CodePen.