슬라이드 쇼 좌우/상하의 기출 변형입니다. 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..
