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

웹프로그래밍/CSS

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

wkun 2024. 12. 6. 18:00

CONTENTS

CSS 기능

1. 고정 라벨 슬라이더

2. 탭

3. 탭 제작 순서

4. 실습

5. 학습(dropdown)

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

CSS 기능

1. 고정 라벨 슬라이더

-콘텐츠를 전환해도 라벨은 고정된 자리에 위치한 슬라이더

◎기존 슬라이더

-콘텐트를 감싼 상자(div/li)를 기준으로 왼쪽/오른쪽 라벨을 각 콘텐츠별로 배치함

◎ 고정 라벨 슬라이더

-콘텐츠를 감싼 상자(div/li)의 기준이 아닌 콘텐츠를 보여주는 화면 즉, 슬라이드 박스 기준으로 왼쪽/오른쪽 라벨을 배치함

그렇게 되면 콘텐츠별 라벨이 같은 위치에 겹쳐짐

그렇게 되면 라벨에 의한 기능이 제대로 동작하지 않음(라벨들이 겹쳐져 있어서 정확히 어떤 라벨이 눌러졌는지 확인이 어려움)

◎고정 라벨 슬라이더의 구성(html)

1)보여질 화면: slidebox

2)콘텐츠들의 묶음: slides

3)실제콘텐츠: slide

4)콘텐츠의 라벨들의 묶음: controlbox

5)콘텐츠별 라벨 묶음: xontrol01, control02, control03

◎고정 라벨 슬라이더의 원리

1)크기 지정

-슬라이드 박스: 콘텐트가 실제로 보여지는 화면의 크기 조정(width)

-슬라이드 아이템: 슬라이드 박스 사이즈의 100%로 크기 조정(width)

2)정렬 및 배치

-슬라이드 아이템들을 여백 없이 가로 정렬

-"슬라이드 박스 기분으로" 라벨(왼쪽, 오른쪽) 위치 조정: 차이점

3)기능 구현

-콘텐츠별 input:radio가 있고 겹쳐져 있지만 콘텐츠별 좌, 우 라벨이 존재함, 라벨 모두 display:none;

-기본 checked를 설정해두고, checked에 해당하는 라벨만 display: block;

-n번째 콘텐츠의 radio버튼이 체크되었을시, 모든 콘텐츠를 동시 선택하여 한번에 (n-1)*100%만큼 왼쪽으로 이동

<고정 라벨 슬라이더 html 기본 구성>

<body>

</div>

</div>

</div>

</div>

</section>

<슬라이더 css 크기 지정 및 정렬>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

text-decoration: none;

list-style: none;

color: inherit;

}

#slider .slidebox {

width: 100px;

height: 100px;

margin: 30px auto;

overflow: hidden;

border: 1px solid black;

white-space: nowrap;

position: relative;

}

#slider .slidebox .slides {

font-size: 0;

}

#slider .slidebox .slides .slide {

width: 100px;

height: 100px;

font-size: 16px;

display: inline-block;

transition: all .5s;

border: 1px solid red;

}

<슬라이더 css label 배치하기>

/* 좌우로 넘기는 LABEL버튼에 대한 스타일 */

#slider .controlbox label {

position: absolute;

z-index: 1;

top: 50%;

transform: translateY(-50%);

cursor: pointer;

display: none;

}

#slider .controlbox .left {

left: 0px;

}

#slider .controlbox .right {

right: 0px;

}

<슬라이더 css label 기능부>

#slider input[id="s01"]:checked ~ .slidebox .control01 label{

display: block;

}

#slider input[id="s02"]:checked ~ .slidebox .control02 label{

display: block;

}

#slider input[id="s03"]:checked ~ .slidebox .control03 label{

display: block;

}

<슬라이더 css 콘텐츠 기능부>

#slider input[id="s01"]:checked~.slidebox .slides .slide {

transform: translateX(0%);

}

#slider input[id="s02"]:checked~.slidebox .slides .slide {

transform: translateX(-100%);

}

#slider input[id="s03"]:checked~.slidebox .slides .slide {

transform: translateX(-200%);

}

/* input 가리기 */

#slider input[type="radio"] {

display: none;

2. 탭

-여러 개의 콘텐츠를 카테고리에 맞게 쉽게 탐색할 수 있도록 해주는 요소

-많은 양의 정보를 "카테고리별로" 나누어 보여줄 떄, 여러 항목을 비교해야 할 때 주로 사용함

◎탭의 구성

◎탭의 원리(html)

1)카테고리별 input:radio 만들기

2)탭버튼, 탭콘텐츠를 포함하는 탭박스 만들기

3)탭버튼 안에 input:radio 각각에 연결되는 label 만들기

4)탭콘텐트 안에 모든 콘텐츠들 작성하기

◎ 탭의 원리(css)

1)크기 지정

-탭 박스: 탭 라벨과 콘텐츠가 보여지는 상자의 크기 조정(width)

-라벨 크기 지정: 균등하게 너비를 가지려면 (100/라벨갯수)%를 주면 됨(width)

2)기능 구현

-콘텐츠 모두 없애기 display:none;

-특정 콘텐츠 나타내기: 특정 카테고리 input:radio 가 checked 되었다면 특정 카테고리에 맞는 콘텐츠들 모두 dispaly:block;으로 나타내기

-라벨의 배경색상 바꾸기: 어떤 카테고리가 선택되었는지 티가 안나므로 배경색상 변경할 것, 특정 카테고리 input:radio가 checked 되었다면, 해당하는 라벨을 선택하여 background-color 변경

*정렬 필요x, label(인라인): 자동 가로 정렬

<기본 탭 html 기본 구성>

<body>

</div>

<div class="all a">첫번째 상자입니다.</div>

<div class="all b">두번째 상자입니다.</div>

<div class="all c">세번째 상자입니다.</div>

<div class="all d">네번째 상자입니다.</div>

</div>

</body>

<기본 탭 css 크기 지정>

margin: 0;

padding: 0;

box-sizing: border-box;

text-decoration: none;

list-style: none;

}

/*라디오 버튼 선택*/

#tab_box{

width: 60%;

margin: 0 auto;

border: 1px solid red;

}

#tab_button{

font-size: 0px;

}

#tab_button label{

width: 25%;

display: inline-block;

font-size: 16px;

color: white;

background-color: rgb(89, 89, 245);

padding: 20px 0;

}

<기본 탭 css 콘텐츠 숨기고 나타내기>

/* 기능부 중에 콘텐츠 나타내기*/

.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;

}

<기본 탭 css 특정 label 배경색 바꾸기>

/* 기능부 중에 버튼의 배경색상 바꾸기 */

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

background-color: pink;

}

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

background-color: pink;

}

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

background-color: pink;

}

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

background-color: pink;

}

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

display: none;

}

.a,.b,.c,.d{

transition: all 2s;

}

3. 탭 제작순서

HTML	<input type="radio" name="tab_radio" id="a"> <input type="radio" name="tab_radio" id="b"> <input type="radio" name="tab_radio" id="c"> <input type="radio" name="tab_radio" id="d">	라디오 버튼을 생성 후 각 id를 할당함
	<div id="tab_box"></div>	탭을 생성할 상자를 만듬
	<div id="tab_button"> <label for="a">a</label> <label for="b">b</label> <label for="c">c</label> <label for="d">d</label> </div> </div>	탭 상자 안에 라벨을 생성하고 라디오랑 연결되는지 확인
	<div id="tab_box"> <div id="tab_button"> <label for="a">a</label> <label for="b">b</label> <label for="c">c</label> <label for="d">d</label> </div> <div id="tab_content"> <div class="all a">첫번째 상자입니다.</div> <div class="all b">두번째 상자입니다.</div> <div class="all c">세번째 상자입니다.</div> <div class="all d">네번째 상자입니다.</div> </div> </div>	tab_content 상자를 만들고 그안네 컨텐츠 내용을 담을 div 4개를 생성한다.
CSS	<link rel="stylesheet" href="tab.css">
	*{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; }
	#a,#b,#c,#d{ display: none; }
	#tab_box{ width: 60%; border: 1px solid red; margin: 0 auto; }	탭의 전체 사이즈를 부모의 60%를 할당 영역을 표시하기 위해서 보더를 할당 중앙정렬 시키기 위해서 마진을 auto로 지정 -- 현재 div 혹은 박스요소의 사이즈가 부모보다 작다면 마진이 생성됨 이마진을 auto로 잡으로 좌우 혹은 상하 공평하게 더치페이함
	#tab_button{ font-size: 0px; }	부모에서 폰트사이즈를 주면 자식요소의 공백을 제거할 수 있음
	#tab_button label{ width: 25%; display: inline-block; font-size: 16px; color: white; background-color: blue; }	라벨은 인라인요소라서 width가 안먹음 이럴때 인라인 블록으로 바뀌면 가로로 배치되면서 width,height명령어가 실행됨 다시 원래대로 폰트 사이즈 할당하면 됨
	.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; }	라벨을 클릭하면 해당 라디오 버튼이 체크되어 CSS적용되어 지정된 요소가 block이 된다
	#a:checked ~ #tab_box #tab_button .a{ background-color: pink; } #b:checked ~ #tab_box #tab_button .b{ background-color: pink; } #c:checked ~ #tab_box #tab_button .c{ background-color: pink; } #d:checked ~ #tab_box #tab_button .d{ background-color: pink; }	라벨을 클릭하면 해당 라이오 버튼이 체크되어 CSS적용되어 지정된 요소의 백그라운드가 바뀐다
	.a,.b,.c,.d{ transition: all 2s; }	트랜지션을 통해서 천천히 바뀜 디스플레이 none / block 은 대상이 아님

4. 실습

예제)

boxing

html

<body>

<div>

<a href="#"><i class="fas fa-map-marker-alt text-primary me-2"></i>Find A Location</a>

</div>

<a href="#"><i class="fas fa-envelope text-primary me-2"></i>example@gmail.com</a>

</div>

<div>

</div>

<a href="#"><i class="fas fa-globe-europe text-primary me-2"></i> English<i

class="fa-solid fa-chevron-down"></i></a>

</div>

</header>

<h1><i class="fab fa-slack me-2"></i>LifeSure</h1>

</div>

<li><a href="#"></a>About</li>

<li><a href="#"></a>Services</li>

<li class="menu1"><a href="#">Pages<i class="fa-solid fa-chevron-down"></i></a>

<li>Our Features</li>

<li>Testimonial</li>

</ul>

</li>

<li><a href="#"></a>Contact</li>

</ul>

<div>

<a href="#" class="search-botton"> Get a Quote</a>

</div>

</a>

</div>

<div>

<span>Call to Our Experts</span><br>

</div>

</nav>

</div>

<h4>Welcome To LifeSure</h4>

<h1>Life Insurance <br>Makes You Happy</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum has been the

industry's standard dummy...

</p>

<div>

<a href="#"><i class="fas fa-play-circle me-2"></i>Watch Video</a>

<a href="#">Learn More</a>

</div>

</div>

<h4>Welcome To LifeSure</h4>

<h1>Life Insurance<br> Makes You Happy</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been

the

industry's standard dummy...

</p>

<div>

<a href="#"><i class="fas fa-play-circle me-2"></i>Watch Video</a>

<a href="#">Learn More</a>

</div>

</label>

</div>

</label>

</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;

}

i, a{

margin-right: 5px;

margin-left: 5px;

}

/* header 시작 */

header{

display: flex;

justify-content: space-between;

align-items: center;

}

header .top-left{

display: flex;

}

header .top-right{

display: flex;

}

/* 특정 방향 테두리 제거 */

header .top-line{

border: 1px solid;

border-top-width: 0;

border-right-width: 0;

border-bottom-width: 0;

}

header .top-right-icon{

border: 1px solid;

border-top-width: 0;

border-right-width: 0;

border-bottom-width: 0;

}

/* header 끝 */

/* nav 시작 */

nav{

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px;

}

nav .logo i{

margin-right: 10px;

}

nav .search{

display: flex;

justify-content: space-between;

}

nav .dropdown-menu{

display: flex;

justify-content: center;

align-items: center;

}

nav .dropdown-menu li{

margin-right: 10px;

}

nav .menu1{

position: relative;

}

.submenu{

position: absolute;

left: 0;

/* background-color: blue; */

display: none;

}

.menu1:hover .submenu{

display: block;

}

/* dropdown 메뉴끝 */

/* 버튼 시작 */

button{

font-size: 13px;

padding: 7px 4px;

border-radius: 50%;

background-color:#015fc9;

color: white;

border: none;

text-align: center;

}

.search-botton{

border: 1px solid #015fc9;

padding: 7px 8px;

background-color: #015fc9;

color: white;

font-size: 15px;

text-align: center;

border-radius: 30px;

}

.nav-right{

display: flex;

justify-content: center;

align-items: center;

}

.nav-right .phone{

width: 50px;

display: flex;

flex-direction: column;

margin-right: 5px;

}

.nav-right a{

font-size: 10px;

border: 1px solid;

border-radius: 50%;

text-align: center;

padding: 5px;

}

.nav-right a i{

color: #015fc9;

transform: scaleX(-1); /* 좌우 반전 */

}

/* nav 끝 */

/* section 시작 */

section{

background-color: #015fc9;

margin-bottom: 10px;

position: relative;

}

.slidebox{

width: 80%;

height: 500px;

margin: 0 auto;

white-space: nowrap;

/* background-color: pink; */

overflow: hidden;

}

.slides{

font-size: 0;

}

.slide{

font-size: 15px;

width: 100%;

height: 500px;

display: inline-block;

position: relative;

transition: all 2s;

/* border: 3px solid red; */

}

section .slide_wrap{

display: flex;

}

.slidetext-box{

width: 50%;

display: flex;

flex-direction: column;

justify-content: center;

}

.slideimg-box{

width: 50%;

}

label{

position: absolute;

bottom: 20px;

font-size: 20px;

display: inline-block;

width: 50px;

height: 50px;

border: 1px solid;

border-radius: 50%;

text-align: center;

background-color: white;

margin-right: 30px;

display: none;

}

label.left {

left: 40%;

}

label.right {

right: 40%;

}

.slideimg-box img{

width: 100%;

}

/* 슬라이드 버튼 */

.slide-btn{

width: 100%;

/* border: 3px solid red; */

}

#slide01:checked ~ .slide-btn .slide-btn01 label {

display: block;

/* background-color: red */

}

#slide02:checked ~ .slide-btn .slide-btn02 label {

display: block;

/* background-color: blue; */

}

#slide01:checked~ .slidebox .slide{

transform: translateX(0%);

}

#slide02:checked~ .slidebox .slide{

transform: translateX(-100%);

}

input{

display: none;

}

5. 학습(dropdown)

html

<body>

</div>

</div>

</body>

css

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.box{

display: flex;

border: 3px solid blue;

padding: 30px;

}

.box>div{

width: 200px;

height: 200px;

border: 3px solid red;

background-color: yellow;

margin: 5px;

}

.box .small>div{

width: 200px;

height: 100px;

border: 3px solid blue;

display: none;

}

/* 이름 일치 시킬 것: hover는 display:none; 준 곳에*/

.drop{

position: relative;

}

.small{

position: absolute;

top: 100%;

left: 0;

}

.drop:hover .small>div{

display: block;

}

/* hover 주기 */

/* 순서: 자리 잡고 난 뒤 display: none 주기-> none준 곳에 block 주기*/

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

프로그래밍 언어 활용 22일차 (24/12/10) (0)	2024.12.10
프로그래밍 언어 활용 21일차 (24/12/9) (0)	2024.12.09
프로그래밍 언어 활용 19일차 (24/12/05) (0)	2024.12.05
프로그래밍 언어 활용 18일차 (24/12/04) (0)	2024.12.04
프로그래밍 언어 활용 17일차 (24/12/03) (0)	2024.12.03

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

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그