슬라이드 사이즈에 맞도록 .psd파일을 만들자. 1~8번은 1200*300, 9~10번은 800*350 11~12번은 850*350 일 것이다. 셋 중 하나로 만든 후, 이미지 파일을 불러오자. 시험장에서는 소스 파일이 제공되며, 그 파일들을 수정하면 된다. 일단 가장 보편적인 1200사이즈로 진행한다. 시험장의 포토샵 버젼에 따라서 드래그 앤 드롭으로 가져오기 기능이 작동하지 않을 수 있다. 그런 경우에는 가져오기 기능을 직접 눌러 하나하나 가져와야 한다. 이미지를 가져올 때는 반드시 최대 폭에 들어가도록 이미지를 늘려야 한다. 단, 이미지의 주요 피사체의 주요 특징이 드러나는 곳이 가려지지 않도록 신경써서 자른다. 텍스트 도구(T)를 눌러 텍스트를 추가하자. 텍스트 색상은 흰색으로 하고, 서체 간격 ..
로고 디자인의 경우 출제 기준이 총 3가지로 볼 수 있다. 1_ 로고 200*40 으로 만들기 제시된 크기에 맞게 이미지 만들기 주의할 점은 배경 내용은 "투명"으로 해야 보기 좀 더 깔끔하다. 텍스트 도구를 이용하여 텍스트 레이어를 작성한다. 시험장에서는 텍스트가 제공되므로, 제공된 텍스트를 복사하여 진행하면 된다. 텍스트 도구의 단축키는 (T)이며, 상단 메뉴 바를 이용하여 서체와 크기 등을 바꿔 줄 수 있다. 화면 사이즈에 맞게 적절하게 줄이면 된다. 서체는 굵은 서체를 추천한다. 만약 자세한 설정을 해 주고 싶다면, 창 메뉴에서 문자 탭을 누르면 창이 뜨는데, 이 창에서 서체와 줄 간격 폭 넓이, 굵게, 기울임꼴, 위 첨자, 아래 첨자 등을 전부 선택이 가능하다. 개인적인 팁이라고 한다면, 자간 ..
완성된 html의 노출되는 텍스트 부분들 전부를 로 씌우면 된다. 완성된 index.html 대학소개 총장인사말 학교소개 홍보관 캠퍼스 안내 입학안내 수시모집 정시모집 편입학 재외국민 정보서비스 대학정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 공지사항 순서내용작성자날짜 1긴급 온라인 대체수업 안내총무팀03-03 23월 신입생오리엔테이션 안내총무팀03-02 32학기 전기 학위수여식 안내홍보팀02-28 더보기 갤러리 천문대소개인사말오시는길프로그램관람시간표이달의별자리예약하기예약확인예약취소공지사항방문후기자유게시판 Copyright © 2020 just shoppingMall Co.,Ltd. All Rights Reserved. 패밀리사이트→ 공지사항 안내 공지사항과 관련된 내용이 들어갑니..
갤러리에 마우스를 올렸을 때 오퍼시티 수치를 낮추는 기능입니다. html, css 해설은 하지 않습니다. 갤러리를 만드시면 됩니다. javascript 마우스를 올렸을 때(mouseover) : opacity 값이 0.5~0.8이 되고, 마우스를 내렸을 때(mouseleave) : opacity 값이 1 이 되도록 만드시면 됩니다. 변화량이 보이는지 안 보이는지 잘 보고 수치는 적당히 조절해 봅시다.
html 탭 메뉴의 구조는 기본적으로 다음과 같습니다. - - 공지사항 - 갤러리 - - *table 간략화 - *img 간략화 핵심은 메뉴 영역과 컨텐츠 영역을 나누는 것입니다. css 여기서 menu 따로, contents따로 꾸며주면 됩니다. 중요한 것은 첫 화면에는 공지사항 컨텐츠가 출력이 되고 있도록 맞춰 둬야 합니다. 즉, 1번째를 제외한 나머지는 출력되면 안 됩니다. 이때 :not(:first-child)를 사용합니다. (.main .tab .contents li:not(:first-child){display:none;}) 또한 2번째 영역만 지칭하기 위해서는 nth-child(2)를 사용해 줍시다. 2번째 리스트만 속성을 지정할 수 있습니다. .main .tab .contents li:nt..
슬라이드 쇼 좌우/상하의 기출 변형입니다. css구조와 사용하는 메소드의 차이가 있습니다. html 구조 - - - 의 구조로 만들면 됩니다. 이 구조는 어떤 상황에서도 변하지 않습니다. css 구조 2-슬라이드 1)구조와 동일합니다. - - - 의 구조로 만들면 됩니다. .imgslide는 이전과 똑같게 작성합시다. .rollings는 포지션 속성이 있을 필요가 없습니다. 그냥 사이즈만 입력해 둡시다. .rollings li 요소들은 각 파일들을 보관하는 개별 틀로 생각하면 됩니다. 여기에 position:absolute가 있어야만 상 하로 쌓이는 구조가 됩니다. 다만 유의할 점은 가장 마지막에 출력한 이미지가 가장 위에 올라온다는 사실입니다. 마지막으로 영역에 정확하게 들어맞지 않는 경우를 위해 im..
가장 기본적인 슬라이드 쇼 패턴입니다. html 구조 - - - 의 구조로 만들면 됩니다. 이 구조는 어떤 상황에서도 변하지 않습니다. css 구조 2-슬라이드 1)구조와 동일합니다. - - - 의 구조로 만들면 됩니다. .imgslide는 액자처럼 동작하기 때문에 반드시 position:relative와 overflow가 지정되어 있어야 합니다. .rollings는 움직여야 하므로 position:absolute;가 있어야 합니다. .rollings li 요소들은 각 파일들을 보관하는 개별 틀로 생각하면 됩니다. 여기에 float:left;가 있어야만 나중에 javascript로 사이즈를 늘렸을 때, 좌우 배열로 쉽게 전환할 수 있습니다. 마지막으로 영역에 정확하게 들어맞지 않는 경우를 위해 img요소..
가장 기본적인 슬라이드 쇼 패턴입니다. html 구조 - - - 의 구조로 만들면 됩니다. 이 구조는 어떤 상황에서도 변하지 않습니다. css 구조 - - - 의 구조로 만들면 됩니다. .imgslide는 액자처럼 동작하기 때문에 반드시 position:relative와 overflow가 지정되어 있어야 합니다. .rollings는 움직여야 하므로 position:absolute;가 있어야 합니다. .rollings li 요소들은 각 파일들을 보관하는 개별 틀로 생각하면 됩니다. 여기에 float:left;가 있어야만 나중에 javascript로 사이즈를 늘렸을 때, 좌우 배열로 쉽게 전환할 수 있습니다. 마지막으로 영역에 정확하게 들어맞지 않는 경우를 위해 img요소들에 width,height를 100..
1_4 세로 slide 메뉴바의 기출 변형으로 보면 좋습니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 1_4 세로 slide 메뉴바와 비슷하지만 가장 큰 차이점은 .mainmenu li의 height사이즈가 50px로 제한되어 있습니다. 이는 .submenu클래스에 position:relative속성을 사용하기 때문입니다. relative값으로 지정하게 되면, 자기 자신의 위치를 기준으로 띄워 표기할 수 있습니다. 그러나 보통 relative는 자기 자신의 위치 영역이 그대로 유지되므로, 이를 가리기 위해 .mainmenu li의 height사이즈가 50px로 제한하는 것입니다. 이렇게 하면, position:absolute;의 사용처..
세로 바 패턴의 메뉴 바 입니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 세로 바 패턴에 맞춰야 합니다. 가로폭의 경우는 logo사이즈에 맞춰 제작해야 합니다. 어떤 패턴 9,10의 경우는 로고 사이즈의 값이 200*40으로 되어 있습니다. 그러므로 가로 폭은 무조건 200이어야 합니다. 단, 11,12패턴은 종횡비를 유지하면 사이즈를 줄일 수 있습니다. header영역에만 float:left; 속성이 붙습니다. 그리고 .mainmenu li의 사이즈는 유동적으로 변화해야 하므로, height속성을 입력하지 않습니다. 1-3_개별 메뉴바의 스크립트 구조를 사용합니다.
일반 메뉴 바에서 기출 변형된 개별 메뉴 바 입니다. 1-1 일반 메뉴바 html구조와 100%동일합니다. 1-1 일반 메뉴바 css구조와 100%동일합니다. 일반 메뉴 바와 지칭하는 이벤트의 주체가 $('.mainmenu')에서 $('.mainmenu > li')로 바뀝니다. 그리고 리스트의 순서 값만을 따오기 위해 index라는 변수를 만들고 그 값을 저장합니다. mouseover의 실행문 작성시 슬라이드 효과가 발생할 $('.submenu')의 값을 정확하게 index순서에 맞춰 나타내게 만들 수 있도록 eq(index)를 끼워 넣습니다. 그리고 이후 .stop()과 slideDown()을 연결합니다. 또..
일반 메뉴 바에서 기출 변형된 패턴 : 배경 메뉴 바 입니다. 1-1 일반 메뉴바 html구조에 를 추가해 만든 배경 메뉴바 입니다. 위치는 header의 하위 요소이고, 와 동등하면서, 가장 마지막에 위치하면 됩니다. 즉, 의 바로 위에 위치하면 됩니다. 1-1 일반 메뉴바 css구조에 .bg를 작성합니다. 사이즈는 폭 1200 높이 250px 언저리면 괜찮습니다. 배경을 추가해야 영역에 뜨는지 아닌지 알 수 있습니다. z-index의 수준은 .imgslide보다는 높게, .submenu 보다는 낮아야 합니다. $('.mainmenu,.bg')로 동시에 둘 다 이벤트가 동작하도록 만들어야 합니다. 이벤트를 선..
