공부 노트

    <audio id="bgm" src="img/videopage/piano-bgm.mp3" loop autoplay controls></audio>

// Audio control
var bgm = document.getElementById('bgm');
bgm.volum = 0.2; // volum: 0 ~ 1

폰트어썸 유니코드로 넣기 

<span class="like"></span>

찜버튼 상위요소에 포지션relative 넣기

버튼 클릭 시 .active 클래스 넣기

,active : 빨간하트로 바뀐다  

/* 폰트어썸 4.7 */
@import 
url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.like {
    cursor: pointer;
    transition: 0.5s;
}
.like:before {
    content: '\f08a';
    font-family: fontawesome;
    position: absolute;
    right: 0;
    top: 0;
    color: #bbb;
}
.like.active:before {
   content: '\f004'; 
   color: crimson;
}

$('.like').click(function() {
    $(this).toggleClass('active');
});

- jquery mouseenter mouseleave 할 때 배경 이미지 변경하기

사용자 정의 속성 data-image은 a태그에 넣어도 된다.

제이쿼리에서 attr(data-image)로 가져오기

    <div class="container">
        <ul class="navi">
            <li data-image="../img/portrait/portrait-01.jpg">
                <a href="#none">ABOUT</a>
            </li>
            <li data-image="../img/portrait/portrait-02.jpg">
                <a href="#none">INSTRUCTION</a>
            </li>
            <li data-image="../img/portrait/portrait-03.jpg">
                <a href="#none">CLASS</a>
            </li>
            <li data-image="../img/portrait/portrait-04.jpg">
                <a href="#none">LOCATION</a>
            </li>
        </ul>
        <div class="photo"></div>
    </div>
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>

body {
    margin: 0;
}
.navi {
/* 중앙정렬 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    list-style: none;
    padding: 0;
    margin: 0;
    
 /* 배경위로 올라오게 */
    z-index: 100;
}
.navi li {}
.navi li a {
    /* 4em == 64 */
    font-size: 4em;
    color: #fff;
}
.photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url(../img/portrait/portrait-initial.jpg) no-repeat center center; */
    background-image: url(../img/portrait/portrait-initial.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: 0.5s;
/* 제이쿼리에서 백그라운드 이미지만 변경 */
}

// li에 마우스가 올라갈 때
$('.navi li').mouseenter(function() {
    var imgPath = $(this).attr('data-image');
    $('.photo').css({ 
        'background-image':'url('+ imgPath +')' 
    });
});
$('.navi li').mouseleave(function() {
    $('.photo').css({
        'background-image': ''
    });    
});

- 탭 메뉴 스타일(jquery) #1-1 완성 

lorem 더미 텍스트 사용

.btn li의 data-alt="tab1" (첫번째 버튼)을 클리기하면 .tabs #tab1이 나온다.

- 탭 메뉴 스타일 #1 프로토타입 (jquery)

input , ul>li*5, tabs

탭 누르면 content 변경, 검색창(나중에)

간단한 구조만 먼저 작성 

    <section>
        <!-- <input type="text" placeholder="What are you looking for?"> --> 
        <ul class="btn">
            <li data-alt="tab1" class="active">HTML5</li>
            <li data-alt="tab2">CSS3</li>
            <li data-alt="tab3">JQUERY</li>
            <li data-alt="tab4">JAVASCRIPT</li>
            <li data-alt="tab5">CSS FRAMEWORKS</li>
        </ul>
        <div class="tabs">
            <div id="tab1" class="active">tab1</div>   
            <div id="tab2">tab2</div>   
            <div id="tab3">tab3</div>   
            <div id="tab4">tab4</div>   
            <div id="tab5">tab5</div>   
        </div>
    </section>

body {
    margin: 0;
    line-height: 1.5em;
    background-color: #fff;
}
section {
    /* border: 1px solid red; */
    width: 800px;
}
.btn {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.btn li {
    float: left;
    border: 1px solid #000;
    background-color: gray;
}
.btn li.active {
    background-color: #fff;
}
.tabs {}
.tabs div {
    border: 1px solid #000;
    height: 200px;
    display: none;
}
.tabs div.active {
    display: block;
}

// 프로토타입
// li의 data-alt="tab1"과 tabs밑에있는 tab1을 연결해주기
$('.btn li').click(function() {
    // 액티브 클래스 넣기,
    $(this).addClass('active');   
    $(this).siblings().removeClass('active');   

    // data-alt속성 가져오기
    var tab = $(this).attr('data-alt');
    $('.tabs div').removeClass('active');
    $('#' + tab).addClass('active');
    // $('#' + tab).siblings().removeClass('active');
});

자바스크립트 변수(var)와 조건문(if) - 20세 성인 체크

** 폰트어썸 4.7 , 제이쿼리 연결

css 속성: flex input[type=text]

jquery 속성: var if val() alert()

input 값을 가져와서 변수에 저장하기 

input 값이 빈칸, 20미만, 20이상, 숫자가 아닌 다른모든 값인 경우를 체크한다.   

    <div class="container">
        <h1>JavaScript var, val(), if</h1>
        <div class="login">
            <h2>20세 이상 성인인증 체크 제이쿼리 if 조건문</h2>
            <input id="age" type="text" placeholder="나이를 숫자로 입력">
            <button>성인인증</button>
        </div>
    </div>

body {
    margin: 0;
    line-height: 1.5em;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    text-align: center;
    background-color: #fff;
}
.login {
    padding: 30px;
    border: 1px solid #000;
}
.login input[id=age],
.login button {
    padding: 10px;
    outline: none;
}
.login button {
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

// id값이 age인 요소의 value값 받기

$('#age').val() 

// 성인인증 체크
$('.login button').click(function() {
    // 요소의 value값을 받아옴
    var num = $('#age').val();
    if(num == '') {
        alert('나이를 입력하세요.');
    } 
    else if(num < 20) {
        alert('미성년자입니다.');
    }    
    else if(20 <= num) {
        alert('성인입니다.');
    }
    else {
        // 빈칸은 아니고 입력은 했으나 입력이 잘못된경우
        alert('입력내용을 숫자로 넣으세요.');
    }
});

- 예제2 별점 주기

별점의 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 

그 이후 별은 안보이게 active클래스 add , remove

순서 찾는 메서드 index

텍스트 내용 뿌려주는거 text, 태그도 같이 사용하고 싶으면 html

    <div class="star-rating">
        <div class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
        <div class="text">
            별점 주실거죠? ㅎ
        </div>
    </div>

.star-rating {
    width: 260px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.829);
}
.star-rating div {
    float: left;
    width: 50%;
}
.stars {
}
.stars .fa {
    font-size: 18px;
    cursor: pointer;
}
.stars .fa.active {
    color: yellow;
    text-shadow: 0 0 5px yellow;
}
.print {
    color: #fff;
}
.print img {
   /* 인라인끼리 중앙맞추기 */
    vertical-align: middle;
    margin-right: 5px;
}

$('.stars .fa').click(function() {
    $(this).addClass('active');

    // 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 그 뒤에 별들은 안보이게
    $(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');

    // 순서를 찾는 메서드 index 0 1 2 3 4
    // 텍스트내용을 출력 text, 태그+텍스트 html
    var num = $(this).index();
    $('.print').text(starRate);
    var starRate = num + 1
    if(starRate == 1) {
        // $('.print').text('별로에요');
        $('.print').html('<img src="img/icon/star-lv1.png">' + '별로에요');
    } else if(starRate == 2) {
        $('.print').html('<img src="img/icon/star-lv2.png">' + '보통 이에요');
    } else if(starRate == 3) {
        $('.print').html('<img src="img/icon/star-lv3.png">' + '그냥 그래요');
    } else if(starRate == 4) {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '맘에 들어요');
    } else {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '아주 좋아요');
    }
});