window.open()을 이용한 팝업을 이용할 경우 브라우저에서 팝업을 차단했을 때 열리지 않는다.

window.open 팝업 : http://wishml.tistory.com/46

그래서 요즘은 모달(레이어)팝업 이라고 하는 것을 많이 쓰는데 사용 방법을 공유하겠다.

여기서 사용하는 것은 html, css, javascript 그리고 jquery와 쿠키유지를 하기 위해서 제이쿼리 플러그인 중에서 쿠키 플러그인을 사용하겠다.

팝업창이 이렇게 있을 때 닫기버튼을 누르면 팝업창이 사라지고,

'오늘 하루 이 창 열지 않음' 버튼을 클릭하면 하루동안 쿠키가 유지되어 팝업창이 나타나지 않는다.

예제를 통해 직접 다뤄볼 수 있도록 파일을 첨부했으며 조금만 수정하면 실제 사이트에서 바로 적용이 가능하다.

popup_ex.zip

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

window.open() 을 이용한 팝업 및 오늘 하루 열지 않기 (1)	2017.12.25
반응형 웹 디자인이란? (0)	2017.11.11
11가지 한글 구글 폰트 (0)	2017.09.30
CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0)	2017.08.12
CSS 선택자(selector) 종류 정리 요약 (0)	2017.07.26

여러 사이트를 접속하다보면 어떤 사이트는 금방 접속되는 반면에 한참이 걸린 후에야 페이지가 나타나는 것을 본 적이 있을 것이다. 사이트의 구조에 따라 페이지가 로딩되는 속도가 다르며 너무 오래 걸릴 경우에는 접속자에게 나쁜 인상을 줄 수 있으며 기업이나 회사와 같은 곳의 사이트에서 접속이 오래 걸릴 경우에는 브랜드에 안 좋은 영향을 줄 수도 있다. 어떤 사이트의 속도가 다른 사이트에 비해 어떤지 알아보는 방법에는 구글의 'Testmysite' 라는 사이트를 이용하는 방법이 있다.

모바일 페이지 로드 속도 테스트 : 'Testmysite'

'Testmysite'는 구글에서 운영하는 사이트이다.

한글 버전 : https://testmysite.withgoogle.com/intl/ko-kr

영어 버전 : https://testmysite.thinkwithgoogle.com/intl/en-us

[ 'Testmysite' 메인 페이지 ]

사이트에 접속을 하고 테스트하고 싶은 사이트 주소를 입력한다.

[ 사이트 검사중 ]

사이트 분석하기를 누르면 3g에서의 속도 테스트와 html, css, javascript 등을 여러 소스를 분석하게 되며 모바일 사용 편의성도 검사하게 된다.

[ 사이트 검사 결과 ]

사이트 검사결과 3g에서 로드시간은 7초가 나오며 양호함을 나타냈고 그로 인해 26%의 예상 방문자 손실률이 나타났다.

검사 결과는 조금씩 차이가 있을 수 있으나 대부분 비슷한 결과를 나타낸다.

[업종 비교]

해당 사이트는 양호함을 받긴 했지만 같은 업종의 사이트들보다 로드 속도가 느린 결과를 얻었다.

[속도 높이기]

사이트 속도가 높아지면 방문자를 더 많이 확보할 수 있는데 그 방법을 알려주기도 한다.

[최고 해결 방안]

초기 렌더링에 중요하지 않은 자바스크립트는 첫 번째 렌더링 이후까지 비동기 또는 지연되어야 한다는 등 여러가지 해결 방안이 제시된다. 그리고 무료 보고서를 제공해주는데 이때 필요한 것은 결과를 받을 이메일 주소이다.

사이트를 제작하거나 운영하고 관심이 많은 분들은 'Testmysite' 사이트를 이용해보는 것도 좋은 방법일 것 같다.

저작자표시

'Information' 카테고리의 다른 글

ipconfig, msinfo32.exe 등 cmd 명령어 안될 때 (1)	2018.02.13
아마존 해외직구 하는 방법, 초보자 가이드 (0)	2018.01.19
[모니터] 지원하지 않는 모드입니다. 해결방법! (5)	2017.11.19
윈도우10 부팅 usb 만들기 (0)	2017.09.30
웹 브라우저 캐시 무시하기,지우기,설정 끄기 (0)	2017.09.19

웹서비스를 할 때 누구에게나 같은 모양의 페이지를 보여줘야 하기 때문에 웹폰트의 중요성은 매우 높다고 할 수 있다.

쉽게 사용하는 방법으로는 구글 폰트 https://fonts.google.com/ 를 이용하는 방법이 있는데

사이트를 보면 대부분이 영어를 위한 폰트이며 한글은 없을 것 같다.

하지만 구글에서는 여러 나라의 폰트를 지원하며 한글 폰트 역시 지원하고 있다. https://fonts.google.com/earlyaccess

현재 구글에서 지원해주는 한글 폰트 11가지를 소개하겠다.

1. Hanna (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/hanna.css);

Example : font-family: 'Hanna', sans-serif;

2. Jeju Gothic (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

Example : font-family: 'Jeju Gothic', sans-serif;

3. Jeju Hallasan (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);

Example : font-family: 'Jeju Hallasan', cursive;

4. Jeju Myeongjo (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

Example : font-family: 'Jeju Myeongjo', serif;

5. KoPub Batang (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);

Example : font-family: 'KoPub Batang', serif;

6. Nanum Brush Script (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

Example : font-family: 'Nanum Brush Script', cursive;

7. Nanum Gothic (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

Example : font-family: 'Nanum Gothic', sans-serif;

8. Nanum Gothic Coding (Korean)ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
Example : font-family: 'Nanum Gothic Coding', monospace;

9. Nanum Myeongjo (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

Example : font-family: 'Nanum Myeongjo', serif;

10. Nanum Pen Script (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);

Example : font-family: 'Nanum Pen Script', cursive;

11. Noto Sans KR (Korean)

ex) 가나다라마바사

Link : @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

Example : font-family: 'Noto Sans KR', sans-serif;

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

모달(레이어)팝업 및 오늘 하루 열지 않기 (0)	2017.12.25
반응형 웹 디자인이란? (0)	2017.11.11
CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0)	2017.08.12
CSS 선택자(selector) 종류 정리 요약 (0)	2017.07.26
CSS 정의 및 특징 (0)	2017.07.22

html, css, js 파일 등 웹 서버에 파일을 올렸는데 적용이 안된 경험을 한 적이 있는가?

이런 경우에 패치된 내용을 확인할 수도 없고 원인을 모른다면 정말 답답한 상황이 찾아온다.

이러한 현상이 일어나는 이유는 방문한 페이지를 다시 접속할 때 더 빠르게 보여주기 위해서 웹 브라우저에서 웹 캐시(문서, 그림, 파일 등)를 저장하기 때문이다.

이러한 기능 덕분에 우리는 더 빠른 페이지 로딩이 가능하지만 때로는 오래된 정보를 보여주는 경우가 생기기도 한다.

앞서 말한 새로운 파일이 적용이 안된 이유도 이것 때문이다.

그래서 우리는 웹 브라우저에서 캐시를 무시하거나 지우는 방법에 대해 알아야 한다.

OS와 브라우저에 맞는 방법을 찾아 여러 가지 방법들을 해보면 좋을 것 같다.

[캐시 무시하기]

1. 인터넷 익스플로러

Ctrl + F5(새로 고침)

2_1. 구글 크롬(window)

Ctrl + F5(새로 고침)

Shift + F5(새로 고침)

2_2. 구글 크롬(mac)

Cmd + Shift + R

2_3. 리눅스

Ctrl + F5

3_1. 사파리(버전 4 이상)

Shift + 새로 고침

3_2. 사파리(버전 3 이하)

Cmd + R

4. 오페라

Ctrl + F5(새로 고침)

Shift + F5(새로 고침)

5. 캉커러

F5(새로 고침)

[캐시 지우기 & 설정 끄기]

1. 인터넷 익스플로러

* 캐시 지우기

1. Ctrl + Shift + Del

2. '임시 인터넷 파일 및 웹 사이트' 체크

3. '삭제' 버튼

* 캐시 설정 바꾸기

도구 -> 인터넷 옵션 -> 검색 기록 -> 설정 -> 캐시 및 데이터베이스 ->'웹 사이트 및 데이터베이스 허용' 에서 변경

2. 구글 크롬

* 캐시 지우기

1. Ctrl + Shitf + Del

2. '다음 항목 삭제' 옆 목록에서 '전체' 선택

3. '캐시 삭제' -> '인터넷 사용정보 삭제'

3. 파이어폭스

* 캐시 지우기

1. Ctrl + Shift + Del

2. '삭제할 기간' -> '전체' 선택

3. '캐시' 선택 -> '지금 삭제' 클릭

* 캐시 설정 바꾸기

설정 -> 고급 -> 네트워크 -> '자동 캐시 크기 관리' 체크 후 '제한 용량' 값 '0' 으로 변경

저작자표시

'Information' 카테고리의 다른 글

[모니터] 지원하지 않는 모드입니다. 해결방법! (5)	2017.11.19
윈도우10 부팅 usb 만들기 (0)	2017.09.30
기계식 키보드의 종류와 특징 (적,갈,청,흑) (0)	2017.07.24
이미지 파일 확장자에 대해 알아보자 (0)	2017.07.20
아이폰 배터리 사이클 확인하는 법 (0)	2017.07.14

위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.

CSS 는 Cascading Style Sheet 의 줄임말이다.

html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 '뼈'에 해당한다.

그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.

비유하자면 물고기의 '살'에 해당한다.

CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.

목록1
목록2
목록3

위의 목록은 <ul> 태그와 <li> 태그를 이용해서 만든 것이다. 이것에 css 효과를 주면

목록1
목록2
목록3

이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.

HTML

위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.

이것을 css 로 한다면

CSS

이며 소스는 아래와 같다.

<style>

.cssfont{color:red;}

</style>

이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.

다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.

html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.

CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.

html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)

<html>

<head>

</head>

<body>

</body>

</html>

또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)

<html>

<head>

</head>

<body>

</body>

</html>

그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때  이랫다면

css에서는 /* 주석 */ 를 사용한다.

css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.

p{

color:red;

}

위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.

선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다.

간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0)	2017.08.12
CSS 선택자(selector) 종류 정리 요약 (0)	2017.07.26
HTML5 태그 미지원 브라우저 (0)	2017.07.19
HTML 이미지 맵 만들기(usemap) (0)	2017.07.18
CSS 초기화 파일(초기화 코드) (0)	2017.07.15

현재 HTML5 까지 나왔지만 오래된 브라우저들은 지원하지 않는 경우가 있습니다.

그렇기 때문에 HTML5 로 만들어진 사이트를 옛날 브라우저로 접속할 경우 제작자의 의도와 맞지 않게 사이트가 구성될 수 있기 때문에 HTML5 태그 지원 여부를 확인하고 지원하지 않는 경우 추가적인 설정이 필요합니다.

IE	Edge	Firefox	Chrome	Safari	Opera	IOS Safari	Opera Mini	Android Browseer	Chrome for Android
		52	49			9.3		4.4
	14	53	58		45	10.2		4.4.4
11	15	54	59	10.1	46	10.3	all	56	59
	16	55	60	11	47	11
		56	61	TP	48
		57	62

(html5를 지원 현황)

브라우저는 자신이 인식하지 못하는 태그를 인라인 태그로 취급하기 때문에 html5 태그인 header, section, nav, article, footer 을 쓰기 위해서는

강제로 블록 레벨 태그로 설정해야합니다.

header, section, nav, article, footer{ display:block; }

그리고 IE 8 이하 버전에서는 시맨틱 태그를 지원 하지 않기 때문에 자바스크립트를 이용해야한다.

document.createElement('article');

document.createElement('section');

document.createElement('aside');

document.createElement('nav');

document.createElement('header');

document.createElement('footer');

</script>

위 태그는 <head>와 </head> 사이에 넣는다.

또는 자바스크립트 파일을 이용 할 수 있는데

https://github.com/aFarkas/html5shiv 페이지 접속 후에 src 폴더를 클릭하고 html5shiv.js 파일을 저장하여 사용할 수 있다.

<!-- [if it IE 9]>

<![endif] -->

위 태그는 head 또는 script 또는 body 에 삽입한다.

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 선택자(selector) 종류 정리 요약 (0)	2017.07.26
CSS 정의 및 특징 (0)	2017.07.22
HTML 이미지 맵 만들기(usemap) (0)	2017.07.18
CSS 초기화 파일(초기화 코드) (0)	2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅) (0)	2017.07.15

<img> 태그에 있는 usemap 속성을 이용하면 하나의 사진에 구역을 나눠 서로 다른 사이트로 향하는 링크를 만들 수 있습니다.

ex)

</map>

실제로 해보겠습니다.

(유즈맵 적용 전 사진)

(유즈맵 적용 후 사진)

이미지맵을 적용하기 전 사진에서는 마우스를 사진에 올렸을 때 마우스 포인터에 아무런 변화가 없지만

이미지맵을 적용한 후 사진에는 사진박스, 네이버박스, 다음박스에 마우스를 올렸을 때 포인터가 변하는걸 볼 수 있으며

클릭시 해당 사이트로 이동하는 것을 볼 수 있다.

적용 소스

</map>

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 정의 및 특징 (0)	2017.07.22
HTML5 태그 미지원 브라우저 (0)	2017.07.19
CSS 초기화 파일(초기화 코드) (0)	2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅) (0)	2017.07.15
UTF-8 과 EUC-kr (0)	2017.07.14

<!doctype html>

<head>

$(function(){//제이쿼리 시작

});//제이쿼리 끝

</script>

</head>

<body>

</div>

</body>

</html>

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

HTML 이미지 맵 만들기(usemap) (0)	2017.07.18
CSS 초기화 파일(초기화 코드) (0)	2017.07.15
UTF-8 과 EUC-kr (0)	2017.07.14
HTML 태그 요약 (0)	2017.07.14
HTML 문서 구조 (0)	2017.07.13

인코딩 방식의 차이다.

utf-8은 조합형 문자로 인코딩을 하는 유니코드 방식을 사용한다. 한글 글자는 하나가 3byte로 취급된다.

반면 euc-kr은 완성형 문자로 인코딩을 하는 방식이며, 한글 글자는 하나가 2byte로 취급된다.

euc-kr 보다 utf-8 방식이 사용할 수 있는 언어가 더 많기 때문에 utf-8 방식을 많이 사용한다.

※ 윈도우의 메모장에서는 utf-8로 저장시 자동으로 BOM(Btye Order Mark)을 붙여서 저장하는데,

BOM은 리눅스 등의 환경에서 문제를 일으킬 수 있기 때문에 사용하지 않는 것이 좋다.

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 초기화 파일(초기화 코드) (0)	2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅) (0)	2017.07.15
HTML 태그 요약 (0)	2017.07.14
HTML 문서 구조 (0)	2017.07.13
HTML 이란 무엇일까? (0)	2017.07.13

HTML 에는 수 많은 태그들이 있지만 그 중에서도 자주 쓰는 것들

종류	설명
<h1>~<h6>	제목 요소 / 숫자가 작을수록 큰 제목
<img>	이미지
<p>	단락 구분
<a>	링크
<address>	주소
<map>	맵 좌표 영역 설정
<hr>	구분선
<ul>	순서가 없는 목록 선언
<ol>	순서가 있는 목록 선언
<blockquote>	긴 인용 문구 요소
<li>	목록
<strong>	강한 강조(객관적)
<span>	인라인 요소 그룹화

<table> : 표의 시작과 종료

속성 : width = "너빗값"(표 너비) / border="선 두껫값"(선 두께) / summary="테이블 요약 내용"(테이블 요약 내용) / cellspacing="셀 간격"(셀과 셀의 간격)

<tr> : 한 행의 시작과 종료

<tr> : 제목 열

속성 : scope="col" (열 제목) / scope="row"(행 제목)

<td> : 데이터 열

속성 : rowspan="행 개수"(행 합치기) / colspan="열 개수"(열 합치기)

<caption> : 표 제목

<colgroup> : 열 그룹 시작과 종료

<col> : 열 그룹 설정

속성 : width="열 너비"

<thead> : 표 머리 영역(셀 제목 영역)

<tbody> : 표 본문 영역(데이터 영역)

<tfoot> : 표 바닥 영역(통계, 합계 등)

<form> : 입력 양식 영역(전송역할)

속성 : name(폼 이름) / method(전송 방식 : get \ post) / action(입력값을 전송할 페이지)

<fieldset> : 입력 요소 그룹화

<legend> : 그룹 제목

<input> : 입력 요소

속성(type) : text(한 줄 글상자) / password(비밀번호) / checkbox(체크 박스) / radio(라디오 박스) / submit(확인 버튼,전송기능) / reset(취소 버튼) / image(이미지 버튼,전송기능) / file(파일 첨부) / button(범용 버튼) / hidden(화면 표시 안됨, 숨긴 값을 전송)

속성 : value(입력값) / name(요소 이름) / id(요소 아이디)

<label> : 입력 요소 제목

속성 : for(입력 요소 아이디와 일치해야한다)

<textarea> : 여러 줄 텍스트박스

속성 : rows(지정 행만큼 높이) / cols(지정 열만큼 너비)

<select> : 선택 상자

<option>: 선택 상자 옵션

속성 : value(옵션값)

저작자표시

'Web development > HTML & CSS' 카테고리의 다른 글

CSS 초기화 파일(초기화 코드) (0)	2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅) (0)	2017.07.15
UTF-8 과 EUC-kr (0)	2017.07.14
HTML 문서 구조 (0)	2017.07.13
HTML 이란 무엇일까? (0)	2017.07.13

wish me luck

html

모달(레이어)팝업 및 오늘 하루 열지 않기

'Web development > HTML & CSS' 카테고리의 다른 글

모바일 페이지 속도 테스트 testmysite

'Information' 카테고리의 다른 글

11가지 한글 구글 폰트

1. Hanna (Korean)

2. Jeju Gothic (Korean)

3. Jeju Hallasan (Korean)

4. Jeju Myeongjo (Korean)

5. KoPub Batang (Korean)

6. Nanum Brush Script (Korean)

7. Nanum Gothic (Korean)

8. Nanum Gothic Coding (Korean)

9. Nanum Myeongjo (Korean)

10. Nanum Pen Script (Korean)

11. Noto Sans KR (Korean)

'Web development > HTML & CSS' 카테고리의 다른 글

웹 브라우저 캐시 무시하기,지우기,설정 끄기

'Information' 카테고리의 다른 글

CSS 정의 및 특징

'Web development > HTML & CSS' 카테고리의 다른 글

HTML5 태그 미지원 브라우저

'Web development > HTML & CSS' 카테고리의 다른 글

HTML 이미지 맵 만들기(usemap)

'Web development > HTML & CSS' 카테고리의 다른 글

HTML 기본 구조(기본 틀, 초기설정, 세팅)

'Web development > HTML & CSS' 카테고리의 다른 글

UTF-8 과 EUC-kr

'Web development > HTML & CSS' 카테고리의 다른 글

HTML 태그 요약

'Web development > HTML & CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바