갤러리에 마우스를 올렸을 때 오퍼시티 수치를 낮추는 기능입니다. 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')로 동시에 둘 다 이벤트가 동작하도록 만들어야 합니다. 이벤트를 선..
가장 기본적인 구조이면서, 제일 간단한 메뉴 바 만들기 구성입니다. 1-1 일반 메뉴바 html구조입니다. 총 5개의 메뉴 바 리스트는 이 구조를 기본으로 합니다. 특별히 다른 구조는 없고, 오직 1-2배경을 제외하고는 다 같은 구조를 사용합니다. 1-1 일반 메뉴 바 css 구조입니다. 가장 중요한 것은 .logo클래스에는 float:left;를 부여하되, nav에는 margin-left : .logo클래스의 width값 ; 만큼 지정해야 합니다. nav에는 float:left를 사용하지 않는 이유는 이후 나올 .submenu들에 position 속성 값이 생기기 때문입니다. 기본적으로 position은 float:속성과 같은 구조로 책정되지 않습..
모달 레이어 팝업창 패턴입니다. 모달 레이어란, 팝업창 영역을 제외하고 다른 기능이 작동하지 않도록 막은 팝업 창 구조라는 뜻입니다. HTML - - - - 의 구조를 갖습니다. 즉, .mlp라는 한 개의 가 한 단계 더 추가된 구조입니다. css .mlp는 화면 전체에 포지션 속성을 지닌 투명한 검은색 배경을 뒤집어 씌워야 합니다. 그래서 반드시 position:fixed나 absolute를 사용하고, width:100%; height:100%; top:0; left:0; 으로 사이즈와 위치를 설정한 다음에 background:rgba(0,0,0,0.8) 로 투명도를 조절해서 사용해야 합니다. 이하 내용은 . popup과 동일합니다. 그래도 참조하기 쉽도록 아래에 작성해 두겠습니다. .popup은 가운..
일반 팝업 창 패턴입니다. HTML - - - 의 구조를 갖습니다. css .popup은 가운데 정렬 코드를 작성해야 합니다.화면 가운데 내에 정렬하려면 position:absolute;나, fixed를 사용하시면 됩니다. 그러나 개인적으로는 화면 자체에서 고정되 변화하지 않는 fixed 쪽이 더 안정된 결과가 나오지 않나 생각합니다. 포지션 absolute/fixed 속성값이 있는 상태에서 top:50%; left:50%; transform:translate(-50%,-50%)을 작성하면 가운데 정렬을 해 줄 수 있습니다. 트랜스폼 속성은 margin-top:-height값/2 , margin-left:-width값/2 으로 대체할 수 있습니다. (만약 width:600px; height;400px;이..