Written on
·
169
1
.slide{
position: relative;
height: 300px;
overflow: hidden;
}
.slide > div{
/*border: 1px solid red;*/
width: 3600px;
font-size: 0;
position: absolute;
/*animation: slide 10s linear infinite;*/
슬라이브 부분을 예로 해서
css의 구조를 잡을때
.slide{} 와 .slide div{} 두개로 나눠서 CSS 입력하는 의미가 어떤건가요?
.slide는 무슨 의미와 역할이고
.slide div{} 했을때는 무슨 역할인지요?
Answer 1
0
.slide {...} 와 .slide div{...} 용도는 아래와 같습니다.
.slide div{...}의 경우 .slide div 내부에 a태그가 가로 배치되는 슬라이드 같은 경우 너비가 3600픽셀이 됩니다. 그럼 그걸 담을 수 있도록 .slide div 너비가 3600픽셀이 되어야 합니다.
그리고 최종적으로 .slide는 1200x300 크기에 넘친 부분을 가리는 overflow: hidden을 주는 역할입니다.