2018/028 보이기와 감추기 - visibility 와 display JavaScript 레이어 보이기와 감추기 자바스크립트 및 CSS를 이용하여 DIV를 보이게하고 감추는 방법에 대하여 알아보도록 하겠습니다. 먼저 보이고 보이지 않게 될 대상을 하나 생성합니다. 가로, 세로 100px 의 사각형 모양에 파란색의 배경색을 지정 해 보았습니다. 그리고 div의 id는 target로 설정 하였습니다. 이제 이 DIV를 보이게 또는 보이지 않게 제어할 버튼을 만들어 보겠습니다. 감추기 버튼과 보이기 버튼 두개의 버튼을 만들어 봅니다. 여기에서 끝나면 조금 아쉽죠 그래서 한 가지 더 알아 보도록 하겠습니다. 보이이 감추기 기능을 가지고 있는 함수는visiblility와 함께 display라는 함수가 있습니다. 그럼 두 가지의 차이는 무었일까요? 클릭 해 보셨으면 아셨겠지만 vis.. 2018. 2. 18. HTML/CSS 레이어(Layer) 란 레이어란 무엇인가? 레이어(Layer)란 층을 의미 합니다. 한 문서에 여러개의 레이러를 만들어 다른 레이어 위에 쌓을 수 있고, 투명하거나 불투명하게 만들 수 도 있습니다. HTML 문서의 배경색과 배경 이미지를 지정하는 것처럼 각 레이어의 배경색과 배경 이미지도 지정 하능 합니다. 자바스크립트를 사용하면 레이러를 옮기거나 감추거나 확대 또는 축소도 가능 합니다. 기본적으로 HTML과 자바스크립트를 사용하여 웹 페이지상에 동적인 애니메이션을 구현할 수 있고, 다양하게 동작하는 웹 페이지를 만들 수 있습니다. 레이어 정의 하나의 레이어는 다른 레이어와 구별되어야 하므로 고유한 아이디(ID) 이름을 가져야 합니다. 여기에 레이어 위치를 지정하기 위한 position 속성과 레이어의 크기를 추가하여 레이어를.. 2018. 2. 13. CSS 목록 속성 불릿(Bullet) 지정하기 CSS 목록 속성 불릿 지정하는 방법 CSS 불릿 지정하는 방법에 대하여 알아보도록 하겠습니다. ※ 불릿이란 텍스트 앞에 주의를 끌기 위하여 붙이는 그래픽 문자 입니다. ■ 불릿 모양 지정 - 속성 : list-style-type - 속성값 : none, circle, square, 등 ■ 불릿 이미지 지정 - 속성 list-style-image - 속성값 : 불릿 이미지 URL ■ 불릿 위치 지정 - 속성 : list-style-position - 속성값 : inside, outside ■ 예제 사용 이미지 : (기쁨이가 만든 쿠키 이미지 입니다) - 불릿 지정하기 전 예제 소스 결과 대메뉴1 메뉴1 메뉴2 메뉴3 대메뉴2 메뉴1 메뉴2 메뉴3 대메뉴1 메뉴1 메뉴2 메뉴3 대메뉴2 메뉴1 메뉴2 메뉴.. 2018. 2. 6. [CSS] 배경 설정 방법 및 속성 알아보기 스타일 시트를 이용한 배경 지정하기 스타일 시트를 이용하면 색상으로 배경을 설정 할 수 있으며 또한 이미지로 배경을 지정 할 수도 있습니다. 이번 시간에는 배경을 지정하는 방법에 대하여 알아보도록 하겠습니다. background-color 설명 : 배경색 지정 속성값 : 색상명 또는 RGB 값 사용예 : 배경색 지정하기 결과 : 배경색 지정하기 background-image 설명 : 배경 이미지 지정 속성값 : 배경 이미지의 URL 사용예 : 이미지로 배경 지정하기 결과 : 이미지로 배경 지정하기 ※ 예 지정 이미지는 상단 대표이미지 입니다. background-repeat 설명 : 배경 이미지 반복 설정 속성값 : no-repeat, repeat-x, repeat-y, repeat 사용예 : style.. 2018. 2. 1. 이전 1 2 다음
