CONTENTS
CSS 기능
1. display
2. label
3. slider
4. slide 실습
------------------------------
CSS 기능
1. display
◎ display:flex; 작성
-정렬하려는 자식 요소들의 직계 부모 요소 선택
◎특징
-자식 요소들이 부모 요소보다 클 경우 1)자식 요소들이 짜부러지거나 2) flex-wrap 속성값 변경하여 줄바꿈이 됨
-해당 특징은 슬라이더에서 불편함, 추가 작업 필요
<display:flex; 사용하기>
html
<body>
<div class="slidebox">
<div class="slides">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
</div>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
/*예제1) display:flex */
.slidebox{
width: 100px;
height: 100px;
margin: 30px auto;
background-color: pink;
}
.slides{
display: flex;
}
.slide{
width: 100px;
height: 100px;
border: 3px solid red;
}
◎ display:inline-block; 작성
-인라인요소의 특징을 가지면 됨, 정렬하려는 요소들 선택
◎특징
-인라인레벨요소의 특징 (가로로 쌓임), 블록레벨요소의 특징 (크기 지정 가능) 두 특성을 가질 수 있음
-단점은 자식요소가 부모요소보다 클 때 자동으로 줄바꿔짐->white-space:no-wrap;을 줘야함
-white-space:no-wrap;으로 줄바꿈 하지 않는다고 바꿔도 요소와 요소 사이 지정하지 않은 공백이 발생함
(html 코드에서 줄바꿈이 공백으로 인식됨)-> 해당 요소들의 부모에다가 font-size:0; 작성 필요(글자 사라짐)
*공백도 문자로 인식
<display:inline-block; 사용하기>
/* 예제2) display:inline-block */
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.slidebox{
width: 100px;
height: 100px;
margin: 30px auto;
background-color: pink;
white-space: nowrap;
}
.slides{
font-size: 0;
}
.slide{
width: 100px;
height: 100px;
display: inline-block;
border: 3px solid red;
font-size: 20px;
}
/* font 주면 글자 보임 */
2. label
◎label 태그
-폼 요소에 대한 UI를 개선하기 위해 사용되는 요소
-입력 양식 요소와 주로 사용되며 입력 양식 요소의 목적을 명확하게 설명하거나 디자인, 스타일링 할 때 사용함
◎label 태그 사용방법
-특정 입력 필드와 연결: for 속성="연결할 입력 필드의 id값"
-연결한 결과: 라벨을 클릭하면 해당 입력 필드에 포커스가 이동함
*항상 잘 연결되었는지 확인 필요
라벨 연결하기
html
<body>
<input type="radio" name="gender" id="woman">
<label for="woman">여자</label>
<input type="radio" name="gender" id="man" checked>
<label for="man">남자</label>
</body>
3. slider
◎슬라이더
-연속적인 콘텐츠를 하나의 콘텐츠로 보여주는 UI
-여러 이미지를 가로 또는 세로로 나열하여 사용자가 한 번에 하나의 이미지나 콘텐츠를 볼 수 있게 함
주로 제품(상품) 및 이벤트 홍보나 주요 뉴스 정보 전달할 때 사용됨
◎슬라이더의 구성
1)슬라이드 박스: 콘텐츠가 실제로 보여지는 화면
2)슬라이드 아이템: 각 슬라이드에 해당하는 콘텐츠(이미지, 텍스트 등)
3)네비게이션 요소: 이전 및 다음 버튼(라벨) 등
◎슬라이더의 원리
1)크기 지정
-슬라이드 박스: 콘텐츠가 실제로 보여지는 화면의 크기 조정(width)
-슬라이드 아이템: 슬라이드 박스 사이즈의 100%로 크기 조정(width)
2)정렬 및 배치
-슬라이드 아이템들을 여백 없이 가로 정렬
-각 이미지별 라벨(왼쪽, 오른쪽) 위치 조정
3)기능 구현
-콘텐츠별 input:radio가 있고 좌,우 라벨이 존재함
좌,우 라벨이 콘텐츠의 input:radio와 연결됨을 확인(리모콘으로 좌,우 버튼을 눌러 TV채널을 바꾸는 것과 같음)
-n번째 콘텐츠의 radio버튼이 체크되었을시, 모든 콘텐츠를 동시 선택하여 한번에 (n-1)*100%만큼 왼쪽으로 이동
<슬라이더 html 기본 구성>
<body>
<input type="radio" name="slide" id="s01">
<input type="radio" name="slide" id="s02">
<input type="radio" name="slide" id="s03">
<div class="slidebox">
<div class="slides">
<div class="slide">
<label for="s03" class="left">left</label>
1
<label for="s02" class="right">right</label>
</div>
<div class="slide">
<label for="s01" class="left">left</label>
2
<label for="s03" class="right">right</label>
</div>
<div class="slide">
<label for="s02" class="left">left</label>
3
<label for="s01" class="right">right</label>
</div>
</div>
</div>
</body>
<슬라이더 css 크기 지정 및 정렬>
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
/* 슬라이더 css 크기 지정 및 정렬 */
.slidebox{
width: 100px;
height: 100px;
margin: 30px auto;
background-color: pink;
white-space: nowrap; /* 여백 없이 가로 정렬 */
}
.slides{
font-size: 0;
}
.slide{
font-size: 16px;
width: 100px;
height: 100px;
display: inline-block;
border: 3px solid red;
}
<슬라이더 css label 배치하기>
/* 슬라이더 css label 배치하기 */
.slide{
font-size: 16px;
width: 100px;
height: 100px;
display: inline-block;
border: 3px solid red;
position: relative;
}
label{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left{
left: 0;
}
.right{
right: 0;
}
*position: relative; 부터 추가 사항
<슬라이더 css 기능부>
/* 슬라이더 css 기능부 */
#s01:checked ~ .slidebox .slide{
transform: translateX(0%);
}
#s02:checked ~ .slidebox .slide{
transform: translateX(-100%);
}
#s03:checked ~ .slidebox .slide{
transform: translateX(-200%);
}
input{
display: none;
}
4. slide 실습
html
<body>
<input type="radio" name="slide" id="s01">
<input type="radio" name="slide" id="s02">
<input type="radio" name="slide" id="s03">
<div class="slidebox">
<div class="slides">
<div class="slide">
<label for="s03" class="left"><</label>
<label for="s02" class="right">></label>
</div>
<div class="slide">
<label for="s01" class="left"><</label>
<label for="s03" class="right">></label>
</div>
<div class="slide">
<label for="s02" class="left"><</label>
<label for="s01" class="right">></label>
</div>
</div>
</div>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
/* 크기, 정렬 */
.slide img{
width: 100%;
}
.slidebox{
width: 300px;
height: 300px;
margin: 30px auto;
white-space: nowrap; /* 여백 없이 가로 정렬 */
overflow: hidden; /* 넘치는 부분 이미지 지우기 */
}
.slides{
font-size: 0;
}
.slide{
font-size: 50px;
width: 100%;
display: inline-block;
position: relative;
/* border: 1px solid red; */ /* 영역 다차는지 확인 */
}
/* 배치 */
label{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left{
left: 0;
}
.right{
right: 0;
}
/* 기능 */
#s01:checked ~ .slidebox .slide{
transform: translate(0%);
}
#s02:checked ~ .slidebox .slide{
transform: translate(-100%);
}
#s03:checked ~ .slidebox .slide{
transform: translate(-200%);
}
input{
display: none;
}
------------------------------
