본문 바로가기

전체 글166

HTML/CSS 이미지효과 - 마우스 오버시에 텍스트 보이기 예제소스 이미지에 마우스를 오버했을 경우 텍스트 문구가 보여지는 효과를 주는 예제를 알아 보도록 하겠습니다. 전체소스 이것은 사과 입니다. 실습 - 예제결과 이미지 위로 마우스를 올렸을 경우 이미지가 올라가며 텍스트 문구가 보여지게 됩니다. 이것은 사과 입니다. 2018. 8. 1.
체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 테이블 안 체크박스를 클릭하면 해당 Row의 배경 색이 변경되는 코딩 방법을 알아 보도록 하겠습니다. 자바스크립트를 사용하여 간단하게 체크 된 라인의 배경색을 변경 할 수 있습니다. 먼저 전체 소스를 살펴 보도록 하겠습니다. 전체소스 이런조이 체크박스 체크하면 테이블의 체크 된 라인의 색이 변경 됩니다 설명 1. 자바스크립트 호출 → onclick="setBg(this)" 체크박스를 클릭 했을 경우 setBg 함수를 호출하게 됩니다. this란 현재 자신의 정보를 객체로 보내게 됩니다. 2. 호출 자바스크립트 function setBg(t) { td = t.parentNode; td.style.backgroundColor = (t.checked) ? "blue" : "white"; tr = t.paren.. 2018. 7. 25.
스크래치 강좌 10 - 감지(닿았는가) 누구나 쉽게 따라 할 수 있는 무료코딩교육의 시작 스크래치강좌10 - 감지(닿았는가) 감지 스크립트에 대하여 알아 보도록 하겠습니다. 감지 스크립트에는 다양한 블록들이 존재합니다. 그 중에서 이번 시간에는 [OO에 닿았는가] 블록들(3개)에 대하여 알아 보도록 하겠습니다. 그럼 실습코딩을 통해 각각의 블록의 기능에 대하여 학습 해 보도록 하겠습니다. 첫째, [마우스 포인터 에 닿았는가] 아래와 같이 코딩을 해 보기 바랍니다. [클릭했을 때] 블록 아래로 [무한 반복하기] 그 안으로 [만약 OO (이)라면] 블록을 연결합니다. 그리고 [만약 OO (이)라면] 블록의 조건부분에 [마우스 포인터 에 닿았는가] 블록을 삽입 합니다. 조건 블록이 참이 될때 실행되도록 말하기 블록을 연결 시켜 줍니다. 스프라이트 .. 2018. 7. 11.
[HTML/CSS] DIV 중앙, 가운데 배치하기 DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다. 블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다. 핵심 CSS 태그 - position:absolute; → 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다. - top: 50%; left: 50%; → 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다. → 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다. - height:300px; width:400px; → DIV의 크기를 설정 합니다. - margin:-150px 0p.. 2018. 7. 1.

티스토리툴바