프로그래밍 언어 활용 21일차 (24/12/9)

웹프로그래밍/CSS

프로그래밍 언어 활용 21일차 (24/12/9)

wkun 2024. 12. 9. 16:00

CONTENTS

CSS 기능 실습

1. 고정 라벨 슬라이더

2. 탭

3. 학습(slider, tab)

-----------------------------------------------

CSS 기능 실습

1. 고정 라벨 슬라이더

예제)

html

<body>

<h1>Fast Food Restaurant</h1>

<br>

<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>

mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>

sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>

<br>

<a href="#">Order Now</a>

<br>

</div>

<h1>Fast Food Restaurant</h1>

<br>

<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>

mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>

sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>

<br>

<a href="#">Order Now</a>

<br>

</div>

<h1>Fast Food Restaurant</h1>

<br>

<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>

mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>

sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>

<br>

<a href="#">Order Now</a>

<br>

</div>

</div>

</section>

</body>

css

* {

margin: 0;

padding: 0;

text-decoration: none;

list-style: none;

box-sizing: border-box;

color: inherit;

}

.container {

width: 80%;

margin: 0 auto;

}

#main{

background-image: url(https://themewagon.github.io/feane/images/hero-bg.jpg);

height: 700px;

background-size: 100% 100%;

position: relative;

}

.slidebox {

width: 80%;

height: 500px;

margin: 0 auto;

/* border: 3px solid blue; */

white-space: nowrap;

overflow: hidden;

color: white;

padding-top: 200px;

}

.slides {

font-size: 0;

}

.textbox{

font-size: 15px;

width: 100%;

display: inline-block;

transition: all .5s;

/* border: 3px solid red; */

height: 300px;

/* background-color: blue; */

}

.textbox h1{

font-size: 40px;

font-weight: 200;

color: #ffffff;

font-family: 'Dancing Script', cursive;

}

.textbox p{

font-size: 15px;

color: #ffffff;

}

.textbox a{

display: inline-block;

padding: 17px 50px;

background-color: #ffbe33;

color: #ffffff;

border-radius: 45px;

transition: all 0.3s;

margin-top: 10px;

font-size: 15px;

}

.textbox a:hover{

background-color: #fd7e14;

}

.slidebtn label{

display: inline-block;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: white;

margin-right: 10px;

cursor: pointer;

}

#main .slidebtn{

position: absolute;

left: 190px;

top: 70%;

display: flex;

justify-content: center;

align-items: center;

}

/* label 기능부 */

#main input[id="slide01"]:checked ~ .slidebtn label[for="slide01"] {

width: 20px;

height: 20px;

background-color: #ffbe33;

}

#main input[id="slide02"]:checked ~ .slidebtn label[for="slide02"] {

width: 20px;

height: 20px;

background-color: #ffbe33;

}

#main input[id="slide03"]:checked ~ .slidebtn label[for="slide03"] {

width: 20px;

height: 20px;

background-color: #ffbe33;

}

/* 콘텐츠 기능부 */

#slide01:checked ~ .slidebox .slides .textbox{

transform: translateX(0%);

}

#slide02:checked ~ .slidebox .slides .textbox{

transform: translateX(-100%);

}

#slide03:checked ~ .slidebox .slides .textbox{

transform: translateX(-200%);

}

input[type="radio"] {

display: none;

}

2. 탭

예제)

html

<body>

<div>

</div>

<label for="b" class="b">Burger</label>

<label for="c" class="c">Pizza</label>

<label for="d" class="d">Pasta</label>

<label for="e" class="e">Fries</label>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pasta</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>French Fries</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Tasty Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Tasty Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pasta</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Tasty Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Tasty Burger</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pizza</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pasta</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>Delicious Pasta</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</div>

<h5>French Fries</h5>

<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem

repellendus sed eaque</p>

</div>

</div>

</section>

</body>

css

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.container{

width: 70%;

margin: 0 auto;

}

#menu .title{

text-align: center;

font-family: 'Dancing Script', cursive;

font-size: 35px;

margin-top: 5px;

}

#tab_button{

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 20px;

}

label{

margin-right: 50px;

padding: 10px;

font-family: "Open Sans", sans-serif;

}

#menu #tab_content {

display: flex;

flex-wrap: wrap;

justify-content: center;

align-items: center;

}

#menu .card_box{

width:25%;

height: 100%;

/* border: 3px solid red; */

margin: 20px;

transition: all 3s;

background-color: #0c0c0c;

border-radius: 30px 30px 0 0;

}

/* 배경 주고 반지름 주기 */

.img_box{

width: 100%;

height: 200px;

padding-left: 50px;

padding-right: 50px;

background-color: #f1f2f3;

border-radius: 20px 20px 0 20px;

}

.img_box img{

width: 100%;

height: 200px;

padding: 20px;

}

.text_box{

width: 100%;

padding: 15px;

background-color: #0c0c0c;

color: #ffffff;

/* border: 3px solid blue; */

}

.text_box h5{

font-size: 20px;

font-family: "Open Sans", sans-serif;

margin-top: 10px;

margin-bottom: 10px;

}

.text_box p, h6{

font-family: "Open Sans", sans-serif;

font-size: 15px;

}

.cart{

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px;

background-color: #0c0c0c;

color: #ffffff;

border-radius: 0 0 20px 20px;

}

.cart a{

display: inline-block;

width: 40px;

height: 40px;

line-height: 40px;

text-align: center;

border-radius: 30px;

background-color: #ffbe33;

}

.all{

display: none;

}

#a:checked~#tab_box #tab_content .a{

display: block;

}

#b:checked ~ #tab_box #tab_content .b{

display: block;

}

#c:checked ~ #tab_box #tab_content .c{

display: block;

}

#d:checked ~ #tab_box #tab_content .d{

display: block;

}

#e:checked ~ #tab_box #tab_content .e{

display: block;

}

/* 라벨 색 바꾸기 */

#a:checked ~ #tab_box #tab_button .a{

background-color: #222831;

color: #ffffff;

}

#b:checked ~ #tab_box #tab_button .b{

background-color: #222831;

color: #ffffff;

}

#c:checked ~ #tab_box #tab_button .c{

background-color: #222831;

color: #ffffff;

}

#d:checked ~ #tab_box #tab_button .d{

background-color: #222831;

color: #ffffff;

}

#e:checked ~ #tab_box #tab_button .e{

background-color: #222831;

color: #ffffff;

}

#a, #b, #c, #d, #e{

display: none;

}

/* input{

display: none;

} */

3. 보충학습(slider, tab)

html

<body>

</div>

</div>

</div>

</body>

css

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.slides{

width: 50%;

height: 500px;

border: 3px solid red;

white-space: nowrap; /* 자동 줄바꿈 풀기 */

font-size: 0; /* 엔터키 문자로 봐서 공백 문자 없애기 */

overflow: hidden;

}

.slide{

display: inline-block;

width: 100%;

height: 150px;

border: 3px solid blue;

transition: all 1s;

}

.slide label, .slide div{

display: inline-block;

width: 20%;

height: 100px;

border: 3px solid purple;

}

.slide:nth-child(1){

border: 3px solid green;

}

.slide:nth-child(2){

border: 3px solid blue;

}

.slide:nth-child(3){

border: 3px solid purple;

}

/* input 자식 못가짐 형제태그써야함 */

#s01:checked ~ .slides .slide{

transform: translateX(0%);

background-color: red;

}

#s02:checked ~ .slides .slide{

transform: translateX(-100%);

background-color: green;

}

/* 이동 */

#s03:checked ~ .slides .slide{

transform: translateX(-200%);

background-color: blue;

}

input[type="radio"]{

display: none;

}

<tab>

html

<body>

<label for="tab2">bottom</label>

<label for="tab3">shirts</label>

</div>

</div>

</body>

css

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.box{

width: 70%;

height: 500px;

border: 3px solid red;

margin-top: 20px;

}

.button_box, .content_box{

width: 93%;

height: 40%;

border: 3px solid blue;

margin: 20px;

}

label{

display: inline-block;

width: 30%;

height: 100px;

border: 3px solid purple;

}

.all{

margin: 5px;

display: none;

}

/* content 지우기 */

.content1{

width: 100%;

height: 40px;

background-color: green;

}

.content2{

width: 100%;

height: 40px;

background-color: blue;

}

.content3{

width: 100%;

height: 40px;

background-color: blue;

}

.content4{

width: 100%;

height: 40px;

background-color: orange;

}

/* 일일히 클래스 주지 않을 때 div:nth-child() 사용*/

/* tab 체크 됐을 때 */

#tab1:checked ~ .box .content_box .a{

display: block;

}

#tab2:checked ~ .box .content_box .b{

display: block;

}

#tab3:checked ~ .box .content_box .c{

display: block;

}

input{

display: none;

}

'웹프로그래밍 > CSS' 카테고리의 다른 글

프로그래밍 언어 활용 23일차 (24/12/11) (2)	2024.12.11
프로그래밍 언어 활용 22일차 (24/12/10) (0)	2024.12.10
프로그래밍 언어 활용 20일차 (24/12/06) (2)	2024.12.06
프로그래밍 언어 활용 19일차 (24/12/05) (0)	2024.12.05
프로그래밍 언어 활용 18일차 (24/12/04) (0)	2024.12.04

현재글프로그래밍 언어 활용 21일차 (24/12/9)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그