[HTML CSS] soundcloud 따라 만들기

728x90

soudcloud ia ui설계 220604.pdf

4.84MB

soundcloud 웹사이트 작업 정리 -1

javascript 수업을 앞두고

html css 강의가 끝나고 기존 웹사이트를 따라 만드는 작업을 했다.

사이트 선정 후 UI 설계서를 작성하였다.

자바스크립로 구현 해야 할 부분도 매우 많겠지만...

우선 최대한 배운 선에서 조금이라도 비슷하게 흉내를 내겠다 라는 마음으로 작성했다.

해당 설계서는 아마 새로운 것들을 체득하고 나서 다시 작성하는 것이 좋을 것 같다.

코드리팩토링도 마찬가지로 ....

처음은 사이트를 관리자도구로 한번 쓱 봐준 후 대략적으로, 시멘트 태그 구역을 나누어 주었다.

1부분은 header , 2는 nav , 3은 section, 4는 footer로 나누어 주었다.

텍스트를 스크랩 해 html 부분 먼저 틀을 잡아놨다.

기존에 html 에 입력할때 img src 태그를 다량으로 사용하여 사진을 넣어두었는데,

html이 너무길었다!!() 그래서 해당부분을 간소화하고 css에 background url 을 통해서 다시 작업해주었다.

항상 객체 지향 CSS(Object Oriented CSS : OOCSS) 을 위해

추가와 유지보수가 쉬운 스타일시트를 만드는 것을 생각하며 작업 해야 한다...

css와 html로 작업하면서 가장 어려움을 겪었던 부분은...

nav에 앨범 사진들이 나열되어있는 부분에서 겪은 z-index 디버그였다.

처음엔 앨범사진, 그리고 hover시에 주황 재생버튼, 그 주황버튼을 hover 했을 때 빨간버튼이 나왔어야 했는데

앨범 사진이 hover되지 않았을때의 z-index 값을 아무리 올려도 버튼 위로 올라가지 않았다. ^^;

애초에 z-index를 잘 모르는 체로 그저 포토샵 레이어 개념정도로만 이해하고 사용했던 게 화근이었던 것 같다..

z-index가 동작하지않는 이유는 찾아보니 4가지가 있다.

1.같은 쌓임 맥락(stacking context)의 요소들은 순서대로 표시된다.

2.엘리먼트의 위치는 static이 아닌 relative, absolute일 때 표시된다.

3.opacity 또는 transform같은 css 속성들을 설정하면 element가 새로운 stacking context에 배치됩니다.

만약 transform:rotate(180deg)를 준다면 element가 새로운 stacking context에 배치됩니다.

그리고 position, z-index를 설정하지 않아도 z-index:0 인 것처럼 동작한다.

4.부모의 z-index 레벨 때문에 element가 더 낮은 stacking context 안에 있습니다.

동일한 레벨의 stacking context일 때 z-index가 의미가 생긴다.

만약 부모의 z-index:5일 경우, 부모의 형제들이 z-index:6이라면 부모의 자식이

z-index:999라도 부모의 형제들을 이길 수 없다.

내 경우에는 4번이 문제였던 것 같다. 몇번의 시도 후 html 구조를 수정 후 css z-inex값을 다시 적용했더니

원하는 방식으로 쌓이는 것을 확인했다.

css와 html로 작업하면서 가장 새로운 것을 습득한 부분은...

lable 태그와 checkbox 속성을 이용해 click event를 만들고 모달창을 javascript 없이 만드는 것과

마찬가지로 lable 태그와 checkbox 속성을 이용 taransform 값을 넣어 움직임 있는 toggle switch button을 생성 하는 것 이었다.

우선 이 태그를 사용해 모달창을 만드려면, input은 날려버리고 남아있는 label을 디자인하면된다.

<input type="checkbox" class="checkhidden" id="clicklist">
<label for="clicklist" > <img src="../img/listicon.png" alt="" id="small-icon">
</label>

<label> 태그의 for 속성은 라벨(label)과 결합될 요소를 명시합니다.

해당 코드 부분에 input 태그의 id = "clicklist" 와 label 태그의 for ="clicklist"가 이름이 동일 한 것을 볼 수 있는데

input id 값과 label for 값을 "clicklist"로 연결해 주면

label 태그로 감싸준 태그와 checkbox 기능이 연동된다. 고로 이미지인 small-icon 를 클릭했을 때 체크박스 체크하기가 연동된다.

.clicklist {
background-image: url(../img/listicon.png);
background-size: contain;
background-repeat: no-repeat;
}

.checkhidden {
position: fixed;
left:-9999px;
}

.boxmusic {
opacity: 0%;
display: none;
width: 480px;
height: 660px;
background: #fff;
}

#clicklist:checked ~ .boxmusic {
opacity: 100%;
display: inline-block;
width: 480px;
height: 660px;
background: #fff;
box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.50);
position: absolute;
bottom: 65px;
left: 760px;
animation-name: anim;
animation-duration: 0.3s;
animation-timing-function: ease-out;
}

생성된 체크박스모양인 class= "checkhidden" 의 css 값은 position: fixed; left:-9999px;로 멀리 날려버린다~!
label의 clicklist checked되었을때 ( label이 감싼 내용이 클릭되었을 때 ) 속성 설정.
label태그 다음에 오는 boxmusic (모달창) 을 디자인 해주면 끝!
boxmusic은 checked되었을때(보일때), checked되지않았을때(보이지않을때) 를 고려하여 속성값을 지정해준다.

같은 태그, 속성을 이용해 작업한 토글 버튼은 아래 링크를 통해 참고하여 만들었다.

How TO - Toggle Switch

www.w3schools.com

토글스위치버튼 :

토글스위치 버튼도 설명한 모달창과 같은 태그 사용.

<label> 과 input checkbox속성 을 사용, label 태그로 감싼 span 태그를 넣고 원형으로 만들어 준 후, chedcked가 되지않았을 때 속성을 회색으로 설정해주고, checked 되었을때에는 animation을 넣어 원형을 움직이게 속성을 설정.

label 태그와 checked 을 이용해 만든 모달창과 그 모달창 안에 들어간 토글 버튼의 전체 코드이다.↓

  <input type="checkbox" class="checkhidden" id="clicklist">
            <label for="clicklist" > <img src="../img/listicon.png" alt="" id="small-icon"> 
            </label>

    <div class="boxmusic" >     

            <div >
            <span class="modal-t-next">Next up</span>
            <button id="clear-btn">clear</button>
            <button class="X-btn">✖</button>
            </div> 
         
                <hr id="modal_line">
    
            <div class="modal_alignBOTTOM">
            <span class="modal-t-auto">autoplay station</span> 
            <span class="modal-t-hear">Hear related tracks base on what's playing now.</span>
            </div>

            <label class="switch-button">
                <input type="checkbox"/>
                <span class="onoff-switch"></span>
            </label>
          
    </div>

/* list 모달창 ▼ */
    .clicklist {
        background-image: url(../img/listicon.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    .checkhidden {
        position: fixed;
        left:-9999px;
    }
    .boxmusic {
        opacity: 0%;
        display: none;
        width: 480px;
        height: 660px;
        background: #fff;
        z-index: 20;
    }
    #clicklist:checked ~ .boxmusic {  
        opacity: 100%;
        display: inline-block;
        width: 480px;
        height: 660px;
        background: #fff;
        box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.50);
        
        position: absolute;
        bottom: 65px;
        left: 760px;
    
        animation-name: anim;
        animation-duration: 0.3s;
        animation-timing-function: ease-out;
    }
    @keyframes anim{
        0% {bottom: -30px; top: -30px; opacity: 0;}
        100% {bottom: 65px; top: -660px; opacity: 1;}
    }
    
    /* list 모달창 내용 ▼*/
    
    .modal-t-next {
        display: inline-block;
        font: #333333;
        font-size: 16px;
        font-weight: 100;
        position: relative;
        left: 30px;
        top: 20px;
    }
    #clear-btn{
        width: 50px;
        height: 25px;
        display: inline-block;
        border: 1px solid lightgray;
        background-color: #fff;   
        border-radius: 2px;
        position: relative;
        left: 300px;
        top: 20px;
    }
    .X-btn {
        font-size: 18px;
        border: none;
        background-color: #fff;
        position: relative;
        left: 310px;
        top: 20px;
    }
    
            #modal_line {
                position: relative;
                top: 30px;
                background-color: lightgray;
                height: 1px;
                border: none;
    
            }
    
    .modal_alignBOTTOM{
        display: flex;
        flex-direction: column;
        position: relative;
        top: 50px;
        left: 30px;
    }
        .modal-t-auto {
        font: #333333;
        font-size: 18px;
    }
    .modal-t-hear {
        display: inline-block;
        font: red;
        font-size: 14px;
        padding-top: 5px;
    }
    
    /* 모달창안에 toggle버튼▼ */
    
    
    .switch-button {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 30px;
        left: 395px;
        top: 10px;
    }
    .switch-button input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .onoff-switch {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius:20px;
        background-color: lightgray;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .onoff-switch:before {
        position: absolute;
        content: "";
        height: 25px;
        width: 25px;
        left: 3px;
        bottom: 3px;
        background-color: #fff;
        -webkit-transition: .5s;
        transition: .4s;
        border-radius:20px;
    }
    .switch-button input:checked + .onoff-switch {
        background-color: #FF5500;
    }
    .switch-button input:checked + .onoff-switch:before {
        -webkit-transform: translateX(25px);
        -ms-transform: translateX(25px);
        transform: translateX(25px);
    }

아래는 js로 바꿔 적용한 로그인창 코드이다.

        <div class="modal_background">
<div class="modal_close"><img class="closeImg" src="../img/xbutton.png" alt=""></div></div>

  /**로그인창 모달**/


.toprignt .login_modalwrap {
    display: none;
    width: 550px;
    height: 600px;
    position: absolute;
    top:50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    background:#eee;
    z-index: 9;
    
}
.modal_background {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(97, 96, 96, 0.5);
    top:0;
    left: 0;
    z-index: 1;
    animation-delay:1s
    
}
.modal_close {
    width: 20px;
    height: 20px;
    position: relative;
    bottom:10px;
    left: 1170px;
}
.modal_close .img{
    width: 50%;
    height: 20px;

}



    
     /* 사이트 연결 버튼 */
    .b1{
    position: relative;
    left:45px;
    text-align: center;
    background-color: #3578E5;
    height: 45px;
    width: 450px;
    color:#ffffff;
    border-radius: 3px;
    font-size: 20px; 
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    padding:0px 10px 5px 0px;
    top:100px;

    }
    .b2 {
    position:relative ;
    top:120px;
    left:45px;
    text-align: center;
    background-color: #fff;
    height: 45px;
    width: 450px;
    color:black;
    border-radius: 3px;
    font-size: 20px;
    text-decoration: none;
    padding:0px 8px 3px 0px;
    display:inline-block;
    transition: all 0.2s;
    border: 1px solid #e5e5e5

    }
    .b3{
    position: relative;
    left:45px;
    top:140px;
    text-align: center;
    background-color: black;
    height: 45px;
    width: 450px;
    color:white;
    border-radius: 3px;
    font-size: 20px;
    text-decoration: none;
    padding:0px 8px 3px 0px;
    display:inline-block;
    transition: all 0.2s;
    }
    .login_modalwrap .b4{
    position: relative;
    left:45px;
    top:170px;
    background-color: #ff5500;
    height: 40px;
    width: 460px;
    border: none;
    color:#ffffff;
    border-radius: 3px;
    font-size: 16px;
    line-height: 18px;
    list-style: none;
    
    }
    .b1 img{
    position:relative;
    top:10px;
    left: 8px;
    height: 77%;
     }
    .b2 img{
    position: relative;
    top:10px;
    left: 0px;
    height: 77%;
    }
    .b3 img{
    position: relative;
    top:11px;
    left: 4px;
    height: 77%;
  
   }


    .line{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    top:170px;
}
    .line::before,
    .line::after {
        content: "";
        flex-grow: 1;
        background: rgba(35, 35, 35, 0.4);
        height: 1px;
        font-size: 5px;
        line-height: 0px;
        margin-top: 12px;
        flex-basis: 100px;
        
      }
   .login_modalwrap .input1{
    position: relative;
    top:170px;
    right: 40px;
    width: 435px;
    height: 40px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 20px;
    font-weight: 100;
    color: -internal-light-dark(black, white);
     margin : 20px 0px 15px 85px
    }
    .need{
    position: relative;
    top:170px;
    right: 20px;
    text-align: end;
    margin-left: 50px;
    font-size: 12px;
    line-height: 1.462;
    color: #044dd2;
    text-decoration: none;
    }
    .small-paragraph{
    position: relative;
    top:180px;
    font-size: 10px;
    color: #999;
    font-weight: 100;
    margin: 10px 40px 10px 40px;
    text-align: center;
     }
    /* 사이트 연결 버튼 */

function modalOpen() {
    document.querySelector('.login_modalwrap').style.display = 'block';
    document.querySelector('.modal_background').style.display = 'block';
}


function modalClose() {
    document.querySelector('.login_modalwrap').style.display = 'none';
    document.querySelector('.modal_background').style.display = 'none';
}

document.querySelector('#modal_btn').addEventListener('click', modalOpen);
document.querySelector('.modal_close').addEventListener('click', modalClose);

- function 함수 (일종의 수납공간)

- modalOpen() 함수 이름

- { document.querySelector('.login_modalwrap').style.display = 'block';

document.querySelector('.modal_background').style.display = 'block'; }

함수데이터

- querySelector()

특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾습니다.

같은 id 또는 class 일 경우 스크립트의 최상단 요소만 로직에 포함합니다.

- .addEventListener('이벤트종류', '함수이름')

자바스크립트에서는 특정 이벤트가 발생했을 시 특정 함수를 실행할 수 있게 해주는 기능

자바스크립트 설명(modal.js)

자바스크립트로 함수 modalOpen, modalClose 생성하고
document.querySelector을 이용해 요소들을 찾아줌 (CSS 선택자에 대응하는 요소중 첫번째요소 반환)
modalOpen 함수에는 display:block으로 모달창이 배치 되게 하고,
modalClose 함수에는 display:none으로 모달창이 사라지게 구현함.
그리고 addEventListener('click'): 클릭 이벤트가 발생하면 오픈 닫기가 될수 있게 설정

css 설명(login.css)
클래스 modal_background, login_modalwrap 회색 투명한 백그라운드 설정, 로그인 흰모달창 생성 다른 이미지 , 호버 이미지, 모달백그라운드 위로 가게 z-인덱스값 설정.
나머지 버튼들은 포지션속성으로 정렬.

html
클래스 modal_background, 클래스 login_modalwrap 기본 골격 버튼 만듬
구글 애플 페이스북 로그인은 a태그를 이용해 링크 연결.

728x90

저작자표시 비영리 변경금지

'STUDY > HTML5 CSS3' 카테고리의 다른 글

[HTML] contentEditable 속성 (0)	2023.04.05
[CSS] CSS 수정 후 적용 안될 때 해결 방법 (0)	2022.12.26
[CSS] 22-05-23 gridgarden 공략 ☑ (0)	2022.06.02
[HTML CSS] 22-05-23 UI 레이아웃 / 미디어 쿼리 ☑ (0)	2022.06.02
[CSS] 22-05-23 CSS 그리드 grid ☑ (0)	2022.06.02

'STUDY > HTML5 CSS3' 카테고리의 다른 글

티스토리툴바