개발자의 끄적끄적

[html/css] css 로 대소문자 변경하는 방법 특정 태그안에 있는 영문 텍스트를 전체 대문자 혹은 소문자로 변경해야 된는 경우 아래처럼 css style 옵션중의 하나인 text-transform 을 이용하면 쉽게 변경할 수 있습니다. 우선 아래와 같이 Test 라는 대소문자가 섞여있는 텍스트가 있다고 가정하고, Test 전체 대문자로 변경하고 싶으면 아래와같이 text-transform: uppercase 를 사용하고 Test // result : TEST 전체 소문자로 변경하고 싶으면 아래와같이 text-transform: lowercase 를 사용하면 됩니다. Test // result : test 위 내용처럼 간단하게 text-transform: uppercase text-transform..

[html/css] img 태그 외부링크 금지 이미지 표시 방법 / referrerpolicy no-referrer 설정방법 html 에서 img 태그를 사용하여 외부 사이트에 있는 이미지를 표시하고 싶을때 src 에 외부 링크를 넣습니다. 하지만, 외부 링크 금지 이미지로 설정이 되어 보이지 않는 경우가 있습니다. 그럴때는 img 태그에 아래와 같은 속성을 추가해주면 됩니다. referrerpolicy="no-referrer" 아래는 img 태그에 위 속성을 추가한 예제입니다. 위내용처럼 그냥 img 태그에 referrerpolicy="no-referrer" 라는 속성을 추가하면 됩니다! 참고들 하세요!

[html/css] html 버튼 색상 변경하는 방법 html 혹은 css 에서 특정 버튼의 색생을 변경하고 싶은 경우가 있습니다! 그럴때는 아래처럼 background-color 을 이용하시면 됩니다. 1. css 에서 적용할때 .button { background-color: blue; } 2. html 태그에 직접 style 옵션으로 줄때 style="background-color: blue;" 위 2가지 방법으로 버튼의 배경색을 변화시키면 버튼의 색상이 변하게 됩니다! 참고들 하세요!

[html/css] input 태그 자동완성 기능 해재 방법 html 에서 입력을 받는 input 태그를 사용하여 페이지를 만들고 나면 기존에 입력했던 데이터가 있을시 자동완성 내용이 표시됩니다. 이부분을 방지하기 위해서는 아래처럼 하시면 됩니다. 위 내용 보시면 아시겠지만, autocomplete="off" 라는 속성을 추가하고 저장 및 새로고침 하면 input 태그 클릭시 자동완성 기능이 동작을 안할껍니다! 참고들 하세요!

[html/css] html meta tag utf-8 설정 방법 요즘 대부분의 프로젝트들에서는 기본적으로 페이지 인코딩이 utf-8 로 세팅이 되어져 있지만, 아주 가끔은 euc-kr 같은 인코딩으로 되어 있는 경우가 있습니다. 그럴때 head 에 meta 를 이용하여 utf-8 인코딩임을 설정하는 방법입니다. 1. html5 의 경우 2. xhtml 의 경우 위 2가지 경우를 참고해서 상단 head 태그 안에 추가해주면 됩니다! 참고들 하세요!

[html/css] video tag 자주 쓰이는 옵션 4가지 html 에서 video 태그를 이용하여 영상을 재생할때 여러가지 옵션들을 줄 수 있습니다. 그중에서 자주 쓰이는 옵션들 4가지를 정리해봤습니다. autopaly : 자동 재생 (true, false) controls: 영상 제어 장치 on, off (true, false) loop : 반복 재생 (true, false) muted : 음소거 (true, false) 자동재생여부 컨트롤버튼 노출여부 반복여부 음소거여부 위 4가지는 거의 video 태그를 사용할때마다 쓰일껍니다! 숙지해두시면 도움이 되실껍니다! 여기서 주의사항은! 모바일에서는 자동재생을 설정하기 위해서는 음소거를 true 로 소리가 안나게 설정해야만 자동재생 설정이 가능합니다...

[html/css] how to hide download button in video tag / 비디오 태그 다운로드 버튼 숨기는 방법 html 에서 video 태그를 이용하여 비디오를 재생할때 오른쪽 하단에 다운로드 버튼이 있어서 이것을 숨기고 싶을때가 있습니다. 그럴때, 아래와 같은 옵션을 주면 됩니다. 위 내용 보시면 아시겠지만, controlsList 라는 attr 을 추가하는데 nodownload 라는 값으로 추가하면 다운로드 버튼이 사라진 것을 확인할 수 있습니다! 참고들 하세요!

[html/css] 모바일에서 html a태그 클릭 시 전화거는 방법 모바일 웹에서 a 태그를 클릭했을때 전화를 거는 방법입니다. 전화걸기 위 내용처럼 href 에 tel:전화번호 을 걸어주면 모바일에서 클릭하면 전화를 걸수 있도록 연동이 됩니다! 참고들 하세요!