반응형웹 기본 퍼블리싱 내용들

html jquery css

반응형웹 기본 퍼블리싱 내용들

일레븐11 2021. 1. 13. 16:16

반응형웹 기본 퍼블리싱 코드들

홈페이지 제작하다 보면

기본적으로 넣어야되는 기본 코드들이 있습니다.

매번 꼭 필요한 코드내용들입니다.

매번 암기해서 적기에는

내용이 복잡하고 암기할 수 있는 분량도 아니기에

기본정리를 해보았습니다.

기본틀을 만들어 사용하면 시간절약이 많이 되기때문에

유용하게 빠르게 퍼블리싱을 할 수 있습니다.

[기본세팅 사항들]

반응형웹 기본 viewport 설정

브라우전 최신버전으로 세팅하기

jquery 설정하기

default.css설정하기

구글웹폰트 설정하기

폰트어썸 아이콘 설정하기

기본메타태그 설정 등

ie 에서 미디어쿼리 및 css3 사용가능하도록 설정하기

아래에 코드를 공유합니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--  반응형웹 viewport 설정 --> 
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- 최신버전 설정--> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<!-- 일반숫자가 전화번호로 인식되지 않도록 설정--> 
<meta name="format-detection" content="telephone=no"> 
<!-- 구글폰트 설정 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<!-- 폰트어썸아이콘 설정 -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 메타태그 정리 --> 
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--jquery설정 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--css설정 -->
<link rel="stylesheet" href="default.css" type="text/css" />
<!-- ie브라우저 처리 --> 
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]> 
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<title>홈페이지 방문을 환영합니다.</title>
</head>
<body>

여기에 내용 넣기

</body>
</html>

감사합니다.