본문 바로가기
카테고리 없음

css

피자돈가스 2022. 10. 27. 13:57

버튼 모양 네모낳게 잡아주는거시 좋다.

 

 

 

 

컨트롤 h 검색기능

 

 

이 갤러리 영역을 혼자 짤 줄 알면 css를 잘하는 것이다.

 

 

 

0. 라디오버튼 (슬라이드 개수만큼 설계)   
    1. 스크린   
        2. 갤러리전체 (목록)     
          3. 슬라이드 (개별)     
      4. 페이지네이션 (페이지수)     
      5. 컨트롤즈 (이전/다음)

 

 

 

 

 

 

 

<section>
        <input type="radio" id="mv-radio" name="mv-radio">
    </section>

 

라디오버튼은 유일하게 어.. 아이디랑 네임이 같아야된다고하셨나? 잘기억이 하하!

 

 

 

 

 

 

 

 

 

    box-sizing: border-box;
 
요놈의 뜻 : 박스사이즈 계산할때 보더까지 계산해라
 
.
 
 
 
 
 

 

1교시 수업 끝~ 중간 메모.

 

 
    /* z-index: -1; 포지션을 주면 레이어가 위로 나온다. 바닥에 깔고싶을때. */

 

 

 

 

 

2교시 끝

 

/* 메인비주얼 */
.mv-container{
    position: relative;
    width: 100%;
    height: 100vh; /* 헤이트는 퍼센트 안됨 */
    overflow: hidden; /*화면밖에 나가는 스크롤 숨기기*/
}
.mv-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 90%;
    /* z-index: -1; 포지션을 주면 레이어가 위로 나온다. 바닥에 깔고싶을때. */
}
.mv-slide{
    float: left;
    width: 20%; /* 5장 들어갈꺼니까! */
    height: 100%; /*퍼센트는 부모따라간다. 부모가 잡은 90프로 안에 꽉찬다는거.*/
    background-repeat: no-repeat;/* 짤려나가도 무조건 채워줌. (안잘려나가고싶으면 컨테인 */
    background-position: center center;
    background-size: cover;
}
.mv-slide0{background-image: url('../images/bg0.jpg');}
.mv-slide1{background-image: url('../images/bg1.jpg');}
.mv-slide2{background-image: url('../images/bg2.jpg');}
.mv-slide3{background-image: url('../images/bg3.jpg');}
.mv-slide4{background-image: url('../images/bg4.jpg');}

/* 컨트롤즈(이전/다음) */
.mv-controls{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%; /*일자로 쫙 펴준거.*/
    background-color: rgba(255,255,255,0.5);
}
.mv-controls label{}


/* 페이지네이션(페이지버튼) */
.mv-pagination{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #f00;
}
.mv-pagination label{}

/* 라디오버튼으로 비주얼, 라벨 제어 */
#mv-radio0:checked ~ .mv-container .mv-slide0, 
#mv-radio1:checked ~ .mv-container .mv-slide1 
 {
    background-color: #ccc;
}

 

 

 

 

 

 

 

 

 

 

 

밑에 네모 와 안 동그라미를 만든것

 

 

 

 

3교시 끝

 

 

@charset 'UTF8';
/* 리셋css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::before, ::after{
    box-sizing: border-box;
}
ol, ul{
    list-style: none;
}
.blind{
    position: absolute;
    left: -9999em;
}
label{
    cursor: pointer;
}
input[type=radio]{
    display: none;
}

/* 메인비주얼 */
.mv-container{
    position: relative;
    width: 100%;
    height: 100vh; /* 헤이트는 퍼센트 안됨 */
    overflow: hidden; /*화면밖에 나가는 스크롤 숨기기*/
}
.mv-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 100%;
    transition: left 0.8s;
    /* z-index: -1; 포지션을 주면 레이어가 위로 나온다. 바닥에 깔고싶을때. */
}
.mv-slide{
    float: left;
    width: 20%; /* 5장 들어갈꺼니까! */
    height: 100%; /*퍼센트는 부모따라간다. 부모가 잡은 90프로 안에 꽉찬다는거.*/
    background-repeat: no-repeat;/* 짤려나가도 무조건 채워줌. (안잘려나가고싶으면 컨테인 */
    background-position: center center;
    background-size: cover;
}
.mv-slide0{background-image: url('../images/bg0.jpg');}
.mv-slide1{background-image: url('../images/bg1.jpg');}
.mv-slide2{background-image: url('../images/bg2.jpg');}
.mv-slide3{background-image: url('../images/bg3.jpg');}
.mv-slide4{background-image: url('../images/bg4.jpg');}

/* 컨트롤즈(이전/다음) */
.mv-controls{
    position: absolute;
    left: 5%;
    top: 50%;
    width: 90%; /*일자로 쫙 펴준거.*/
    background-color: rgba(255,255,255,0.5);
}
.mv-controls label{
    display: none;
}


/* 페이지네이션(페이지버튼) */
.mv-pagination{
    position: absolute;
    left: 5%;/*밑에 90과 관련이있다. 남은 10을 나누기2*/
    bottom: 30px;
    width: 90%;
    text-align: center;
}
.mv-pagination label{
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 9px 0 0 9px; /*수치를 알면 포지션말고 이렇게 마진 혹은 라벨에 패딩 사용하셈*/
    margin: 0 3px;
}
.mv-pagination label:after{
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.75);
}


/* 라디오버튼으로 비주얼, 라벨 제어 */
#mv-radio0:checked ~ .mv-container .mv-wrap{left: 0;}
#mv-radio1:checked ~ .mv-container .mv-wrap{left: -100%;}
#mv-radio2:checked ~ .mv-container .mv-wrap{left: -200%;}
#mv-radio3:checked ~ .mv-container .mv-wrap{left: -300%;}
#mv-radio4:checked ~ .mv-container .mv-wrap{left: -400%;}

#mv-radio0:checked ~ .mv-container .mv-pagination .mv-label0,
#mv-radio1:checked ~ .mv-container .mv-pagination .mv-label1,
#mv-radio2:checked ~ .mv-container .mv-pagination .mv-label2,
#mv-radio3:checked ~ .mv-container .mv-pagination .mv-label3,
#mv-radio4:checked ~ .mv-container .mv-pagination .mv-label4{
    padding: 7px 0 0 7px;

}

#mv-radio0:checked ~ .mv-container .mv-pagination .mv-label0:after,
#mv-radio1:checked ~ .mv-container .mv-pagination .mv-label1:after,
#mv-radio2:checked ~ .mv-container .mv-pagination .mv-label2:after,
#mv-radio3:checked ~ .mv-container .mv-pagination .mv-label3:after,
#mv-radio4:checked ~ .mv-container .mv-pagination .mv-label4:after {
    width: 10px;
    height: 10px;
}

 

 

 

 

 

 

 

라디오 버튼의 이해

 

 

 

코딩테스트를 위해 날코딩 (하드코딩) 연습을 해봐야한다. 코딩테스트에서 메모장에 써보라고 할 수 있기 때문.
에디터에 너무 기대면 안된다.

 

 

 

 

오늘은 비포에프터에 이렇게 각각 만들어서 화살표디자인 할겨.

 

 

 

 

 

 

 

 

이렇게 회전시켜줘야됨.

 

 

가운데서 회전해서 이렇게 끝이 안맞음.

 

 

 

 

 

 

 

둥글리기

 

 

 

(이게힘들면 일러스트에서 그려서 svg 가져오면 됨)

 

 

 

 

 

이걸 조정해서 각도 조정

 

 

 

비포애프터로 만들면 섀도우도 넣을 수 있다.

 

 

 

 

 

 

 

 

 

 

 

오늘 만든 건 옛날 스타일 느낌이고 요즘은

이런식으로 모아놓는다.

네모칸에 글씨도 들어가고

네모로 이전 다음 버튼도 딱 잡아주고

그밑에 똥글뱅이 페이지네이션.

 

이것은 내일 한다고 하신다고 한다.

 

 

 

 

여기연습해보라~

나머진 그냥 봐두기만 해도 되고 (왜냐면 시간이 너무 오래걸령) 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 
        0. 라디오버튼 (슬라이드 개수만큼 설계)
        1. 스크린
            2. 갤러리전체 (목록)
                3. 슬라이드 (개별)
            4. 페이지네이션 (페이지수)
            5. 컨트롤즈 (이전/다음)
    -->
    <section>
        <input type="radio" id="mv-radio0" name="mv-radio" checked>
        <input type="radio" id="mv-radio1" name="mv-radio">
        <input type="radio" id="mv-radio2" name="mv-radio">
        <input type="radio" id="mv-radio3" name="mv-radio">
        <input type="radio" id="mv-radio4" name="mv-radio">
        <div class="mv-container">
            <ol class="mv-wrap">
                <li class="mv-slide mv-slide0"><span class="blind">메인비주얼0</span></li>
                <li class="mv-slide mv-slide1"><span class="blind">메인비주얼1</span></li>
                <li class="mv-slide mv-slide2"><span class="blind">메인비주얼2</span></li>
                <li class="mv-slide mv-slide3"><span class="blind">메인비주얼3</span></li>
                <li class="mv-slide mv-slide4"><span class="blind">메인비주얼4</span></li>
            </ol>
            <div class="mv-controls">
                <label for="mv-radio0" class="mv-label0"><span class="blind">0</span></label>
                <label for="mv-radio1" class="mv-label1"><span class="blind">1</span></label>
                <label for="mv-radio2" class="mv-label2"><span class="blind">2</span></label>
                <label for="mv-radio3" class="mv-label3"><span class="blind">3</span></label>
                <label for="mv-radio4" class="mv-label4"><span class="blind">4</span></label>
            </div>
            <div class="mv-pagination">
                <label for="mv-radio0" class="mv-label0"><span class="blind">0</span></label>
                <label for="mv-radio1" class="mv-label1"><span class="blind">1</span></label>
                <label for="mv-radio2" class="mv-label2"><span class="blind">2</span></label>
                <label for="mv-radio3" class="mv-label3"><span class="blind">3</span></label>
                <label for="mv-radio4" class="mv-label4"><span class="blind">4</span></label>
            </div>
        </div>
    </section>
</body>
</html>

 

@charset 'UTF8';
/* 리셋css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::before, ::after{
    box-sizing: border-box;
}
ol, ul{
    list-style: none;
}
.blind{
    position: absolute;
    left: -9999em;
}
label{
    cursor: pointer;
}
input[type=radio]{
    display: none;
}

/* 메인비주얼 */
.mv-container{
    position: relative;
    width: 100%;
    height: 100vh; /* 헤이트는 퍼센트 안됨 */
    overflow: hidden; /*화면밖에 나가는 스크롤 숨기기*/
}
.mv-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 500%;
    height: 100%;
    transition: left 0.8s;
    /* z-index: -1; 포지션을 주면 레이어가 위로 나온다. 바닥에 깔고싶을때. */
}
.mv-slide{
    float: left;
    width: 20%; /* 5장 들어갈꺼니까! */
    height: 100%; /*퍼센트는 부모따라간다. 부모가 잡은 90프로 안에 꽉찬다는거.*/
    background-repeat: no-repeat;/* 짤려나가도 무조건 채워줌. (안잘려나가고싶으면 컨테인 */
    background-position: center center;
    background-size: cover;
}
.mv-slide0{background-image: url('../images/bg0.jpg');}
.mv-slide1{background-image: url('../images/bg1.jpg');}
.mv-slide2{background-image: url('../images/bg2.jpg');}
.mv-slide3{background-image: url('../images/bg3.jpg');}
.mv-slide4{background-image: url('../images/bg4.jpg');}

/* 컨트롤즈(이전/다음) */
.mv-controls{
    position: absolute;
    left: 5%;
    top: 50%;
    width: 90%; /*일자로 쫙 펴준거.*/
    background-color: rgba(255,255,255,0.5);
}
.mv-controls label{
    display: none;
    position: absolute;
    top: 0;
    width: 20px;
    height: 48px;
    margin-top: -24px;
}

.mv-controls label:before,.mv-controls label::after{
    content: '';
    display: block;
    width: 3px;
    height: 28px;
    border-radius: 1.5px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.mv-controls label:before{
    transform: rotate(36deg);
    transform-origin: left bottom;
}
.mv-controls label::after{
    transform: rotate(-36deg);
    transform-origin: left top;    
}


/* 페이지네이션(페이지버튼) */
.mv-pagination{
    position: absolute;
    left: 5%;/*밑에 90과 관련이있다. 남은 10을 나누기2*/
    bottom: 30px;
    width: 90%;
    text-align: center;
}
.mv-pagination label{
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 9px 0 0 9px; /*수치를 알면 포지션말고 이렇게 마진 혹은 라벨에 패딩 사용하셈*/
    margin: 0 3px;
}
.mv-pagination label:after{
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.75);
}


/* 라디오버튼으로 비주얼, 라벨 제어 */
#mv-radio0:checked ~ .mv-container .mv-wrap{left: 0;}
#mv-radio1:checked ~ .mv-container .mv-wrap{left: -100%;}
#mv-radio2:checked ~ .mv-container .mv-wrap{left: -200%;}
#mv-radio3:checked ~ .mv-container .mv-wrap{left: -300%;}
#mv-radio4:checked ~ .mv-container .mv-wrap{left: -400%;}

/* 이전버튼 */
#mv-radio0:checked ~ .mv-container .mv-controls .mv-label4,
#mv-radio1:checked ~ .mv-container .mv-controls .mv-label0,
#mv-radio2:checked ~ .mv-container .mv-controls .mv-label1,
#mv-radio3:checked ~ .mv-container .mv-controls .mv-label2,
#mv-radio4:checked ~ .mv-container .mv-controls .mv-label3 {
    display: block;
    left: 0;
}

/* 다음버튼 */
#mv-radio0:checked ~ .mv-container .mv-controls .mv-label1,
#mv-radio1:checked ~ .mv-container .mv-controls .mv-label2,
#mv-radio2:checked ~ .mv-container .mv-controls .mv-label3,
#mv-radio3:checked ~ .mv-container .mv-controls .mv-label4,
#mv-radio4:checked ~ .mv-container .mv-controls .mv-label0 {
    display: block;
    right: 0;
    transform: rotate(180deg); 
    /*transform: scaleX(-1); 이걸로도 똑같은 결과 나옴*/
}

#mv-radio0:checked ~ .mv-container .mv-pagination .mv-label0,
#mv-radio1:checked ~ .mv-container .mv-pagination .mv-label1,
#mv-radio2:checked ~ .mv-container .mv-pagination .mv-label2,
#mv-radio3:checked ~ .mv-container .mv-pagination .mv-label3,
#mv-radio4:checked ~ .mv-container .mv-pagination .mv-label4{
    padding: 7px 0 0 7px;

}

#mv-radio0:checked ~ .mv-container .mv-pagination .mv-label0:after,
#mv-radio1:checked ~ .mv-container .mv-pagination .mv-label1:after,
#mv-radio2:checked ~ .mv-container .mv-pagination .mv-label2:after,
#mv-radio3:checked ~ .mv-container .mv-pagination .mv-label3:after,
#mv-radio4:checked ~ .mv-container .mv-pagination .mv-label4:after {
    width: 10px;
    height: 10px;
}

 

티스토리툴바