인디자인을 시작할때 문서의 크기 단위가 대부분 파이카로 되어있는데 이를 미터법단위인 밀리미터로 바꾸는 방법은 메뉴에서 편집(Edit)-환경설정(Preferences)을 클릭하거나 단축키인 ctrl+k를 눌러주면 다음과 같은 창이 나옵니다. 1번의 단위항목을 클릭하고 2번의 수평 수직 부분의 아이콘을 각각 클릭하여 단위를 밀리미터로 변경하면 다음부터 새문서를 만들때 밀리미터로 나오게 됩니다. 어도비 프로그램은 환경설정에 들어가는 단축키가 CTRL+K 입니다. 하지만 전부 그런 것이 아니고 일부 프로그램은 CTRL+U를 눌러야 합니다. 왜냐하면 그 일부 프로그램이 예전에 매크로미디어라는 회사에서 인수한 프로그램의 경우 기존의 단축키를 그대로 사용하기 때문이죠. 이런 프로그램이 드림위버와 플래시 파이어웍스입니다.
네비게이션 바에 메뉴를 만들때 일일히 태그를 만들고 CSS로 작업을 하는데 시간이 많이 걸리죠. 보통은 제이쿼리나 자바스크립트로 만들어야 드랍다운이나 애니메이션이 가능한데 이런 기능을 넣으려면 시간이 더 걸립니다. 이 프로그램을 이용하면 색상도 자유롭게 넣을 수 있고 1분만에 예쁜 디자인의 메뉴바를 만들 수 있습니다. 사용법도 아주 직관적이라서 화면에 나온 것만 보고도 금방 만들 수 있습니다. 개인용으로 사용하면 무료지만 상업용은 유료네요. 블로그나 비영리단체에 사용하면 완전 무료로 사용할 수가 있습니다. 상업용은 돈을 내지만 추가기능이 있습니다. http://css3menu.com/index.html 위 링크에서 다운받으면서 이름과 이메일 주소만 입력하면 다운이 가능합니다.
웹페이지 제작시 기존에는 페이지 전체에 적용되는 배경이미지를 하나만 사용할 수 있었다. css3에서는 여러개의 배경이미지를 사용할 수 있다. body { background-image:url("images/bg.jpg"), url("images/footer.jpg"); background-repeat: repeat-x; background-position: top center, bottom center; } 여러개의 속성값을 부여할 때는 콤마를 사용해서 분리한다. background-repeat의 경우 속성값이 하나이면 두개의 이미지에 대해서 같은 값을 부여하게 된다. 포지션은 서로 다르게 해서 상단 배경이미지와 하단 배경이미지로 분리한다. 배경이미지는 전체 배경뿐만 아니라 div태그의 배경에도 적용할 ..
네이버블로그는 이런 기능이 안되지만 티스토리(태터툴스,텍스트큐브)나 익스프레스엔진(Xe)같은 php기반의 CMS(Content Management System)를 사용하면 메뉴가 추가되면서 배경이미지가 자동으로 추가되고 글자의 많고 적음에 따라 배경이미지도 변하도록 하는 기법이 슬라이딩 테크닉(Sliding Door Technic)입니다. 메뉴버튼의 link상태와 hover상태에 따라 변하게도 할 수 있습니다. 하나의 이미지 안에 4개의 이미지가 들어있고 배경이미지 포지션(Background Image Position)을 조정하여 각각의 상태에 따라 해당 이미지가 나오도록하는 기법입니다. 첨부파일을 열어보면 좌측 사진과 같은 이미지와 psd파일이 있으므로 만드든데 참고가 됩니다. 평상시(link)는 1번..
앞 강좌에서 네비게이션바를 기본만 만들었는데 마우스오버시 색상이 변화되는 것도 해보고 방문한 링크도 다른 색으로 표현해본다. 이전의 코드를 불러오면 다음과 같다. Home Products Services About Us 여기까지의 화면은 다음과 같다. 이번에 만들어볼 네비게이션바의 모양은 다음과 같다. 테두리의 두께를 2픽셀로 했더니 좀 투박스럽다. 보통은 1픽셀로 해서 은은하게 튀어나온 느낌을 주게된다. 우선 해야할 것은 li 태그간의 간격인 마진을 없애는 것이다. #nav ul li { float: left; margin-right: 0px; text-align: center; } 삭제해도 되고 0으로 넣어도 된다. 0의 경우 단위인 px를 넣지 않아도 되지만 다른 숫자는 반드시 단위를 붙여야한다. ..
네비게이션바는 웹페이지에서 다른 페이지로 이동하기 위해서 여러가지 버튼형식으로 만들어진 메뉴의 집합이다. 이것은 타이틀 아래에 있는 경우도 있고 사이드바에 위치하기도 하며 어떤 때는 페이지의 하단에 위치하기도 한다. 이 네이게이션바는 웹페이지에서 아주 중요한 역할을 하기 때문에 디자인에 각별한 신경을 쓰게 된다. 제이쿼리나 플래시를 이용하여 아주 다양하게 만들어지고 정지된 메뉴가 아닌 슬라이딩 효과를 주게 되고 사진을 넣어서 움직이게 하여 방문자로 하여금 재미를 선사하기도 한다. 이러한 네비게이션바를 만드는데 있어서 기본이 되는 CSS를 점검해 본다. 아주 기본적인 것이므로 간단하게 위와같이 만들어본다. 바디부분에 다음과 같이 li 태그를 작성한다. Home Products Services About U..
