웹이야기 (23)
  1. 2011.07.14파이어폭스(Firefox) 주소 명령 체계
  2. 2011.01.04Google 애드센스 광고 형식 (이용가능 광고형식 및 크기)
  3. 2010.12.20[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점
  4. 2010.12.16[HTML] HTML 문자 엔티티 및 ISO-8859-1 문자 세트
  5. 2010.12.16[HTML 요소] meta 태그 - 웹 브라우저 렌더링 설정
파이어폭스(Firefox) 주소 명령 체계

파이어폭스(Firefox) 주소 명령 체계(버전 74.0 기준)

파이어폭스 주소 명령 체계
명령어 기능 (설명)
about:about 파이어폭스 about 리스트를 보여줍니다.
about:addons 부가 기능 관리자를 실행합니다.
about:buildconfig 빌드(개발) 관련 정보를 보여줍니다.
about:cache 메모리에 캐시된 용량과 캐시로 저장된 파일 정보 및 저장 경로를 보여줍니다.
about:certificate 파이어폭스에 저장된 인증서를 보여줍니다.
about:checkerboard 파이어폭스 Checkerboard 진단기를 실행합니다.
about:compat 파이어폭스 Compat을 실행합니다.
about:config 파이어폭스 고급 환경 설정을 실행합니다. (모든 환경 설정을 보여줌)
about:crashes 전송한 보고서 및 전송한 문제점 보고서 볼 수 있습니다.
about:credits 파이어폭스를 만든이들과 기여자를 볼 수 있습니다.
about:debugging 파이어폭스 디버깅 설정를 보여줍니다.
about:devtools 파이어폭스 개발자 도구를 실행합니다.
about:downloads 파이어폭스에서 다운로드된 목록을 표시합니다.
about:home 파이어폭스 시작페이지를 표시합니다.
about:library 파이어폭스 라이브러리를 표시합니다.
about:license 파이어폭스 라이선스 관련 정보를 표시합니다.
about:logins 파이어폭스에 로그인하여 Sync를 설정하여 사용할 수 있습니다.
about:logo 파이어폭스 로고를 표시합니다.
about:memory 현재 메모리 상태를 표시합니다.
about:mozilla 이스터 에그로, 모질라 서라 불리는 가상의 책에 있는 내용을 표시합니다.
about:networking 네트워크 정보를 표시합니다.
about:newtab 새로운 탭이 열립니다. (단축키 Ctrl + T와 같은 기능을 합니다.)
about:performance 파이어폭스 작업 관리자를 표시합니다.
about:plugins 파이어폭스에서 설치한 플러그인을 표시합니다.
about:policies 엔터프라이즈 정책을 표시합니다.
about:preferences 파이어폭스 설정을 보여줍니다.
about:privatebrowsing 사생활 보호 모드를 실행 합니다.
about:profiles 파이어폭스의 프로필(프로파일) 관리를 할 수 있습니다.
about:protections 파이어폭스 개인 정보 보호를 실행 합니다.
about:rights 소프트웨어 권한 정보를 볼 수 있습니다. (여러분의 권리 알아보기를 실행)
about:robots 이스터 에그로, 로봇에 관련된 이야기를 볼 수 있습니다.
about:serviceworkers 서비스 워커(Service Worker)를 관리 할 수 있습니다.
about:studies 참여했던 연구, 진행 중인 연구, 완료된 연구들을 표시합니다.
about:support 파이어폭스 문제 해결 정보를 실행합니다.
about:sync-log 파이어폭스 동기화(싱크) 기록을 볼 수 있습니다.
about:telemetry 파이어폭스 수집 데이터를 볼 수 있습니다.
about:url-classifier 파이어폭스 URL 분류자 정보를 실행합니다.
about:webrtc 파이어폭스 WebRTC 내부 정보를 표시합니다.
about:welcome 브라우징 시작 화면을 보여줍니다.
 Comment,    Trackback
Google 애드센스 광고 형식 (이용가능 광고형식 및 크기)

Google 애드센스에서 제공하는 광고 종류별 이용 가능한 광고 형식 간략 정리

텍스트 광고 (Text) (목록을 클릭하면 미리 보기 해당 항목으로 이동됩니다.)

이미지 광고 (Image) (목록을 클릭하면 미리 보기 해당 항목으로 이동됩니다.)

비디오 광고 (Video) (목록을 클릭하면 미리 보기 해당 항목으로 이동됩니다.)

링크 단위 (Link Unit) (목록을 클릭하면 미리 보기 해당 항목으로 이동됩니다.)

Google 애드센스 광고 형식
광고 분류
(종류)
사이즈
(크기)
텍스트 사용
가능 여부
이미지 사용
가능 여부
동영상 사용
가능 여부
리더보드 728 x 90
배너 468 x 60 X
하프배너 234 x 60 X X
스카이스크래퍼 120 x 600
와이드 스카이스크래퍼 1600 x 600
버튼 125 x 125 X X
소형 직사각형 180 x 150 X X
수평형 배너 120 x 240 X X
중형 직사각형 300 x 250
정사각형 250 x 250
대형 직사각형 336 x 280 X

Google 애드센스 광고형식 미리 보기

Google 애드센스: 텍스트 광고

리더보드(728 x 90) [샘플 보기]

배너(468 x 60) [샘플 보기]

하프 배너(234 x 60)

버튼(125 x 125)

스카이스크래퍼(120 x 600) [샘플 보기]     와이드 스카이스크래퍼(160 x 600) [샘플 보기]

                         

소형 직사각형(180 x 150)               수평형 배너(120 x 240)

            

중형 직사각형(300 x 250) [샘플 보기]                                정사각형(250 x 250)

               

대형 직사각형(336 x 280) [샘플 보기]

Google 애드센스: 이미지 광고

리더보드(728 x 90)

스카이스크래퍼(120 x 600)               와이드 스카이스크래퍼(160 x 600)

                         

정사각형(200 x 200)                                중형 직사각형 (300 x 250) [샘플 보기]

               

Google 애드센스: 비디오 광고 (참고: 이미지 광고 사용을 선택해야 비디오 광고가 게재됩니다.)

스카이스크래퍼(120 x 600) [샘플 보기]     와이드 스카이스크래퍼(160 x 600) [샘플 보기]

                         

정사각형(200 x 200) [샘플 보기]               중형 직사각형 (300 x 250) [샘플 보기]

               

Google 애드센스: 링크 단위 광고 [샘플 보기]

(120 x 90) 최대 5개의 링크               (120 x 90_4) 최대 4개의 링크

                                  

(160 x 90) 최대 5개의 링크               (160 x 90_4) 최대 4개의 링크

                                  

(180 x 90) 최대 5개의 링크               (180 x 90_4) 최대 4개의 링크

                                  

(468x15) 최대 5개의 링크

(468x15_4) 최대 4개의 링크

(728x15) 최대 5개의 링크

(728x15_4) 최대 4개의 링크

 Comment,    Trackback
[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점

가독성(可讀性])과 판독성(判讀性)

글꼴(폰트)의 차이를 다룰때 가독성과 판독성이 제일 중요 합니다. 차이점은 다음과 같으며, 상황(경우)에 따라 매우 다르게 측정 될 수 있다고 합니다.

글꼴의 가독성과 판독성의 차이점
구분 설명
가독성 인쇄물이 얼마나 쉽게 읽히는가 하는 능률의 정도로 활자체, 글자 간격, 행간(行間), 띄어쓰기 따위에 따라 달라 집니다. (많은 양의 텍스트의 읽기 쉬운 정도를 나타내는 용어)
판독성 인쇄물의 판독성을 뜻하며, 문자의 크기나 특징, 자간 및 행간 등 전체적 레이아웃에 걸친 읽기의 용이성(容易性)을 말합니다. (텍스트의 큰 제목이나 버튼 등 짧은 텍스트를 얼마나 쉽게 알아볼 수 있는가를 나타내는 용어)

세리프(Serif)와 산세리프(Sans-serif)의 차이점

세리프와 산세리프의 차이점
구분 설명
세리프(Serif) 세리프의 사전적 의미로는 인쇄된 H나 I 같은 활자에서 아래 또는 위에 가로로 나 있는 가는 선을 뜻하며, 타이포그래피(Typography)에서 글꼴을 이루는 세로획의 끝이 돌기처럼 나와 장식적인 느낌을 주어 글꼴에 맵시를 내거나 가독성을 높이기 위해 장식한 서체(글꼴)를 칭합니다.
산세리프(Sans-serif) Sans는 프랑스어로 '없다' 라는 뜻의 단어 입니다. 다시 말해, Sans-serif는 serif가 없다는 뜻입니다. 한마디로 획의 삐침이 없는 서체(글꼴)를 뜻하는 말입니다. 실제로 sans-serif를 지정하지 않는 경우 넷스케이프 네비게이터 웹브라우저는 '돋움' 이나 '명조'로 출력하는 문제가 있습니다.
세리프와 산세리프의 차이점
대표 글꼴과 사용 방법
세리프(Serif)
대표 글꼴 사용 방법
바탕체, 궁서체, Time New Roman CSS(Style sheet)에서 사용법: font { font-family: Time New Roman, Serif; }
산세리프(Sans-serif)
대표 글꼴 사용 방법
굴림체, 돋움체, Arial, Verdana CSS(Style sheet)에서 사용법: font { font-family: Arial, Sans-serif; }
 Comment,    Trackback
[HTML] HTML 문자 엔티티 및 ISO-8859-1 문자 세트

HTML 문자 엔티티 및 ISO-8859-1 문자 세트

HTML 문자 엔티티

HTML 문자 엔티티
결과 설명 엔티티 이름 엔티티 번호
  공백    
< 보다 작음 &lt; &#60;
> 보다 큼 &gt; &#62;
& 앰퍼샌드(and를 나타내는 기호) &amp; &#38;
" 인용 기호 &quot; &#34;
' 아포스트로피 &apos; &#39;
¢ 화폐 센트(cent) 기호 &cent; &#162;
£ 화폐 파운드(pound) 기호 &pound; &#163;
¥ 화폐 엔(yen) 기호 &yen; &#165;
화페 유로(euro) 기호 &euro; &#8364;
© 저작권 &copy; &#169;
® 등록 상표 &reg; &#174;

ISO-8859-1 문자 세트

ISO-8859-1 (0-127의 엔티티 번호)의 첫 번째 부분은 원래 ASCII 문자 집합입니다. 숫자, 대문자 및 소문자, 일부 특수 문자가 포함됩니다.

ISO-8859-1 문자 세트
결과 엔티티 번호 엔티티 이름 설명
 &#32&nbsp;공백
!&#33 느낌표
"&#34&quot;인용 부호
#&#35 숫자 기호
$&#36 달러 기호
%&#37 퍼센트 기호
&&#38&amp;앰퍼샌드
'&#39 아포스트로피
(&#40 왼쪽 괄호
)&#41 오른쪽 괄호
*&#42 별표
+&#43 더하기 기호
,&#44 반점(콤마)
-&#45 빼기 기호
.&#46 마침 기호
/&#47 슬래시(빗금) 기호
0&#48 숫자 0
1&#49 숫자 1
2&#50 숫자 2
3&#51 숫자 3
4&#52 숫자 4
5&#53 숫자 5
6&#54 숫자 6
7&#55 숫자 7
8&#56 숫자 8
9&#57 숫자 9
:&#58 쌍점(콜론)
;&#59 쌍반점(세미콜론)
<&#60&lt;보다 작음 기호
=&#61 등호(같기표) 기호
>&#62&gt;보다 큼 기호
?&#63 물음표
@&#64 앳 기호(골뱅이)
A&#65 라틴 대문자 A
B&#66 라틴 대문자 B
C&#67 라틴 대문자 C
D&#68 라틴 대문자 D
E&#69 라틴 대문자 E
F&#70 라틴 대문자 F
G&#71 라틴 대문자 G
H&#72 라틴 대문자 H
I&#73 라틴 대문자 I
J&#74 라틴 대문자 J
K&#75 라틴 대문자 K
L&#76 라틴 대문자 L
M&#77 라틴 대문자 M
N&#78 라틴 대문자 N
O&#79 라틴 대문자 O
P&#80 라틴 대문자 P
Q&#81 라틴 대문자 Q
R&#82 라틴 대문자 R
S&#83 라틴 대문자 S
T&#84 라틴 대문자 T
U&#85 라틴 대문자 U
V&#86 라틴 대문자 V
W&#87 라틴 대문자 W
X&#88 라틴 대문자 X
Y&#89 라틴 대문자 Y
Z&#90 라틴 대문자 Z
[&#91 왼쪽 대괄호
\&#92 역슬래시(역사선) 기호
]&#93 오른쪽 대괄호
^&#94 곡절 악센트
_&#95 언더바(밑줄 문자)
`&#96 억음 악센트
a&#97 라틴 소문자 a
b&#98 라틴 소문자 b
c&#99 라틴 소문자 c
d&#100 라틴 소문자 d
e&#101 라틴 소문자 e
f&#102 라틴 소문자 f
g&#103 라틴 소문자 g
h&#104 라틴 소문자 h
i&#105 라틴 소문자 i
j&#106 라틴 소문자 j
k&#107 라틴 소문자 k
l&#108 라틴 소문자 l
m&#109 라틴 소문자 m
n&#110 라틴 소문자 n
o&#111 라틴 소문자 o
p&#112 라틴 소문자 p
q&#113 라틴 소문자 q
r&#114 라틴 소문자 r
s&#115 라틴 소문자 s
t&#116 라틴 소문자 t
u&#117 라틴 소문자 u
v&#118 라틴 소문자 v
w&#119 라틴 소문자 w
x&#120 라틴 소문자 x
y&#121 라틴 소문자 y
z&#122 라틴 소문자 z
{&#123 왼쪽 중괄호
|&#124 수직선
}&#125 오른쪽 중괄호
~&#126 물결표
내용 출처/참고 자료 https://www.w3schools.com/html/default.asp 및 일부 내용 수정함.
 Comment,    Trackback
[HTML 요소] meta 태그 - 웹 브라우저 렌더링 설정

웹 브라우저 렌더링 엔진 설정

Internet Explorer 8 부터는 호환성 보기 모드가 있는데, 어떠한 렌더링 엔진을 사용할것인지 설정하는 기능입니다.

X-UA-Compatible는 HTML5에서 비표준 속성으로 경고가 표시 될 수 있습니다.

IE 렌더링 엔진 설정
모드 값 (내용)
Internet Explorer 8 표준 모드 <meta http-equiv="X-UA-Compatible" content="IE=8" />
가장 최신 Internet Explorer 버전의 설정 모드 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
Chrome으로 렌더링 설정 모드 <meta http-equiv="X-UA-Compatible" content="chrome=1" />
최신의 IE 버전 및 Chrome으로 렌더링 설정 모드 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
 Comment,    Trackback