본문 바로가기
  • GDG on campus Ewha Tech Blog
3-2기 스터디/HTML+CSS+JS 실전 퍼블리싱

[5주차] 확장선택자, 콘텐츠 slider

by Hangii 2022. 5. 22.

💡햄버거 버튼

<body>
    
    <div class="container">
        <input type="checkbox" id="trigger">
        <label for="trigger">              <!--input의 id와 label의 for를 동일하게 유지. imput이 display:none;에 의해 사라져도 label이 그 역할을 대신 함.-->
            <span></span>
            <span></span>
            <span></span>
        </label>
    </div>
/*주요 CSS 속성: input, label, 인접선택자, 형제선택자, 속성선택자:checked, opacity, transform, nth-child, position */
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #222;
}

a{
    text-decoration: none;
    color: #222;
}

/*Trigger Button*/
input[id=trigger] {
    display: none;
}   /*하나의 문서 안에 id는 하나만 사용 가능하므로 id를 사용하면 중복 안됨. */
label[for=trigger] {
    position: relative;   /*부모요소*/
    width: 40px;
    height: 30px;
    display: block;
    cursor: pointer;      /*마우스를 올렸을 때 손가락 모양이 나오게 함*/
}
label[for=trigger] span {
    position: absolute;   /*자식요소*/
    height: 2px;
    background-color: #000;
    width: 100%;
    transition: 0.3s;
}
label[for=trigger] span:nth-child(1){
    top: 0%;
}
label[for=trigger] span:nth-child(2){
    top: 50%;
}
label[for=trigger] span:nth-child(3){
    top: calc(100% - 2px);
}

input[id=trigger]:checked + label[for=trigger]  /*클릭했을 때 인접선택자인 span을 변화시킴*/
span:nth-child(1) {
    top: 50%;       /*먼저 가운데로 내려줘야함.*/
    transform: rotate(45deg);    /*45도 회전*/
}
input[id=trigger]:checked + label[for=trigger]  /*클릭했을 때 인접선택자인 span을 변화시킴*/
span:nth-child(2) {
    opacity: 0;
}
input[id=trigger]:checked + label[for=trigger]  /*클릭했을 때 인접선택자인 span을 변화시킴*/
span:nth-child(3) {
    top:50%;       /*먼저 위로 올려줘야함.*/
    transform: rotate(-45deg);       /*반대방향으로 45도 회전*/
}

💡사이드 메뉴 만들기

<body>
    
    <div class="container">
        <input type="checkbox" id="trigger">
        <label for="trigger">              <!--input의 id와 label의 for를 동일하게 유지. imput이 display:none;에 의해 사라져도 label이 그 역할을 대신 함.-->
            <span></span>
            <span></span>
            <span></span>
        </label>
        <div class="sidebar"></div>
    </div>

</body>
body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.5em;
    margin: 0;
    font-weight: 300;
    color: #222;
  }
  a {
    text-decoration: none;
    color: #222;
  }
  
  /* Trigger Button */
  input[id=trigger] {
    display: none;
  }
  label[for=trigger] {
    /*border: 1px solid red;*/
    width: 30px;
    height: 20px;
    display: block;
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
  }
  label[for=trigger] span {
    position: absolute;
    height: 2px;
    background-color: #000;
    width: 100%;
    left: 0;
    transition: 0.3s;
  }
  label[for=trigger] span:nth-child(1) {
    top: 0;
  }
  label[for=trigger] span:nth-child(2) {
    top: 50%;
  }
  label[for=trigger] span:nth-child(3) {
    top: 100%;
  }
  
  /* Sidebar */
  .sidebar {
    background-color: #000;
    width: 300px;
    height: 100vh;
    position: fixed;
    right: -300px;
    transition: 0.3s;
  }
  
  input[id=trigger]:checked + label[for=trigger] span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }
  input[id=trigger]:checked + label[for=trigger] span:nth-child(2) {
    opacity: 0;
  }
  input[id=trigger]:checked + label[for=trigger] span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }
  
  input[id=trigger]:checked ~ .sidebar {    /*인접해있지 않으므로 형제선택자를 사용해야 한다.*/
    right: 0;
  }
  input[id=trigger]:checked + label[for=trigger] {
    right: 310px;
  }

💡Full-screen slider

<body>
    <div class="tab-inner">
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2" >
        <input type="radio" name="tabmenu" id="tab3" >
            <div class="tabs">
                <div class="items">
                    <div>
                        <h1>Slide Content 01</h1>
                    </div>
                    <div>
                        <h1>Slide Content 02</h1>
                    </div>
                    <div>
                        <h1>Slide Content 03</h1>
                    </div>
                </div>
            </div>
            <div class="btn">
                <label for="tab1"></label>
                <label for="tab2"></label>
                <label for="tab3"></label>
            </div>
    </div>
</body>
input[name=tabmenu]{
    display: none;
}
.tabs{
    overflow: hidden;
    position:relative; 
    /*부모요소는 자식요소만큼의 높이값을 가지고 있다가 자식요소가 position:absolute;면 자식요소가 붕 뜨므로 
    부모요소에게 강제로 높이값을 줘야함.*/
    height: 100vh;
}
.items{
    height: 100vh;
    width: 300%;
    transition: 0.5s;
    position: absolute;
    top:0;
    left:0;
}
.items div{
    height: 100vh;
    float: left;
    width: 33.33333%;      /*100%아님 주의*/
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.items div:nth-child(1){
    background-color: teal;
}
.items div:nth-child(2){
    background-color: dodgerblue;
}
.items div:nth-child(3){
    background-color: yellowgreen;
}
.items div h1{
    font-size: 80px;
    font-weight: normal;
}
.btn{
    position: absolute;      /*position:absolute;를 줬을 때 해당 div가 inline-block이 됨.*/
    width:100%;
    text-align: center;
    bottom: 20px;
}
.btn label{
    display: inline-block;
    height: 5px;
    width: 50px;
    background-color: #fff;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -100%;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -200%;
}

input[id=tab1]:checked ~ .btn label[for=tab1]{
    background-color: #000;
}
input[id=tab2]:checked ~ .btn label[for=tab2]{
    background-color: #000;
}
input[id=tab3]:checked ~ .btn label[for=tab3]{
    background-color: #000;
}

 

저작자표시 비영리

'3-2기 스터디 > HTML+CSS+JS 실전 퍼블리싱' 카테고리의 다른 글

[6주차] before, after, 순서체크 가상클래스, 체크박스  (0) 2022.05.22
[4주차] before after 가상클래스와 순서 체크 가상클래스  (0) 2022.05.21
[3주차] CSS 키프레임 애니메이션과 가상클래스 hover  (0) 2022.05.08
[2주차] jQuery Basics & Method  (0) 2022.05.05
[1주차] Basic HTML & CSS Overview  (0) 2022.05.05

관련글

댓글

티스토리툴바