개발자의 끄적끄적

[html/css] css 문자열 ... 처리하는 방법 html 에서 특정 div 같은 영역에 적혀있는 텍스트가 많아서 영역을 벗어나서 표기되거나 하는 경우가 있습니다. 그럴때는 영역을 벗어나는 데이터는 ... 으로 표기하고 싶을수도 있는데요. 해당영역에 아래와 같이 스타일을 추가해주시면 됩니다! text-overflow:ellipsis;white-space:nowrap;overflow:hidden; 참고들 하세요!

[html/css] html a tag text-decoration-line example / html a태그 밑줄 없애는 방법 html 에서 a태그를 사용하여 링크를 설정하면 링크가 걸린 a태그 안에 내용에 밑줄이 생기는것을 확인할 수 있습니다. 그럴때 밑줄을 제거하는 방법을 공유하려고 합니다! text-decoration-line: none; 위에 나온 내용을 밑줄을 없애고자 하는 a 태그의 css style 로 추가해주면 됩니다. 참고들 하세요!

[html/css] css border-radius example / css로 특정 영역 동그랗게 만드는 방법 html 에서 이미지나 특정영역을 동그란 원과 같이 만들어야 하는경우에는 아래 나와있는 border 옵션을 해당 태그에 추가해주면 됩니다! border-radius: 70%; 만약 동그란 원이 아닌 꼭지점 4개만 둥그런모양으로 하고 싶은경우에는 아래 처럼 border-radius 옵션을 30%로 설정하면 됩니다! border-radius: 30%; 참고들하세요!

[html/css] css hide scroll bar example / css 로 스크롤 바 숨기는 방법 html 에서 특정영역에 생성되는 스크롤바를 노출시키고 싶지 않은 경우에는 아래와 같이 css 를 이용하면 스크롤바를 노출하지 않고 스크롤 기능은 유지할 수 있습니다. 아래와 같이 main 이라는 클래스 명을 가지는 div 가 있다고 가정하고, IE 이거나 Firefox 브라우저의 경우는 아래와 같이, .main { -ms-overflow-style: none; scrollbar-width: none; } Chrome 이나 Safari 브라우저의 경우는 아래와 같이 .main::-webkit-scrollbar { display: none; } css 를 적용하시면 됩니다! 참고들 하세요!

[html/css] html video tag border none example / html 비디오 태그 테두리 제거하는 방법 html 에서 video 태그를 사용하여 영상을 재생하는 코드를 다루다 보면 영상이 재생되었을때 비디오 테두리 영역이 생기는 현상이 있습니다! 그럴때는 아래와 같이 css 를 이용하시면 됩니다! 우선 video_player 라는 아이디를 가지는 video 태그가 있다고 가정하고, 아래와 같이 css 옵션으로 outline 와 border 를 none 으로 설정하시면 됩니다! #video_player { outline: none; border: none; } 참고들 하세요!

[html/css] css cursor pointer example / css 마우스 오버시 손가락 모양 설정 방법 css 에서 마우스를 특정 영역에 가지고 갔을때, 손가락 모양으로 변하게 처리해야 하는 경우가 있습니다. 그럴때는 아래 스타일 속성을 이용하시면 됩니다! cursor:pointer 예를들어 div 에 마우스를 가지고 갔을때 손가락 모양으로 변경되는 것을 지정하고 싶으면 아래와 같이 style 을 추가하시면 됩니다! 참고들 하세요!

[html/css] html span tag width example / html span 태그 너비값 지정하는 방법 html 에서 span 태그를 사용하여 영역을 만들때 내용이 길던 짧던 너비값을 지정해서 동일하게 사용하고 싶은 경우가 있습니다! width:100px 로 하면 100px 너비가 유지될거 같지만, 그렇지 않습니다! 그럴때는 아래와 같이 하시면 됩니다! abcde 위 내용을 보시면 아시겠지만, style 에 inline-block 속성을 추가하면 정상적으로 반영됩니다! span 태그의 높이나 너비값을 지정하기 위해서는 block 요소로 만들어야 된다는점! 참고들 하세요!

[html/css] 이미지 드래그 잔상방지 방법 / 드래그 고스트 이미지 방지 방법 홈페이지에서 이미지영역을 클릭후 드래그하면 고스트이미지라고 하는 잔상이 마우스를 따라 움직이는것을 확인할 수 있습니다. 그걸 방지하기위해서는 css 옵션을 추가하면 됩니다. 우선 아래와 같은 img 태그가 있다고 가정하고 위 이미지를 드래그 잔상 방지를 하기위해서 아래와 같은 style 옵션을 줍니다. 그리고 테스트 해보면 잔상이 안뜨는것을 확인할 수 있습니다. 브라우저나 환경에 따라 다른경우가 있다고 하는 분들도 계시는데요! 저는 일단 크롬버전에서는 정상동작하는것으로 확인했습니다! 참고들 하세요!