개발자의 끄적끄적

[html/css] css px 를 vw 로 변환 해주는 사이트 반응형 사이트를 제작하다보면 px 단위를 vw 로 변경해야 하는 경우가 있습니다. 그럴때 자동으로 변환해주는 사이트가 있어서 공유해보려고 합니다. 바로 vw 계산기 인데요 css 소스를 입력하면 변환된 css 소스를 반환해줍니다! 참고들 하세요! vw 계산기 링크 : http://publishing.kr/vw/ VW 계산기 publishing.kr

[html/css] css input textarea outline 숨기는 방법 크롬 브라우저에서 input 이나 textarea 태그를 사용하다 보면 노란색 테두리가 나타나는 경우가 있습니다. 그게 불편하다면 없앨 수 있는데요. 바로 아래 css 를 추가하시면 해당 태두리를 없앨 수 있습니다! input { outline-style: none; } textarea { outline-style: none; } 참고들 하세요!

[html/css] css text-overflow example / css 말줄임표 표시 방법 html 에서 글자수가 길어서 뒤에 말줄임표를 붙여야 하는경우 아래 나와있는 css 속성을 추가하시면 말줄임표 추가가 가능합니다! text-overflow: ellipsis; 참고들 하세요!

[html/css] css prevent mouse event example / css 마우스 이벤트 방지 설정하는 방법 html 에서 특정 태그에 마우스 이벤트가 동작하지 않도록 설정을 해야 하는 경우가 있습니다. 강제로 동작을 방지하는 경우일 텐데요. 그럴때는 아래 css 속성을 해당 태그에 추가하시면 됩니다. style='pointer-events: none' 환경에 따라 100프로 동작하지 않는 경우도 있다고 하니 참고들 하세요!

[html/css] html input autocomplete off example / html input 자동완성 방지 설정방법 html input 태그에 데이터를 입력하려고 클릭하면 자동완성기능때문에 이전에 입력했던 내용들이 나와서 불편한 경우가 있습니다! 그럴때는 아래 속성을 input 태그에 추가하시면 됩니다. autocomplete="off" 위 속성이 추가된 input 태그는 아래와 같이 구성되게 됩니다! 참고들 하세요!

[html/css] html 버튼 submit 막는 방법 html 에서 button 태그를 사용하다 보면 특정 상황에서는 버튼을 누르면 새로고침이 된다든가 하는 현상이 발생하곤 합니다. 바로 버튼의 submit 동작 때문인데요! 그럴때는 아래 속성을 버튼 태그에 추가하시면 됩니다. type="button" 위 속성을 추가한 버튼은 아래와 같이 구성이 됩니다! 버튼명 참고들 하세요!

[html/css] css hide scroll bar example / css 스크롤바 숨기는 방법 특정영역에서 상하 스크롤은 동작하지만, 스크롤바는 숨기고 싶은 경우가 있습니다. 그럴때는 아래와 같이 하시면 됩니다. 예를들어 scroll_div 라는 아이디를 가지는 div 가 있다고 가정하고, 테스트 영역입니다. 위 div 영역의 스크롤바를 숨기고 싶으면 아래와 같이 css 를 추가하시면 됩니다. #scroll_div { -ms-overflow-style: none; /* Explorer */ scrollbar-width: none; /* Firefox */ } #scroll_div::-webkit-scrollbar { display: none; /* Chrome */ } 위 내용대로 css 를 추가..

[html/css] html 이미지 태그 alt 속성 줄바꿈 적용하는 방법 html 에서 이미지 같은 태그에 설명을 표시하기 위해서 alt 속성을 추가합니다. 그 중에서 여러줄로 나타내고 싶을때 줄바꿈을 해주어야 합니다. 그럴때는 아래 나와있는 를 이용하시면 됩니다. 아래 나와 있는 예제와 같이 alt 속성에 입력된 텍스트 중 줄바꿈하고 싶은 자리에 위에 나와있는 를 추가하시면 됩니다! 참고들 하세요!