공부 노트

1) page ruler redux

브라우저 화면에서 드래그 -> 너비와 높이 알 수 있음

2) Image Downloader 

종류가 많으니까 아무거나 설치 

3) CSSViewer

브라우저에서 원하는 요소의 CSS 스타일을 체크

4) ColorZilla

원하는 요소 색상값을 보거나 추출하거나 색상 관련 확장프로그램

5) Responsive Web Design Tester

활성화된 브라우저 화면을 모바일 기기에 따라 반응형 상태를 확인할 수 있는 반응형 웹사이트 제작시 활용되는 확장프로그램

6) Nimbus

활성화된 브라우저 화면을 이미지 형태로 캡쳐하는 브라우저 화면 캡쳐 전문 프로그램. 부가 기능으로서 브라우저 화면을 동영상으로 레코딩하는 기능도 있음

https://chrome.google.com/webstore/category/extensions?hl=ko 

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