공부 노트

css js연결 방법

    <style></style>   html 내부 스타일

    <script></script> 내부 스크립트

    외부에서 불러올 때

    <link rel="stylesheet" href="style.css">

    <script src="custom.js"></script>

    <h1 style="color:red;"></h1> 인라인 스타일

    <h1 onclick="window.close()"></h1> 인라인 자바스크립트

- onclick javascript event

- 현재 탭에서 열기 

section 클릭 시 html로 연결된다.

<section onclick="location.href='iphonex.html'"></section>

<div class="wrap">
        <header>
            <nav>
                <div class="navi">
                    <a href="">icon</a>
                    <a href="">Mac</a>
                    <a href="">iPad</a>
                    <a href="">Watch</a>
                    <a href="">Music</a>
                    <a href="">고객지원</a>
                    <a href="" class="btn-search">검색</a>
                    <a href="" class="btn-search">장바구니</a>
                </div>
            </nav>
        </header>

        <section 
            class="welcome" 
            onclick="location.href='iphonex.html'">
            <div class="heading">
                <h3>iPhone</h3>
                <a href="iphonex.html">Encounter with the future</a>
            </div>
        </section>
</div>

.html 말고 url도 가능하다. "" 안에 "" 로 쓰면 안되고 작은따옴표로 써야한다. 

- 새탭에서 열기 

<section onclick="window.open( '링크' )"></section>

        <!-- 새창으로 띄우기 -->
        <section class="welcome"
            onclick="window.open('iphonex.html')">
            <div class="heading">
                <h3>iPhone X</h3>
                <a href="iphonex.html">Encounter with the future</a>
            </div>
        </section>

<a>

   <section></section>

</a>

a태그로 감싸는 방법은 비추천이다.

    <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');
});