1. 태그를 쓸 때 : border-collapse: collapse; HTML 내용1 내용2 내용3 내용4 내용5 내용6 적용 전 CSS td { padding:5px; border:1px solid #000; } 적용 후 CSS td { padding:5px; border:1px solid #000; } table { border-collapse: collapse; } border-collapse: collapse; 은 table 태그에 적용하면 된다. 2. display: table태그를 쓸 때 : border-collapse: collapse; HTML 박스1 박스2 박스3 CSS .wrap { display: table; border-collapse: collapse; } .box { paddi..

긴 문장을 말줄임표로 처리하는 속성은 text-overflow: ellpsis와 -webkit-line-clamp:숫자 가 있다. HTML 다른 삶은 없다고 말하는 이에게 다른 삶이 있다고 말해서는 안 된다. 어떤 절망에는 다른 삶을 꺼낼 수조차 없어야 한다. 잦아드는 불씨처럼 타들어가는 숨이 마침내 다 꺼질 때까지. 형체를 간직하고 있지만 이내 주저앉아 바스러질 때까지. 그대로 내버려두는 수밖에 없다. 그러니 절망하지 않는 사람이 절망하는 사람에게 할 수 있는 것은 없다. 한 줄로 표시하기 CSS .word { display: block; width: 500px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; border: 1px so..

1) img에 svg 파일을 넣는다 2) 원하는 색상의 hex값을 아래 컨버터 사이트에 넣고 filter값을 얻는다 https://angel-rs.github.io/css-color-filter-generator/ CSS Color Filter Generator RGB rgb(0, 0, 0) Copy HEX #000 Copy angel-rs.github.io 3) css에 filter값을 입력한다 (hover, color 등) img:hover { filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(2680%) hue-rotate(262deg) brightness(87%) contrast(96%); }

input#birth::-webkit-calendar-picker-indicator { position: absolute; right: 20px; background: url(../image/calendar.png); background-repeat: no-repeat; } background에 원하는 이미지를 삽입해서 변경한다 position으로 원하는 위치에 배치할 수 있다 결과물

HTML 클릭하면 display:none을 block로 변경 display:none/block 처리 될 영역 CSS .hidden { display: none; } .appear { animation: fade-in 1s; animation-fill-mode: forwards; display: block; } .disappear { animation: fade-out 1s; animation-fill-mode: forwards; } @keyframes fade-in { from {opacity: 0;} to {opacity: 1;} } @keyframes fade-out { from {opacity: 1;} to {opacity: 0;} } JS const button = document.querySel..

방법1) CSS body { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } 부분 영역만 설정하고 싶은 경우에는 class로 지정하여 해당 영역에 class를 부여하면 된다. 방법1의 경우 드래그가 안되는 것 처럼 보이지만 복사, 붙여넣기를 하면 복사가 된다. 방법2 )HTML, JS 내용내용 방법2의 경우 body에 넣으면 input, textarea등의 텍스트 박스에 입력이 되지 않으므로 드래그, 우클릭 방지를 원하는 영역에 넣어주어야 한다.