어제 오늘 내일

마우스 오버 시, 이미지 어둡게 하기 - :hover 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transition 1. 마우스 오버 시, 이미지 어둡게 하기 - :hover :hover 가상 클래스인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. filter: brightness() filter 속성에 적용되는 brightness() 함수는 대상 요소의 밝기를 조정합니다. brightness(1)은 원본 밝기이고, 숫자가 작아질수록 어둡고, 클수록 밝습니다. 자세한 설명은 지난 포스팅을 참조하세요. [HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient) 예제 my_mouseover.html ..

이미지를 어둡게 하기 filter: brightness() opacity, background-color linear-gradient() 1. filter: brightness() CSS의 filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절합니다. 허용값 숫자 1은 100%입니다. 퍼센트 100% 미만은 이미지를 어둡게 합니다. 100% 초과는 이미지를 밝게 합니다. 0%는 이미지를 검은색으로 만듭니다. brightness(100%); /* 원본 이미지 */ brightness(0%); /* 검은색 */ brightness(200%); /* 밝기 2배 */ brightness(0.4); /* 40% */ brightness() 예제 my_brightness.html bright..

이미지 투명도 지정하기 이미지의 투명도를 조절하기 위해서는 CSS의 opacity 속성을 사용합니다. opacity opacity는 불투명도라는 뜻입니다. 따라서 opcity는 대상 객체가 얼마나 불투명한지를 나타냅니다. 허용값 0.0 ~ 1.0 0% ~ 100% 숫자가 클수록 불투명하고, 숫자가 작을 수록 투명합니다. opacity 예제 my_image.html opacity 1.0 opacity 0.5 opacity 0.0 my_image.css div { width: 300px; float: left; border: 1px solid; } img { width: 300px; } .my_img1 { opacity: 1.0; } .my_img2 { opacity: 0.5; } .my_img3 { opa..

Open in browser VSCode에서 Open in browser 라는 확장 프로그램을 이용하여 작성한 HTML 파일을 브라우저에서 열 수 있습니다. 1. 확장 프로그램 설치 (Open in browser) Extension -> Open in browser 검색/선택 -> install 2. HTML을 브라우저에서 실행하기 (단축키 : Alt + B) 선택한 HTML 파일은, 시스템의 default browser에서 실행됩니다. 실행할 파일 선택 -> Alt + B 실행할 파일 선택 -> 마우스 오른쪽 버튼 -> Open in Default Brower 선택

웹에서 알파벳의 대문자를 소문자로, 소문자를 대문자로 변환하는 방법은 2가지가 있습니다. Javascript를 이용하는 방법 [Javascript] 대소문자 변경 (대문자를 소문자로, 소문자를 대문자로) [Javascript] 문자열의 첫 글자만 대문자로 변환하기 CSS를 이용하는 방법 text-transform 여기서는 CSS를 이용하여 대소문자를 변환하거나, 첫글자만 대문자로 바꾸는 방법을 소개합니다. text-transform CSS의 text-transform 속성은 요소의 문자열을 대문자 또는 소문자로 표시하는 방법을 지정합니다. text-transform 속성 값 none uppercase : 텍스트를 대문자로 lowercase : 텍스트를 소문자로 capitalize : 각 단어의 첫글자를 ..