만들고, 퍼오고, 공유하고

<button type="button"> button 태그는 기본적으로 submit속성을 가지고 있음

이것과 이것은 같음 타입 명시가 없다면 기본적으로 'submit' 처리 submit을 허용하지 않기 위해 type 지정이 필요함 button 태그를 사용하는 이유는 의 경우 자식요소를 가질수 없기 때문에 아래 처럼 사용하기 위함(아이콘도 넣을 수 있고..)서 예쁜 버튼

textarea 에서 줄바꿈 적용

textarea에 인라인으로 내용을 입력할 경우 줄바꿈 처리 입력

모바일 사파리에 비디오(MP4) 실행 안되는 경우 (또는 인라인 재생안되는 경우)

playsinline 추가 단, 아이폰 저전력 모드에서는 안됨

placeholder 텍스트 컬러 스타일

input::placeholder {color:#e8e8e8;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#e8e8e8;} textarea::placeholder {color:#e8e8e8;} textarea::-webkit-input-placeholder {color:#e8e8e8;} textarea:-ms-input-placeholder {color:#e8e8e8;}

미디어쿼리 샘플

3개의 반응형 분기점 PC : 1024px ~ 테블릿 가로, 태블릿 세로 : 768px ~ 1023px 모바일 가로, 모바일 세로 : ~ 768px /* PC (해상도 1024px)*/ @media all and (min-width:1024px) { ... } /* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ @media all and (max-width:767px) { ... } 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모..

a 태그

a:link{color:#404040; text-decoration:none;} a:visited{color:#404040; text-decoration:none;} a:hover{color: #404040; text-decoration:none;} a:active{color: #404040; text-decoration:none;}

이미지 사이즈 축소시 흐릿해지는 현상 수정 (CSS)

style="image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden;" 참조 https://lpla.tistory.com/139

셀렉트 박스 화살표

select{ padding:8px 10px; color:#000; font-size:20px; border:1px solid #707070; width:100% !important; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:url('/drop_down_btn.png') no-repeat 97% 50%/15px auto; } select::-ms-expand{display:none;/*for IE10,11*/} 항목

404.html 에러 샘플 파일

★ CSS 로딩, 로더 (이미지X) ★