반응형
SMALL
반응형웹 기본 퍼블리싱 코드들
홈페이지 제작하다 보면
기본적으로 넣어야되는 기본 코드들이 있습니다.
매번 꼭 필요한 코드내용들입니다.
매번 암기해서 적기에는
내용이 복잡하고 암기할 수 있는 분량도 아니기에
기본정리를 해보았습니다.
기본틀을 만들어 사용하면 시간절약이 많이 되기때문에
유용하게 빠르게 퍼블리싱을 할 수 있습니다.
[기본세팅 사항들]
반응형웹 기본 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>
감사합니다.
반응형
LIST
'html jquery css' 카테고리의 다른 글
| css3 animation 모음 (0) | 2022.09.29 |
|---|---|
| 슬라이더 : swiper (0) | 2022.09.27 |
| sns 버튼 코딩소스 (0) | 2022.09.27 |
| 블라캣 brackets - html코딩 에디터 (0) | 2022.09.26 |
| 반응형홈페이지 미디어쿼리 css 연결하기 (0) | 2021.01.23 |
| 구글 웹폰트 코딩하기 (0) | 2020.11.05 |
| 프로그램 코드 연습사이트 (0) | 2020.11.03 |
| 반응형 미디어 쿼리 작성시 html코딩 (0) | 2020.10.29 |