웹이야기/웹/HTML (12)
  1. 2011.09.15인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)4
  2. 2011.07.14파이어폭스(Firefox) 주소 명령 체계
  3. 2010.12.20[폰트] 세리프(Serif)와 산세리프(Sans-Serif)의 차이점
  4. 2010.12.16[HTML] HTML 문자 엔티티 및 ISO-8859-1 문자 세트
  5. 2010.12.16[HTML 요소] meta 태그 - 웹 브라우저 렌더링 설정
인터넷 익스플로러(Internet Explorer)의 교차 사이트 스크립팅(XSS)

교차 사이트 스크립팅(XSS: Cross-Site Scripting)의 정의와 설명

교차 사이트 스크립팅(XSS)은 사이트 간 스크립팅 또는 크로스 사이트 스크립팅으로도 불립니다.

웹 애플리케이션에서 많이 나타나는 취약점의 하나로, 웹사이트 관리자가 아닌 이가 웹 페이지에 클라이언트 사이드 스크립트를 삽입하여 다른 사용자가 이를 실행하게끔 허용하는 취약점입니다.

Microsoft Internet Explorer 8 이상에서는 자동으로 이러한 악의적인 코드를 차단해 알림창이 보여주며, 사이트의 특정 페이지가 # 으로 표시되어 정상적으로 페이지를 볼 수 없게 합니다.

Internet Explorer에서 교차 사이트 스크립팅(XSS: Cross-Site Scripting)

다음은 Internet Explorer에서 교차 사이트 스크립팅(XSS) 기능을 해제하는 방법입니다.

교차 사이트 스크립팅(XSS) 기능은 보안 강화 기능이므로, 특별한 상황이 아니라면 해제하지 않도록 하는 것이 좋습니다.

특정 웹사이트 접속을 위하여 기능을 해제해야 하는 상황이라면, 이용 후에는 다시 기능을 작동시켜야 안전합니다.

위의 설명해드린것과 같이, 악의적인 코드가 삽입된 웹페이지에 접속하게 되면 위와 같이 경고 메시지가 나타나게 됩니다.

1. 인터넷 익스플로러(Internet Explorer)를 실행한 상태에서 톱니바퀴 아이콘(인터넷 옵션) (메뉴 > 도구 > 인터넷 옵션)을 클릭하여 인터넷 옵션을 실행합니다.

2. 보안 탭에서 '사용자 지정 수준(C)'을 클릭합니다.

3. '보안 설정 - 인터넷 영역' 창이 실행되면 스크롤을 아래쪽으로 내려 'XSS 필터 사용'을 찾아서, '사용 안함'에 체크하고 확인을 눌러줍니다.

4. 위와 같은 경고 메시지 창이 나타나도 무시하고 '예(Y)'를 클릭하여 위에서 선택한 사용 안함의 값을 적용합니다.

 Comment,    Trackback
파이어폭스(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
[폰트] 세리프(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