006 event

window.addEventListener('DOMContentLoaded',function(){
  
});

    ...

    <script src="js/main.js"></script>
</body>
</html>

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴

heart.addEventListener('click', function(){
    console.log('hit');
    // heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴

heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

...

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

.heart_btn.on .sprite_heart_icon_outline{ /* on 클래스가 추가 된 경우 이미지를 변경 */
    background: url('../imgs/background01.png') no-repeat -26px -261px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

...

...

#header{
    ...
}

#header.on{
    position: fixed; /* 상단에 고정되서 같이 움직임 */
}

#header .inner{
    ...
    transition: all 1s; /* 자연스러운 효과 */
}

#header.on .inner{
    height: 52px;
}  

...

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector('#header');

heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function scrollFunc(){
    // console.log(pageYOffset);
    if(pageYOffset >= 10){  // 드래그할 경우 
        header.classList.add('on');
    }else{
        header.classList.remove('on');
    }
}

window.addEventListener('scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

 

...

#header .inner .logo .sprite_insta_icon:after{
    ...
    transition: all .5s;
}

...

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform:translateY(2px);
    transition:all .5s;
}

#header.on .inner .logo .sprite_insta_icon:after{
    opacity:0; 
}

#header.on .inner .logo div:nth-child(2){
    opacity:0;
} /* 아이콘 사라지게 하는 부분 */

...

const heart = document.querySelector('.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector( '#header');
const sidebox = document.querySelector( '.side_box'); 

heart.addEventListener('click',function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function resizeFunc(){
    if(pageYOffset >= 10){
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        sidebox.style.left = calcWidth +'px';
    }
}

function scrollFunc(){
    // console.log(pageYOffset);
    if(pageYOffset >= 10){ // 드래그할 경우
        header.classList.add('on');
        sidebox.classList.add('on');
    }else{
        header.classList.remove('on');
        sidebox.classList.remove('on');
    }
}

window.addEventListener('scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

...

.side_box{
    ...
}

.side_box.on{
    position: fixed; /* 화면에 고정 */
    top: 80px;
}

...

const heart = document.querySelector('.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector( '#header');
const sidebox = document.querySelector( '.side_box'); 

heart.addEventListener('click',function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function resizeFunc(){
    if(pageYOffset >= 10){
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        // console.log(window.innerWidth);
        sidebox.style.left = calcWidth +'px';
    }
}

function scrollFunc(){
    // console.log(pageYOffset);
    if(pageYOffset >= 10){ // 드래그할 경우
        header.classList.add('on');
        sidebox.classList.add('on');
        resizeFunc();
    }else{
        header.classList.remove('on');
        sidebox.classList.remove('on');
        sidebox.removeAttribute('style');
    }
}

window.addEventListener('scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector( '#header');
const sidebox = document.querySelector( '.side_box'); 

heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function resizeFunc(){
    // console.log('resize!!');
    if(pageYOffset >= 10){
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        // console.log(window.innerWidth);
        sidebox.style.left = calcWidth +'px';
    }
}

function scrollFunc(){
    // console.log(pageYOffset);
    if(pageYOffset >= 10){ // 드래그할 경우
        header.classList.add('on');
        sidebox.classList.add('on');
        resizeFunc();
    }else{
        header.classList.remove('on');
        sidebox.classList.remove('on');
        sidebox.removeAttribute('style');
    }
}

window.addEventListener( 'resize', resizeFunc);
window.addEventListener( 'scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector( '#header');
const sidebox = document.querySelector( '.side_box'); 
// SelectorAll을 활용해 모든 요소를 가져옴
const variableWidth = document.querySelectorAll(".contents_box .contents");

heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function resizeFunc(){
    // console.log('resize!!');
    if(pageYOffset >= 10){
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        // console.log(window.innerWidth);
        sidebox.style.left = calcWidth +'px';
    }
  
    if(matchMedia('screen and (max-width : 800px)').matches){
        // 여러개의 컨텐츠 박스가 있으므로 배열 활용	
        for(let i=0; i<variableWidth.length; i++){
            variableWidth[i].style.width = window.innerWidth -20 +'px'; 
        }
    }else{
        for(let i=0; i<variableWidth.length; i++){		
            variableWidth[i].removeAttribute('style');
        }
    }
}

function scrollFunc(){
    console.log(pageYOffset);
    if(pageYOffset >= 10){ // 드래그할 경우
        header.classList.add('on');
        sidebox.classList.add('on');
        resizeFunc();
    }else{
        header.classList.remove( 'on');
        sidebox.classList.remove( 'on');
        sidebox.removeAttribute( 'style');
    }
}

window.addEventListener( 'resize', resizeFunc);
window.addEventListener( 'scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

const heart = document.querySelector( '.heart_btn'); // 하트 요소 부분을 선택해서 가져옴
const header = document.querySelector( '#header');
const sidebox = document.querySelector( '.side_box'); 
// SelectorAll을 활용해 모든 요소를 가져옴
const variableWidth = document.querySelectorAll(".contents_box .contents");

heart.addEventListener('click', function(){
    console.log('hit');
    heart.classList.toggle('on'); // 하트를 클릭하면 .on 클래스를 추가
});

function resizeFunc(){
    // console.log('resize!!');
    if(pageYOffset >= 10){
        let calcWidth = (window.innerWidth *0.5) +167; // 웹 페이지 기반으로 위치 재조정
        // console.log(window.innerWidth);
        sidebox.style.left = calcWidth +'px';
    }
  
    if(matchMedia('screen and (max-width : 800px)').matches){
        // 여러개의 컨텐츠 박스가 있으므로 배열 활용	
        for(let i=0; i<variableWidth.length; i++){
            variableWidth[i].style.width = window.innerWidth -20 +'px'; 
        }
    }else{
        for(let i=0; i<variableWidth.length; i++){		
            variableWidth[i].removeAttribute('style');
        }
    }
}

function scrollFunc(){
    console.log(pageYOffset);
    if(pageYOffset >= 10){ // 드래그할 경우
        header.classList.add('on');
        sidebox.classList.add('on');
        resizeFunc();
    }else{
        header.classList.remove( 'on');
        sidebox.classList.remove( 'on');
        sidebox.removeAttribute( 'style');
    }
}

window.addEventListener( 'resize', resizeFunc);
window.addEventListener( 'scroll', scrollFunc); // 스크롤 이벤트 발생 시 scrollFunc 실행

.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header.on{
    position: fixed; /* 상단에 고정되서 같이 움직임 */
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
    transition: all 1s; /* 자연스러운 효과 */
}

#header.on .inner{
    height: 52px;
}  

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
    transition: all .5s;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
    transition:all .5s;
}

#header.on .inner .logo .sprite_insta_icon:after{
    opacity:0; 
}

#header.on .inner .logo div:nth-child(2){
    opacity:0;
} /* 아이콘 사라지게 하는 부분 */

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

#main_container .inner{
    width: 935px;
    /* height: 500px; */
    /* background: red; */
    position: relative; /* 기준점을 inner로 변경하기 위함 */
}

.contents_box{

}

.contents{
    width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

.contents .img_section{
    overflow: hidden; /* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

.heart_btn.on .sprite_heart_icon_outline{ /* on 클래스가 추가 된 경우 이미지를 변경 */
    background: url('../imgs/background01.png') no-repeat -26px -261px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    font-size: 14px;
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

.contents .comment_field{
    min-height: 56px;
    padding: 0 20px;
    position: relative; /* 자식들이 absolute로 자리를 잡기 위함 */ 
}

.contents .comment_field input{
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    background: transparent; /* 투명하게 설정 */
}

.contents .comment_field input:focus ~ .upload_btn{
    pointer-events: initial; /* 포인터 이벤트 초기화 */ 
    opacity: 1;
}

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    pointer-events: none; /* 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

.contents .bottom_icons .right_icon > div{
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}

.side_box{
    width: 293px;
    /* height: 300px; */
    /* background: rgba(255,0,0,0.16); */
    position: absolute; /* 부모를 갖는 기준점을 잡지 않으면 꼭대기까지 올라감 */
    right: 0;
    top: 0;
}

.side_box.on{
    position: fixed; /* 화면에 고정 */
    top: 80px;
}

.side_box .profile_thumb{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden; /* 이미지가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.side_box .profile_thumb img{
    width: 100%;
    height: 100%;
}

.side_box .user_profile{
    display: flex; /* 가로 배치 */
    align-items: center;
    font-size: 14px;
    color: #262626;
}

.side_box .detail .id{
    margin-bottom: 5px;
}

.side_box .detail .ko_name{
    font-size: 12px;
    color: #999;
}

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 20px;
    width: 291px;
    font-size: 14px;
    color: #262626;
    font-weight: bold;
    background: white;
}

.side_box > article > header{
    display: flex; /* 가로 배치 */
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    color: #999;
}

.side_box > article > header .more{
    font-size: 12px;
    color: #262626;
    cursor: pointer;
}

.thumb_user{
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.thumb_user .profile_thumb{
    width: 34px; /* 크기가 좀 더 작게 만듬 */
    height: 34px;
}

.thumb_user .time{
    font-size: 10px; 
    letter-spacing: 0.2px;
    color: #999;
}

.side_box .scroll_inner{
    height: 182px;
    overflow-x: hidden; /* x축_자식이 부모 넘지 못하게 한다 */
    overflow-y: auto; /* 자동으로 스크롤을 보여주거나 숨김 */
    /* overflow: hidden auto; x축, y축 한번에 설정 */
}

.hidden_menu{
    display: none;
    width: 600px;
    /* background: red; */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* x축 가운데 정렬 */
    top: 100px;
    overflow: hidden; /* 자식들이 넘치지 않도록 한다 */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
}

.hidden_menu .scroll_inner{
    height: 100px; /* 높이값을 자식에게 준다 */
    width: auto;
    overflow-x: auto; /* 항목이 많아질 경우 알아서 스크롤이 생성 */
    overflow-y: hidden;
    display: flex; /* 가로배치 */
    align-items: center;
    padding: 0 10px;
}

.hidden_menu .scroll_inner .user{
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column; /* 가로 중앙 정렬을 세로 중앙 정렬로 변경 */
    align-items: center;
    margin-right: 15px;
    justify-content: space-between; /* 이미지는 위로 아이디는 아래로 설정 */
}

.hidden_menu .scroll_inner .user .id{
    font-size: 12px;
    color: #262626;
}

.hidden_menu .thumb_img{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.hidden_menu .thumb_img img{
    width: 100%;
    height: 100%;
}

@media screen and (max-width:1000px){
    #header .inner{
        width: 97.5%;
    }

    #main_container{
        padding-top: 220px;
    }

    #main_container .inner{
        width: 93.5%;
    }

    .contents_box{
        display: flex;
        flex-direction: column; /* 세로 배치 받도록 한다 */
        align-items: center; /* 왼쪽으로 치우쳐 지는 걸 방지 */
    }

    .side_box{ /* 사이드 박스 숨기기 */
        display: none;
    }

    .hidden_menu{
        display: block;
    }
}

@media screen and (max-width:650px){
    #header .search_box{
        display: none;
    }

    .hidden_menu{
        width: 95%;
    }
}