크롬(Chrome browser) 브라우져 풀스크린(Full Screen)으로 바꾸기

크롬 브라우져나 기타 다른 브라우져를 앱으로 사용할때 특히 URL을 보여주고 싶지 않을때 풀 스크린으로 바꾸어 주는 것이 완성된 앱으로서의 기본적인 사항일 것이다.

다음은 크롬 브라우져를 풀스크린으로 바꾸는 방법이다.

  1. 키보드에서 F11  키를 누르면 바로 풀스크린으로 바뀐다.
  2. 브라우져 맨위 오른쪽 끝에 점 3개를 크릭하면 옵션메뉴가 나오고 중간에 사각형 아이콘을 클릭하면 풀스크린으로 바뀐다.
크롬옵션오픈
크롬옵션오픈
크롬풀스크린 옵션
크롬풀스크린 옵션

  1. 아래의 자바스크립으로 위의 #1, #2를 하지 않고도 풀스크린으로 바꿀수 있다.<script>

    function myFullFunction() {

    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {

    docElm.webkitRequestFullScreen();
    }

    }

    </script>

<body onload=”myFullFunction()”>

 

하지만 위의 코드가 문제가 될수 있다. 테이블릿이나 전화기 또는 크롬북 등에서는

“Failed to execute ‘requestFullScreen’ on ‘Element’: API can only be initiated by a user gesture.”

즉 어떤 이벤트라도 만들어야만 제대로 작동할 수 있는 것이기 때문이다.

아직 특별히 다른 방법은 찿지 못했지만 아래의 방식으로 워크어라운드 할 수 있지만 권장하지는 않는다.

 

function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}

document.addEventListener(“keypress”, function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);

즉 앤터키나 리턴키를 다시 클릭해야만 하기 때문이다.

 

이렇게 풀스크린에서 다시 일반모드로 돌아갈려면 위의 #1 혹은 #2 를 하거나  마우스 커서를 브라우져 스크린 맨위쪽으로 옮기면 다시 정상모드로 돌아 갈수 있는 X자 표시를 클릭하면 된다.

 

 

도메인 이름을 서치엔진에 어떻게 등록하나요? (How Do I Register a Domain Name to a Search Engine?)

 

도메인 이름(Domain Name) 을 사고 나서 웹사이트(Web site)를 꾸민 다음으로 가장 중요한 일이 각종 서치 엔진(Search Engine)에 등록(Register)하여 도메인 이름만 쳐도 바로 첫장에 나오게 하는 것입니다.

많은 분들이 SEO(Search Engine Optimization) 에 많이 알고 계시지만 전문적으로 하기에는 시간과 노력이 많이 필요로 하는 부분입니다.
하지만 도메인 이름을 각종 검색엔진에 등록하는 정도는 본인이 손쉽게 하실 수 있습니다.

물론 시간이 지나면 자동으로 등록이 되겠지만 처음에 트레픽(Traffic)이 없는 경우에는 이렇게라도 해서 첯 페이지에 사이트 이름으로 검색했을 경우 바로 나오게 하는 방법이 있습니다.



기존에는 야후(Yahoo), MSN, 구글(Google), 그리고 DMOZ 등이었지만 이제는 빙과 구글만 등록해도 됩니다. 즉 야후(Yahoo)와 빙(Bing)은 같은 검색엔진이고 디모즈는 디렉토리 컨셉이라 이전에는 중요했지만 지금은 너무 많아져 큰 효과가 없을 것입니다.

그럼 밑의 두 검색엔진 링크에 가셔서 등록 하시면 됩니다.

구글 (Google)

빙 (Bing)

꼭 알아야할 HTML 기본 TAG

 
요즘에는 태그를 몰라도 기본으로 만들어진 편집기나 홈페이지 템플릿들이 많아서 누구나가 홈페이지를 쉽게 만들 수 있습니다.   하지만 기본으로 제공되는 템플릿만으로는 부족한 경우가 많습니다.    특정 코드를 삽입하거나 원하는 위치에 배너를 넣거나 약간의 수정이 필요한 경우 아래와 같이 기본 태그만 알고 있어도 쉽게 편집이 가능하니 기본 태그 정도는 알아두시면 좋을듯 합니다.



먼저, HTML 페이지에는 아래와 같은 구성이 있습니다.

<html>
<head><title>홈페이지 타이틀</title></head>
<body>홈페이지 본문
</body>
</html>
위의 태그로부터 시작되어 홈페이지 꾸미기가 시작된다고 보시면 됩니다.
그럼, 홈페이지 배경으로부터 시작해서 글자 꾸미기, 링크 넣는 법, 이미지 삽입, 위치 정렬 등 기본적인 태그를 살펴보도록 하겠습니다.

 

배경색 넣기

<body bgcolor=#ffffff>  :   원하는 배경색(rgb 색상)을 넣으세요.

 

배경이미지 넣기

<body background=””>  :   원하는 배경 이미지의 URL(경로) 을 넣으세요.

 

글자 꾸미기

<font size=”3″ color=”ff3300″ face=”arial”>대한민국</font>  :  원하는 글자의 크기와 색상(rgb 색상), 서체를 넣으세요.

또다른 방법으로는,
<font style=”font-family:arial; font-size:8px; color:#ff3300;”> 와 같이 style 코드를 넣어서 만들 수도 있습니다.

이외에도 자주 사용하는 글자 꾸미는 몇가지 태그는 아래와 같습니다.
<b>글자 굵게하기</b>  혹은 <strong>글자 굵게하기</strong>
<u>글자 아래 줄긋기</u>
<i>글자 이탤릭체로 보이기</i>
<del>글자에 지우기 선긋기</del>

 

단락의 위치 조정하기

<p align=”center”>가운데 정렬방법</p>  :  center 부분에 right 라고 넣으면 특정 paragraph 전체가 오른쪽 정렬이 됩니다.

 

링크 넣기

<a href=”http://0000″>클릭후 이동 </a>  :  코드에 클릭시 이동하고자 하는 주소(URL)를 넣는다.

 

이미지 넣기

<img src=””>  :  보이고자하는 이미지의 주소를 넣고 원하는 위치에 코드를 넣는다.

 

Meta Tag 넣기

이 부분은 홈페이지 제작에서 가장 중요한 부분이라고 볼 수 있습니다.   힘들게 시간을 쪼개서 멋진 홈페이지를 완성하였지만 아무도 방문하여주지 않고 홍보가 안된다면 무의미한 홈페이지라고 할 수 있습니다.   메타 태그를 넣어서 여러 검색 엔진에 검색이 잘 되는 것도 홈페이지 제작에 중요한 부분입니다.

메타태그는 <head> 와 </head> 사이에 넣습니다.

<meta name=”description” content=”홈페이지의 소개글을 이곳에 넣습니다”>
<meta name=”keywords” content=”홈페이지, 인터넷, 홍보, 키워드, 쇼핑몰, 안내, 정보, 초보강좌”> :  검색시 필요한 단어를 넣습니다.   가장 중요한 포인트 입니다.

:: 글자 꾸미기 태그 <font>와 <span> 태그의 비교

 
홈페이지 제작을 하다보면 가장 많이 사용하는 코드임에도 가끔 생각이 안날때가 있습니다. 기본적이지만 가끔씩 찾게되는 기본 코드들을 생각나는대로 정리해 보겠습니다.

먼저, 글자를 꾸미는데 필요한 <font> 태그와 <span> 태그를 이용해서 폰트를 꾸미는 방법을 비교하여 보겠습니다.



1. 글자체 정하기

<font face=”Arial, Helvetica, sans-serif”>글자체를 지정하는 방법</font>

<span style=”font-family : Arial, Helvetica, sans-serif;”>글자체를 지정하는 방법</span>

 

2. 글자 크기 정하기

<font size=”+3″>글자 크기를 지정하는 방법</font>

<span style=”font-size : 14pt”>글자 크기를 지정하는 방법</span> 또는
<span style=”font-size : large;”>글자 크기를 지정하는 방법</span>

 

3. 글자색 정하기

<font color=”#ff3300″>글자색 지정하는 방법</font>

<span style=”color : #ff3300; background-color : #cccccc;”>글자색 지정하는 방법</span>

 

4. 기타 글자 꾸미기 옵션

<span style=”text-transform : uppercase;”>글자를 대문자로 고치는 방법</span>

<span style=”text-align : right;”>글자의 위치 정렬 지정 방법</span>

<span style=”text-decoration : underline;”>글자에 밑줄넣는 방법</span>