반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="webstoryboy">
<meta name="description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<meta name="keywords" content="메가박스, 유투브, 영화, 최신영화, 영화관,
CGV, 롯데시네마, 웹스토리보이, 웹스, 사이트 만들기, 따라하기">
<title>메가박스 사이트 코딩하기</title>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/reset01.css"> <
<link rel="stylesheet" href="assets/css/style02.css">
<!-- 파비콘 -->
<link rel="shortcut icon" href="assets/icons/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="96x96" href="assets/icons/favicon_96.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/icons/favicon_144.png" />
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="assets/icons/favicon_192.png" />
<!-- 페이스북 메타 태그 -->
<meta property="og:title" content="메가박스 사이트 만들기" />
<meta property="og:url" content="https://github.com/webstoryboy/megabox2019" />
<meta property="og:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg" />
<meta property="og:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다." />
<!-- 트위터 메타 태그 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="메가박스 사이트 만들기">
<meta name="twitter:url" content="https://github.com/webstoryboy/megabox2019/">
<meta name="twitter:image" content="https://webstoryboy.github.io/megabox2019/mega.jpg">
<meta name="twitter:description" content="메가박스 사이트 따라하면서 배우는 튜토리얼입니다.">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
</script>
<![endif]-->
</head>
<body>
<!-- 자바스크립트 라이브러리 -->
<script src="assets/js/jquery.min_1.12.4.js"></script>
<script src="assets/js/modernizr-custom.js"></script>
<script src="assets/js/ie-checker.js"></script>
</body>
</html>
♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡정리♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡
<meta name="viewport" content="user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, width=device-width">
반응형 사이트에 설정
<meta http-equiv="X-UA-Compatible" content="ie=edge">
익스플로러8이 추가되면서 호환성 버튼기능이 추가되었다.
익스플로러는 8을 기준으로해서 전후가 브라우저를 해석하는 기능이 엔진이 틀리다.
즉 어떤 렌더링엔진을 사용할 것인지를 선택하게 하는 용도의 버튼이다.
호환성보기는 브라우저의 최신 렌더링 모드로 작동하기 위해 사용한다.
이소스를 쓰면 최신 렌더링 모드를 사용하게 된다.
즉 구 익스플로러가 최신 렌더링을 사용하기 위함이다.
현재는 많이 사용하지 않는다.
웹 페이지에 이미지를 넣거나 파일을 연동 시키는 방법은...
절대 경로 https로 시작하는 모든 디렉토리가 포함된 경로의주소
상대 경로 내 위치를 기준으로 내 폴더에 있는 경로를 표현하는주소 ../ / /
로 구분
상대주소 표시의 의미
../ : 한번 위로 올라감
../../ : 두번 위로 올라감
./ : 파일의 현재 위치를 말함
/: 최상위 루트 폴더를 말함
만약 디렉토리의 이름이 변경되면 절대주소는 다 변경해야 하지만 상대주소는 경로를 변경할 필요가
없다.
파비콘은 favorites + icon을 합친 말로 인터넷 웹 브라우저의 주소창에 표시되는 웹페이지를
대표하는 아이콘
<link rel="shortcut icon" href="favicon.ico"/>
사이즈 16x16, 32x32, 48x48, 64x64, .ico.png.jpg.gif파일을 지원한다.
브라우저마다 지원여부가 다르고, .ico는 모든 브라우저에서 지원한다.
<link rel="apple-touch-icon-precomposed" href="assets/icons/favicon_72.png" />
모바일용 파비콘은 이렇게 사용한다.
파비콘은 .ico파일로 만들어야 한다.
.ico파일은 모든 브라우저를 지원하고 .png파일은 ie6~10에서는 지원이 안된다.
모바일 아이콘도 따로 설정 할 수 있다.
모바일 아이콘은 해상도별로 설정한다.
HTLM5shiv
시멘틱(semantic)은 '의미론적인'이라는 뜻으로 HTML5에서 태그가 의미론적으로 파생되어 생긴
태그들이다.
HTLM5shiv는 구 익스플로러에서 시멘틱 태그를 인식시켜주는 라이브러리이다.
새로 생긴 태그들이 구 익스플로러에서는 인식하지 못하기 때문에 HTLM5shiv를 쓰게 된다.
article,aside, details, figcaption, figure, footer, header, hgroup, main, nav, section,
summary등이 있다.
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="경로명/html5shiv.min.js"></script>
<![endif]-->
조건식 주석과 같이 사용한다.
조건부 주석이란....
익스플로러에서만 작동하는 조건문으로, 이를 이용하여 IE브라우저별로 컨트롤 할 수 있다.
즉 익스플로러 전용 버전 체크 도구이다.
<!--[if lt IE 6]><html class="ie6" lang="ko"><![endif]-->
<!--[if lt IE 7]><html class="ie7" lang="ko"><![endif]-->
<!--[if lt IE 8]><html class="ie8" lang="ko"><![endif]-->
<!--[if lt IE 9]><html class="ie9" lang="ko"><![endif]-->
이런식으로 각가의 브라우저에맞는 클래스명을 부여하여 브라우저를 판별, 컨트롤할 수 있다.
<!--[if lt IE 9]>
<script type="text/javascript">
alert("현재 브라우저는 지원하지 않습니다. 크롬 브라우저를 추천합니다.!");
</script>
<![endif]-->
각각의 브라우저에 맞는 스크립트를 설정하여 컨트롤할 수 있다.
조건부기호
[if lt IE 9] ie9보다 작다면(:it작다)
[if lte IE 9] ie9보다 작거나 같다면(lte: 작거나 같다)
[if gt IE 9] ie9 크다(gt: 크다)
[if gte IE 9 ]ie9 크거나 같다 (gte: 크거나 같다)
[if !IE] IE가 아니면
처럼 조건에 맞는 브라우저 버전을 설정할 수 있다.
jQeury
제이쿼리는 자바스크립트를 이용해서 만든 언어이다.
즉 제이쿼리는 자주 사용하는 코드를 누구나 사용하기 쉽도록 만들어 놓은 스크립트 언어이다.
제이쿼리는 css를 쉽게 적용할 수 있다.
크로스브라우징을 지원한다.
플러그인이 풍부하다.
코드를 적게, 효율적으로 작성할 수 있다.
좋은 확장성과 ajax기능을 구현한다.
제이쿼리를 쓸려면 라이브러리 파일이 연동되어 있어야 한다.
<script src="경로/jquery3.3.1.min.js"></script>
좀더 다양한 기능을 사용하려면 제이쿼리 ui파일이 연동되어 있어야 한다.
<script src="rudfh/jquery-ui-1.12.1.min.js"></script>
jquery.com사이트에서 다운로드
modernizr란...
사용자 브라우저의 HTML5, CSS3 기능들을 감지하고 지원여부를 판별하는 Javascript라이브러리이다.
브라우저 기능검사 도구이다.
<script src="js/modernizr-custom.js"></script> 연동
https://modernizr.com 기능지원여부를 알려주는 사이트
<script src="assets/js/ie-checker.js"></script> 익스플로러 체크해주는 도구
반응형
댓글