목록CSS (4)

web developer

[css] 툴팁(tooltip) 생성하기 / hover, data-tooltip

1. 단순히 마우스 오버하여 색상이 변하도록 하는 기능구현 See the Pen [css] hover 1-1 by 안중현 (@drkdcoaa-the-vuer) on CodePen. 2. data-tooltip 속성을 활용하여 툴팁 기능구현 See the Pen [CSS] hover 1-2 by 안중현 (@drkdcoaa-the-vuer) on CodePen. 3. 아이콘에 마우스 오버 혹은 마우스 클릭 시 툴팁 기능구현 See the Pen Untitled by 안중현 (@drkdcoaa-the-vuer) on CodePen.
CSS 2024. 1. 26. 22:42
[css] 스프라이트 이미지

#header .header_inner .shortcut_list .service_icon::before { content: ""; display: block; position: absolute; top: -2px; left: -3px; background-image: url(https://pm.pstatic.net/resources/asset/sp_main.2b96eea2.png); background-size: 434px 414px; background-position: 0px -128px; background-repeat: no-repeat; width: 54px; height: 54px } #header .header_inner .pay_area .link_pay::after { content: ..
CSS 2023. 11. 2. 14:06
[css] 체크박스와 CSS로 만드는 FAQ 리스트

HTML 질문1 답변1 질문2 답변2 질문3 답변3 질문4 답변4 질문5 답변5 CSS .faq{ list-style: none; margin: 0; padding: 0; } .faq > li{ padding: 8px; box-sizing: border-box; } .faq > li:nth-child(n+2){ border-top: 1px dotted #aaa6; } .faq input { display: none; } /* 질문영역 */ .faq label { display: -webkit-box; color: #000; font-size: 15px; height: 50px margin: 15px 10px 0px 10px; cursor: pointer; } /* 질문영역 check 이전 */ .faq ..
CSS 2022. 3. 24. 11:47
[css] font-weight (글씨 굵기) 속성

font-weight normal bold bolder lighter 100 200 300 400 500 600 700 800 900 See the Pen font-weight by 안중현 (@pogba10) on CodePen. 출처 : https://homzzang.com/b/css-72
CSS 2022. 3. 23. 17:32
이전 Prev 1 Next 다음