개발공부/프론트엔드 15

[CSS] opacity 배경만 투명하게/ 배경만 opacity 적용

opacity 배경만 투명하게/ 배경만 opacity 적용 opacity는 투명/불투명을 조절할 수 있는 것으로, 값은 0 ~ 1까지 사용합니다. 1은 전혀 투명하지 않으며, 0.5는 시스루이며, 0은 완전히 투명합니다. (W3schools 참고) css 사용 시 ' opacity: number ' 로 사용을 하게 되는데, 이와같이 opacity를 사용하게 되면 투명도를 조절할 수 있지만, 자식 요소에도 투명도가 같이 적용이 됩니다. 자식요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 대신 사용하면 됩니다. [ 사용법 ] background: rgba(76, 175, 80, 0.1); 초록색 : RGB 각각의 숫자를 적는다. 노란색 : 투명도 값을 적는다 (0 ~ 1까지) 배경과 글씨 같이 투명하..

[javascript] 일정 시간 간격으로 이미지 변화 : setInterval()

일정 시간 간격으로 이미지 변화 : setInterval() 이미지가 자연스럽게 변화하는 로직입니다. 같은 위치에 있는 이미지들 중 마지막 이미지를 첫 번째로 위치시킬 때 자연스럽게 나타나도록 합니다. 브라우저 콘솔 창(F12)을 보면 해당 스크립트가 잘 실행되는 것을 확인할 수 있습니다. 속 마지막 요소가 속 첫 번째로 이동되면서 자연스럽게 나타납니다.

notepad++로 간단한 개발하기

notepad++로 간단한 개발하기 개발을 하기 위해서는 JAVA, DB, SERVER, BROWSER, TOMCAT, IBATIS.. 기타 등등 필요하고, 적절한 세팅을 또 해야 하기 때문에 너무 복잡합니다. 뭐 대단한 프로젝트를 하는 게 아닌 이상 컴퓨터에 기본으로 있는 메모장이나 notepad로 간단한 화면 구성은 할 수 있어서 포스팅해보려 합니다. 1) html 기본 구조 작성하기 html의 기본 뼈대가 되는 아래 코그를 작성합니다. 작성 후 저장할 때는 확장자를 HTML(Hyper Text Markup Language File) 로 저장합니다. 내용입니다. 2) 실행하기 notepad 상단에 [실행 > Launch In Chrome] 을 클릭합니다. (또는 저장된 폴더에 있는 파일을 더블클릭해도..