개발자의 끄적끄적

[html/css] IE img label for 클릭 안될때 처리방법 보통 아래 코드 같은 경우 이미지를 클릭하면 체크박스에 체크가 되지만 IE의 경우 정상적으로 동작하지 않습니다. 체크체크 ​ 체크체크 해결책은 아래 css 를 적용하면 됩니다. label { display: inline-block; } label img { pointer-events: none; } 출처: https://goni9071.tistory.com/363 [고니의꿈]

[html/css] 버튼 정렬 방법 추가적으로 float 속성을 찾아서 좌 / 우 정렬을 수정할 수 있습니다!! 참고들 하세요!!

[HTML] prefers-color-scheme . html에 다크모드에 맞춰서 스타일 변경하기 [펌] 요즘 다음 뉴스도 적용되었길레 조사해봤음. prefers-color-scheme 값은 light와 dark 만 가질 수 있다. 나머지 다른 값들은 무시됨. chrome 76부터 지원 사파리 12.1 부터 지원 IOS 사파리 13 부터 지원 [ ▼ 참고 Source ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 .themed { display: block; width: 10em; height: 10em; background: black; color: white; } /* light 모드일 때의 스타일 재선언 */ @media (prefers-colo..

[css] IE에서 Input 태그안에 있는 Clear Button 지우는 법 [펌] 익스플로러(IE)에서 input 태그의 text 속성을 가지는 입력폼을 사용하는 경우 구현된 UI의 추우측에서는 자동으로 X버튼이 생성됩니다. 이 X버튼은 텍스트를 모두 삭제하는 버튼으로 이버튼을 제거하거나 스타일을 변경하는 방법을 알아보고자 합니다. 어떻게해야할까요? # IE에서 input 태그 스타일 변경하기 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 이때 아래와 같이 해당 엘리먼트를 선택하여 사용할 수 있습니다. input::-ms-clear { } 그렇다면 만약 입력폼에서 실제로 어떻게 사용되는지 간단한 예제를 사용해보겠습니다. ! IE에 적용하는 input 태그 스타..

[css] 단위별 폰트크기(px, em, %, pt) CSS 단위별 폰트크기(px, em, %, pt) 단위별 폰트의 특징 pt : points(포인트) - 1포인트는 0.72인치 px : pixels(픽셀) - 화면 해상도에 대한 상대크기 %, em - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기 대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 입니다. Pixel to Em Converte 및 자세한 내용은 http://chongmoa.com/extopxViewer 참조 PixelsEMsPercentPoints16px1.000em100.0%12pt 6px 0.375em 37.5% 5pt 7px 0.438em 43.8% 5pt 8px 0.500em..

[css] border-radius 테두리(border)의 모서리를 둥글게 [펌] CSS3 border-radius 테두리(border)의 모서리를 둥글게 border-radius 는 IE9 이상, Firefox, Chrome, Safari, Opera 에서 지원합니다. IE9 이하에서는 지원되지 않습니다. border-radius 는 시계방향으로 속성값을 정하시면됩니다. border-radius: 좌상단 우상단 우하단 좌하단 순서대로! border-top-left-radius: 5px; /* 좌상단 */ border-top-right-radius: 5px; /* 우상단 */ border-bottom-right-radius: 5px;/* 우하단 */ border-bottom-left-radius: 5px..

[CSS] 텍스트 줄바꿈 처리 word-break, white-space [펌] 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단..

[html / css] CSS 줄바꿈 금지 - white-space:nowrap; [펌] 줄바꿈이 되지않은 것(뚫고 나오네요) 현재 시각은 2015년 1월 25일 일요일 오후 10시 45분 입니다. ^^* 줄바꿈이 된것 현재 시각은 2015년 1월 25일 일요일 오후 10시 45분 입니다. ^^* 출처 : http://superkts.pe.kr/helper/view.php?seq=V&seq=390