공부/웹디자인17 드림위버 ) AP Div를 이용해서 팝업 창 효과 적용하기 출처 : 실력이 탐나는 드림위버 CS5 AP Div를 이용해서 홈페이지를 만들어 본적이 없었고, 팝업창을 띄울때도 다른 웹문서를 만들어서 띄우곤 했었다. 그런데 이렇게 깔끔하게 팝업창을 만드는 방법이 있을줄이야....... 내가 오랫동안 공부를 안해왔구나 느꼈다. AP Div 안에 이미지를 넣었는데 이 이미지의 'X'를 누르면 이 AP Div가 사라지도록 (팝업창처럼) 만들었는데 먼저 'X'를 누를 부분에 이미지맵 사각형을 그렸다. 그리고 그 사각형 이미지맵에 비헤이비어를 추가하기 위해 '+'를 누르고 '요소 표시-숨김'을 선택했다. 요소 중에서 div "pop"을 클릭하고 아래의 '숨김'버튼을 눌렀다. 그렇게 하면 요소 표시-숨김이 생기는데 이벤트를 'onClick'으로 지정해준다. 결과화면: 이제 이.. 2011. 12. 29. 드림위버 ) 블릿 이미지 넣기 출처 : 실력이 탐나는 드림위버 CS5 문단에 들어가 있는 이미지들을 예전에는 하나하나 넣은거라고 생각했었는데 CSS를 보니까 목록 문단을 구성하는 각각의 목록 태그인 LI 태그에 배경이미지로 넣으면 되는것이었다. 이렇게 드림위버의 기본으로 되어 있는 문단에 블릿기호대신 이미지를 넣을 것이다. 먼저 'ul'의 padding과 margin을 0으로 해서 들여쓰기 되고 그런것들을 다 없애고 li의 배경으로 블릿이미지를 넣고 왼쪽을 10px padding을 준다. 그러면 아래와 같이 블릿 이미지가 들어간다. 2011. 12. 29. 드림위버 ) 텍스트 하이퍼링크(롤오버 등) 출처 : 실력이 탐나는 드림위버 CS5 롤오버 할때 거의 이미지로 작업을 하곤 했었는데 CSS로 작업을 해도 깔끔하게 예쁜 것 같다. 이미지 낭비할 필요없이 말이다. 그래서 이 방법도 까먹게 될까봐 기록! 이게 기본 텍스트 하이퍼링크인데 파란색들이 보기 싫다. 그래서 먼저 'a'에 속성을 주자 글씨색과 padding을 지정해서 텍스트 하이퍼링크 메뉴 상하좌우에 안쪽 여백을 생성했다. 그리고선 하이퍼링크의 롤오버 상태 선택자 'a:hover', 하이퍼링크 활성 상태 선택자 'a:active'의 속성을 함께 지정하였다. 글씨 색은 흰색, 글의 배경색을 회색으로 주어서 마우스를 갖다대면 회색 배경의 희색글씨로 바뀌도록 하였다. 그래서 이게 완성! 오오 이쁘다 이뻐. 쓸만하다. 2011. 12. 29. 드림위버 ) DIV 태그에 ID 정의하고 디자인하기 실력이 탐나는 드림위버 CS5 책 보다가 알아두면 나중에도 유용할 것 같아서! 이렇게 되어 있는 단순한 글을 먼저 텍스트 문단()를 드래그해서 선택하고 div id 로 감싼다. 그 후에 CSS를 만드는데 속성을 아래와 같이 주면 아래와 같은 결과가 생긴다. 갑자기 생긴 그림은 background에서 그림을 넣어서 이렇게 된 것이다. 글씨가 안쪽으로 들어가게 된 것은 '상자'속성에서 왼쪽에 padding을 200줘서 그렇다. 홈페이지 맨 아랫단에 이 방법으로 만들어 놓으면 좋을 것 같다. 평소에는 이미지로 넣었었는데 CSS로 하는것이 더 좋은 것 같다! 2011. 12. 29. text 박스의 테두리를 없애고 싶을때 style="border-width:0px;" 2011. 12. 16. 배경이미지 반복 드림위버로 홈페이지를 만들때 배경이미지를 넣으면 반복이 되게된다. 몇번을 해도 바보인지 자꾸 까먹고 검색하게 되어서 아예 정리를 해 놓기로 했다. 내용 background-repeat:no-repeat; - 배경 이미지 반복안함 background-repeat:repeat-x; - 배경 이미지 가로 반복 background-repeat:repeat-y; - 배경 이미지 세로 반복 2011. 12. 16. 이전 1 2 3 다음
