HTML의 기본요소들과 시멘틱 태그를 쓰는 방법, 반응형 사이트를 만들어 보는 연습을 하기 위해 클론코딩했습니다!😀

1. Header 영역 -반응형
2. 전체 메뉴
3. 컨텐츠 레이아웃, 컨텐츠 타이틀
4. 메뉴, 메뉴 반응형
5. 게시판 한줄 효과, 두줄 효과
6. 블로그 영역 고해상도 이미지
7. 이미지 슬라이드
8. 라이트 박스 -lightGallery plugin
9. 필터 이벤트
10. 비디오
11. Side 컨텐츠
12. Footer 영역
13. 접기/펼치기 스크립트
14. 사이드 이펙트 - hover effect

• HTML요소

• CSS요소

  
  
  • box-shadow 속성을 inset으로 설정하여 mouseover시 배경색이 변하는 hover effect를 준다.
  
  

  • 한줄 효과

    .클래스이름 {
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }

  
  

  • 두줄 효과

     {
    	overflow: hidden;
    	text-overflow: ellipsis;
    	display: -webkit-box;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;
    }

  
  

  • 디스플레이 해상도에 따른 이미지 표현
    

    • img의 sreset 속성

      <img
      	src="img/[email protected]"
      	srcset="img/[email protected] 1x, img/[email protected] 2x, img/[email protected] 3x"
      	alt="이미지"
      	width="100%"
      />

      
      

    • 미디어 쿼리를 사용하여 해상도에 따라 배경 이미지 경로를 바꿈

      .blog2 .img_retina {
      	background-image: url('../img/[email protected]');
      	background-size: cover;
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 2),
      	only screen and (min-device-pixel-ratio: 2),
      	only screen and (min-resolution: 2dppx) {
      	.blog2 .img_retina {
      		background-image: url('../img/[email protected]');
      	}
      }
      @media only screen and (-webkit-min-device-pixel-ratio: 3),
      	only screen and (min-device-pixel-ratio: 3),
      	only screen and (min-resolution: 3dppx) {
      	.blog2 .img_retina {
      		background-image: url('../img/blog3*@3.jpg');
      	}
      }

    
    

    • CSS Filter 속성을 이용하여 배경 이미지에 효과를 줌

      
      

    • 카드 뒤집기 (3D CSS 속성)
      

      • perspective: 요소에 원근감을 부여 (600px)
      
      

      • transform-style: preserve-3D => 요소를 3D 공간에 배치
        

      • backface-visivility: 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정 (hidden)
        

      • transform: rotateY() 속성을 이용하여 뒤집는 움직임을 구현 (0 => 180deg, -180deg => 0)

  
  

• JavaScript(jQuery)
  

  • 이미지 공유하기
    

    • facebook : http://www.facebook.com/sharer.php?u={페이지 링크}&t={페이지제목}
      

    • 페이스북 아이콘을 클릭했을 때

      $('.facebook').click(function (e) {
      	e.preventDefault();
      	window.open(
      		'https://www.facebook.com/sharer/sharer.php?u=' +
      			encodeURIComponent(document.URL) +
      			'&t=' +
      			encodeURIComponent(document.title),
      		'facebooksharedialog',
      		'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'
      	);
      });

      
      

    • encodeURIComponent() : 문자열을 인코딩하여 URI로 데이터를 전송

  
  

  • 접기/펼치기
    

    $('.btn').click(function (e) {
    	e.preventDefault();
    	$('.nav').slideToggle();
    	$('.btn').toggleClass('open');
    
    	if ($('.btn').hasClass('open')) {
    		//open이 있을 때
    		$('.btn').find('i').attr('class', 'fa fa-angle-up');
    	} else {
    		//open이 없을 때
    		$('.btn').find('i').attr('class', 'fa fa-angle-down');
    	}
    });