모바일 홈페이지 상단에 선언하는 meta

게시글

호환성 보기생략하는 메타태그

IE버전에서 주소창 우쯕 끝에 호환성 보기 버튼이 생기는 경우가 있는데 이때 해당 버튼을 제거하기위해서 아래의 메타태그를 입력하면된다

게시글

반응형 웹에서 기본 구조

반응형 웹 기본 템플릿 :root { --main-color: #333; --nav-bg: #444; --dropdown-bg: #555; --text-color: #fff; --link-color: #333; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; line-height: 1.6; } a { text-decoration: none; color: inherit; } header { background: var(--main-color); color: var(--text-color); } .site-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .site-logo { font-size: 20px; } .menu-toggle { display: none; font-size: 24px; background: none; border: none; color: var(--text-color); cursor: pointer; } nav.main-nav { display: flex; justify-content: center; background: var(--nav-bg); } .nav-item { position: relative; } .main-nav > .nav-item > a { display: block; padding: 15px 20px; color: var(--text-color); } .dropdown { display: none; position: absolute; background: var(--dropdown-bg); min-width: 120px; z-index: 10; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 10px; color: var(--text-color); } .layout { display: flex; gap: 20px; max-width: 1200px; margin: auto; padding: 20px; } aside.sidebar { width: 250px; } .sidebar ul { list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 10px; background: #eee; color: var(--link-color); } main.main-content { flex: 1; } footer.site-footer { background: #f0f0f0; text-align: center; padding: 20px; margin-top: 40px; font-size: 14px; color: #666; } /* 모바일 우선 스타일 */ @media (max-width: 768px) { .menu-toggle { display: block; } nav.main-nav { flex-direction: column; display: none; } nav.main-nav.show { display: flex; } .main-nav > .nav-item > a { padding: 12px 16px; border-top: 1px solid #555; } .dropdown { position: static; } .nav-item:hover .dropdown { display: none; } .nav-item .dropdown { display: none; flex-direction: column; } .nav-item.show .dropdown { display: flex; } .layout { flex-direction: column; } aside.sidebar { width: 100%; } .sidebar ul { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; } .sidebar li { margin-bottom: 0; } .sidebar a { white-space: nowrap; } } /* PC에서 우측 정렬되는 본문 내 텍스트 */ .main-content .page-message { text-align: left; margin-top: 20px; } 로고 ☰ 회사소개. 인사말 오시는길 제품소개. 제품A 제품B 고객센터 공지사항 자주묻는질문 회사소개 인사말 오시는길 안녕하세요 ⓒ 2025 나의 웹사이트. 모든 권리 보유. function toggleMenu() { document.getElementById("mainNav").classList.toggle("show"); } function toggleDropdown(event) { if (window.innerWidth

게시글

웹폰트를 사용한 텍스트 폰트변경하는 방법

@font-face{font-family:fontstyle01;src:url(NanumGothic.eot);} @font-face{font-family:fontstyle02;src:url(NanumGothicBold.eot);} @font-face{font-family:fontstyle03;src:url(NanumGothicExtraBold.eot);} 웹폰트 NanumGothic.eot 웹폰트 NanumGothicBold.eot 웹폰트 NanumGothicExtraBold.eot 웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다

게시글

웹폰트를 사용해서 텍스트 폰트변경하기

웹폰트를 사용하는 방법이다 스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고 사용하고자 하는곳에 다음과같이 사용하면적용된다 웹폰트 NanumGothic.eot 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다 이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다 그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다 아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다 그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다

게시글

페이지를 찾을수 없습니다 페이지 다른 페이질 이동시키는 방법

폰갭은 웹뷰를 기본적으로 사용하다보니 인터네에 연결된것이 전재가 되는경우가 많다 그러다 보면 인터넷이 연결되지 않은경우 페이지를 찾을수 없습니다라는 페이지가 뜨는경우가 있다 이렇게 되면 사용자들이 앱같은 생각보다는 브라우저같은 느낌이 들게되어 찾을수 없습니다라는 페이지 대신 다른 페이지를 띄우고 싶을때가 있다 아래 소스는 해당 소스이다 인터넷이 연결되지 않은경우 로컬파일를 호출하는 형태이다 webView.setWebViewClient(new WebViewClient(){ public void onReceivedError(WebView view, int errorCode,String description, String failingUrl) { webView.loadUrl("file:///android_asset/www/error.htm"); showNetworkError(); } });

게시글

인터넷 브라우저로 띄우는 방법

폰갭을 사용하다보면 폰갭내의 웹뷰로 띄우지 않고 동일한 도메인인경우에 브라우저 창으로 띄울수 있다 이때 사용한다 navigator.app.loadUrl("띄울 주소",{openExternal:true}); 버전이 업되면서 보안때문에 도메인이 다른경우 브라우저창으로 페이지를 보여주게되는데(특별한설정없는경우) 동일한 도메인인경우에 브라우저 창으로 띄울수 있다​

게시글

text 내에 안내문구 넣는 placeholder 태그

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: red; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: red; }

게시글

팝업창 옆에 팝업창 띄우기

팝업창을 띄울때 top,left는 고정되는데 상대적인 위치에 팝업창을 띄우고자 할때 사용하는 방법 var nWidth = "260"; var nHeight = "430"; // 듀얼 모니터인경우 var curX = window.screenLeft; var curY = window.screenTop; var curWidth = document.body.clientWidth; var curHeight = document.body.clientHeight; var nLeft = curX + (curWidth / 2) - (nWidth / 2); var nTop = curY + (curHeight / 2) - (nHeight / 2); var strOption = ""; strOption += "left=" + nLeft + "px,"; strOption += "top=" + nTop + "px,"; strOption += "width=" + nWidth + "px,"; strOption += "height=" + nHeight + "px,"; strOption += "toolbar=no,menubar=no,location=no,"; strOption += "resizable=yes,status=yes"; window.open(src, '', strOption);