Html

굵은 폰트만 따로 글꼴 지정하는 방법

2026-01-07T13:33:29+09:00

홈피를 만들다 보면 전체 레이아웃이나 게시판 스킨에 적용하는 폰트를 지정 할 수 있는데,

해당 폰트가 일반적인 글꼴에서는 마음에 드는데 굵은 글꼴에서는 마음에 들지 않을 수 있는데,

이런 경우 적용 가능한 css

/* 굵은 폰트 지정 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

strong, b,
h1, h2, h3, h4, h5, h6,
[style*="font-weight: bold"],
[style*="font-weight: 700"],
[style*="font-weight:bold"],
[style*="font-weight:700"] {
font-family: "Pretendard", sans-serif !important;
}

이 사이트는 일반 폰트는 넥슨 Lv.2 고딕체 적용, 굵은 폰트는 A.I 가 추천한 무료 폰트인 pretendard체를 적용 했습니다.

잠시 보고 사라지게 만드는 javascript

2026-01-02T10:43:48+09:00

홈피 작업을 하다 보면 어떤 기능들은 페이지 출력시 간혹 필요는 한데,

보통때는 필요가 없어서 자리만 차지하고 있는 것들이 있죠.

이런 것들을 모아서 지정 시간이 지나면 화면에서 사리지게 만드는 javascript.

(참고로 sketchbook5_MH 게시판 스킨을 예로 듭니다.)

// 5초 후 모든 .mh_disappear 패널 제거
setTimeout(function() {
   var panels = document.querySelectorAll('.mh_disappear');

   panels.forEach(function(panel, index) {
       setTimeout(function() {
           panel.style.transition = 'opacity 0.5s';
           panel.style.opacity = '0';

           setTimeout(function() {
               panel.remove();
           }, 500);
       }, index * 500); // 0.5초씩 지연
   });
}, 5000);

• list.html 37줄 mh_disappear추가


<div cond="$grant->manager && $mi->modul_num=='' && !$mo" class="m_num mh_disappear" onclick="copyToClipboard('{$mi->module_srl}')">{$mi->module_srl}</div>
<script cond="$grant->manager && $mi->modul_num==''">
   function copyToClipboard(text) {
       navigator.clipboard.writeText(text).then(function() {
           alert('모듈 번호가 클립보드에 복사되었습니다: ' + text);
       }, function(err) {
           console.error('클립보드 복사 실패:', err);
       });
   }
</script>

• ver.html 19줄 mh_disappear추가

<div cond="$grant->manager && !$mi->ver_info==''" class="last_version mh_disappear">
   <span>SK5_MH 버전 정보</span>
   <span><i class="fa-regular fa-bell"></i>   <a href="https://moonhouse.co.kr/xemy/590994" target="_blank">{$current_version}</a>   <i class="fa-solid fa-caret-right"></i>   <a href="https://github.com/moonhouse-80san/SketchBook5_MH" target="_blank">{$last_version}</a></span>
   <a href="https://moonhouse.co.kr/xemy/590994" target="_blank">MH</a>
     |  
   <a href="https://github.com/moonhouse-80san/SketchBook5_MH" target="_blank">Github
       
   <a class="closeupt" title="기본-table"><i class="fa-solid fa-xmark"></i> 7 Day</a>
</div>

하단 영역을 브라우즈의 최하단에 고정시키는 방법

2025-11-05T13:15:42+09:00

<div class="gtco-content">
   </div>

<footer id="gtco-footer">
       <div class="container">
       </div>
   </footer>

</div>

위의 코드에서  부분을
브라우즈 화면의 최하단에 위치 시키는 방법입니다.

   #page > div:not(nav):not(footer) {
       flex: 1;
   }

   #gtco-footer {
       margin-top: auto;
   }
</style>

콘텐츠가 적을 때는 하단에 붙고, 콘텐츠가 많을 때는 자연스럽게 아래로 밀려나는 방식입니다.

참고로 position: fixed 방법은 footer가 항상 화면에 보이도록 고정하는 방식이라 콘텐츠를 가릴 수 있습니다.

DIV 영역 자체에 링크 거는 방법

2024-06-30T12:10:30+09:00

DIV 영역 그 자체에 링크를 걸어서 DIV 영역을 클릭하면, 지정된 주소(URL)로 이동하도록 하려면 아래와 같이 스타일(style) 속성으로 지정해 주면 된다.

[DIV 영역 자체에 링크 걸기]

[실제 예제]

이 곳은 DIV 영역이며, 영역 자체에 링크를 걸었다. DIV 영역을 클릭하면 지정된 주소로 이동한다.

p.s

1. 현재페이지에 부를때
onclick="location.href='목적지 링크주소(URL)'"

2. 새 창에 열때
onclick="window.open('목적지 링크주소(URL)')"

[활용방법]

- 모바일에서 제목부분만 Url을 주면 손가락으로 터치하기가 쉽지 않습니다.

그런 경우 위의 코드를 주면 글 전체 부분이 클릭되므로 편리합니다.

참고로 세부 Url도 작동을 합니다.

"Borad Html"부분을 세밀하게 터치하면 해당 Url로 이동가능합니다.

테두리(border) 상자에 화살표 모양 css로 출력하기

2024-06-29T10:31:55+09:00

보통 테두리를 만들때 아래와 같이 border를 사용하여 라인의 굵기와 형태 색상을 지정하고 background-color를 사용하여 배경색상을 출력합니다.

// Html
<div class="CommArea">
내용글
</div>

// css
.CommArea { position:relative; width:100%; border:1px solid #eee; background-color:#fafafa; padding:5px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.2); }

테두리에 화살표 모양(댓글형태)을 추가할려면 이미지를 사용해도 되지만 css만으로 구현할 수도 있습니다.

1. Html 과 css

// Html 내용글 상단에 화살표 영역을 추가
<div class="arrow-container">
   <span class="arrow-outer"></span>
   <span class="arrow-inner"></span>
</div>
<div class="CommArea">
   내용글
</div>

// css

.arrow-container { position:relative; display:inline-block; top:2px; left:7px; z-index:1 }
.arrow-outer { position:absolute; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #eee; /* 외부 테두리 색상 */ }
.arrow-inner { position:absolute; top:2px; /* 테두리 두께에 따라 조정 */ left:2px; /* 테두리 두께에 따라 조정 */ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fafafa; /* 내부 색상 */ }

2. css만으로 구현

.CommArea:after {
   content:"";
   position:absolute;
  display:block;
   left:15px;
   top:-7px;
   width:10px;
   height:10px;
   -webkit-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   transform:rotate(45deg);
   background-color:#fafafa;
   border-left:2px solid #eee !important;
   border-top:2px solid #eee !important;
}

위와 같이 화살표 css를 만들어 주면 이미지 없이 화살표가 구현됩니다.

접기, 펼치기 folding기능 -
와
로 간단하게 구현하기

2024-05-23T11:56:37+09:00

보통의 경우 접기, 펼치기 폴딩기능을 적용할려면 js를 사용해서 많이 구현합니다.

근데 js없이 Html과 Css만으로 간단하게 구현되는 코드가 있습니다.

바로 <details> 와 <summary> 코드인데요.

<details>코드만 적용해도 아래와 같이 적용됩니다.

<details>
<p>details코드만 적용</p>
</details>

details코드만 적용

<details> 와 <summary> 코드를 같이 적용하면

<details>
<summary>Click Me!</summary>
<p>details, summary 같이 적용</p>
</details>

Click Me!

details, summary 같이 적용

근데 위와 같이 보이지는 않고 상단의 세부정보 같이 보입니다.

아래의 css가 적용되어져 그렇습니다.

자! 그럼 css까지 같이 구현해 볼까요.

<details>
<summary>Click Me!!!</summary>
<div class="tpt">details 과 summary 그리고 css까지 적용</div>
</details>

@keyframes reveal {
from { opacity:0; transform:translate3d(0, -30px, 0); }
to { opacity:1; transform:translate3d(0, 0, 0); }
}
</style>

Click Me!!!

details 과 summary 그리고 css까지 적용

간단하죠 근데 아쉽게도 익스플로러에서는 작동하지 않습니다.

익스에서는 그냥 펼쳐저 보입니다.

처음 부터 펼쳐져 보이게 하는 옵션도 간단합니다.

<details open>
<p>details에 open만 적용</p>
</details>

details에 open만 적용

익스만 신경 쓰이지 않는다면 접고, 펼치는 폴딩기능을 구현하는데는 정말 유용한 코드입니다.

그리고 게시판에서도 소스만 적용하면 간단히 구현됩니다.

[ 추가 Tip ]

익스가 사라진 지금은 매우 유용한 팁이 되었네요.

폴딩전,후 마커(불릿)모양 & 문자 변경하는 방법으로 더욱 유용하게 사용하세요.

<details>
<summary class="cvb">[{$document->getCommentCount()}]</summary>
~ 댓글 코드 ~
</details>

[디테일한 사용 방법 예시]

https://moonhouse.co.kr/xetip/588063

스크롤 바(Scrollbar) 스타일링

2024-05-13T20:36:25+09:00

스크롤 바를 꾸미는 간단한 방법

.mhcomm_normal::-webkit-scrollbar { width:5px; }
.mhcomm_normal::-webkit-scrollbar-thumb { border:5px solid orange; }

현재 시간 실시간으로 카운트 출력

2024-03-31T18:48:27+09:00

<script>
   var srv_time = "{date("F d, Y H:i:s", time())}";
   var now = new Date(srv_time);
   setInterval("server_time()", 1000);

   function server_time()
   {
       now.setSeconds(now.getSeconds()+1);
       var year = now.getFullYear();
       var month = now.getMonth() + 1;
       var date = now.getDate();
       var hours = now.getHours();
       var minutes = now.getMinutes();
       var seconds = now.getSeconds();

       if (month < 10){
           month = "0" + month;
       }
       if (date < 10){
           date = "0" + date;
       }
       if (hours < 10){
           hours = "0" + hours;
       }
       if (minutes < 10){
           minutes = "0" + minutes;
       }
       if (seconds < 10){
           seconds = "0" + seconds;
       }
       document.getElementById("clock").innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
   }
</script>

line-height 와 height의 차이점

2023-04-02T09:28:31+09:00

먼저 line-height는 글자가 한 줄에서 차지하는 높이를 말합니다. line-height가 10px이라고 한다면

한 줄에서 글자가 폰트 크기를 포함하여 총 10px의 높이를 차지한다는 걸 의미하게 됩니다.

위 그림을 보시면 ABC와 맞닿아 있는 위, 아래의 선을 제외하고 두 공간이 있습니다. 이 공간들을 leading 영역이라고 합니다.

line-height를 증가시키면, 이 leading 영역만 위 아래로 동등하게 늘어나게 됩니다. 대신 텍스트는 가운데에 그대로 위치합니다. 이게 line-height를 이용하여 수직 정렬을 시키는 주된 원리입니다.

가령 height가 50px인 박스모델이 있다고 했을 때 10px의 ABC와 BCD라는 글자가 있다고 생각해보겠습니다.

line-height는 기본값이 normal인데 폰트마다 차이는 있지만 leading영역이 조금씩 주어져있습니다.

ABC와 BCD는 각각 그 normal에 해당하는 line-height 수치만큼의 높이에서 아래처럼 자신들만 위치하고 있게 되는거죠.

-----------------

ABCBCD

-----------------

만약 ABC의 line-height를 50px로 증가시킨다면 ABC라는 글자가 한 줄에서 50px의 높이를 차지하게 됩니다.

다시 말하면 height 50px 내에서는 ABC라는 글자만 있어야 합니다.

line-height는 글자와 글자사이의 줄간격이니 위에서부터 아래로 50px의 높이까지는 ABC라는 글자만 있고

BCD는 50px 밖에 있게 되는겁니다. 여기서 폰트크기가 10px이었으니 line-height가 50px 이라고 한다면 폰트는 가운데 그대로 있고 위 아래로 동등하게 늘어나게 되어 20px씩 각각 leading 영역이 늘어나서

10px + 20px + 20px = 50px의 line-height가 완성되는거죠.

그래서 height 50px 내에서 가운데에 10px의 폰트가 있게 되고 균등하게 늘어난 각 20px의 leading 영역에는 폰트가 존재할 수 없기 때문에 수직 정렬이 되게 됩니다.

-----------------

ABC

-----------------

BCD

[출처] https://www.codeit.kr

css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리

2022-04-25T09:42:50+09:00

css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다..

하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 깔끔한 코딩이 완성되므로, 숙지할 필요가 있다.

꼭 암기해서 다음 플젝 때는 요 요소들을 활용해 보자! (는 의미에서 작성한 포스팅..)

1. em : 부모 사이즈에서 곱한 사이즈

<div>

<p></p>

<div>

div {font-size: 14px}

p {font-size: 1.2em}

일 경우, p의 사이즈는 14*1.2 = 16.8px 이 된다.

2. rem: 부모가 아닌 최상위 태그에서 곱한 사이즈

em을 사용하다보면 점점 사이즈가 커져버려서 제어가 힘든 상황이 온다. 이럴땐 rem을 쓴다. rem은 부모 사이즈에 상관없이 무조건 최상위 태그 사이즈에서 값을 곱한다.

3. vw (vertical width) : 브라우저 너비값의 100분의 1단위

브라우저 너비값이 1000px일때 1vw는 10px이다.

4. vh (vertical height) : 브라우저 높이값의 100분의 1단위

브라우저 높이값이 1000px일때 1vh는 10px이다.

100분의 1이라고해서 %랑 혼동할 수 있는데, %는 부모요소에 의해 기준 단위가 변경하는데 반해 vw와 vh는 기준이 무조건 브라우저 사이즈다.

이것은 em과 rem의 차이와 같다.

5. vmin과 vmax

이들은 vh또는 vw값에 최대값 최소값을 정해주는 것인데,

너비값-높이값에서 둘 중 더 작은 값을 vmin, 더 큰 값을 vmax이라 한다.

하늘색 블록을 브라우저라고 하면, vmin의 최소값 영역과 vmax 최대값 영역을 구분해봤다.

브라우저가 만약 vmin vmax 영역 안으로 들어가게 되면 vh vw와 같이 작동한다 (값만큼 줄어든다).

즉, 말하자면 vmin vmax는 vh 혹은 vw와 같은데 대신 값을 적용할 최소값(vmin)과 최대값(vmax) 기준을 정한 것이라 할 수 있다. (결국 앞에서 한 설명과 똑같은 말이 반복 해버렸..)

em, rem, vw, vh 모두 ie9 이상부터 지원 가능하다. vmax, xmin는 ie (엣지에서도 안됨) 에서 지원하지 않는다.

출처 https://bomango.tistory.com/

참고로 https://moonhouse.co.kr/justiceqa 페이지에서

브라우즈를 상하로 조절하면 게시판 영역이 자동으로 조절됩니다.

이런 경우는 vmin이 익스와 엣지에서 적용이 되지 않는다고 해서 style="min-height:65vh" 적용한 경우입니다.

flex로 세로 가로 정렬 하기

2022-04-22T09:13:04+09:00

팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나

요즘 가장 많이 쓰는 방법은 바로 flex.

flex 효과 중 익스에서 안먹히는 것들이 있어 초기에는 자주 안 썼으나 지금은 익스를 많이 배제하므로 Pass~~

 <div class="box"> <p> 팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나,   요즘 가장 많이 쓰는 방법은 바로 flex!! </p> </div>

<style>

.box { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 100%; height: 300px; border: 1px solid #000; text-align: center; }

.box p { width: 300px; height: 200px; border: 1px solid #ff6600; }
</style>

팝업창이나 모달창을 화면에 중앙에 띄울때 여러 방법들이 있으나, 요즘 가장 많이 쓰는 방법은 바로 flex!!

버튼 클릭시 클립보드에 복사하는 방법

2021-12-31T00:07:57+09:00

엣지브라우즈 :

크롬(웨일)브라우즈 :

위와 같이 해당문구를 복사버턴 클릭시 클립보드로 복사하는 소스입니다.

<p class="box01">
   엣지브라우즈 : <input value="edge://flags/#block-insecure-private-network-requests" readonly>
   <button onclick="copy_to_clipboard(event)">
       <img src="https://moonhouse.co.kr/files/attach/images/2021/12/30/93b96bc01016491edde00987253c3a02.png" alt="복사하기" title="엣지브라우즈 복사">
   </button>
</p>
<p class="box01">
   크롬(웨일)브라우즈 : <input value="chrome://flags/#block-insecure-private-network-requests" readonly>
   <button onclick="copy_to_clipboard(event)">
       <img src="https://moonhouse.co.kr/files/attach/images/2021/12/30/93b96bc01016491edde00987253c3a02.png" alt="복사하기" title="크롬(웨일)브라우즈 복사">
   </button>
</p>

Hover시 테두리두께 설정

2021-11-05T17:04:32+09:00

이미지나 게시글 출력후 마우스 Hover시 테두리라인 색상이나 두께를 나타내고자 할때

A같이 코드를 주면 두께만큼 아래 위로 영역이 움직입니다.

A 내용 영역

B와 같이 코드를 주면 내용이 움직이지 않고 고정되게 출력됩니다.

B 내용 영역

위에 코드로 완벽해 지지 않으면 아래 코드와 같이 해 줘도 됩니다.

C 내용 영역

CSS 색상 이름 rgb , 16진수 자료( css 색상표 )

2021-02-15T22:20:54+09:00

색상	256 복합수	16진수 코드
Snow	255 250 250	#FFFAFA
GhostWhite	248 248 255	#F8F8FF
WhiteSmoke	245 245 245	#F5F5F5
Gainsboro	220 220 220	#DCDCDC
FloralWhite	255 250 240	#FFFAF0
OldLace	253 245 230	#FDF5E6
Linen	250 240 230	#FAF0E6
AntiqueWhite	250 235 215	#FAEBD7
PapayaWhip	255 239 213	#FFEFD5
BlanchedAlmond	255 235 205	#FFEBCD
Bisque	255 228 196	#FFE4C4
PeachPuff	255 218 185	#FFDAB9
NavajoWhite	255 222 173	#FFDEAD
Moccasin	255 228 181	#FFE4B5
Cornsilk	255 248 220	#FFF8DC
Ivory	255 255 240	#FFFFF0
LemonChiffon	255 250 205	#FFFACD
Seashell	255 245 238	#FFF5EE
Honeydew	240 255 240	#F0FFF0
MintCream	245 255 250	#F5FFFA
Azure	240 255 255	#F0FFFF
AliceBlue	240 248 255	#F0F8FF
lavender	230 230 250	#E6E6FA
LavenderBlush	255 240 245	#FFF0F5
MistyRose	255 228 225	#FFE4E1
White	255 255 255	#FFFFFF
Black	0 0 0	#000000
DarkSlateGray	47 79 79	#2F4F4F
DimGray	105 105 105	#696969
SlateGray	112 128 144	#708090
LightSlateGray	119 136 153	#778899
Gray	190 190 190	#BEBEBE
LightGray	211 211 211	#D3D3D3
MidnightBlue	25 25 112	#191970
NavyBlue	0 0 128	#000080
CornflowerBlue	100 149 237	#6495ED
DarkSlateBlue	72 61 139	#483D8B
SlateBlue	106 90 205	#6A5ACD
MediumSlateBlue	123 104 238	#7B68EE
LightSlateBlue	132 112 255	#8470FF
MediumBlue	0 0 205	#0000CD
RoyalBlue	65 105 225	#4169E1
Blue	0 0 255	#0000FF
DodgerBlue	30 144 255	#1E90FF
DeepSkyBlue	0 191 255	#00BFFF
SkyBlue	135 206 235	#87CEEB
LightSkyBlue	135 206 250	#87CEFA
SteelBlue	70 130 180	#4682B4
LightSteelBlue	176 196 222	#B0C4DE
LightBlue	173 216 230	#ADD8E6
PowderBlue	176 224 230	#B0E0E6
PaleTurquoise	175 238 238	#AFEEEE
DarkTurquoise	0 206 209	#00CED1
MediumTurquoise	72 209 204	#48D1CC
Turquoise	64 224 208	#40E0D0
Cyan	0 255 255	#00FFFF
LightCyan	224 255 255	#E0FFFF
CadetBlue	95 158 160	#5F9EA0
MediumAquamarine	102 205 170	#66CDAA
Aquamarine	127 255 212	#7FFFD4
DarkGreen	0 100 0	#006400
DarkOliveGreen	85 107 47	#556B2F
DarkSeaGreen	143 188 143	#8FBC8F
SeaGreen	46 139 87	#2E8B57
MediumSeaGreen	60 179 113	#3CB371
LightSeaGreen	32 178 170	#20B2AA
PaleGreen	152 251 152	#98FB98
SpringGreen	0 255 127	#00FF7F
LawnGreen	124 252 0	#7CFC00
Green	0 255 0	#00FF00
Chartreuse	127 255 0	#7FFF00
MedSpringGreen	0 250 154	#00FA9A
GreenYellow	173 255 47	#ADFF2F
LimeGreen	50 205 50	#32CD32
YellowGreen	154 205 50	#9ACD32
ForestGreen	34 139 34	#228B22
OliveDrab	107 142 35	#6B8E23
DarkKhaki	189 183 107	#BDB76B
PaleGoldenrod	238 232 170	#EEE8AA
LtGoldenrodYello	250 250 210	#FAFAD2
LightYellow	255 255 224	#FFFFE0
Yellow	255 255 0	#FFFF00
Gold	255 215 0	#FFD700
LightGoldenrod	238 221 130	#EEDD82
goldenrod	218 165 32	#DAA520
DarkGoldenrod	184 134 11	#B8860B
RosyBrown	188 143 143	#BC8F8F
IndianRed	205 92 92	#CD5C5C
SaddleBrown	139 69 19	#8B4513
Sienna	160 82 45	#A0522D
Peru	205 133 63	#CD853F
Burlywood	222 184 135	#DEB887
Beige	245 245 220	#F5F5DC
Wheat	245 222 179	#F5DEB3
SandyBrown	244 164 96	#F4A460
Tan	210 180 140	#D2B48C
Chocolate	210 105 30	#D2691E
Firebrick	178 34 34	#B22222
Brown	165 42 42	#A52A2A
DarkSalmon	233 150 122	#E9967A
Salmon	250 128 114	#FA8072
LightSalmon	255 160 122	#FFA07A
Orange	255 165 0	#FFA500
DarkOrange	255 140 0	#FF8C00
Coral	255 127 80	#FF7F50
LightCoral	240 128 128	#F08080
Tomato	255 99 71	#FF6347
OrangeRed	255 69 0	#FF4500
Red	255 0 0	#FF0000
HotPink	255 105 180	#FF69B4
DeepPink	255 20 147	#FF1493
Pink	255 192 203	#FFC0CB
LightPink	255 182 193	#FFB6C1
PaleVioletRed	219 112 147	#DB7093
Maroon	176 48 96	#B03060
MediumVioletRed	199 21 133	#C71585
VioletRed	208 32 144	#D02090
Magenta	255 0 255	#FF00FF
Violet	238 130 238	#EE82EE
Plum	221 160 221	#DDA0DD
Orchid	218 112 214	#DA70D6
MediumOrchid	186 85 211	#BA55D3
DarkOrchid	153 50 204	#9932CC
DarkViolet	148 0 211	#9400D3
BlueViolet	138 43 226	#8A2BE2
Purple	160 32 240	#A020F0
MediumPurple	147 112 219	#9370DB
Thistle	216 191 216	#D8BFD8
Snow1	255 250 250	#FFFAFA
Snow2	238 233 233	#EEE9E9
Snow3	205 201 201	#CDC9C9
Snow4	139 137 137	#8B8989
Seashell1	255 245 238	#FFF5EE
Seashell2	238 229 222	#EEE5DE
Seashell3	205 197 191	#CDC5BF
Seashell4	139 134 130	#8B8682
AntiqueWhite1	255 239 219	#FFEFDB
AntiqueWhite2	238 223 204	#EEDFCC
AntiqueWhite3	205 192 176	#CDC0B0
AntiqueWhite4	139 131 120	#8B8378
Bisque1	255 228 196	#FFE4C4
Bisque2	238 213 183	#EED5B7
Bisque3	205 183 158	#CDB79E
Bisque4	139 125 107	#8B7D6B
PeachPuff1	255 218 185	#FFDAB9
PeachPuff2	238 203 173	#EECBAD
PeachPuff3	205 175 149	#CDAF95
PeachPuff4	139 119 101	#8B7765
NavajoWhite1	255 222 173	#FFDEAD
NavajoWhite2	238 207 161	#EECFA1
NavajoWhite3	205 179 139	#CDB38B
NavajoWhite4	139 121 94	#8B795E
LemonChiffon1	255 250 205	#FFFACD
LemonChiffon2	238 233 191	#EEE9BF
LemonChiffon3	205 201 165	#CDC9A5
LemonChiffon4	139 137 112	#8B8970
Cornsilk1	255 248 220	#FFF8DC
Cornsilk2	238 232 205	#EEE8CD
Cornsilk3	205 200 177	#CDC8B1
Cornsilk4	139 136 120	#8B8878
Ivory1	255 255 240	#FFFFF0
Ivory2	238 238 224	#EEEEE0
Ivory3	205 205 193	#CDCDC1
Ivory4	139 139 131	#8B8B83
Honeydew1	240 255 240	#F0FFF0
Honeydew2	224 238 224	#E0EEE0
Honeydew3	193 205 193	#C1CDC1
Honeydew4	131 139 131	#838B83
LavenderBlush1	255 240 245	#FFF0F5
LavenderBlush2	238 224 229	#EEE0E5
LavenderBlush3	205 193 197	#CDC1C5
LavenderBlush4	139 131 134	#8B8386
MistyRose1	255 228 225	#FFE4E1
MistyRose2	238 213 210	#EED5D2
MistyRose3	205 183 181	#CDB7B5
MistyRose4	139 125 123	#8B7D7B
Azure1	240 255 255	#F0FFFF
Azure2	224 238 238	#E0EEEE
Azure3	193 205 205	#C1CDCD
Azure4	131 139 139	#838B8B
SlateBlue1	131 111 255	#836FFF
SlateBlue2	122 103 238	#7A67EE
SlateBlue3	105 89 205	#6959CD
SlateBlue4	71 60 139	#473C8B
RoyalBlue1	72 118 255	#4876FF
RoyalBlue2	67 110 238	#436EEE
RoyalBlue3	58 95 205	#3A5FCD
RoyalBlue4	39 64 139	#27408B
Blue1	0 0 255	#0000FF
Blue2	0 0 238	#0000EE
Blue3	0 0 205	#0000CD
Blue4	0 0 139	#00008B
DodgerBlue1	30 144 255	#1E90FF
DodgerBlue2	28 134 238	#1C86EE
DodgerBlue3	24 116 205	#1874CD
DodgerBlue4	16 78 139	#104E8B
SteelBlue1	99 184 255	#63B8FF
SteelBlue2	92 172 238	#5CACEE
SteelBlue3	79 148 205	#4F94CD
SteelBlue4	54 100 139	#36648B
DeepSkyBlue1	0 191 255	#00BFFF
DeepSkyBlue2	0 178 238	#00B2EE
DeepSkyBlue3	0 154 205	#009ACD
DeepSkyBlue4	0 104 139	#00688B
SkyBlue1	135 206 255	#87CEFF
SkyBlue2	126 192 238	#7EC0EE
SkyBlue3	108 166 205	#6CA6CD
SkyBlue4	74 112 139	#4A708B
LightSkyBlue1	176 226 255	#B0E2FF
LightSkyBlue2	164 211 238	#A4D3EE
LightSkyBlue3	141 182 205	#8DB6CD
LightSkyBlue4	96 123 139	#607B8B
SlateGray1	198 226 255	#C6E2FF
SlateGray2	185 211 238	#B9D3EE
SlateGray3	159 182 205	#9FB6CD
SlateGray4	108 123 139	#6C7B8B
LightSteelBlue1	202 225 255	#CAE1FF
LightSteelBlue2	188 210 238	#BCD2EE
LightSteelBlue3	162 181 205	#A2B5CD
LightSteelBlue4	110 123 139	#6E7B8B
LightBlue1	191 239 255	#BFEFFF
LightBlue2	178 223 238	#B2DFEE
LightBlue3	154 192 205	#9AC0CD
LightBlue4	104 131 139	#68838B
LightCyan1	224 255 255	#E0FFFF
LightCyan2	209 238 238	#D1EEEE
LightCyan3	180 205 205	#B4CDCD
LightCyan4	122 139 139	#7A8B8B
PaleTurquoise1	187 255 255	#BBFFFF
PaleTurquoise2	174 238 238	#AEEEEE
PaleTurquoise3	150 205 205	#96CDCD
PaleTurquoise4	102 139 139	#668B8B
CadetBlue1	152 245 255	#98F5FF
CadetBlue2	142 229 238	#8EE5EE
CadetBlue3	122 197 205	#7AC5CD
CadetBlue4	83 134 139	#53868B
Turquoise1	0 245 255	#00F5FF
Turquoise2	0 229 238	#00E5EE
Turquoise3	0 197 205	#00C5CD
Turquoise4	0 134 139	#00868B
Cyan1	0 255 255	#00FFFF
Cyan2	0 238 238	#00EEEE
Cyan3	0 205 205	#00CDCD
Cyan4	0 139 139	#008B8B
DarkSlateGray1	151 255 255	#97FFFF
DarkSlateGray2	141 238 238	#8DEEEE
DarkSlateGray3	121 205 205	#79CDCD
DarkSlateGray4	82 139 139	#528B8B
Aquamarine1	127 255 212	#7FFFD4
Aquamarine2	118 238 198	#76EEC6
Aquamarine3	102 205 170	#66CDAA
Aquamarine4	69 139 116	#458B74
DarkSeaGreen1	193 255 193	#C1FFC1
DarkSeaGreen2	180 238 180	#B4EEB4
DarkSeaGreen3	155 205 155	#9BCD9B
DarkSeaGreen4	105 139 105	#698B69
SeaGreen1	84 255 159	#54FF9F
SeaGreen2	78 238 148	#4EEE94
SeaGreen3	67 205 128	#43CD80
SeaGreen4	46 139 87	#2E8B57
PaleGreen1	154 255 154	#9AFF9A
PaleGreen2	144 238 144	#90EE90
PaleGreen3	124 205 124	#7CCD7C
PaleGreen4	84 139 84	#548B54
SpringGreen1	0 255 127	#00FF7F
SpringGreen2	0 238 118	#00EE76
SpringGreen3	0 205 102	#00CD66
SpringGreen4	0 139 69	#008B45
Green1	0 255 0	#00FF00
Green2	0 238 0	#00EE00
Green3	0 205 0	#00CD00
Green4	0 139 0	#008B00
Chartreuse1	127 255 0	#7FFF00
Chartreuse2	118 238 0	#76EE00
Chartreuse3	102 205 0	#66CD00
Chartreuse4	69 139 0	#458B00
OliveDrab1	192 255 62	#C0FF3E
OliveDrab2	179 238 58	#B3EE3A
OliveDrab3	154 205 50	#9ACD32
OliveDrab4	105 139 34	#698B22
DarkOliveGreen1	202 255 112	#CAFF70
DarkOliveGreen2	188 238 104	#BCEE68
DarkOliveGreen3	162 205 90	#A2CD5A
DarkOliveGreen4	110 139 61	#6E8B3D
Khaki1	255 246 143	#FFF68F
Khaki2	238 230 133	#EEE685
Khaki3	205 198 115	#CDC673
Khaki4	139 134 78	#8B864E
LightGoldenrod1	255 236 139	#FFEC8B
LightGoldenrod2	238 220 130	#EEDC82
LightGoldenrod3	205 190 112	#CDBE70
LightGoldenrod4	139 129 76	#8B814C
LightYellow1	255 255 224	#FFFFE0
LightYellow2	238 238 209	#EEEED1
LightYellow3	205 205 180	#CDCDB4
LightYellow4	139 139 122	#8B8B7A
Yellow1	255 255 0	#FFFF00
Yellow2	238 238 0	#EEEE00
Yellow3	205 205 0	#CDCD00
Yellow4	139 139 0	#8B8B00
Gold1	255 215 0	#FFD700
Gold2	238 201 0	#EEC900
Gold3	205 173 0	#CDAD00
Gold4	139 117 0	#8B7500
Goldenrod1	255 193 37	#FFC125
Goldenrod2	238 180 34	#EEB422
Goldenrod3	205 155 29	#CD9B1D
Goldenrod4	139 105 20	#8B6914
DarkGoldenrod1	255 185 15	#FFB90F
DarkGoldenrod2	238 173 14	#EEAD0E
DarkGoldenrod3	205 149 12	#CD950C
DarkGoldenrod4	139 101 8	#8B658B
RosyBrown1	255 193 193	#FFC1C1
RosyBrown2	238 180 180	#EEB4B4
RosyBrown3	205 155 155	#CD9B9B
RosyBrown4	139 105 105	#8B6969
IndianRed1	255 106 106	#FF6A6A
IndianRed2	238 99 99	#EE6363
IndianRed3	205 85 85	#CD5555
IndianRed4	139 58 58	#8B3A3A
Sienna1	255 130 71	#FF8247
Sienna2	238 121 66	#EE7942
Sienna3	205 104 57	#CD6839
Sienna4	139 71 38	#8B4726
Burlywood1	255 211 155	#FFD39B
Burlywood2	238 197 145	#EEC591
Burlywood3	205 170 125	#CDAA7D
Burlywood4	139 115 85	#8B7355
Wheat1	255 231 186	#FFE7BA
Wheat2	238 216 174	#EED8AE
Wheat3	205 186 150	#CDBA96
Wheat4	139 126 102	#8B7E66
Tan1	255 165 79	#FFA54F
Tan2	238 154 73	#EE9A49
Tan3	205 133 63	#CD853F
Tan4	139 90 43	#8B5A2B
Chocolate1	255 127 36	#FF7F24
Chocolate2	238 118 33	#EE7621
Chocolate3	205 102 29	#CD661D
Chocolate4	139 69 19	#8B4513
Firebrick1	255 48 48	#FF3030
Firebrick2	238 44 44	#EE2C2C
Firebrick3	205 38 38	#CD2626
Firebrick4	139 26 26	#8B1A1A
Brown1	255 64 64	#FF4040
Brown2	238 59 59	#EE3B3B
Brown3	205 51 51	#CD3333
Brown4	139 35 35	#8B2323
Salmon1	255 140 105	#FF8C69
Salmon2	238 130 98	#EE8262
Salmon3	205 112 84	#CD7054
Salmon4	139 76 57	#8B4C39
LightSalmon1	255 160 122	#FFA07A
LightSalmon2	238 149 114	#EE9572
LightSalmon3	205 129 98	#CD8162
LightSalmon4	139 87 66	#8B5742
Orange1	255 165 0	#FFA500
Orange2	238 154 0	#EE9A00
Orange3	205 133 0	#CD8500
Orange4	139 90 0	#8B5A00
DarkOrange1	255 127 0	#FF7F00
DarkOrange2	238 118 0	#EE7600
DarkOrange3	205 102 0	#CD6600
DarkOrange4	139 69 0	#8B4500
Coral1	255 114 86	#FF7256
Coral2	238 106 80	#EE6A50
Coral3	205 91 69	#CD5B45
Coral4	139 62 47	#8B3E2F
Tomato1	255 99 71	#FF6347
Tomato2	238 92 66	#EE5C42
Tomato3	205 79 57	#CD4F39
Tomato4	139 54 38	#8B3626
OrangeRed1	255 69 0	#FF4500
OrangeRed2	238 64 0	#EE4000
OrangeRed3	205 55 0	#CD3700
OrangeRed4	139 37 0	#8B2500
Red1	255 0 0	#FF0000
Red2	238 0 0	#EE0000
Red3	205 0 0	#CD0000
Red4	139 0 0	#8B0000
DeepPink1	255 20 147	#FF1493
DeepPink2	238 18 137	#EE1289
DeepPink3	205 16 118	#CD1076
DeepPink4	139 10 80	#8B0A50
HotPink1	255 110 180	#FF6EB4
HotPink2	238 106 167	#EE6AA7
HotPink3	205 96 144	#CD6090
HotPink4	139 58 98	#8B3A62
Pink1	255 181 197	#FFB5C5
Pink2	238 169 184	#EEA9B8
Pink3	205 145 158	#CD919E
Pink4	139 99 108	#8B636C
LightPink1	255 174 185	#FFAEB9
LightPink2	238 162 173	#EEA2AD
LightPink3	205 140 149	#CD8C95
LightPink4	139 95 101	#8B5F65
PaleVioletRed1	255 130 171	#FF82AB
PaleVioletRed2	238 121 159	#EE799F
PaleVioletRed3	205 104 137	#CD6889
PaleVioletRed4	139 71 93	#8B475D
Maroon1	255 52 179	#FF34B3
Maroon2	238 48 167	#EE30A7
Maroon3	205 41 144	#CD2990
Maroon4	139 28 98	#8B1C62
VioletRed1	255 62 150	#FF3E96
VioletRed2	238 58 140	#EE3A8C
VioletRed3	205 50 120	#CD3278
VioletRed4	139 34 82	#8B2252
Magenta1	255 0 255	#FF00FF
Magenta2	238 0 238	#EE00EE
Magenta3	205 0 205	#CD00CD
Magenta4	139 0 139	#8B008B
Orchid1	255 131 250	#FF83FA
Orchid2	238 122 233	#EE7AE9
Orchid3	205 105 201	#CD69C9
Orchid4	139 71 137	#8B4789
Plum1	255 187 255	#FFBBFF
Plum2	238 174 238	#EEAEEE
Plum3	205 150 205	#CD96CD
Plum4	139 102 139	#8B668B
MediumOrchid1	224 102 255	#E066FF
MediumOrchid2	209 95 238	#D15FEE
MediumOrchid3	180 82 205	#B452CD
MediumOrchid4	122 55 139	#7A378B
DarkOrchid1	191 62 255	#BF3EFF
DarkOrchid2	178 58 238	#B23AEE
DarkOrchid3	154 50 205	#9A32CD
DarkOrchid4	104 34 139	#68228B
Purple1	155 48 255	#9B30FF
Purple2	145 44 238	#912CEE
Purple3	125 38 205	#7D26CD
Purple4	85 26 139	#551A8B
MediumPurple1	171 130 255	#AB82FF
MediumPurple2	159 121 238	#9F79EE
MediumPurple3	137 104 205	#8968CD
MediumPurple4	93 71 139	#5D478B
Thistle1	255 225 255	#FFE1FF
Thistle2	238 210 238	#EED2EE
Thistle3	205 181 205	#CDB5CD
Thistle4	139 123 139	#8B7B8B
gray11	28 28 28	#1C1C1C
gray21	54 54 54	#363636
gray31	79 79 79	#4F4F4F
gray41	105 105 105	#696969
gray51	130 130 130	#828282
gray61	156 156 156	#9C9C9C
gray71	181 181 181	#B5B5B5
gray81	207 207 207	#CFCFCF
gray91	232 232 232	#E8E8E8
DarkGray	169 169 169	#A9A9A9
DarkBlue	0 0 139	#00008B
DarkCyan	0 139 139	#008B8B
DarkMagenta	139 0 139	#8B008B
DarkRed	139 0 0	#8B0000
LightGreen	144 238 144	#90EE90

출처: https://hsol.tistory.com/676 [한솔닷컴]

display 속성: inline, block, inline-block

2021-02-02T17:55:32+09:00

CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다. 여러가지 display 속성값 중에서 가장 기본이지만 은근히 햇갈릴 수 있는 inline과 block, inline-block에 대해서 알아보도록 하겠습니다.

inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <a>, <em> 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 inline 엘리먼트 다음과 같이 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 됩니다.

inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

block

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. 대표적인 block 엘리먼트로 <div>이나 <p>, <h1> 태그 등을 들 수 있습니다.

예를 들어, 여러 개의 block 엘리먼트 다음과 같이 마크업하면 매번 줄바꿈 되어 여러 줄에 보이게 됩니다.

block 엘리먼트는 inline 엘리먼트와 달리 width, height, margin, padding 속성이 모두 반영이 됩니다.

inline-block

display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

대표적인 inline-block 엘리먼트로 <button>이나 <select> 태그 등을 들 수 있습니다.

inline-block 엘리먼트는 위와 같이 명시적으로 헤당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.

<div class="box">
   <div class="no">
       one
   </div>
   <div class="no">
       two
   </div>
   <div class="no">
       three
   </div>
</div>

one

two

three

출처 : https://www.daleseo.com/

글 색상을 랜덤으로 출력하기

2020-11-30T11:20:48+09:00

제목 그대로 글 색상을 랜덤으로 출력하는 방법입니다.

html파일에 script를 아래와 같이 작성

jQuery(function($){
   for(var i=0 ; i < $(".random_colors").length; i++){
       var f_color = "#"+(parseInt(Math.random()*0xffffff)).toString(16);
       $(".random_colors").eq(i).css("color",f_color);
   }
});

</script>

랜덤으로 출력하고자 하는 코드에 class를 random_colors 로 지정하면 됩니다.

<div class="top_title random_colors" style="font-family:Nanum Pen Script; font-size:20px">{$val->getTitle()}</div>

문하우스 첫페이지의 "공지사항"과 "컴퓨터팁"의 제목글의 색상이 랜덤으로 바뀝니다.

div 영역에 Width:100%; height:100%; 적용해 보기 - display:table

2020-10-12T21:05:36+09:00

< left

right >

위와 같은 모양의 div 영역을 만들때 생각보다 width:100%; height:100%; 지정하기가 쉽지를 않다.

일반적으로 위와 같이 코드를 작성하면 아래와 같이 height가 글꼴에 맞춰 높이가 맞쳐 지지를 않습니다.

< left

right >

그래서 적당한 height:20px; 값을 주어서 맞춥니다.

그런데 그렇게 하면 글꼴의 크기가 변하거나 다른 요인이 발생하면 height값을 일일이 수정을 해야 합니다.

그럴때 적용할 수 있는 코드가 display:table 입니다.

.etc { display:table; width:100%; height:100%; color:#fff; background:#bbb; margin:5px; padding:5px 10px; border:1px solid #000; }

위와 같이 display:table; 하나만 넣어주면 최상단과 같이 넓이, 높이가 글꼴에 맞추어 배열됩니다.

참고로 height 값을 임의로 지정하고 글의 상하 위치를 잡고 싶으면 아래 코드와 같이 작성하고 vertical-align 속성을 top, middle, bottom 중 선택하면 됩니다.

[display 속성값 중 표와 관련된 값들]
display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다.

table : <table> 요소처럼 표현합니다.
table-caption : <caption> 요소처럼 표현합니다.
table-column-group : <colgroup> 요소처럼 표현합니다.
table-header-group : <thead> 요소처럼 표현합니다.
table-footer-group : <tfoot> 요소처럼 표현합니다.
table-row-group : <tbody> 요소처럼 표현합니다.
table-cell : <td> 요소처럼 표현합니다.
table-column : <col> 요소처럼 표현합니다.
table-row : <tr> 요소처럼 표현합니다.

위의 속성값으로 표처럼 표현되도록 만든 후에는, 표를 꾸미는 것과 같은 방법으로 해당 요소를 꾸밀 수 있습니다. 주의할 점은, IE의 경우 8 이상에서 지원한다는 것입니다.

홈페이지에 화려한 에니메이션 효과를 주기 - aos animate

2020-08-29T19:18:16+09:00

Mh Justice Layout 을 만들면서 각 화면당 에니메이션 적용을 했었는데

https://freehtml5.co 에 있는 레이아웃을 보고 이전에 적용했던 에니메이션보다 효과가 뛰어나서 적용해 보았습니다.

aos 에니메이션의 특징은 화면이 리플레쉬가 되지 않고도,

화면이 상하 스크롤시 마다 에니메이션이 작동을 하는 것입니다.

https://moonhouse.co.kr/justice 에서 마우스휠을 상하로 움직여 보면 효과를 느끼실 수 있습니다.

layout.html 상,하단에 css와 js를 로드합니다.

상단에

하단에

다운받은 파일을 각각 폴더에 업로드합니다.

그리고 에니메이션을 적용할 class를 찾아서 아래의 코드를 적용하면 됩니다.

<h1 id="mjh1" data-aos="fade-down" data-aos-delay="400" data-aos-duration="800">{$li->section2_text}</h1>

<p class="sub" data-aos="fade-up" data-aos-delay="600" data-aos-duration="800">{$li->section2_subtext}</p>

<p class="subtle-text" data-aos="zoom-in" data-aos-delay="800" data-aos-duration="800">{$li->memu2}</p>

적용 가능한 효과는 aos.css파일을 열어보시면 여러 효과가 나옵니다.

fade효과, zoom효과, slide효과, flip효과등 입니다.

웹퍼블리셔가 알고있어야 할 display:table 속성

2020-02-20T22:54:07+09:00

오늘 다룰 주제는

사이트에서 많이 사용되는 형태인

동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....)

에 대해 알아보도록 하겠습니다.

(글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 던져주세요 +_+ ㅎㅎㅎ;;;)

아마 위의 사진과 비슷한 형태를 작업해 보신 분들이 많을거라고 생각되는데요.

제가 웹퍼블리싱을 배울때

float으로 컨텐츠를 띄워 붙이고(왼쪽이나 오른쪽!)

width값을 100%/ n(갯수) 만큼 주면

동일한 간격으로 정렬이 된다고 배웠습니다!

4개 정렬 = 25%

5개 정렬 = 20%

6개 정렬 = 16.66%

· · ·

이런식으로 말이죠.

많이들 알고 있는 공식(?) 이시잖아요~

저 또한 저 방법을 이용하여 작업을 했었습니다!(과거형!)

작업자님~~~

디자인 파일 메일로 보내드렸어요~!!

확인 부탁드려요!

네~~~

(딸깍딸깍)

별거 없군! 금방 끝내주겠어!!

(다다다다다다다다다다다다다다다닥다다닥)

    .boxwrap {
    overflow: hidden;   
}
 
.boxwrap .box {
    float:left;
    width:25%;
}
 
  

짜잔~~! 다했따아~~

집에 가야지

개발자님~

작업물 푸시 했어요!

확인 부탁드려용~

이봐 스물쿤!! 갯수가 3개일때 이상하게 나오는데..?

확인좀 오네가이!

우씨... 알았어요..!

    .boxwrap .box.length3 {
    width:33.33%;
}
 
  

3개 일때는 length3 클래스 추가해주세요!

됐죠??

그럼 전 20,000....

어이어이~

2개일때는!!!? 5개일때는!!?? 6개 일때는..!!?

(저 개ㅈ....ㅏ......ㅅ...)

훗.. 금방 해드리죠!!

    .boxwrap .box.length2 {
    width:50%;
}
 
.boxwrap .box.length5 {
    width:20%;
}
 
.boxwrap .box.length6 {
    width:16.66%;
}
 
  

자요!! 됐죠!!?

전 진짜 20,000~~ 수고하세용~~

· · · ·

저 개ㅅ.....

사진=영화 '어벤져스: 인피니티 워 닉퓨리역의 사무엘 잭슨 '

어머니....

----------------------------------------------------------------------------------------------------------------------------

자... 지금까지 스물쿤의 작업을 보셨습니다.

개발독은 스물쿤의 소스가 무척이나 별로라고 생각 할겁니다.

(끄덕끄덕)

프로젝트 마다 다르겠지만

컨텐츠의 갯수가 고정적으로 정해져 있을수도,

유동적으로 변할수도 있습니다!.

과거의 퍼린이 였던 스물쿤은 이런점을 생각하지 못했었습니다.

스물쿤의 소스를 한번 최종적으로 볼까요??

    .boxwrap {
    overflow: hidden;   
}
 
.boxwrap .box {
    float:left;
    width:25%;
}
 
.boxwrap .box.length2 {
    width:50%;
}
 
.boxwrap .box.length3 {
    width:33.33%;
}
 
.boxwrap .box.length5 {
    width:20%;
}
 
.boxwrap .box.length6 {
    width:16.66%;
}
 
  

이 소스가 결코 잘못되었다 고! 말할수는 없습니다.

이것도 방법이라면 방법이니까요.

하지만 좋은 방법은 아니죠.

갯수 제어 때문에 넓이를 조절하는 css가 4개나 더 늘었어요!!

만약 한줄에 7개, 8개 9개 10개 등등등... 갯수가 더 추가된다면

더 많아지겠죠!?!?!?

이쯤 되면 결코 좋은 소스라고 할수 없습니다.

이러한 넓이를 제어하는 CSS를

싹!! 없애버릴수 있는 방법이 있습니다.

그거슨 바로!!

table 과 table-cell 입니다~!

~~(이말 하나 하려고 참 오래도 걸린다 임마!!)~~

부모태그에 display : table을 선언해 주고!

자식태그에 display : table-cell을 선언해주면

갯수가 몇개가 되든 동일한 간격으로 영역 가지게 됩니다

(100개,200개가 되면 찌부가 될수 있겠죠...? 그렇게 가지는 않을테고..)

----------------------------------------------------------------------------------------------------------------------------

(다다다다다다닥)

    .boxwrap {
    display:table;
    width: 100%;    
}
 
.boxwrap .box {
    display:table-cell;
    vertical-align: middle;
}
 
  

???: 에이 안되는구만

???: 동일하긴 뭐가 동일합니까!!

길쭉해 지는구만.....

(에잇... 괜히 읽었어!!)

하하하....

제가 실수로 빼먹은게 있네요...

    .boxwrap {
    display:table;
    width:100%;
    table-layout: fixed;
}
 
.boxwrap .box {
    display:table-cell;
            vertical-align: middle;
}
 
  

부모태그에 table-layout: fixed를 선언해 주시면!

짜잔~~~!

동일한 넓이를 가지게 됩니다~!!

신기하죠~~~~~~!!!?!?!?!?!?

ㅅ....시....신...기....

하...ㅅ...ㅣ..죠...?;;

----------------------------------------------------------------------------------------------------------------------------

(야.. 왜 갑자기 말돌려...)

넵.! 저는 오늘 여러분에게

CSS 속성인

- display: table

- display: table-cell

- table-layout: fixed

의 존재 에 대해 말씀 드리고 싶었습니다!

이 속성이 '어떻게' 쓰이고 '무엇무엇' 이다~

라는 부가적인 설명은 안하고자 합니다.

왜냐하면 스물쿤도 퍼린이 시절..

새로운것 ,신기한 것을 발견하면

그 속성에 대해 열심히 찾아보았거든요 ㅎㅎ...

그러면서 재미도 느끼고 뭔가, 내가 발전해 간다는게 느껴져서 뿌듯했었죠.

저 보다도 먼저 이러한 속성을 잘~ 정리해 주신 분들이 많답니다 ㅎㅎ

??? : 괜히 모르ㄴ...

(쌰랍)

----------------------------------------------------------------------------------------------------------------------------

아무튼... 끝으로!!

처음에는 flex라는 속성으로 작업을 했었는데

이게 익스에 하위버전에서는 안되어 어쩔줄 몰라 하고 있었는데

그때 알게된 방법이 바로 display table 속성 이었죠!

(플롯밖에 몰랐던 나란 퍼린이...)

부족하고 노잼인 제 글을 읽어 주신분들께는 1감사 1따봉을 드리며

짧게 요약을 하고 저는 이만 물러 가겠습니다~!

(사장님 저 퇴근.....)

결론

1. display: table , table-cell 쓰세요.

2. table-layout : fixed도 쓰세용

3. 아래 링크에서 해보세영!

http://jsfiddle.net/209p16n5/21/

여러분 안녕~~

출처 : https://www.biew.co.kr/35?category=314306

HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때

2019-03-01T20:43:00+09:00

윤삼님이 Xetown에 올려주신 내용을 가져왔습니다.

https://xetown.com/tips/1182610

간혹 보면 테이블 가로 사이즈가 화면사이즈보다 넓어서 화면 구성이 원활하지 않을 때가 있습니다.

저도 게시판 스킨에 확장변수 다중검색 애드온을 얹어서 아카이브 사이트를 납품한 적이 있는데, 사용자정의 확장변수가 워낙 많다보니 테이블이 화면 바깥으로 나가서 '반응형 페이지'라는 취지가 무색했던 경험이 있습니다.

어디 목록 페이지에서만 그렇겠습니까? 게시물 본문에서도 테이블을 넣어야 할 때가 있잖아요?

그럴 땐 이렇게 table 태그를 div 태그로 wrap해보세요.

<div style="overflow-x: auto;">

....

</table>

</div>

이렇게 하면 페이지의 윈도우 가로사이즈 반응성을 유지하면서 동시에 모바일에선 스와이프로 화면에 가려진 내용을 볼 수 있게 됩니다.

또한 css에서 @mdia screen and (max-width: 767px) 같은 미디어 쿼리를 이용하면 더욱 더 동적인 반응성을 경험할 수 있을 겁니다.

그리고 이 경우엔 스와이프 동작을 유도하는 아이콘이나 gif 이미지를 넣어볼 수도 있을 거구요.

여기 사이트의 table 태그가 그렇게 돼 있더라구요 :)

http://www.mohw.go.kr/react/policy/index.jsp?PAR_MENU_ID=06&MENU_ID=06370111&PAGE=11&topTitle=

오늘도 즐겁고 유익한 RXE합시다~!

CSS 말줄임 처리하기

2018-11-13T19:10:21+09:00

일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글자수를 특정지어서 자르는 방법을 많이 사용합니다.

헌데 이방법을 사용할시 영어, 숫자, 한글의 자간이 달라 일관되지 않는 모습을 보이는 경우가 많아서

뷰 단계에서 글자가 넘어갈경우 말줄임표를 처리하는 방법을 찾아보았습니다.

[CSS 작성]

text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
width:100px;
overflow:hidden;

text-overflow:
이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할것인지를 선택하는 속성입니다.

clip : 기본값입니다.
ellipsis : 말줄임표로 처리합니다. 상위요소의 너비가 auto로 되어있는경우는 적용할 수 없습니다.
inherit : 상위요소의 속성과 동일하게 사용합니다.

white-space:
요소안에서 공백은 어떤식으로 처리할것인지를 선택하는 속성입니다. 공백은 줄바꿈(line-break), 들여쓰기(tab), 공백(space)입니다.

normal : 기본값입니다. 공백을 여러개 넣어도 공백을 1개로 처리합니다.
nowrap : 공백을 여러개 넣어도 1개로 처리합니다. 텍스트가 길어져도 줄바꿈을 하지않고 1줄로 표시합니다.
pre : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없으면 줄바꿈을 실행하지 않습니다.
pre-wrap : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다.
pre-line : 공백을 여러개 넣어도 1개로 처리합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다. 코드에 줄바꿈이 있을때도 그대로 실행합니다.

word-wrap:
긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성입니다. (overflow 와 비슷합니다)

normal : 기본값입니다. 글자가 길어도 끊어지지 않고 한줄에 계속 표시
break-word : 강제로 끊어서 줄바꿈합니다.

위와 같은 방법은 텍스트를 한줄로만 표현할때 사용하는 방법입니다.

아래는 두줄이상의 텍스트일경우 말줄임 처리 방법입니다.

[두줄 이상일 경우 CSS 작성]

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
line-height: 1.7em;
height: 8.5em; /* line-height 가 1.5em 이고 5라인을 자르기 때문에 height는 1.7em * 5 = 8.5em */

-webkit-line-clamp 속성의 경우, 웹킷 엔진을 사용하지 않는 브라우져(익스플로러)의 경우 문제가 될수 있으므로,

line-height 속성과 height 속성을 이용하여 높이를 계산하여 넣어줍니다. (height = line-height * 줄수)

폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

2018-09-26T13:20:02+09:00

폰트에 속성을 주는 방법은 <font >태그와 다른 태그 안의 스타일(style) 속성 두 가지를 쓸 수 있겠다.

이전에는 폰트를 적용할 때 <font > ~~ </font>와 같이 하였는데, HTML5에서는 <font>태그를 지원하지 않는다. 물론, HTML5가 일반화되고 브라우저 버전이 올라가도 이전에 만들어진 HTML 문서의 <font>태그는 이상없이 작동을 할 것이므로 걱정할 일은 아니다.
단지, 앞으로 만드는 HTML문서는 가급적이면 스타일(style) 속성으로 주는 것이 낫지 않을까 싶다.

<font> ~ </font>태그로 속성주기
[ 예 ]

[실제 적용한 모습]

이 글자는 font 태그로 속성을 주었다

위에서 <font>태그를 설정한 내용과 실제 적용된 모습이 다르다.
이렇게 된 이유는, 구글블로그는 페이지 첫머리에 <!DOCTYPE HTML>로 선언하여 HTML5가 적용되기 때문이고, 위의 예에서 준 <font> 태그를 강제로 스타일 속성으로 바꾸어 적용하기 때문이다.

스타일(style)로 속성주기

스타일(style)은 <div> <p> <span> 등과 같이 여러 태그에서 쓸 수 있다. (각 태그에 대한 자세한 설명은 링크페이지를 참조)

[예]

<span style = " font-size:1.5em; color: green;">
이 글자는 Span에 스타일(style)로 속성을 주었다
</span>

[실제 적용한 모습]

이 글자는 Span에 스타일(style)로 속성을 주었다

스타일(style)로 폰트 속성을 줄 때, 한꺼번에 줄 수도 있고, 항목을 각각 지정하여 줄 수도 있다.

스타일에서 폰트 속성을 한번에 주기

[한꺼번에 폰트 속성을 주는 예]

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주었다

ㅇ font: 다음의 각 항목 순서는
폰트스타일(font-style) 폰트웨이트(font-weight) 폰트사이즈(font-size)/줄간격(font-height) 글꼴(font-family) 이다.

ㅇ 폰트스타일과 폰트웨이트는 순서가 바뀌어도 이상없이 잘 보여진다.
ㅇ 색상은 스타일 안에 별도로 지정하여 속성을 주어야 한다.

[한꺼번에 폰트 속성을 주고 색상을 지정한 예]

[실제 적용한 모습]

여기는 폰트 속성을 한꺼번에 주고 색상을 녹색으로 주었다

[색상을 지정하는 방법]
파랑(blue), 빨강(red) 등과 같이 HTML에서 지정할 수 있는 이름은 기본색상 17개를 포함하여 모두 140가지가 있다.
어떤 브라우저에서든 문제없이 정확하게 표현할 수 있는 웹안전색상(Web safe colors) 또는 웹표준색상(Web standard color)은 216가지가 있다.

예) 녹색을 윗쪽은 이름인 'green'으로 지정하고, 아래쪽은 Hex코드인 #008000 으로 지정함

<div style="color: green;">
이곳은 DIV 영역이며, 글자색을 green(녹색)으로 지정함
</div>

<div style="color: #008000;">
이곳은 DIV영역이며, 글자색을 Hex코드 #008800(녹색)으로 지정함
</div>

[HTML에서 이름으로 색상을 지정할 수 있는 기본 색상 17가지]

aqua	#00FFFF	olive	#808000
black	#000000	orange	#FFA500
blue	#0000FF	purple	#800080
fuchsia	#FF00FF	red	#FF0000
gray	#808080	silver	#C0C0C0
green	#008000	teal	#008080
lime	#00FF00	white	#FFFFFF
maroon	#800000	yellow	#FFFF00
navy	#000080

스타일에서 폰트 속성을 항목별로 각각 주기
스타일에 폰트에 속성을 주고자 하는 항목만 넣고 속성을 주면 되고, 항목의 순서는 상관이 없다.

[폰트 속성을 주는 항목들]

색   상 color: 색상이름 또는 색상코드 ;
굵   기 font-weight: bold ;
기울임 font-style: italic;
크   기 font-size: 숫자px, 숫자% 또는 숫자em ;
글   꼴 font-family: 굴림, 돋움, 궁서, Arial, 등등 ;
줄높이 line-height: 숫자px, 숫자% 또는 숫자em ;

[예: Style에서 폰트 속성을 준 코드 모습]

<span
style="
font-style: italic ;
font-weight: bold;
font-size: 1.5em;
line-height: 1.0em;
color: navy;
font-family: arial;
">
여기는 스타일에서 폰트 속성을 각각 주었다
</span>

[실제 적용한 모습]

여기는 스타일에서 폰트 속성을 각각 주었다

폰트의 각 항목별 상세 설명
ㅇ 각 항목의 수자는 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등을 쓸 수 있다. (단위에 관한 자세한 설명은 링크페이지 참조)
ㅇ 아래의 실제 적용 모습은 페이지의 설정에 따라 달라진다. 아래에서 보여지는 것은 현재 페이지의 설정을 기준으로 보여지는 것이다.

[글자크기: 폰트 사이즈 font-size]

xx-large [더블 엑스 라쥐] 아주 크게
x-large [엑스 라쥐] 조금 크게
large [라쥐] 크게
medium [미디엄] 중간 - 기본 글자 크기
small [스몰] 작게
x-small [엑스 스몰] 조금 작게
xx-small [더블 엑스 스몰] 아주 작게

smaller [스몰러] 더 작게 - 상위 요소(parent element)의 폰트 크기에 비해 더 작게
larger [라쥐어] 더 크게 - 상위 요소(parent element)의 폰트 크기에 비해 더 크게

initial [이니셜] 초기(기본, default) 폰트 크기
inherit [인헤리트] 상위요소(parent element)의 폰트 크기

[실제 적용한 모습]

이 글자의 폰트크기는 xx-large [더블 엑스 라쥐]이다
이 글자의 폰트크기는 x-large [엑스 라쥐]이다
이 글자의 폰트크기는 large [라쥐]이다
이 글자의 폰트크기는 medium [미디엄]이다
이 글자의 폰트크기는 small [스몰]이다
이 글자의 폰트크기는 x-small [엑스 스몰]이다
이 글자의 폰트크기는 xx-small [더블 엑스 스몰]이다

이 글자의 폰트크기는 smaller [스몰러]이다
이 글자의 폰트크기는 larger [라쥐어]이다

이 글자의 폰트크기는 initial [이니셜]이다
이 글자의 폰트크기는 inherit [인헤리트]이다

ㅇ HTML문서에서 폰트의 기본 크기(default font size)를 1.2로 주었다면, medium은 12pt, small은 10tp, x-small은 8pt, large는 14pt, x-large는 16pt 정도된다고 볼 수 있다.
ㅇ HTML에서 기본폰트크기는 방문자와 페이지의 내용 등을 잘 헤아려서 결정할 필요가 있다. 문서 안에서 폰트 크기를 조절할 때 대체로 기본폰트크기를 기준으로 하기 때문이다.

[글자꾸밈: 폰트 스타일 font-style]

normal [노멀] 브라우저가 보여주는 기본(default) 스타일
italic [이탤릭] 기울임
oblique [오블맄] 기울임
initial [이니셜] 초기(기본, default) 스타일
inherit [인헤리트] 상위요소(parent element)의 스타일

[실제 적용한 모습 : 쉽게 구분되도록 하기 위해 font-size:1.2em;로 함]

이 글자의 스타일은 normal [노멀] 이다
이 글자의 스타일은 italic [이탤릭] 이다
이 글자의 스타일은 oblique [오블맄] 이다
이 글자의 스타일은 initial [이니셜] 이다
이 글자의 스타일은 inherit [인헤리트] 이다

[글자변형: 폰트 베리언트 font-variant]

normal [노멀] small-caps [스몰 캡스] 영문자를 작은 대문자로 표시함
initial [이니셜] 초기(기본, default) 값으로 표시함
inherit [인헤리트] 상위요소(parent element)와 같이 표시함

[예: 아래의 실제적용한 모습의 코드]

<span style="font-variant:normal;">이 글자의 VARIANT는 normal [노멀] 이다</span>
<span style="font-variant:small-caps;">이 글자의 VARIANT는 small-caps [스몰 캡스] 이다</span>
<span style="font-variant:initial;">이 글자의 VARIANT는 initial [이니셜] 이다</span>
<span style="font-variant:inherit;">이 글자의 VARIANT는 inherit [인헤리트] 이다</span>

[실제적용한 모습]

이 글자의 VARIANT는 normal [노멀] 이다
이 글자의 VARIANT는 small-caps [스몰 캡스] 이다
이 글자의 VARIANT는 initial [이니셜] 이다
이 글자의 VARIANT는 inherit [인헤리트] 이다

[글자굵기: 폰트 웨이트 font-weight]

normal [노멀] 기본(default)bold [볼드] 두껍게
bolder [볼더] 더 두껍게
lighter [라이터] 더 가늘게

initial [이니셜] 초기(기본, default) 값으로 표시
inherit [인헤리트] 상위요소(parent element)와 같이 표시

<수자로 폰트 웨이트 설정>
수자가 클 수록 더 두터워지며, 위의 normal [노멀]은 400과 같고, bold [볼드]는 700과 같다.
100 200 300 400 500 600 700 800 900

[실제 적용한 모습]

이 글자의 폰트웨이트는 normal [노멀] 이다
이 글자의 폰트웨이트는 bold [볼드] 이다
이 글자의 폰트웨이트는 bolder [볼더] 이다
이 글자의 폰트웨이트는 lighter [라이터] 이다

이 글자의 폰트웨이트는 initial [이니셜] 이다
이 글자의 폰트웨이트는 inherit [인헤리트] 이다

이 글자의 폰트웨이트는 100 이다
이 글자의 폰트웨이트는 200 이다
이 글자의 폰트웨이트는 300 이다
이 글자의 폰트웨이트는 400 이다
이 글자의 폰트웨이트는 500 이다
이 글자의 폰트웨이트는 600 이다
이 글자의 폰트웨이트는 700 이다
이 글자의 폰트웨이트는 800 이다
이 글자의 폰트웨이트는 900 이다

[줄간격: 라인 하이트 line-height]

normal [노멀] 기본(default). 브라우저들이 대체로 150%를 기본으로 하는 것 같다.
initial [이니셜] 초기(기본, default)값
inherit [인헤리트] 상위요소(parent element)와 같이 표시
수자로 지정: 픽셀(px), 퍼센트(%), 이엠(em), 포인트(pt) 등으로 지정함

[실제 적용한 모습]

이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다. 이 문장은 줄간격을 normal [노멀]로 주었다.

이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다. 이 문장은 줄간격을 initial [이니셜]로 주었다.

이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다. 이 문장은 줄간격을 inherit [인헤리트]로 주었다.

이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다. 이 문장은 줄간격을 15px로 주었다.

이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다. 이 문장은 줄간격을 100%로 주었다.

이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다. 이 문장은 줄간격을 1em으로 주었다.

이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다. 이 문장은 줄간격을 1.5em으로 주었다.

이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다. 이 문장은 줄간격을 2em으로 주었다.

[글꼴: 폰트 패밀리 font-family]

글꼴은 아래와 같이 여러가지를 줄 수 있다.
글꼴과 글꼴의 구분은 쉼표( ,)로 하고, 첫번째 글꼴은 따옴표(" ")로 감싸 준다.

font-family: "Hanna", Jeju Gothic, Nanum Gothic, Serif;

브라우저는 첫번째 글꼴을 표시할 수 있으면 첫번째 글꼴로 표시를 하고, 첫번째 글꼴이 없으면 두번째 글꼴로 표시를 한다. 두번째 글꼴도 없으면 세번째 글꼴.... 순서로 표시한다.

위의 예에서는 한나(Hanna)체가 있으면 한나체로 표시하고 한나체가 없으면 그 다음의 제주고딕체(Jeju Gothic)로 표시한다. 두번째의 제주고딕체도 없으면 또 그 다음의 나눔고딕체(nanum Gothic)로 표시하고..... 그런 순서로 표시가 된다.

글꼴이 있느냐는 웹페이지를 보는 방문자의 컴퓨터에 해당 글 꼴이 있는가를 말한다. 그러니까, 방문자의 컴퓨터에 해당 글꼴이 없으면, 위와 같이 글꼴을 지정해 주어도, 의미가 없다.

[출처] 사용법 어찌?

DIV 화면 정중앙에 박스 배치하기

2018-09-19T20:27:45+09:00

DIV로 만든 박스를 화면 정중앙에 배치하는 방법은 생각보다 간단하지가 않습니다.

특히 박스의 가로 크기가 변하는 경우는 더욱더 어렵습니다.

예를 들면 Popup위젯의 경우가 해당됩니다.

- 일반적인 코드 -

- Popup위젯의 경우는 아래의 코드로 팝업창을 화면중앙에 배치할 수 있습니다.

#pop-ups { position:{$widget_info->popup_location}; margin-left:-{$widget_info->popup_width/2}px; top:{$widget_info->board_top}%; left:{$widget_info->board_left}%; z-index:99 }

DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )

2018-09-19T00:34:23+09:00

DIV 가로 중앙 정렬, 세로 중앙 정렬
코딩을 할 때 가장 기본이 되지만 또 가장 어려웠던 부분이었다.

display:flex; 이 코드를 알고 나서 정말 쉽게 코딩이 가능해졌다.
바깥쪽 div, 즉 부모 div에 display:flex; 를 선언하면. 안쪽 엘리먼트, 즉 자식div에 영향을 준다.

반응형 레이아웃을 작업할 때 유용하게 쓸수 있는 css입니다.

사이트선택 전용 레이아웃을 코딩할때 사이트제목2개를 중앙에 배치하는 부분이 무척 힘들었었는데

display:flex; 코드를 사용하니 쉽게 구현이 가능해 졌다.

<style>

.bl-left { position:relative; float:left; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }
.bl-right { position:relative; float:right; width:50%; height:300px; display: flex; justify-content: center; align-items: center; }

.bluelight { position: relative; display: table; width: 150px; height: 150px; }

.bluelight a { display: table-cell; vertical-align: middle;text-align: center; }

</style>

위의 코딩으로 완성된 사이트제목2개의 가로,세로 정렬 모습입니다.

[샘플보기]

커서(cursor) 모양 정리

2018-07-19T12:32:55+09:00

마우스 커서 모양에 대해 알아보겠습니다.

보통 cursor 작업을 하면 pointer 위주로 작업을 합니다.

하지만 pointer 외에 아주 많는 cursor 가 있습니다.

그종류에 대해 소스와 샘플을 올려봅니다.

적절한 cursor 지정을 통해 사용자 편의를 고려해보시기 바랄께요~

[소스]Cursor 모양

<span style="cursor:crosshair">crosshair</span><br/>

<span style="cursor:default">default</span><br/>

<span style="cursor:e-resize">e-resize</span><br/>

<span style="cursor:n-resize">n-resize</span><br/>

<span style="cursor:ne-resize">ne-resize</span><br/>

<span style="cursor:nw-resize">nw-resize</span><br/>

<span style="cursor:pointer">pointer</span><br/>

<span style="cursor:progress">progress</span><br/>

<span style="cursor:s-resize">s-resize</span><br/>

<span style="cursor:se-resize">se-resize</span><br/>

<span style="cursor:sw-resize">sw-resize</span><br/>

<span style="cursor:w-resize">w-resize</span><br/>

<span style="cursor:not-allowed">not-allowed</span><br/>

[결과]Cursor 모양(마우스를 올려보세요)

auto
crosshair
default
e-resize
grab
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
not-allowed
no-drop

[출처] [CSS]커서(cursor) 모양 정리|작성자 와이키키

webkit-animation 적용 방법

2018-01-31T20:40:52+09:00

css3를 지원하는 브라우즈에서 이미지나 문구를 에니메이션 처럼 꾸미는 방법으로 webkit-animation을 많이 사용합니다. https://moonhouse.co.kr/423394

스케치북5 게시판에 댓글달기 추천 문구에 적용하는 방법을 소개합니다.

1. skin.xml 에 추가

<var name="comment_induce_mid" type="text">
   <title xml:lang="ko">댓글 유도 mid</title>
   <title xml:lang="en">Comment Induce Mid</title>
   <description xml:lang="ko">댓글 유도 문구표시할 mid명</description>
   <description xml:lang="en">Comment Induce Mid</description>
</var>
<var name="comment_induce_text" type="textarea">
   <title xml:lang="ko">댓글 유도 문구</title>
   <title xml:lang="en">Comment Induce Text</title>
   <description xml:lang="ko">댓글 유도 문구를 작성하세요.</description>
   <description xml:lang="en">Comment Induce Text</description>
</var>

2. _read.html을 열어서 주황색 코드 추가

-- 생략

<block cond="$mid==$mi->comment_induce_mid">
<div class="cmtInduce">

<ul class="blink1" style="margin-bottom:10px; text-align:center"><i class="fa fa-quote-left" aria-hidden="true"></i> 댓글이 하나도 없네요ㅠㅠ <i class="fa fa-quote-right" aria-hidden="true"></i></ul>

<ul class="blink2" style="text-align:center"><img src="./img/induce.gif" /><i class="fa fa-quote-left" aria-hidden="true" style="margin-left:5px"></i> {$mi->comment_induce_text} <i class="fa fa-quote-right" aria-hidden="true"></i></ul>
</div>
</block>

3. board.css 에 추가

/* 댓글 유도창 */
.cmtInduce { background-color:#555555; font-size:1.0em; color:#fff; padding:5px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; margin-bottom:10px; }

이렇게 코드 추가하면 해당 게시판(mid)에 댓글이 없으면 "댓글이 하나도 없네요ㅠㅠ" 문구가 상단에 출력되고

아래에 게시판설정에 "댓글 유도 문구"글이 출력됩니다.

여기 까지만 적용해도 됩니다.

이 문구들에게 생명을 적용하는 방법이 webkit-animation입니다.

[webkit-animation 적용 설명]

-webkit-animation-name:Animation_01; //프레임에 정의한 name 값

-webkit-animation-delay:1s; //1초 정도 멈춘 후에 시작된다.

-webkit-animation-duration:2.0s; //애니메이션 실행 시간 2초

-webkit-animation-interation-count:infinite; //무한 반복

-webkit-animation-timing-function:ease-in-out; //키프레임간의 타이밍 정도 ease / ease-in / ease-in-out

-webkit-animation-direction:alternate //플레이 상태값, normal 순방향 / alternate 역방향

위의 _read.html 소스에 class="blink1" 이 부분 board.css 에 추가

.blink1 {

-webkit-animation-name: blinker;

-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;

-webkit-animation-duration: 2s;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0.5; }
}

-webkit-animation-name: blinker; 프레임에 정의한 name 값입니다.

여기서 네임값 blinker는 코드를 작성하는 작성자가 임의의 이름값을 주면 됩니다.

위의 코드에서 초록색 부분 @-webkit-keyframes 에 작성자가 준 임의의 이름값을 blinker를 주고

{ 에니메이션 작동 코드 }를 작성하면 됩니다.

위의 코드의 에니메이션 은

-webkit-animation-duration: 2s; 2초 동안

처음에 투명도가 0, 1초일때 투명도가 100%, 2초일때 투명도가 50%

아래 댓글 유도문구중 "댓글이 하나도 없네요ㅠㅠ"가 위의 에니메이션이 적용 된 것입니다.

자! 그럼 효과를 2개를 동시에 적용하는 방법 class="blink2"

.blink2 {

-webkit-animation-name: blinker;

-webkit-animation-name: pulse;

-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);

-webkit-animation-duration: 5s;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-direction: alternate;

}

@-webkit-keyframes pulse {
0% { background-color:black ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); }
33% { background-color:white ; opacity: 0.75; -webkit-transform: scale(0.9) rotate(-5deg); }
67% { background-color:red ; opacity: 0.5; -webkit-transform: scale(1.1) rotate(0deg); }
100% { background-color:green ; opacity: 1.0; -webkit-transform: scale(1.0) rotate(5deg); }

}

blinker 효과는 위에 설명했고,

pulse 효과는 5초동안 문구의

배경색상 - background-color: ;

투명도의 변화 - opacity: ;

크기 변화 - scale(1.0);100% 90% 110% 100%,

회전 - rotate(-5deg);

아래 댓글 유도 문구중 하단문구가 위의 에니메이션이 적용 된 것입니다.

에니메이션의 효과는 웹검색하시면 다영하게 나옵니다.

https://moonhouse.co.kr/select

페이지의 메뉴에 마우스hover시 화려한 효과도 webkit-animation를 사용한 것입니다.

각종 css3를 자동으로 만들어주는 사이트

2017-11-07T19:56:01+09:00

{CSS3} animation / transform / transition

각종 css3를 자동으로 만들어주는 사이트

http://www.css3maker.com/index.html

* animation

참고 사이트 http://daneden.github.io/animate.css/

- css3 animaion을 적용하기 위해선 속성 변화를 주기 위해 키프레임 생성! (접두어 써야함)

animation-name: 애니메이션이름
animation-duration: 진행시간(2s,3s...)
animation-iteration-count: 반복횟수(infinite:무한반복)
animation-timing-fonction: 속도형태(자세한 속성값은 밑에 다시 세세하게 씀!)
animation-direction: 방향지정(자세한 속성값은 아래에)
animation-play-state: 애니메이션 진행상태
animation-delay:애니메이션 시작전 지연시간
animation-fill-mode:애니메이션이 끝났을 때 요소의 위치(자세한 속성은 아래에)

- 속도형태 속성
ease (시작과 종료 부드럽게)
linear (일정하게)
ease-in (서서히 시작)
ease-out (서서히 종료)
ease-in-out (서서히 시작하여 서서히 종료)

- 방향지정 속성
normal (정방향)
reverse (to에서 시작하여 from으로 끝남)
alternate (처음은 정방향 그 다음은 역방향)
alternate-reverse (처음은 역방향 그 다음은 정방향)

- 애니메이션 진행상태 속성
running (재색중)
paused (일시정지중)

- 애니메이션 끝났을 때 요소의 위치 속성
forwards (애니메이션 시작 전 까지는 원래 위치에서 대기 / 요소가 애니메이션 끝나는 위치에서 멈춤)
backwards (페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동 / 끝나면 원래 위치로 돌아감)
both (위 둘 효과를 모두 적용)
none (애니메이션 시작 전 까지는 원래 위치에 고정 / 끝나면 그 위치로 다시 돌아감 = 기본상태)

- 키프레임
@keyframes 애니메이션이름 {
0% {}
5% {}
... %는 각자 효과를 주고 싶은 곳에 지정하며, 각 %마다 움직임을 주고 싶으면 그 안에 {해당하는 값을 써주면 됨}
}

한줄 정의가 가능하다
ex) animation:rotateWord 18s linear infinite 0s;
풀어서 정의 하자면
ex)
animation-name:rotateWord;
animation-duration:18s;
animation-iteration-count:infinite;
animation-timing-fonction:linear;
animation-delay:0s;

* transform

- 회전, 확대/축소, 기울임, 위치변경과 같은 변경 처리 (마찬가지로 접두어 써야함)

1. rotate 회전
- 각도의 범위는 0~360도중 하나의 각도 선택할 수 있으며, 마이너스 각도는 시계 반대 방향으로 회전 할 수 있음
ex) transform:rotate(45deg);

2. scale 확대/축소
- 이미지(개체)의 크기를 조절할 수 있으며, 비율을 지정하여 크기를 조절하고 n배로 확대 수치 지정/ 소수점도 가능
ex) transform:scale(1.5);
- 비율로 확대/축소가 가능하나, 가로 세로 방향도 지정 가능 함
ex) transform:scaleX(3); 가로의 3배 확대 / Y로 쓰면 세로의 3배 확대

3. skew 기울임
- 주어진 각도로 기울일 수 있으며, X축은 좌/우로 Y축은 상/하로 기울이는 효과를 줌
- X축에 + 각도는 우측 / - 각도는 좌측
- Y축에 + 각도는 아래쪽으로 / - 각도는 윗쪽
ex) transform:skewX(+-10deg);

4. translate 위치이동
- 위치를 이동시킬 수 있으며, 좌/우 상/하로 위치 조정
- scale과 마찬가지로 X축, Y축으로 지정가능함
ex) transform:translate(10px, 20px); transform:translateX(10px);\

* transition

- 마우스를 클릭하거나 hover 상태에 변화를 주는 것

transition-property : 색상이나 위치 등 변화의 대상이 되는 css 속성 지정
transition-duration : 변화할 때 걸리는 시간을 초단위로 지정
transition-delay : 변화되기 전 시간을 초단위로 지정
transition-timing-function : 진행시간 (속성값은 animation 속도형태 속성과 동일)

한 줄 정의가 가능하다
ex) transition:opacity 2s 1s ease;
이렇게 정의할 경우 풀어서 쓴다면,

ex)
transition-property:opacity;
transition-duration:2s;
transition-delay:1s;
trasition-timing-function:ease;

출처 : http://blog.naver.com/bbol0623/220385803579

html에 사용되는 Character Entities(특수기호)

2017-11-04T17:54:04+09:00

	`&Tab;`	` `	` `	CHARACTER TABULATION
	`&NewLine;`	` `	` `	LINE FEED (LF)
!	`&excl;`	`!`	`!`	EXCLAMATION MARK
"	`" &QUOT;`	`"`	`"`	QUOTATION MARK
#	`&num;`	`#`	`#`	NUMBER SIGN
$	`&dollar;`	`$`	`$`	DOLLAR SIGN
%	`&percnt;`	`%`	`%`	PERCENT SIGN
&	`& &AMP;`	`&`	`&`	AMPERSAND
'	`'`	`'`	`'`	APOSTROPHE
(	`(`	`(`	`(`	LEFT PARENTHESIS
)	`)`	`)`	`)`	RIGHT PARENTHESIS
*	`&ast; &midast;`	`*`	`*`	ASTERISK
+	`+`	`+`	`+`	PLUS SIGN
,	`,`	`,`	`,`	COMMA
.	`&period;`	`.`	`.`	FULL STOP
/	`/`	`/`	`/`	SOLIDUS
:	`&colon;`	`:`	`:`	COLON
;	`&semi;`	`;`	`;`	SEMICOLON
<	`< &LT;`	`<`	`<`	LESS-THAN SIGN
=	`=`	`=`	`=`	EQUALS SIGN
>	`> &GT;`	`>`	`>`	GREATER-THAN SIGN
?	`&quest;`	`?`	`?`	QUESTION MARK
@	`&commat;`	`@`	`@`	COMMERCIAL AT
[	`[ [`	`[`	`[`	LEFT SQUARE BRACKET
\	`\`	`\`	`\`	REVERSE SOLIDUS
]	`] ]`	`]`	`]`	RIGHT SQUARE BRACKET
^	`&Hat;`	`^`	`^`	CIRCUMFLEX ACCENT
_	`&lowbar;`	`_`	`_`	LOW LINE
`	`&grave; &DiacriticalGrave;`	```	```	GRAVE ACCENT
{	`{ {`	`{`	`{`	LEFT CURLY BRACKET
\|	`\| \| &VerticalLine;`	`\|`	`\|`	VERTICAL LINE
}	`} }`	`}`	`}`	RIGHT CURLY BRACKET
	`  &NonBreakingSpace;`	` `	` `	NO-BREAK SPACE
¡	`¡`	`¡`	`¡`	INVERTED EXCLAMATION MARK
¢	`¢`	`¢`	`¢`	CENT SIGN
£	`£`	`£`	`£`	POUND SIGN
¤	`¤`	`¤`	`¤`	CURRENCY SIGN
¥	`¥`	`¥`	`¥`	YEN SIGN
¦	`¦`	`¦`	`¦`	BROKEN BAR
§	`§`	`§`	`§`	SECTION SIGN
¨	`&Dot; &die; &DoubleDot; ¨`	`¨`	`¨`	DIAERESIS
©	`© &COPY;`	`©`	`©`	COPYRIGHT SIGN
ª	`ª`	`ª`	`ª`	FEMININE ORDINAL INDICATOR
«	`«`	`«`	`«`	LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
¬	`¬`	`¬`	`¬`	NOT SIGN
	``	``	``	SOFT HYPHEN
®	`® &circledR; &REG;`	`®`	`®`	REGISTERED SIGN
¯	`¯ &OverBar; &strns;`	`¯`	`¯`	MACRON
°	`°`	`°`	`°`	DEGREE SIGN
±	`± &pm; &PlusMinus;`	`±`	`±`	PLUS-MINUS SIGN
²	`²`	`²`	`²`	SUPERSCRIPT TWO
³	`³`	`³`	`³`	SUPERSCRIPT THREE
´	`´ &DiacriticalAcute;`	`´`	`´`	ACUTE ACCENT
µ	`µ`	`µ`	`µ`	MICRO SIGN
¶	`¶`	`¶`	`¶`	PILCROW SIGN
·	`· · ·`	`·`	`·`	MIDDLE DOT
¸	`¸ &Cedilla;`	`¸`	`¸`	CEDILLA
¹	`¹`	`¹`	`¹`	SUPERSCRIPT ONE
º	`º`	`º`	`º`	MASCULINE ORDINAL INDICATOR
»	`»`	`»`	`»`	RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
¼	`¼`	`¼`	`¼`	VULGAR FRACTION ONE QUARTER
½	`½ &half;`	`½`	`½`	VULGAR FRACTION ONE HALF
¾	`¾`	`¾`	`¾`	VULGAR FRACTION THREE QUARTERS
¿	`¿`	`¿`	`¿`	INVERTED QUESTION MARK
À	`À`	`À`	`À`	LATIN CAPITAL LETTER A WITH GRAVE
Á	`Á`	`Á`	`Á`	LATIN CAPITAL LETTER A WITH ACUTE
Â	`Â`	`Â`	`Â`	LATIN CAPITAL LETTER A WITH CIRCUMFLEX
Ã	`Ã`	`Ã`	`Ã`	LATIN CAPITAL LETTER A WITH TILDE
Ä	`Ä`	`Ä`	`Ä`	LATIN CAPITAL LETTER A WITH DIAERESIS
Å	`Å`	`Å`	`Å`	LATIN CAPITAL LETTER A WITH RING ABOVE
Æ	`Æ`	`Æ`	`Æ`	LATIN CAPITAL LETTER AE
Ç	`Ç`	`Ç`	`Ç`	LATIN CAPITAL LETTER C WITH CEDILLA
È	`È`	`È`	`È`	LATIN CAPITAL LETTER E WITH GRAVE
É	`É`	`É`	`É`	LATIN CAPITAL LETTER E WITH ACUTE
Ê	`Ê`	`Ê`	`Ê`	LATIN CAPITAL LETTER E WITH CIRCUMFLEX
Ë	`Ë`	`Ë`	`Ë`	LATIN CAPITAL LETTER E WITH DIAERESIS
Ì	`Ì`	`Ì`	`Ì`	LATIN CAPITAL LETTER I WITH GRAVE
Í	`Í`	`Í`	`Í`	LATIN CAPITAL LETTER I WITH ACUTE
Î	`Î`	`Î`	`Î`	LATIN CAPITAL LETTER I WITH CIRCUMFLEX
Ï	`Ï`	`Ï`	`Ï`	LATIN CAPITAL LETTER I WITH DIAERESIS
Ð	`Ð`	`Ð`	`Ð`	LATIN CAPITAL LETTER ETH
Ñ	`Ñ`	`Ñ`	`Ñ`	LATIN CAPITAL LETTER N WITH TILDE
Ò	`Ò`	`Ò`	`Ò`	LATIN CAPITAL LETTER O WITH GRAVE
Ó	`Ó`	`Ó`	`Ó`	LATIN CAPITAL LETTER O WITH ACUTE
Ô	`Ô`	`Ô`	`Ô`	LATIN CAPITAL LETTER O WITH CIRCUMFLEX
Õ	`Õ`	`Õ`	`Õ`	LATIN CAPITAL LETTER O WITH TILDE
Ö	`Ö`	`Ö`	`Ö`	LATIN CAPITAL LETTER O WITH DIAERESIS
×	`×`	`×`	`×`	MULTIPLICATION SIGN
Ø	`Ø`	`Ø`	`Ø`	LATIN CAPITAL LETTER O WITH STROKE
Ù	`Ù`	`Ù`	`Ù`	LATIN CAPITAL LETTER U WITH GRAVE
Ú	`Ú`	`Ú`	`Ú`	LATIN CAPITAL LETTER U WITH ACUTE
Û	`Û`	`Û`	`Û`	LATIN CAPITAL LETTER U WITH CIRCUMFLEX
Ü	`Ü`	`Ü`	`Ü`	LATIN CAPITAL LETTER U WITH DIAERESIS
Ý	`Ý`	`Ý`	`Ý`	LATIN CAPITAL LETTER Y WITH ACUTE
Þ	`Þ`	`Þ`	`Þ`	LATIN CAPITAL LETTER THORN
ß	`ß`	`ß`	`ß`	LATIN SMALL LETTER SHARP S
à	`à`	`à`	`à`	LATIN SMALL LETTER A WITH GRAVE
á	`á`	`á`	`á`	LATIN SMALL LETTER A WITH ACUTE
â	`â`	`â`	`â`	LATIN SMALL LETTER A WITH CIRCUMFLEX
ã	`ã`	`ã`	`ã`	LATIN SMALL LETTER A WITH TILDE
ä	`ä`	`ä`	`ä`	LATIN SMALL LETTER A WITH DIAERESIS
å	`å`	`å`	`å`	LATIN SMALL LETTER A WITH RING ABOVE
æ	`æ`	`æ`	`æ`	LATIN SMALL LETTER AE
ç	`ç`	`ç`	`ç`	LATIN SMALL LETTER C WITH CEDILLA
è	`è`	`è`	`è`	LATIN SMALL LETTER E WITH GRAVE
é	`é`	`é`	`é`	LATIN SMALL LETTER E WITH ACUTE
ê	`ê`	`ê`	`ê`	LATIN SMALL LETTER E WITH CIRCUMFLEX
ë	`ë`	`ë`	`ë`	LATIN SMALL LETTER E WITH DIAERESIS
ì	`ì`	`ì`	`ì`	LATIN SMALL LETTER I WITH GRAVE
í	`í`	`í`	`í`	LATIN SMALL LETTER I WITH ACUTE
î	`î`	`î`	`î`	LATIN SMALL LETTER I WITH CIRCUMFLEX
ï	`ï`	`ï`	`ï`	LATIN SMALL LETTER I WITH DIAERESIS
ð	`ð`	`ð`	`ð`	LATIN SMALL LETTER ETH
ñ	`ñ`	`ñ`	`ñ`	LATIN SMALL LETTER N WITH TILDE
ò	`ò`	`ò`	`ò`	LATIN SMALL LETTER O WITH GRAVE
ó	`ó`	`ó`	`ó`	LATIN SMALL LETTER O WITH ACUTE
ô	`ô`	`ô`	`ô`	LATIN SMALL LETTER O WITH CIRCUMFLEX
õ	`õ`	`õ`	`õ`	LATIN SMALL LETTER O WITH TILDE
ö	`ö`	`ö`	`ö`	LATIN SMALL LETTER O WITH DIAERESIS
÷	`÷ &div;`	`÷`	`÷`	DIVISION SIGN
ø	`ø`	`ø`	`ø`	LATIN SMALL LETTER O WITH STROKE
ù	`ù`	`ù`	`ù`	LATIN SMALL LETTER U WITH GRAVE
ú	`ú`	`ú`	`ú`	LATIN SMALL LETTER U WITH ACUTE
û	`û`	`û`	`û`	LATIN SMALL LETTER U WITH CIRCUMFLEX
ü	`ü`	`ü`	`ü`	LATIN SMALL LETTER U WITH DIAERESIS
ý	`ý`	`ý`	`ý`	LATIN SMALL LETTER Y WITH ACUTE
þ	`þ`	`þ`	`þ`	LATIN SMALL LETTER THORN
ÿ	`ÿ`	`ÿ`	`ÿ`	LATIN SMALL LETTER Y WITH DIAERESIS
Ā	`&Amacr;`	`Ā`	`Ā`	LATIN CAPITAL LETTER A WITH MACRON
ā	`&amacr;`	`ā`	`ā`	LATIN SMALL LETTER A WITH MACRON
Ă	`&Abreve;`	`Ă`	`Ă`	LATIN CAPITAL LETTER A WITH BREVE
ă	`&abreve;`	`ă`	`ă`	LATIN SMALL LETTER A WITH BREVE
Ą	`&Aogon;`	`Ą`	`Ą`	LATIN CAPITAL LETTER A WITH OGONEK
ą	`&aogon;`	`ą`	`ą`	LATIN SMALL LETTER A WITH OGONEK
Ć	`&Cacute;`	`Ć`	`Ć`	LATIN CAPITAL LETTER C WITH ACUTE
ć	`&cacute;`	`ć`	`ć`	LATIN SMALL LETTER C WITH ACUTE
Ĉ	`&Ccirc;`	`Ĉ`	`Ĉ`	LATIN CAPITAL LETTER C WITH CIRCUMFLEX
ĉ	`&ccirc;`	`ĉ`	`ĉ`	LATIN SMALL LETTER C WITH CIRCUMFLEX
Ċ	`&Cdot;`	`Ċ`	`Ċ`	LATIN CAPITAL LETTER C WITH DOT ABOVE
ċ	`&cdot;`	`ċ`	`ċ`	LATIN SMALL LETTER C WITH DOT ABOVE
Č	`&Ccaron;`	`Č`	`Č`	LATIN CAPITAL LETTER C WITH CARON
č	`&ccaron;`	`č`	`č`	LATIN SMALL LETTER C WITH CARON
Ď	`&Dcaron;`	`Ď`	`Ď`	LATIN CAPITAL LETTER D WITH CARON
ď	`&dcaron;`	`ď`	`ď`	LATIN SMALL LETTER D WITH CARON
Đ	`&Dstrok;`	`Đ`	`Đ`	LATIN CAPITAL LETTER D WITH STROKE
đ	`&dstrok;`	`đ`	`đ`	LATIN SMALL LETTER D WITH STROKE
Ē	`&Emacr;`	`Ē`	`Ē`	LATIN CAPITAL LETTER E WITH MACRON
ē	`&emacr;`	`ē`	`ē`	LATIN SMALL LETTER E WITH MACRON
Ė	`&Edot;`	`Ė`	`Ė`	LATIN CAPITAL LETTER E WITH DOT ABOVE
ė	`&edot;`	`ė`	`ė`	LATIN SMALL LETTER E WITH DOT ABOVE
Ę	`&Eogon;`	`Ę`	`Ę`	LATIN CAPITAL LETTER E WITH OGONEK
ę	`&eogon;`	`ę`	`ę`	LATIN SMALL LETTER E WITH OGONEK
Ě	`&Ecaron;`	`Ě`	`Ě`	LATIN CAPITAL LETTER E WITH CARON
ě	`&ecaron;`	`ě`	`ě`	LATIN SMALL LETTER E WITH CARON
Ĝ	`&Gcirc;`	`Ĝ`	`Ĝ`	LATIN CAPITAL LETTER G WITH CIRCUMFLEX
ĝ	`&gcirc;`	`ĝ`	`ĝ`	LATIN SMALL LETTER G WITH CIRCUMFLEX
Ğ	`&Gbreve;`	`Ğ`	`Ğ`	LATIN CAPITAL LETTER G WITH BREVE
ğ	`&gbreve;`	`ğ`	`ğ`	LATIN SMALL LETTER G WITH BREVE
Ġ	`&Gdot;`	`Ġ`	`Ġ`	LATIN CAPITAL LETTER G WITH DOT ABOVE
ġ	`&gdot;`	`ġ`	`ġ`	LATIN SMALL LETTER G WITH DOT ABOVE
Ģ	`&Gcedil;`	`Ģ`	`Ģ`	LATIN CAPITAL LETTER G WITH CEDILLA
Ĥ	`&Hcirc;`	`Ĥ`	`Ĥ`	LATIN CAPITAL LETTER H WITH CIRCUMFLEX
ĥ	`&hcirc;`	`ĥ`	`ĥ`	LATIN SMALL LETTER H WITH CIRCUMFLEX
Ħ	`&Hstrok;`	`Ħ`	`Ħ`	LATIN CAPITAL LETTER H WITH STROKE
ħ	`&hstrok;`	`ħ`	`ħ`	LATIN SMALL LETTER H WITH STROKE
Ĩ	`&Itilde;`	`Ĩ`	`Ĩ`	LATIN CAPITAL LETTER I WITH TILDE
ĩ	`&itilde;`	`ĩ`	`ĩ`	LATIN SMALL LETTER I WITH TILDE
Ī	`&Imacr;`	`Ī`	`Ī`	LATIN CAPITAL LETTER I WITH MACRON
ī	`&imacr;`	`ī`	`ī`	LATIN SMALL LETTER I WITH MACRON
Į	`&Iogon;`	`Į`	`Į`	LATIN CAPITAL LETTER I WITH OGONEK
į	`&iogon;`	`į`	`į`	LATIN SMALL LETTER I WITH OGONEK
İ	`&Idot;`	`İ`	`İ`	LATIN CAPITAL LETTER I WITH DOT ABOVE
ı	`&imath; &inodot;`	`ı`	`ı`	LATIN SMALL LETTER DOTLESS I
Ĳ	`&IJlig;`	`Ĳ`	`Ĳ`	LATIN CAPITAL LIGATURE IJ
ĳ	`&ijlig;`	`ĳ`	`ĳ`	LATIN SMALL LIGATURE IJ
Ĵ	`&Jcirc;`	`Ĵ`	`Ĵ`	LATIN CAPITAL LETTER J WITH CIRCUMFLEX
ĵ	`&jcirc;`	`ĵ`	`ĵ`	LATIN SMALL LETTER J WITH CIRCUMFLEX
Ķ	`&Kcedil;`	`Ķ`	`Ķ`	LATIN CAPITAL LETTER K WITH CEDILLA
ķ	`&kcedil;`	`ķ`	`ķ`	LATIN SMALL LETTER K WITH CEDILLA
ĸ	`&kgreen;`	`ĸ`	`ĸ`	LATIN SMALL LETTER KRA
Ĺ	`&Lacute;`	`Ĺ`	`Ĺ`	LATIN CAPITAL LETTER L WITH ACUTE
ĺ	`&lacute;`	`ĺ`	`ĺ`	LATIN SMALL LETTER L WITH ACUTE
Ļ	`&Lcedil;`	`Ļ`	`Ļ`	LATIN CAPITAL LETTER L WITH CEDILLA
ļ	`&lcedil;`	`ļ`	`ļ`	LATIN SMALL LETTER L WITH CEDILLA
Ľ	`&Lcaron;`	`Ľ`	`Ľ`	LATIN CAPITAL LETTER L WITH CARON
ľ	`&lcaron;`	`ľ`	`ľ`	LATIN SMALL LETTER L WITH CARON
Ŀ	`&Lmidot;`	`Ŀ`	`Ŀ`	LATIN CAPITAL LETTER L WITH MIDDLE DOT
ŀ	`&lmidot;`	`ŀ`	`ŀ`	LATIN SMALL LETTER L WITH MIDDLE DOT
Ł	`&Lstrok;`	`Ł`	`Ł`	LATIN CAPITAL LETTER L WITH STROKE
ł	`&lstrok;`	`ł`	`ł`	LATIN SMALL LETTER L WITH STROKE
Ń	`&Nacute;`	`Ń`	`Ń`	LATIN CAPITAL LETTER N WITH ACUTE
ń	`&nacute;`	`ń`	`ń`	LATIN SMALL LETTER N WITH ACUTE
Ņ	`&Ncedil;`	`Ņ`	`Ņ`	LATIN CAPITAL LETTER N WITH CEDILLA
ņ	`&ncedil;`	`ņ`	`ņ`	LATIN SMALL LETTER N WITH CEDILLA
Ň	`&Ncaron;`	`Ň`	`Ň`	LATIN CAPITAL LETTER N WITH CARON
ň	`&ncaron;`	`ň`	`ň`	LATIN SMALL LETTER N WITH CARON
ŉ	`&napos;`	`ŉ`	`ŉ`	LATIN SMALL LETTER N PRECEDED BY APOSTROPHE
Ŋ	`&ENG;`	`Ŋ`	`Ŋ`	LATIN CAPITAL LETTER ENG
ŋ	`&eng;`	`ŋ`	`ŋ`	LATIN SMALL LETTER ENG
Ō	`&Omacr;`	`Ō`	`Ō`	LATIN CAPITAL LETTER O WITH MACRON
ō	`&omacr;`	`ō`	`ō`	LATIN SMALL LETTER O WITH MACRON
Ő	`&Odblac;`	`Ő`	`Ő`	LATIN CAPITAL LETTER O WITH DOUBLE ACUTE
ő	`&odblac;`	`ő`	`ő`	LATIN SMALL LETTER O WITH DOUBLE ACUTE
Œ	`&OElig;`	`Œ`	`Œ`	LATIN CAPITAL LIGATURE OE
œ	`&oelig;`	`œ`	`œ`	LATIN SMALL LIGATURE OE
Ŕ	`&Racute;`	`Ŕ`	`Ŕ`	LATIN CAPITAL LETTER R WITH ACUTE
ŕ	`&racute;`	`ŕ`	`ŕ`	LATIN SMALL LETTER R WITH ACUTE
Ŗ	`&Rcedil;`	`Ŗ`	`Ŗ`	LATIN CAPITAL LETTER R WITH CEDILLA
ŗ	`&rcedil;`	`ŗ`	`ŗ`	LATIN SMALL LETTER R WITH CEDILLA
Ř	`&Rcaron;`	`Ř`	`Ř`	LATIN CAPITAL LETTER R WITH CARON
ř	`&rcaron;`	`ř`	`ř`	LATIN SMALL LETTER R WITH CARON
Ś	`&Sacute;`	`Ś`	`Ś`	LATIN CAPITAL LETTER S WITH ACUTE
ś	`&sacute;`	`ś`	`ś`	LATIN SMALL LETTER S WITH ACUTE
Ŝ	`&Scirc;`	`Ŝ`	`Ŝ`	LATIN CAPITAL LETTER S WITH CIRCUMFLEX
ŝ	`&scirc;`	`ŝ`	`ŝ`	LATIN SMALL LETTER S WITH CIRCUMFLEX
Ş	`&Scedil;`	`Ş`	`Ş`	LATIN CAPITAL LETTER S WITH CEDILLA
ş	`&scedil;`	`ş`	`ş`	LATIN SMALL LETTER S WITH CEDILLA
Š	`&Scaron;`	`Š`	`Š`	LATIN CAPITAL LETTER S WITH CARON
š	`&scaron;`	`š`	`š`	LATIN SMALL LETTER S WITH CARON
Ţ	`&Tcedil;`	`Ţ`	`Ţ`	LATIN CAPITAL LETTER T WITH CEDILLA
ţ	`&tcedil;`	`ţ`	`ţ`	LATIN SMALL LETTER T WITH CEDILLA
Ť	`&Tcaron;`	`Ť`	`Ť`	LATIN CAPITAL LETTER T WITH CARON
ť	`&tcaron;`	`ť`	`ť`	LATIN SMALL LETTER T WITH CARON
Ŧ	`&Tstrok;`	`Ŧ`	`Ŧ`	LATIN CAPITAL LETTER T WITH STROKE
ŧ	`&tstrok;`	`ŧ`	`ŧ`	LATIN SMALL LETTER T WITH STROKE
Ũ	`&Utilde;`	`Ũ`	`Ũ`	LATIN CAPITAL LETTER U WITH TILDE
ũ	`&utilde;`	`ũ`	`ũ`	LATIN SMALL LETTER U WITH TILDE
Ū	`&Umacr;`	`Ū`	`Ū`	LATIN CAPITAL LETTER U WITH MACRON
ū	`&umacr;`	`ū`	`ū`	LATIN SMALL LETTER U WITH MACRON
Ŭ	`&Ubreve;`	`Ŭ`	`Ŭ`	LATIN CAPITAL LETTER U WITH BREVE
ŭ	`&ubreve;`	`ŭ`	`ŭ`	LATIN SMALL LETTER U WITH BREVE
Ů	`&Uring;`	`Ů`	`Ů`	LATIN CAPITAL LETTER U WITH RING ABOVE
ů	`&uring;`	`ů`	`ů`	LATIN SMALL LETTER U WITH RING ABOVE
Ű	`&Udblac;`	`Ű`	`Ű`	LATIN CAPITAL LETTER U WITH DOUBLE ACUTE
ű	`&udblac;`	`ű`	`ű`	LATIN SMALL LETTER U WITH DOUBLE ACUTE
Ų	`&Uogon;`	`Ų`	`Ų`	LATIN CAPITAL LETTER U WITH OGONEK
ų	`&uogon;`	`ų`	`ų`	LATIN SMALL LETTER U WITH OGONEK
Ŵ	`&Wcirc;`	`Ŵ`	`Ŵ`	LATIN CAPITAL LETTER W WITH CIRCUMFLEX
ŵ	`&wcirc;`	`ŵ`	`ŵ`	LATIN SMALL LETTER W WITH CIRCUMFLEX
Ŷ	`&Ycirc;`	`Ŷ`	`Ŷ`	LATIN CAPITAL LETTER Y WITH CIRCUMFLEX
ŷ	`&ycirc;`	`ŷ`	`ŷ`	LATIN SMALL LETTER Y WITH CIRCUMFLEX
Ÿ	`&Yuml;`	`Ÿ`	`Ÿ`	LATIN CAPITAL LETTER Y WITH DIAERESIS
Ź	`&Zacute;`	`Ź`	`Ź`	LATIN CAPITAL LETTER Z WITH ACUTE
ź	`&zacute;`	`ź`	`ź`	LATIN SMALL LETTER Z WITH ACUTE
Ż	`&Zdot;`	`Ż`	`Ż`	LATIN CAPITAL LETTER Z WITH DOT ABOVE
ż	`&zdot;`	`ż`	`ż`	LATIN SMALL LETTER Z WITH DOT ABOVE
Ž	`&Zcaron;`	`Ž`	`Ž`	LATIN CAPITAL LETTER Z WITH CARON
ž	`&zcaron;`	`ž`	`ž`	LATIN SMALL LETTER Z WITH CARON
ƒ	`&fnof;`	`ƒ`	`ƒ`	LATIN SMALL LETTER F WITH HOOK
Ƶ	`&imped;`	`Ƶ`	`Ƶ`	LATIN CAPITAL LETTER Z WITH STROKE
ǵ	`&gacute;`	`ǵ`	`ǵ`	LATIN SMALL LETTER G WITH ACUTE
ȷ	`&jmath;`	`ȷ`	`ȷ`	LATIN SMALL LETTER DOTLESS J
ˆ	`&circ;`	`ˆ`	`ˆ`	MODIFIER LETTER CIRCUMFLEX ACCENT
ˇ	`&caron; &Hacek;`	`ˇ`	`ˇ`	CARON
˘	`&breve; &Breve;`	`˘`	`˘`	BREVE
˙	`&dot; &DiacriticalDot;`	`˙`	`˙`	DOT ABOVE
˚	`&ring;`	`˚`	`˚`	RING ABOVE
˛	`&ogon;`	`˛`	`˛`	OGONEK
˜	`&tilde; &DiacriticalTilde;`	`˜`	`˜`	SMALL TILDE
˝	`&dblac; &DiacriticalDoubleAcute;`	`˝`	`˝`	DOUBLE ACUTE ACCENT
̑	`&DownBreve;`	`̑`	`̑`	COMBINING INVERTED BREVE
̲	`&UnderBar;`	`̲`	`̲`	COMBINING LOW LINE
Α	`Α`	`Α`	`Α`	GREEK CAPITAL LETTER ALPHA
Β	`Β`	`Β`	`Β`	GREEK CAPITAL LETTER BETA
Γ	`Γ`	`Γ`	`Γ`	GREEK CAPITAL LETTER GAMMA
Δ	`Δ`	`Δ`	`Δ`	GREEK CAPITAL LETTER DELTA
Ε	`Ε`	`Ε`	`Ε`	GREEK CAPITAL LETTER EPSILON
Ζ	`Ζ`	`Ζ`	`Ζ`	GREEK CAPITAL LETTER ZETA
Η	`Η`	`Η`	`Η`	GREEK CAPITAL LETTER ETA
Θ	`Θ`	`Θ`	`Θ`	GREEK CAPITAL LETTER THETA
Ι	`Ι`	`Ι`	`Ι`	GREEK CAPITAL LETTER IOTA
Κ	`Κ`	`Κ`	`Κ`	GREEK CAPITAL LETTER KAPPA
Λ	`Λ`	`Λ`	`Λ`	GREEK CAPITAL LETTER LAMDA
Μ	`Μ`	`Μ`	`Μ`	GREEK CAPITAL LETTER MU
Ν	`Ν`	`Ν`	`Ν`	GREEK CAPITAL LETTER NU
Ξ	`Ξ`	`Ξ`	`Ξ`	GREEK CAPITAL LETTER XI
Ο	`Ο`	`Ο`	`Ο`	GREEK CAPITAL LETTER OMICRON
Π	`Π`	`Π`	`Π`	GREEK CAPITAL LETTER PI
Ρ	`Ρ`	`Ρ`	`Ρ`	GREEK CAPITAL LETTER RHO
Σ	`Σ`	`Σ`	`Σ`	GREEK CAPITAL LETTER SIGMA
Τ	`Τ`	`Τ`	`Τ`	GREEK CAPITAL LETTER TAU
Υ	`Υ`	`Υ`	`Υ`	GREEK CAPITAL LETTER UPSILON
Φ	`Φ`	`Φ`	`Φ`	GREEK CAPITAL LETTER PHI
Χ	`Χ`	`Χ`	`Χ`	GREEK CAPITAL LETTER CHI
Ψ	`Ψ`	`Ψ`	`Ψ`	GREEK CAPITAL LETTER PSI
Ω	`Ω`	`Ω`	`Ω`	GREEK CAPITAL LETTER OMEGA
α	`α`	`α`	`α`	GREEK SMALL LETTER ALPHA
β	`β`	`β`	`β`	GREEK SMALL LETTER BETA
γ	`γ`	`γ`	`γ`	GREEK SMALL LETTER GAMMA
δ	`δ`	`δ`	`δ`	GREEK SMALL LETTER DELTA
ε	`ϵ ϵ ε`	`ε`	`ε`	GREEK SMALL LETTER EPSILON
ζ	`ζ`	`ζ`	`ζ`	GREEK SMALL LETTER ZETA
η	`η`	`η`	`η`	GREEK SMALL LETTER ETA
θ	`θ`	`θ`	`θ`	GREEK SMALL LETTER THETA
ι	`ι`	`ι`	`ι`	GREEK SMALL LETTER IOTA
κ	`κ`	`κ`	`κ`	GREEK SMALL LETTER KAPPA
λ	`λ`	`λ`	`λ`	GREEK SMALL LETTER LAMDA
μ	`μ`	`μ`	`μ`	GREEK SMALL LETTER MU
ν	`ν`	`ν`	`ν`	GREEK SMALL LETTER NU
ξ	`ξ`	`ξ`	`ξ`	GREEK SMALL LETTER XI
ο	`ο`	`ο`	`ο`	GREEK SMALL LETTER OMICRON
π	`π`	`π`	`π`	GREEK SMALL LETTER PI
ρ	`ρ`	`ρ`	`ρ`	GREEK SMALL LETTER RHO
ς	`ς ς &sigmaf;`	`ς`	`ς`	GREEK SMALL LETTER FINAL SIGMA
σ	`σ`	`σ`	`σ`	GREEK SMALL LETTER SIGMA
τ	`τ`	`τ`	`τ`	GREEK SMALL LETTER TAU
υ	`&upsi; υ`	`υ`	`υ`	GREEK SMALL LETTER UPSILON
φ	`φ ϕ ϕ`	`φ`	`φ`	GREEK SMALL LETTER PHI
χ	`χ`	`χ`	`χ`	GREEK SMALL LETTER CHI
ψ	`ψ`	`ψ`	`ψ`	GREEK SMALL LETTER PSI
ω	`ω`	`ω`	`ω`	GREEK SMALL LETTER OMEGA
ϑ	`ϑ ϑ &thetasym;`	`ϑ`	`ϑ`	GREEK THETA SYMBOL
ϒ	`&Upsi; &upsih;`	`ϒ`	`ϒ`	GREEK UPSILON WITH HOOK SYMBOL
ϕ	`&straightphi;`	`ϕ`	`ϕ`	GREEK PHI SYMBOL
ϖ	`ϖ ϖ`	`ϖ`	`ϖ`	GREEK PI SYMBOL
Ϝ	`&Gammad;`	`Ϝ`	`Ϝ`	GREEK LETTER DIGAMMA
ϝ	`&gammad; &digamma;`	`ϝ`	`ϝ`	GREEK SMALL LETTER DIGAMMA
ϰ	`ϰ ϰ`	`ϰ`	`ϰ`	GREEK KAPPA SYMBOL
ϱ	`ϱ ϱ`	`ϱ`	`ϱ`	GREEK RHO SYMBOL
ϵ	`&epsi; &straightepsilon;`	`ϵ`	`ϵ`	GREEK LUNATE EPSILON SYMBOL
϶	`&bepsi; &backepsilon;`	`϶`	`϶`	GREEK REVERSED LUNATE EPSILON SYMBOL
Ё	`&IOcy;`	`Ё`	`Ё`	CYRILLIC CAPITAL LETTER IO
Ђ	`&DJcy;`	`Ђ`	`Ђ`	CYRILLIC CAPITAL LETTER DJE
Ѓ	`&GJcy;`	`Ѓ`	`Ѓ`	CYRILLIC CAPITAL LETTER GJE
Є	`&Jukcy;`	`Є`	`Є`	CYRILLIC CAPITAL LETTER UKRAINIAN IE
Ѕ	`&DScy;`	`Ѕ`	`Ѕ`	CYRILLIC CAPITAL LETTER DZE
І	`&Iukcy;`	`І`	`І`	CYRILLIC CAPITAL LETTER BYELORUSSIAN-UKRAINIAN I
Ї	`&YIcy;`	`Ї`	`Ї`	CYRILLIC CAPITAL LETTER YI
Ј	`&Jsercy;`	`Ј`	`Ј`	CYRILLIC CAPITAL LETTER JE
Љ	`&LJcy;`	`Љ`	`Љ`	CYRILLIC CAPITAL LETTER LJE
Њ	`&NJcy;`	`Њ`	`Њ`	CYRILLIC CAPITAL LETTER NJE
Ћ	`&TSHcy;`	`Ћ`	`Ћ`	CYRILLIC CAPITAL LETTER TSHE
Ќ	`&KJcy;`	`Ќ`	`Ќ`	CYRILLIC CAPITAL LETTER KJE
Ў	`&Ubrcy;`	`Ў`	`Ў`	CYRILLIC CAPITAL LETTER SHORT U
Џ	`&DZcy;`	`Џ`	`Џ`	CYRILLIC CAPITAL LETTER DZHE
А	`&Acy;`	`А`	`А`	CYRILLIC CAPITAL LETTER A
Б	`&Bcy;`	`Б`	`Б`	CYRILLIC CAPITAL LETTER BE
В	`&Vcy;`	`В`	`В`	CYRILLIC CAPITAL LETTER VE
Г	`&Gcy;`	`Г`	`Г`	CYRILLIC CAPITAL LETTER GHE
Д	`&Dcy;`	`Д`	`Д`	CYRILLIC CAPITAL LETTER DE
Е	`&IEcy;`	`Е`	`Е`	CYRILLIC CAPITAL LETTER IE
Ж	`&ZHcy;`	`Ж`	`Ж`	CYRILLIC CAPITAL LETTER ZHE
З	`&Zcy;`	`З`	`З`	CYRILLIC CAPITAL LETTER ZE
И	`&Icy;`	`И`	`И`	CYRILLIC CAPITAL LETTER I
Й	`&Jcy;`	`Й`	`Й`	CYRILLIC CAPITAL LETTER SHORT I
К	`&Kcy;`	`К`	`К`	CYRILLIC CAPITAL LETTER KA
Л	`&Lcy;`	`Л`	`Л`	CYRILLIC CAPITAL LETTER EL
М	`&Mcy;`	`М`	`М`	CYRILLIC CAPITAL LETTER EM
Н	`&Ncy;`	`Н`	`Н`	CYRILLIC CAPITAL LETTER EN
О	`&Ocy;`	`О`	`О`	CYRILLIC CAPITAL LETTER O
П	`&Pcy;`	`П`	`П`	CYRILLIC CAPITAL LETTER PE
Р	`&Rcy;`	`Р`	`Р`	CYRILLIC CAPITAL LETTER ER
С	`&Scy;`	`С`	`С`	CYRILLIC CAPITAL LETTER ES
Т	`&Tcy;`	`Т`	`Т`	CYRILLIC CAPITAL LETTER TE
У	`&Ucy;`	`У`	`У`	CYRILLIC CAPITAL LETTER U
Ф	`&Fcy;`	`Ф`	`Ф`	CYRILLIC CAPITAL LETTER EF
Х	`&KHcy;`	`Х`	`Х`	CYRILLIC CAPITAL LETTER HA
Ц	`&TScy;`	`Ц`	`Ц`	CYRILLIC CAPITAL LETTER TSE
Ч	`&CHcy;`	`Ч`	`Ч`	CYRILLIC CAPITAL LETTER CHE
Ш	`&SHcy;`	`Ш`	`Ш`	CYRILLIC CAPITAL LETTER SHA
Щ	`&SHCHcy;`	`Щ`	`Щ`	CYRILLIC CAPITAL LETTER SHCHA
Ъ	`&HARDcy;`	`Ъ`	`Ъ`	CYRILLIC CAPITAL LETTER HARD SIGN
Ы	`&Ycy;`	`Ы`	`Ы`	CYRILLIC CAPITAL LETTER YERU
Ь	`&SOFTcy;`	`Ь`	`Ь`	CYRILLIC CAPITAL LETTER SOFT SIGN
Э	`&Ecy;`	`Э`	`Э`	CYRILLIC CAPITAL LETTER E
Ю	`&YUcy;`	`Ю`	`Ю`	CYRILLIC CAPITAL LETTER YU
Я	`&YAcy;`	`Я`	`Я`	CYRILLIC CAPITAL LETTER YA
а	`&acy;`	`а`	`а`	CYRILLIC SMALL LETTER A
б	`&bcy;`	`б`	`б`	CYRILLIC SMALL LETTER BE
в	`&vcy;`	`в`	`в`	CYRILLIC SMALL LETTER VE
г	`&gcy;`	`г`	`г`	CYRILLIC SMALL LETTER GHE
д	`&dcy;`	`д`	`д`	CYRILLIC SMALL LETTER DE
е	`&iecy;`	`е`	`е`	CYRILLIC SMALL LETTER IE
ж	`&zhcy;`	`ж`	`ж`	CYRILLIC SMALL LETTER ZHE
з	`&zcy;`	`з`	`з`	CYRILLIC SMALL LETTER ZE
и	`&icy;`	`и`	`и`	CYRILLIC SMALL LETTER I
й	`&jcy;`	`й`	`й`	CYRILLIC SMALL LETTER SHORT I
к	`&kcy;`	`к`	`к`	CYRILLIC SMALL LETTER KA
л	`&lcy;`	`л`	`л`	CYRILLIC SMALL LETTER EL
м	`&mcy;`	`м`	`м`	CYRILLIC SMALL LETTER EM
н	`&ncy;`	`н`	`н`	CYRILLIC SMALL LETTER EN
о	`&ocy;`	`о`	`о`	CYRILLIC SMALL LETTER O
п	`&pcy;`	`п`	`п`	CYRILLIC SMALL LETTER PE
р	`&rcy;`	`р`	`р`	CYRILLIC SMALL LETTER ER
с	`&scy;`	`с`	`с`	CYRILLIC SMALL LETTER ES
т	`&tcy;`	`т`	`т`	CYRILLIC SMALL LETTER TE
у	`&ucy;`	`у`	`у`	CYRILLIC SMALL LETTER U
ф	`&fcy;`	`ф`	`ф`	CYRILLIC SMALL LETTER EF
х	`&khcy;`	`х`	`х`	CYRILLIC SMALL LETTER HA
ц	`&tscy;`	`ц`	`ц`	CYRILLIC SMALL LETTER TSE
ч	`&chcy;`	`ч`	`ч`	CYRILLIC SMALL LETTER CHE
ш	`&shcy;`	`ш`	`ш`	CYRILLIC SMALL LETTER SHA
щ	`&shchcy;`	`щ`	`щ`	CYRILLIC SMALL LETTER SHCHA
ъ	`&hardcy;`	`ъ`	`ъ`	CYRILLIC SMALL LETTER HARD SIGN
ы	`&ycy;`	`ы`	`ы`	CYRILLIC SMALL LETTER YERU
ь	`&softcy;`	`ь`	`ь`	CYRILLIC SMALL LETTER SOFT SIGN
э	`&ecy;`	`э`	`э`	CYRILLIC SMALL LETTER E
ю	`&yucy;`	`ю`	`ю`	CYRILLIC SMALL LETTER YU
я	`&yacy;`	`я`	`я`	CYRILLIC SMALL LETTER YA
ё	`&iocy;`	`ё`	`ё`	CYRILLIC SMALL LETTER IO
ђ	`&djcy;`	`ђ`	`ђ`	CYRILLIC SMALL LETTER DJE
ѓ	`&gjcy;`	`ѓ`	`ѓ`	CYRILLIC SMALL LETTER GJE
є	`&jukcy;`	`є`	`є`	CYRILLIC SMALL LETTER UKRAINIAN IE
ѕ	`&dscy;`	`ѕ`	`ѕ`	CYRILLIC SMALL LETTER DZE
і	`&iukcy;`	`і`	`і`	CYRILLIC SMALL LETTER BYELORUSSIAN-UKRAINIAN I
ї	`&yicy;`	`ї`	`ї`	CYRILLIC SMALL LETTER YI
ј	`&jsercy;`	`ј`	`ј`	CYRILLIC SMALL LETTER JE
љ	`&ljcy;`	`љ`	`љ`	CYRILLIC SMALL LETTER LJE
њ	`&njcy;`	`њ`	`њ`	CYRILLIC SMALL LETTER NJE
ћ	`&tshcy;`	`ћ`	`ћ`	CYRILLIC SMALL LETTER TSHE
ќ	`&kjcy;`	`ќ`	`ќ`	CYRILLIC SMALL LETTER KJE
ў	`&ubrcy;`	`ў`	`ў`	CYRILLIC SMALL LETTER SHORT U
џ	`&dzcy;`	`џ`	`џ`	CYRILLIC SMALL LETTER DZHE
	`&ensp;`	` `	` `	EN SPACE
	`&emsp;`	` `	` `	EM SPACE
	`&emsp13;`	` `	` `	THREE-PER-EM SPACE
	`&emsp14;`	` `	` `	FOUR-PER-EM SPACE
	`&numsp;`	` `	` `	FIGURE SPACE
	`&puncsp;`	` `	` `	PUNCTUATION SPACE
	`   `	` `	` `	THIN SPACE
	`&hairsp; &VeryThinSpace;`	` `	` `	HAIR SPACE
	`&ZeroWidthSpace; &NegativeVeryThinSpace; &NegativeThinSpace; &NegativeMediumSpace; &NegativeThickSpace;`	``	``	ZERO WIDTH SPACE
‌	`&zwnj;`	`‌`	`‌`	ZERO WIDTH NON-JOINER
‍	`&zwj;`	`‍`	`‍`	ZERO WIDTH JOINER
‎	`&lrm;`	`‎`	`‎`	LEFT-TO-RIGHT MARK
‏	`&rlm;`	`‏`	`‏`	RIGHT-TO-LEFT MARK
‐	`&hyphen; &dash;`	`‐`	`‐`	HYPHEN
–	`–`	`–`	`–`	EN DASH
—	`—`	`—`	`—`	EM DASH
―	`&horbar;`	`―`	`―`	HORIZONTAL BAR
‖	`&Verbar; &Vert;`	`‖`	`‖`	DOUBLE VERTICAL LINE
‘	`‘ &OpenCurlyQuote;`	`‘`	`‘`	LEFT SINGLE QUOTATION MARK
’	`’ &rsquor; &CloseCurlyQuote;`	`’`	`’`	RIGHT SINGLE QUOTATION MARK
‚	`&lsquor; &sbquo;`	`‚`	`‚`	SINGLE LOW-9 QUOTATION MARK
“	`“ &OpenCurlyDoubleQuote;`	`“`	`“`	LEFT DOUBLE QUOTATION MARK
”	`” &rdquor; &CloseCurlyDoubleQuote;`	`”`	`”`	RIGHT DOUBLE QUOTATION MARK
„	`&ldquor; &bdquo;`	`„`	`„`	DOUBLE LOW-9 QUOTATION MARK
†	`&dagger;`	`†`	`†`	DAGGER
‡	`&Dagger; &ddagger;`	`‡`	`‡`	DOUBLE DAGGER
•	`• &bullet;`	`•`	`•`	BULLET
‥	`&nldr;`	`‥`	`‥`	TWO DOT LEADER
…	`… &mldr;`	`…`	`…`	HORIZONTAL ELLIPSIS
‰	`&permil;`	`‰`	`‰`	PER MILLE SIGN
‱	`&pertenk;`	`‱`	`‱`	PER TEN THOUSAND SIGN
′	`′`	`′`	`′`	PRIME
″	`″`	`″`	`″`	DOUBLE PRIME
‴	`‴`	`‴`	`‴`	TRIPLE PRIME
‵	`&bprime; &backprime;`	`‵`	`‵`	REVERSED PRIME
‹	`&lsaquo;`	`‹`	`‹`	SINGLE LEFT-POINTING ANGLE QUOTATION MARK
›	`&rsaquo;`	`›`	`›`	SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
‾	`&oline;`	`‾`	`‾`	OVERLINE
⁁	`&caret;`	`⁁`	`⁁`	CARET INSERTION POINT
⁃	`&hybull;`	`⁃`	`⁃`	HYPHEN BULLET
⁄	`&frasl;`	`⁄`	`⁄`	FRACTION SLASH
⁏	`&bsemi;`	`⁏`	`⁏`	REVERSED SEMICOLON
⁗	`&qprime;`	`⁗`	`⁗`	QUADRUPLE PRIME
	` `	` `	` `	MEDIUM MATHEMATICAL SPACE
	`&NoBreak;`	`⁠`	`⁠`	WORD JOINER
	`⁡ ⁡`	`⁡`	`⁡`	FUNCTION APPLICATION
	`⁢ ⁢`	`⁢`	`⁢`	INVISIBLE TIMES
	`⁣ ⁣`	`⁣`	`⁣`	INVISIBLE SEPARATOR
€	`€`	`€`	`€`	EURO SIGN
⃛	`&tdot; &TripleDot;`	`⃛`	`⃛`	COMBINING THREE DOTS ABOVE
⃜	`&DotDot;`	`⃜`	`⃜`	COMBINING FOUR DOTS ABOVE
ℂ	`&Copf; &complexes;`	`ℂ`	`ℂ`	DOUBLE-STRUCK CAPITAL C
℅	`&incare;`	`℅`	`℅`	CARE OF
ℊ	`&gscr;`	`ℊ`	`ℊ`	SCRIPT SMALL G
ℋ	`&hamilt; &HilbertSpace; &Hscr;`	`ℋ`	`ℋ`	SCRIPT CAPITAL H
ℌ	`&Hfr; &Poincareplane;`	`ℌ`	`ℌ`	BLACK-LETTER CAPITAL H
ℍ	`&quaternions; &Hopf;`	`ℍ`	`ℍ`	DOUBLE-STRUCK CAPITAL H
ℎ	`&planckh;`	`ℎ`	`ℎ`	PLANCK CONSTANT
ℏ	`&planck; &hbar; &plankv; &hslash;`	`ℏ`	`ℏ`	PLANCK CONSTANT OVER TWO PI
ℐ	`&Iscr; &imagline;`	`ℐ`	`ℐ`	SCRIPT CAPITAL I
ℑ	`&image; &Im; &imagpart; &Ifr;`	`ℑ`	`ℑ`	BLACK-LETTER CAPITAL I
ℒ	`&Lscr; &lagran; &Laplacetrf;`	`ℒ`	`ℒ`	SCRIPT CAPITAL L
ℓ	`&ell;`	`ℓ`	`ℓ`	SCRIPT SMALL L
ℕ	`&Nopf; &naturals;`	`ℕ`	`ℕ`	DOUBLE-STRUCK CAPITAL N
№	`&numero;`	`№`	`№`	NUMERO SIGN
℗	`&copysr;`	`℗`	`℗`	SOUND RECORDING COPYRIGHT
℘	`&weierp; &wp;`	`℘`	`℘`	SCRIPT CAPITAL P
ℙ	`&Popf; &primes;`	`ℙ`	`ℙ`	DOUBLE-STRUCK CAPITAL P
ℚ	`&rationals; &Qopf;`	`ℚ`	`ℚ`	DOUBLE-STRUCK CAPITAL Q
ℛ	`&Rscr; &realine;`	`ℛ`	`ℛ`	SCRIPT CAPITAL R
ℜ	`&real; &Re; &realpart; &Rfr;`	`ℜ`	`ℜ`	BLACK-LETTER CAPITAL R
ℝ	`&reals; &Ropf;`	`ℝ`	`ℝ`	DOUBLE-STRUCK CAPITAL R
℞	`&rx;`	`℞`	`℞`	PRESCRIPTION TAKE
™	`™ &TRADE;`	`™`	`™`	TRADE MARK SIGN
ℤ	`&integers; &Zopf;`	`ℤ`	`ℤ`	DOUBLE-STRUCK CAPITAL Z
Ω	`&ohm;`	`Ω`	`Ω`	OHM SIGN
℧	`&mho;`	`℧`	`℧`	INVERTED OHM SIGN
ℨ	`&Zfr; &zeetrf;`	`ℨ`	`ℨ`	BLACK-LETTER CAPITAL Z
℩	`&iiota;`	`℩`	`℩`	TURNED GREEK SMALL LETTER IOTA
Å	`&angst;`	`Å`	`Å`	ANGSTROM SIGN
ℬ	`&bernou; &Bernoullis; &Bscr;`	`ℬ`	`ℬ`	SCRIPT CAPITAL B
ℭ	`&Cfr; &Cayleys;`	`ℭ`	`ℭ`	BLACK-LETTER CAPITAL C
ℯ	`&escr;`	`ℯ`	`ℯ`	SCRIPT SMALL E
ℰ	`&Escr; &expectation;`	`ℰ`	`ℰ`	SCRIPT CAPITAL E
ℱ	`&Fscr; &Fouriertrf;`	`ℱ`	`ℱ`	SCRIPT CAPITAL F
ℳ	`&phmmat; &Mellintrf; &Mscr;`	`ℳ`	`ℳ`	SCRIPT CAPITAL M
ℴ	`&order; &orderof; &oscr;`	`ℴ`	`ℴ`	SCRIPT SMALL O
ℵ	`&alefsym; &aleph;`	`ℵ`	`ℵ`	ALEF SYMBOL
ℶ	`&beth;`	`ℶ`	`ℶ`	BET SYMBOL
ℷ	`&gimel;`	`ℷ`	`ℷ`	GIMEL SYMBOL
ℸ	`&daleth;`	`ℸ`	`ℸ`	DALET SYMBOL
ⅅ	`&CapitalDifferentialD; &DD;`	`ⅅ`	`ⅅ`	DOUBLE-STRUCK ITALIC CAPITAL D
ⅆ	`&DifferentialD; &dd;`	`ⅆ`	`ⅆ`	DOUBLE-STRUCK ITALIC SMALL D
ⅇ	`&ExponentialE; &exponentiale; &ee;`	`ⅇ`	`ⅇ`	DOUBLE-STRUCK ITALIC SMALL E
ⅈ	`&ImaginaryI; &ii;`	`ⅈ`	`ⅈ`	DOUBLE-STRUCK ITALIC SMALL I
⅓	`&frac13;`	`⅓`	`⅓`	VULGAR FRACTION ONE THIRD
⅔	`&frac23;`	`⅔`	`⅔`	VULGAR FRACTION TWO THIRDS
⅕	`&frac15;`	`⅕`	`⅕`	VULGAR FRACTION ONE FIFTH
⅖	`&frac25;`	`⅖`	`⅖`	VULGAR FRACTION TWO FIFTHS
⅗	`&frac35;`	`⅗`	`⅗`	VULGAR FRACTION THREE FIFTHS
⅘	`&frac45;`	`⅘`	`⅘`	VULGAR FRACTION FOUR FIFTHS
⅙	`&frac16;`	`⅙`	`⅙`	VULGAR FRACTION ONE SIXTH
⅚	`&frac56;`	`⅚`	`⅚`	VULGAR FRACTION FIVE SIXTHS
⅛	`&frac18;`	`⅛`	`⅛`	VULGAR FRACTION ONE EIGHTH
⅜	`&frac38;`	`⅜`	`⅜`	VULGAR FRACTION THREE EIGHTHS
⅝	`&frac58;`	`⅝`	`⅝`	VULGAR FRACTION FIVE EIGHTHS
⅞	`&frac78;`	`⅞`	`⅞`	VULGAR FRACTION SEVEN EIGHTHS
←	`← &leftarrow; &LeftArrow; &slarr; &ShortLeftArrow;`	`←`	`←`	LEFTWARDS ARROW
↑	`↑ &uparrow; &UpArrow; &ShortUpArrow;`	`↑`	`↑`	UPWARDS ARROW
→	`→ &rightarrow; &RightArrow; &srarr; &ShortRightArrow;`	`→`	`→`	RIGHTWARDS ARROW
↓	`↓ &downarrow; &DownArrow; &ShortDownArrow;`	`↓`	`↓`	DOWNWARDS ARROW
↔	`↔ &leftrightarrow; &LeftRightArrow;`	`↔`	`↔`	LEFT RIGHT ARROW
↕	`&varr; &updownarrow; &UpDownArrow;`	`↕`	`↕`	UP DOWN ARROW
↖	`&nwarr; &UpperLeftArrow; &nwarrow;`	`↖`	`↖`	NORTH WEST ARROW
↗	`&nearr; &UpperRightArrow; &nearrow;`	`↗`	`↗`	NORTH EAST ARROW
↘	`&searr; &searrow; &LowerRightArrow;`	`↘`	`↘`	SOUTH EAST ARROW
↙	`&swarr; &swarrow; &LowerLeftArrow;`	`↙`	`↙`	SOUTH WEST ARROW
↚	`&nlarr; &nleftarrow;`	`↚`	`↚`	LEFTWARDS ARROW WITH STROKE
↛	`&nrarr; &nrightarrow;`	`↛`	`↛`	RIGHTWARDS ARROW WITH STROKE
↝	`&rarrw; &rightsquigarrow;`	`↝`	`↝`	RIGHTWARDS WAVE ARROW
↞	`&Larr; &twoheadleftarrow;`	`↞`	`↞`	LEFTWARDS TWO HEADED ARROW
↟	`&Uarr;`	`↟`	`↟`	UPWARDS TWO HEADED ARROW
↠	`&Rarr; &twoheadrightarrow;`	`↠`	`↠`	RIGHTWARDS TWO HEADED ARROW
↡	`&Darr;`	`↡`	`↡`	DOWNWARDS TWO HEADED ARROW
↢	`&larrtl; &leftarrowtail;`	`↢`	`↢`	LEFTWARDS ARROW WITH TAIL
↣	`&rarrtl; &rightarrowtail;`	`↣`	`↣`	RIGHTWARDS ARROW WITH TAIL
↤	`&LeftTeeArrow; &mapstoleft;`	`↤`	`↤`	LEFTWARDS ARROW FROM BAR
↥	`&UpTeeArrow; &mapstoup;`	`↥`	`↥`	UPWARDS ARROW FROM BAR
↦	`&map; &RightTeeArrow; &mapsto;`	`↦`	`↦`	RIGHTWARDS ARROW FROM BAR
↧	`&DownTeeArrow; &mapstodown;`	`↧`	`↧`	DOWNWARDS ARROW FROM BAR
↩	`&larrhk; &hookleftarrow;`	`↩`	`↩`	LEFTWARDS ARROW WITH HOOK
↪	`&rarrhk; &hookrightarrow;`	`↪`	`↪`	RIGHTWARDS ARROW WITH HOOK
↫	`&larrlp; &looparrowleft;`	`↫`	`↫`	LEFTWARDS ARROW WITH LOOP
↬	`&rarrlp; &looparrowright;`	`↬`	`↬`	RIGHTWARDS ARROW WITH LOOP
↭	`&harrw; &leftrightsquigarrow;`	`↭`	`↭`	LEFT RIGHT WAVE ARROW
↮	`&nharr; &nleftrightarrow;`	`↮`	`↮`	LEFT RIGHT ARROW WITH STROKE
↰	`&lsh; &Lsh;`	`↰`	`↰`	UPWARDS ARROW WITH TIP LEFTWARDS
↱	`&rsh; &Rsh;`	`↱`	`↱`	UPWARDS ARROW WITH TIP RIGHTWARDS
↲	`&ldsh;`	`↲`	`↲`	DOWNWARDS ARROW WITH TIP LEFTWARDS
↳	`&rdsh;`	`↳`	`↳`	DOWNWARDS ARROW WITH TIP RIGHTWARDS
↵	`&crarr;`	`↵`	`↵`	DOWNWARDS ARROW WITH CORNER LEFTWARDS
↶	`&cularr; &curvearrowleft;`	`↶`	`↶`	ANTICLOCKWISE TOP SEMICIRCLE ARROW
↷	`&curarr; &curvearrowright;`	`↷`	`↷`	CLOCKWISE TOP SEMICIRCLE ARROW
↺	`&olarr; &circlearrowleft;`	`↺`	`↺`	ANTICLOCKWISE OPEN CIRCLE ARROW
↻	`&orarr; &circlearrowright;`	`↻`	`↻`	CLOCKWISE OPEN CIRCLE ARROW
↼	`&lharu; &LeftVector; &leftharpoonup;`	`↼`	`↼`	LEFTWARDS HARPOON WITH BARB UPWARDS
↽	`&lhard; &leftharpoondown; &DownLeftVector;`	`↽`	`↽`	LEFTWARDS HARPOON WITH BARB DOWNWARDS
↾	`&uharr; &upharpoonright; &RightUpVector;`	`↾`	`↾`	UPWARDS HARPOON WITH BARB RIGHTWARDS
↿	`&uharl; &upharpoonleft; &LeftUpVector;`	`↿`	`↿`	UPWARDS HARPOON WITH BARB LEFTWARDS
⇀	`&rharu; &RightVector; &rightharpoonup;`	`⇀`	`⇀`	RIGHTWARDS HARPOON WITH BARB UPWARDS
⇁	`&rhard; &rightharpoondown; &DownRightVector;`	`⇁`	`⇁`	RIGHTWARDS HARPOON WITH BARB DOWNWARDS
⇂	`&dharr; &RightDownVector; &downharpoonright;`	`⇂`	`⇂`	DOWNWARDS HARPOON WITH BARB RIGHTWARDS
⇃	`&dharl; &LeftDownVector; &downharpoonleft;`	`⇃`	`⇃`	DOWNWARDS HARPOON WITH BARB LEFTWARDS
⇄	`&rlarr; &rightleftarrows; &RightArrowLeftArrow;`	`⇄`	`⇄`	RIGHTWARDS ARROW OVER LEFTWARDS ARROW
⇅	`&udarr; &UpArrowDownArrow;`	`⇅`	`⇅`	UPWARDS ARROW LEFTWARDS OF DOWNWARDS ARROW
⇆	`&lrarr; &leftrightarrows; &LeftArrowRightArrow;`	`⇆`	`⇆`	LEFTWARDS ARROW OVER RIGHTWARDS ARROW
⇇	`&llarr; &leftleftarrows;`	`⇇`	`⇇`	LEFTWARDS PAIRED ARROWS
⇈	`&uuarr; &upuparrows;`	`⇈`	`⇈`	UPWARDS PAIRED ARROWS
⇉	`&rrarr; &rightrightarrows;`	`⇉`	`⇉`	RIGHTWARDS PAIRED ARROWS
⇊	`&ddarr; &downdownarrows;`	`⇊`	`⇊`	DOWNWARDS PAIRED ARROWS
⇋	`&lrhar; &ReverseEquilibrium; &leftrightharpoons;`	`⇋`	`⇋`	LEFTWARDS HARPOON OVER RIGHTWARDS HARPOON
⇌	`&rlhar; &rightleftharpoons; &Equilibrium;`	`⇌`	`⇌`	RIGHTWARDS HARPOON OVER LEFTWARDS HARPOON
⇍	`&nlArr; &nLeftarrow;`	`⇍`	`⇍`	LEFTWARDS DOUBLE ARROW WITH STROKE
⇎	`&nhArr; &nLeftrightarrow;`	`⇎`	`⇎`	LEFT RIGHT DOUBLE ARROW WITH STROKE
⇏	`&nrArr; &nRightarrow;`	`⇏`	`⇏`	RIGHTWARDS DOUBLE ARROW WITH STROKE
⇐	`⇐ &Leftarrow; &DoubleLeftArrow;`	`⇐`	`⇐`	LEFTWARDS DOUBLE ARROW
⇑	`&uArr; &Uparrow; &DoubleUpArrow;`	`⇑`	`⇑`	UPWARDS DOUBLE ARROW
⇒	`⇒ &Rightarrow; &Implies; &DoubleRightArrow;`	`⇒`	`⇒`	RIGHTWARDS DOUBLE ARROW
⇓	`&dArr; &Downarrow; &DoubleDownArrow;`	`⇓`	`⇓`	DOWNWARDS DOUBLE ARROW
⇔	`⇔ &Leftrightarrow; &DoubleLeftRightArrow; &iff;`	`⇔`	`⇔`	LEFT RIGHT DOUBLE ARROW
⇕	`&vArr; &Updownarrow; &DoubleUpDownArrow;`	`⇕`	`⇕`	UP DOWN DOUBLE ARROW
⇖	`&nwArr;`	`⇖`	`⇖`	NORTH WEST DOUBLE ARROW
⇗	`&neArr;`	`⇗`	`⇗`	NORTH EAST DOUBLE ARROW
⇘	`&seArr;`	`⇘`	`⇘`	SOUTH EAST DOUBLE ARROW
⇙	`&swArr;`	`⇙`	`⇙`	SOUTH WEST DOUBLE ARROW
⇚	`&lAarr; &Lleftarrow;`	`⇚`	`⇚`	LEFTWARDS TRIPLE ARROW
⇛	`&rAarr; &Rrightarrow;`	`⇛`	`⇛`	RIGHTWARDS TRIPLE ARROW
⇝	`&zigrarr;`	`⇝`	`⇝`	RIGHTWARDS SQUIGGLE ARROW
⇤	`&larrb; &LeftArrowBar;`	`⇤`	`⇤`	LEFTWARDS ARROW TO BAR
⇥	`&rarrb; &RightArrowBar;`	`⇥`	`⇥`	RIGHTWARDS ARROW TO BAR
⇵	`&duarr; &DownArrowUpArrow;`	`⇵`	`⇵`	DOWNWARDS ARROW LEFTWARDS OF UPWARDS ARROW
⇽	`&loarr;`	`⇽`	`⇽`	LEFTWARDS OPEN-HEADED ARROW
⇾	`&roarr;`	`⇾`	`⇾`	RIGHTWARDS OPEN-HEADED ARROW
⇿	`&hoarr;`	`⇿`	`⇿`	LEFT RIGHT OPEN-HEADED ARROW
∀	`∀ &ForAll;`	`∀`	`∀`	FOR ALL
∁	`&comp; &complement;`	`∁`	`∁`	COMPLEMENT
∂	`∂ &PartialD;`	`∂`	`∂`	PARTIAL DIFFERENTIAL
∃	`∃ &Exists;`	`∃`	`∃`	THERE EXISTS
∄	`&nexist; &NotExists; &nexists;`	`∄`	`∄`	THERE DOES NOT EXIST
∅	`∅ &emptyset; &emptyv; &varnothing;`	`∅`	`∅`	EMPTY SET
∇	`∇ &Del;`	`∇`	`∇`	NABLA
∈	`∈ &isinv; &Element; &in;`	`∈`	`∈`	ELEMENT OF
∉	`∉ &NotElement; &notinva;`	`∉`	`∉`	NOT AN ELEMENT OF
∋	`&niv; &ReverseElement; &ni; &SuchThat;`	`∋`	`∋`	CONTAINS AS MEMBER
∌	`&notni; &notniva; &NotReverseElement;`	`∌`	`∌`	DOES NOT CONTAIN AS MEMBER
∏	`∏ &Product;`	`∏`	`∏`	N-ARY PRODUCT
∐	`&coprod; &Coproduct;`	`∐`	`∐`	N-ARY COPRODUCT
∑	`∑ &Sum;`	`∑`	`∑`	N-ARY SUMMATION
−	`−`	`−`	`−`	MINUS SIGN
∓	`&mnplus; &mp; &MinusPlus;`	`∓`	`∓`	MINUS-OR-PLUS SIGN
∔	`&plusdo; &dotplus;`	`∔`	`∔`	DOT PLUS
∖	`&setmn; &setminus; &Backslash; &ssetmn; &smallsetminus;`	`∖`	`∖`	SET MINUS
∗	`&lowast;`	`∗`	`∗`	ASTERISK OPERATOR
∘	`&compfn; &SmallCircle;`	`∘`	`∘`	RING OPERATOR
√	`√ &Sqrt;`	`√`	`√`	SQUARE ROOT
∝	`&prop; &propto; &Proportional; &vprop; &varpropto;`	`∝`	`∝`	PROPORTIONAL TO
∞	`∞`	`∞`	`∞`	INFINITY
∟	`&angrt;`	`∟`	`∟`	RIGHT ANGLE
∠	`&ang; &angle;`	`∠`	`∠`	ANGLE
∡	`&angmsd; &measuredangle;`	`∡`	`∡`	MEASURED ANGLE
∢	`&angsph;`	`∢`	`∢`	SPHERICAL ANGLE
∣	`&mid; &VerticalBar; &smid; &shortmid;`	`∣`	`∣`	DIVIDES
∤	`&nmid; &NotVerticalBar; &nsmid; &nshortmid;`	`∤`	`∤`	DOES NOT DIVIDE
∥	`&par; &parallel; &DoubleVerticalBar; &spar; &shortparallel;`	`∥`	`∥`	PARALLEL TO
∦	`&npar; &nparallel; &NotDoubleVerticalBar; &nspar; &nshortparallel;`	`∦`	`∦`	NOT PARALLEL TO
∧	`&and; &wedge;`	`∧`	`∧`	LOGICAL AND
∨	`&or; &vee;`	`∨`	`∨`	LOGICAL OR
∩	`∩`	`∩`	`∩`	INTERSECTION
∪	`∪`	`∪`	`∪`	UNION
∫	`∫ &Integral;`	`∫`	`∫`	INTEGRAL
∬	`&Int;`	`∬`	`∬`	DOUBLE INTEGRAL
∭	`&tint; &iiint;`	`∭`	`∭`	TRIPLE INTEGRAL
∮	`&conint; &oint; &ContourIntegral;`	`∮`	`∮`	CONTOUR INTEGRAL
∯	`&Conint; &DoubleContourIntegral;`	`∯`	`∯`	SURFACE INTEGRAL
∰	`&Cconint;`	`∰`	`∰`	VOLUME INTEGRAL
∱	`&cwint;`	`∱`	`∱`	CLOCKWISE INTEGRAL
∲	`&cwconint; &ClockwiseContourIntegral;`	`∲`	`∲`	CLOCKWISE CONTOUR INTEGRAL
∳	`&awconint; &CounterClockwiseContourIntegral;`	`∳`	`∳`	ANTICLOCKWISE CONTOUR INTEGRAL
∴	`&there4; &therefore; &Therefore;`	`∴`	`∴`	THEREFORE
∵	`&becaus; &because; &Because;`	`∵`	`∵`	BECAUSE
∶	`&ratio;`	`∶`	`∶`	RATIO
∷	`&Colon; &Proportion;`	`∷`	`∷`	PROPORTION
∸	`&minusd; &dotminus;`	`∸`	`∸`	DOT MINUS
∺	`&mDDot;`	`∺`	`∺`	GEOMETRIC PROPORTION
∻	`&homtht;`	`∻`	`∻`	HOMOTHETIC
∼	`&sim; &Tilde; &thksim; &thicksim;`	`∼`	`∼`	TILDE OPERATOR
∽	`&bsim; &backsim;`	`∽`	`∽`	REVERSED TILDE
∾	`&ac; &mstpos;`	`∾`	`∾`	INVERTED LAZY S
∿	`&acd;`	`∿`	`∿`	SINE WAVE
≀	`&wreath; &VerticalTilde; &wr;`	`≀`	`≀`	WREATH PRODUCT
≁	`&nsim; &NotTilde;`	`≁`	`≁`	NOT TILDE
≂	`&esim; &EqualTilde; &eqsim;`	`≂`	`≂`	MINUS TILDE
≃	`&sime; &TildeEqual; &simeq;`	`≃`	`≃`	ASYMPTOTICALLY EQUAL TO
≄	`&nsime; &nsimeq; &NotTildeEqual;`	`≄`	`≄`	NOT ASYMPTOTICALLY EQUAL TO
≅	`&cong; &TildeFullEqual;`	`≅`	`≅`	APPROXIMATELY EQUAL TO
≆	`&simne;`	`≆`	`≆`	APPROXIMATELY BUT NOT ACTUALLY EQUAL TO
≇	`&ncong; &NotTildeFullEqual;`	`≇`	`≇`	NEITHER APPROXIMATELY NOR ACTUALLY EQUAL TO
≈	`≈ ≈ &TildeTilde; ≈ &thkap; &thickapprox;`	`≈`	`≈`	ALMOST EQUAL TO
≉	`&nap; &NotTildeTilde; &napprox;`	`≉`	`≉`	NOT ALMOST EQUAL TO
≊	`&ape; &approxeq;`	`≊`	`≊`	ALMOST EQUAL OR EQUAL TO
≋	`&apid;`	`≋`	`≋`	TRIPLE TILDE
≌	`&bcong; &backcong;`	`≌`	`≌`	ALL EQUAL TO
≍	`&asympeq; &CupCap;`	`≍`	`≍`	EQUIVALENT TO
≎	`&bump; &HumpDownHump; &Bumpeq;`	`≎`	`≎`	GEOMETRICALLY EQUIVALENT TO
≏	`&bumpe; &HumpEqual; &bumpeq;`	`≏`	`≏`	DIFFERENCE BETWEEN
≐	`&esdot; &DotEqual; &doteq;`	`≐`	`≐`	APPROACHES THE LIMIT
≑	`&eDot; &doteqdot;`	`≑`	`≑`	GEOMETRICALLY EQUAL TO
≒	`&efDot; &fallingdotseq;`	`≒`	`≒`	APPROXIMATELY EQUAL TO OR THE IMAGE OF
≓	`&erDot; &risingdotseq;`	`≓`	`≓`	IMAGE OF OR APPROXIMATELY EQUAL TO
≔	`&colone; &coloneq; &Assign;`	`≔`	`≔`	COLON EQUALS
≕	`&ecolon; &eqcolon;`	`≕`	`≕`	EQUALS COLON
≖	`&ecir; &eqcirc;`	`≖`	`≖`	RING IN EQUAL TO
≗	`&cire; &circeq;`	`≗`	`≗`	RING EQUAL TO
≙	`&wedgeq;`	`≙`	`≙`	ESTIMATES
≚	`&veeeq;`	`≚`	`≚`	EQUIANGULAR TO
≜	`&trie; &triangleq;`	`≜`	`≜`	DELTA EQUAL TO
≟	`&equest; &questeq;`	`≟`	`≟`	QUESTIONED EQUAL TO
≠	`≠ &NotEqual;`	`≠`	`≠`	NOT EQUAL TO
≡	`&equiv; &Congruent;`	`≡`	`≡`	IDENTICAL TO
≢	`&nequiv; &NotCongruent;`	`≢`	`≢`	NOT IDENTICAL TO
≤	`≤ &leq;`	`≤`	`≤`	LESS-THAN OR EQUAL TO
≥	`≥ &GreaterEqual; &geq;`	`≥`	`≥`	GREATER-THAN OR EQUAL TO
≦	`&lE; &LessFullEqual; &leqq;`	`≦`	`≦`	LESS-THAN OVER EQUAL TO
≧	`&gE; &GreaterFullEqual; &geqq;`	`≧`	`≧`	GREATER-THAN OVER EQUAL TO
≨	`&lnE; &lneqq;`	`≨`	`≨`	LESS-THAN BUT NOT EQUAL TO
≩	`&gnE; &gneqq;`	`≩`	`≩`	GREATER-THAN BUT NOT EQUAL TO
≪	`&Lt; &NestedLessLess; &ll;`	`≪`	`≪`	MUCH LESS-THAN
≫	`&Gt; &NestedGreaterGreater; &gg;`	`≫`	`≫`	MUCH GREATER-THAN
≬	`&twixt; &between;`	`≬`	`≬`	BETWEEN
≭	`&NotCupCap;`	`≭`	`≭`	NOT EQUIVALENT TO
≮	`&nlt; &NotLess; &nless;`	`≮`	`≮`	NOT LESS-THAN
≯	`&ngt; &NotGreater; &ngtr;`	`≯`	`≯`	NOT GREATER-THAN
≰	`&nle; &NotLessEqual; &nleq;`	`≰`	`≰`	NEITHER LESS-THAN NOR EQUAL TO
≱	`&nge; &NotGreaterEqual; &ngeq;`	`≱`	`≱`	NEITHER GREATER-THAN NOR EQUAL TO
≲	`&lsim; &LessTilde; &lesssim;`	`≲`	`≲`	LESS-THAN OR EQUIVALENT TO
≳	`&gsim; &gtrsim; &GreaterTilde;`	`≳`	`≳`	GREATER-THAN OR EQUIVALENT TO
≴	`&nlsim; &NotLessTilde;`	`≴`	`≴`	NEITHER LESS-THAN NOR EQUIVALENT TO
≵	`&ngsim; &NotGreaterTilde;`	`≵`	`≵`	NEITHER GREATER-THAN NOR EQUIVALENT TO
≶	`&lg; &lessgtr; &LessGreater;`	`≶`	`≶`	LESS-THAN OR GREATER-THAN
≷	`&gl; &gtrless; &GreaterLess;`	`≷`	`≷`	GREATER-THAN OR LESS-THAN
≸	`&ntlg; &NotLessGreater;`	`≸`	`≸`	NEITHER LESS-THAN NOR GREATER-THAN
≹	`&ntgl; &NotGreaterLess;`	`≹`	`≹`	NEITHER GREATER-THAN NOR LESS-THAN
≺	`&pr; &Precedes; &prec;`	`≺`	`≺`	PRECEDES
≻	`&sc; &Succeeds; &succ;`	`≻`	`≻`	SUCCEEDS
≼	`&prcue; &PrecedesSlantEqual; &preccurlyeq;`	`≼`	`≼`	PRECEDES OR EQUAL TO
≽	`&sccue; &SucceedsSlantEqual; &succcurlyeq;`	`≽`	`≽`	SUCCEEDS OR EQUAL TO
≾	`&prsim; &precsim; &PrecedesTilde;`	`≾`	`≾`	PRECEDES OR EQUIVALENT TO
≿	`&scsim; &succsim; &SucceedsTilde;`	`≿`	`≿`	SUCCEEDS OR EQUIVALENT TO
⊀	`&npr; &nprec; &NotPrecedes;`	`⊀`	`⊀`	DOES NOT PRECEDE
⊁	`&nsc; &nsucc; &NotSucceeds;`	`⊁`	`⊁`	DOES NOT SUCCEED
⊂	`⊂ &subset;`	`⊂`	`⊂`	SUBSET OF
⊃	`⊃ &supset; &Superset;`	`⊃`	`⊃`	SUPERSET OF
⊄	`&nsub;`	`⊄`	`⊄`	NOT A SUBSET OF
⊅	`&nsup;`	`⊅`	`⊅`	NOT A SUPERSET OF
⊆	`&sube; &SubsetEqual; &subseteq;`	`⊆`	`⊆`	SUBSET OF OR EQUAL TO
⊇	`&supe; &supseteq; &SupersetEqual;`	`⊇`	`⊇`	SUPERSET OF OR EQUAL TO
⊈	`&nsube; &nsubseteq; &NotSubsetEqual;`	`⊈`	`⊈`	NEITHER A SUBSET OF NOR EQUAL TO
⊉	`&nsupe; &nsupseteq; &NotSupersetEqual;`	`⊉`	`⊉`	NEITHER A SUPERSET OF NOR EQUAL TO
⊊	`&subne; &subsetneq;`	`⊊`	`⊊`	SUBSET OF WITH NOT EQUAL TO
⊋	`&supne; &supsetneq;`	`⊋`	`⊋`	SUPERSET OF WITH NOT EQUAL TO
⊍	`&cupdot;`	`⊍`	`⊍`	MULTISET MULTIPLICATION
⊎	`&uplus; &UnionPlus;`	`⊎`	`⊎`	MULTISET UNION
⊏	`&sqsub; &SquareSubset; &sqsubset;`	`⊏`	`⊏`	SQUARE IMAGE OF
⊐	`&sqsup; &SquareSuperset; &sqsupset;`	`⊐`	`⊐`	SQUARE ORIGINAL OF
⊑	`&sqsube; &SquareSubsetEqual; &sqsubseteq;`	`⊑`	`⊑`	SQUARE IMAGE OF OR EQUAL TO
⊒	`&sqsupe; &SquareSupersetEqual; &sqsupseteq;`	`⊒`	`⊒`	SQUARE ORIGINAL OF OR EQUAL TO
⊓	`&sqcap; &SquareIntersection;`	`⊓`	`⊓`	SQUARE CAP
⊔	`&sqcup; &SquareUnion;`	`⊔`	`⊔`	SQUARE CUP
⊕	`&oplus; &CirclePlus;`	`⊕`	`⊕`	CIRCLED PLUS
⊖	`&ominus; &CircleMinus;`	`⊖`	`⊖`	CIRCLED MINUS
⊗	`&otimes; &CircleTimes;`	`⊗`	`⊗`	CIRCLED TIMES
⊘	`&osol;`	`⊘`	`⊘`	CIRCLED DIVISION SLASH
⊙	`&odot; &CircleDot;`	`⊙`	`⊙`	CIRCLED DOT OPERATOR
⊚	`&ocir; &circledcirc;`	`⊚`	`⊚`	CIRCLED RING OPERATOR
⊛	`&oast; &circledast;`	`⊛`	`⊛`	CIRCLED ASTERISK OPERATOR
⊝	`&odash; &circleddash;`	`⊝`	`⊝`	CIRCLED DASH
⊞	`&plusb; &boxplus;`	`⊞`	`⊞`	SQUARED PLUS
⊟	`&minusb; &boxminus;`	`⊟`	`⊟`	SQUARED MINUS
⊠	`&timesb; &boxtimes;`	`⊠`	`⊠`	SQUARED TIMES
⊡	`&sdotb; &dotsquare;`	`⊡`	`⊡`	SQUARED DOT OPERATOR
⊢	`&vdash; &RightTee;`	`⊢`	`⊢`	RIGHT TACK
⊣	`&dashv; &LeftTee;`	`⊣`	`⊣`	LEFT TACK
⊤	`&top; &DownTee;`	`⊤`	`⊤`	DOWN TACK
⊥	`&bottom; &bot; &perp; &UpTee;`	`⊥`	`⊥`	UP TACK
⊧	`&models;`	`⊧`	`⊧`	MODELS
⊨	`&vDash; &DoubleRightTee;`	`⊨`	`⊨`	TRUE
⊩	`&Vdash;`	`⊩`	`⊩`	FORCES
⊪	`&Vvdash;`	`⊪`	`⊪`	TRIPLE VERTICAL BAR RIGHT TURNSTILE
⊫	`&VDash;`	`⊫`	`⊫`	DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊬	`&nvdash;`	`⊬`	`⊬`	DOES NOT PROVE
⊭	`&nvDash;`	`⊭`	`⊭`	NOT TRUE
⊮	`&nVdash;`	`⊮`	`⊮`	DOES NOT FORCE
⊯	`&nVDash;`	`⊯`	`⊯`	NEGATED DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊰	`&prurel;`	`⊰`	`⊰`	PRECEDES UNDER RELATION
⊲	`&vltri; &vartriangleleft; &LeftTriangle;`	`⊲`	`⊲`	NORMAL SUBGROUP OF
⊳	`&vrtri; &vartriangleright; &RightTriangle;`	`⊳`	`⊳`	CONTAINS AS NORMAL SUBGROUP
⊴	`&ltrie; &trianglelefteq; &LeftTriangleEqual;`	`⊴`	`⊴`	NORMAL SUBGROUP OF OR EQUAL TO
⊵	`&rtrie; &trianglerighteq; &RightTriangleEqual;`	`⊵`	`⊵`	CONTAINS AS NORMAL SUBGROUP OR EQUAL TO
⊶	`&origof;`	`⊶`	`⊶`	ORIGINAL OF
⊷	`&imof;`	`⊷`	`⊷`	IMAGE OF
⊸	`&mumap; &multimap;`	`⊸`	`⊸`	MULTIMAP
⊹	`&hercon;`	`⊹`	`⊹`	HERMITIAN CONJUGATE MATRIX
⊺	`&intcal; &intercal;`	`⊺`	`⊺`	INTERCALATE
⊻	`&veebar;`	`⊻`	`⊻`	XOR
⊽	`&barvee;`	`⊽`	`⊽`	NOR
⊾	`&angrtvb;`	`⊾`	`⊾`	RIGHT ANGLE WITH ARC
⊿	`&lrtri;`	`⊿`	`⊿`	RIGHT TRIANGLE
⋀	`&xwedge; &Wedge; &bigwedge;`	`⋀`	`⋀`	N-ARY LOGICAL AND
⋁	`&xvee; &Vee; &bigvee;`	`⋁`	`⋁`	N-ARY LOGICAL OR
⋂	`&xcap; &Intersection; &bigcap;`	`⋂`	`⋂`	N-ARY INTERSECTION
⋃	`&xcup; &Union; &bigcup;`	`⋃`	`⋃`	N-ARY UNION
⋄	`&diam; &diamond; &Diamond;`	`⋄`	`⋄`	DIAMOND OPERATOR
⋅	`⋅`	`⋅`	`⋅`	DOT OPERATOR
⋆	`&sstarf; &Star;`	`⋆`	`⋆`	STAR OPERATOR
⋇	`&divonx; &divideontimes;`	`⋇`	`⋇`	DIVISION TIMES
⋈	`&bowtie;`	`⋈`	`⋈`	BOWTIE
⋉	`&ltimes;`	`⋉`	`⋉`	LEFT NORMAL FACTOR SEMIDIRECT PRODUCT
⋊	`&rtimes;`	`⋊`	`⋊`	RIGHT NORMAL FACTOR SEMIDIRECT PRODUCT
⋋	`&lthree; &leftthreetimes;`	`⋋`	`⋋`	LEFT SEMIDIRECT PRODUCT
⋌	`&rthree; &rightthreetimes;`	`⋌`	`⋌`	RIGHT SEMIDIRECT PRODUCT
⋍	`&bsime; &backsimeq;`	`⋍`	`⋍`	REVERSED TILDE EQUALS
⋎	`&cuvee; &curlyvee;`	`⋎`	`⋎`	CURLY LOGICAL OR
⋏	`&cuwed; &curlywedge;`	`⋏`	`⋏`	CURLY LOGICAL AND
⋐	`&Sub; &Subset;`	`⋐`	`⋐`	DOUBLE SUBSET
⋑	`&Sup; &Supset;`	`⋑`	`⋑`	DOUBLE SUPERSET
⋒	`&Cap;`	`⋒`	`⋒`	DOUBLE INTERSECTION
⋓	`&Cup;`	`⋓`	`⋓`	DOUBLE UNION
⋔	`&fork; &pitchfork;`	`⋔`	`⋔`	PITCHFORK
⋕	`&epar;`	`⋕`	`⋕`	EQUAL AND PARALLEL TO
⋖	`&ltdot; &lessdot;`	`⋖`	`⋖`	LESS-THAN WITH DOT
⋗	`&gtdot; &gtrdot;`	`⋗`	`⋗`	GREATER-THAN WITH DOT
⋘	`&Ll;`	`⋘`	`⋘`	VERY MUCH LESS-THAN
⋙	`&Gg; &ggg;`	`⋙`	`⋙`	VERY MUCH GREATER-THAN
⋚	`&leg; &LessEqualGreater; &lesseqgtr;`	`⋚`	`⋚`	LESS-THAN EQUAL TO OR GREATER-THAN
⋛	`&gel; &gtreqless; &GreaterEqualLess;`	`⋛`	`⋛`	GREATER-THAN EQUAL TO OR LESS-THAN
⋞	`&cuepr; &curlyeqprec;`	`⋞`	`⋞`	EQUAL TO OR PRECEDES
⋟	`&cuesc; &curlyeqsucc;`	`⋟`	`⋟`	EQUAL TO OR SUCCEEDS
⋠	`&nprcue; &NotPrecedesSlantEqual;`	`⋠`	`⋠`	DOES NOT PRECEDE OR EQUAL
⋡	`&nsccue; &NotSucceedsSlantEqual;`	`⋡`	`⋡`	DOES NOT SUCCEED OR EQUAL
⋢	`&nsqsube; &NotSquareSubsetEqual;`	`⋢`	`⋢`	NOT SQUARE IMAGE OF OR EQUAL TO
⋣	`&nsqsupe; &NotSquareSupersetEqual;`	`⋣`	`⋣`	NOT SQUARE ORIGINAL OF OR EQUAL TO
⋦	`&lnsim;`	`⋦`	`⋦`	LESS-THAN BUT NOT EQUIVALENT TO
⋧	`&gnsim;`	`⋧`	`⋧`	GREATER-THAN BUT NOT EQUIVALENT TO
⋨	`&prnsim; &precnsim;`	`⋨`	`⋨`	PRECEDES BUT NOT EQUIVALENT TO
⋩	`&scnsim; &succnsim;`	`⋩`	`⋩`	SUCCEEDS BUT NOT EQUIVALENT TO
⋪	`&nltri; &ntriangleleft; &NotLeftTriangle;`	`⋪`	`⋪`	NOT NORMAL SUBGROUP OF
⋫	`&nrtri; &ntriangleright; &NotRightTriangle;`	`⋫`	`⋫`	DOES NOT CONTAIN AS NORMAL SUBGROUP
⋬	`&nltrie; &ntrianglelefteq; &NotLeftTriangleEqual;`	`⋬`	`⋬`	NOT NORMAL SUBGROUP OF OR EQUAL TO
⋭	`&nrtrie; &ntrianglerighteq; &NotRightTriangleEqual;`	`⋭`	`⋭`	DOES NOT CONTAIN AS NORMAL SUBGROUP OR EQUAL
⋮	`&vellip;`	`⋮`	`⋮`	VERTICAL ELLIPSIS
⋯	`&ctdot;`	`⋯`	`⋯`	MIDLINE HORIZONTAL ELLIPSIS
⋰	`&utdot;`	`⋰`	`⋰`	UP RIGHT DIAGONAL ELLIPSIS
⋱	`&dtdot;`	`⋱`	`⋱`	DOWN RIGHT DIAGONAL ELLIPSIS
⋲	`&disin;`	`⋲`	`⋲`	ELEMENT OF WITH LONG HORIZONTAL STROKE
⋳	`&isinsv;`	`⋳`	`⋳`	ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋴	`&isins;`	`⋴`	`⋴`	SMALL ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋵	`&isindot;`	`⋵`	`⋵`	ELEMENT OF WITH DOT ABOVE
⋶	`&notinvc;`	`⋶`	`⋶`	ELEMENT OF WITH OVERBAR
⋷	`&notinvb;`	`⋷`	`⋷`	SMALL ELEMENT OF WITH OVERBAR
⋹	`&isinE;`	`⋹`	`⋹`	ELEMENT OF WITH TWO HORIZONTAL STROKES
⋺	`&nisd;`	`⋺`	`⋺`	CONTAINS WITH LONG HORIZONTAL STROKE
⋻	`&xnis;`	`⋻`	`⋻`	CONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋼	`&nis;`	`⋼`	`⋼`	SMALL CONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋽	`&notnivc;`	`⋽`	`⋽`	CONTAINS WITH OVERBAR
⋾	`&notnivb;`	`⋾`	`⋾`	SMALL CONTAINS WITH OVERBAR
⌅	`&barwed; &barwedge;`	`⌅`	`⌅`	PROJECTIVE
⌆	`&Barwed; &doublebarwedge;`	`⌆`	`⌆`	PERSPECTIVE
⌈	`&lceil; &LeftCeiling;`	`⌈`	`⌈`	LEFT CEILING
⌉	`&rceil; &RightCeiling;`	`⌉`	`⌉`	RIGHT CEILING
⌊	`&lfloor; &LeftFloor;`	`⌊`	`⌊`	LEFT FLOOR
⌋	`&rfloor; &RightFloor;`	`⌋`	`⌋`	RIGHT FLOOR
⌌	`&drcrop;`	`⌌`	`⌌`	BOTTOM RIGHT CROP
⌍	`&dlcrop;`	`⌍`	`⌍`	BOTTOM LEFT CROP
⌎	`&urcrop;`	`⌎`	`⌎`	TOP RIGHT CROP
⌏	`&ulcrop;`	`⌏`	`⌏`	TOP LEFT CROP
⌐	`&bnot;`	`⌐`	`⌐`	REVERSED NOT SIGN
⌒	`&profline;`	`⌒`	`⌒`	ARC
⌓	`&profsurf;`	`⌓`	`⌓`	SEGMENT
⌕	`&telrec;`	`⌕`	`⌕`	TELEPHONE RECORDER
⌖	`&target;`	`⌖`	`⌖`	POSITION INDICATOR
⌜	`&ulcorn; &ulcorner;`	`⌜`	`⌜`	TOP LEFT CORNER
⌝	`&urcorn; &urcorner;`	`⌝`	`⌝`	TOP RIGHT CORNER
⌞	`&dlcorn; &llcorner;`	`⌞`	`⌞`	BOTTOM LEFT CORNER
⌟	`&drcorn; &lrcorner;`	`⌟`	`⌟`	BOTTOM RIGHT CORNER
⌢	`&frown; &sfrown;`	`⌢`	`⌢`	FROWN
⌣	`&smile; &ssmile;`	`⌣`	`⌣`	SMILE
⌭	`&cylcty;`	`⌭`	`⌭`	CYLINDRICITY
⌮	`&profalar;`	`⌮`	`⌮`	ALL AROUND-PROFILE
⌶	`&topbot;`	`⌶`	`⌶`	APL FUNCTIONAL SYMBOL I-BEAM
⌽	`&ovbar;`	`⌽`	`⌽`	APL FUNCTIONAL SYMBOL CIRCLE STILE
⌿	`&solbar;`	`⌿`	`⌿`	APL FUNCTIONAL SYMBOL SLASH BAR
⍼	`&angzarr;`	`⍼`	`⍼`	RIGHT ANGLE WITH DOWNWARDS ZIGZAG ARROW
⎰	`&lmoust; &lmoustache;`	`⎰`	`⎰`	UPPER LEFT OR LOWER RIGHT CURLY BRACKET SECTION
⎱	`&rmoust; &rmoustache;`	`⎱`	`⎱`	UPPER RIGHT OR LOWER LEFT CURLY BRACKET SECTION
⎴	`&tbrk; &OverBracket;`	`⎴`	`⎴`	TOP SQUARE BRACKET
⎵	`&bbrk; &UnderBracket;`	`⎵`	`⎵`	BOTTOM SQUARE BRACKET
⎶	`&bbrktbrk;`	`⎶`	`⎶`	BOTTOM SQUARE BRACKET OVER TOP SQUARE BRACKET
⏜	`&OverParenthesis;`	`⏜`	`⏜`	TOP PARENTHESIS
⏝	`&UnderParenthesis;`	`⏝`	`⏝`	BOTTOM PARENTHESIS
⏞	`&OverBrace;`	`⏞`	`⏞`	TOP CURLY BRACKET
⏟	`&UnderBrace;`	`⏟`	`⏟`	BOTTOM CURLY BRACKET
⏢	`&trpezium;`	`⏢`	`⏢`	WHITE TRAPEZIUM
⏧	`&elinters;`	`⏧`	`⏧`	ELECTRICAL INTERSECTION
␣	`&blank;`	`␣`	`␣`	OPEN BOX
Ⓢ	`&oS; &circledS;`	`Ⓢ`	`Ⓢ`	CIRCLED LATIN CAPITAL LETTER S
─	`&boxh; &HorizontalLine;`	`─`	`─`	BOX DRAWINGS LIGHT HORIZONTAL
│	`&boxv;`	`│`	`│`	BOX DRAWINGS LIGHT VERTICAL
┌	`&boxdr;`	`┌`	`┌`	BOX DRAWINGS LIGHT DOWN AND RIGHT
┐	`&boxdl;`	`┐`	`┐`	BOX DRAWINGS LIGHT DOWN AND LEFT
└	`&boxur;`	`└`	`└`	BOX DRAWINGS LIGHT UP AND RIGHT
┘	`&boxul;`	`┘`	`┘`	BOX DRAWINGS LIGHT UP AND LEFT
├	`&boxvr;`	`├`	`├`	BOX DRAWINGS LIGHT VERTICAL AND RIGHT
┤	`&boxvl;`	`┤`	`┤`	BOX DRAWINGS LIGHT VERTICAL AND LEFT
┬	`&boxhd;`	`┬`	`┬`	BOX DRAWINGS LIGHT DOWN AND HORIZONTAL
┴	`&boxhu;`	`┴`	`┴`	BOX DRAWINGS LIGHT UP AND HORIZONTAL
┼	`&boxvh;`	`┼`	`┼`	BOX DRAWINGS LIGHT VERTICAL AND HORIZONTAL
═	`&boxH;`	`═`	`═`	BOX DRAWINGS DOUBLE HORIZONTAL
║	`&boxV;`	`║`	`║`	BOX DRAWINGS DOUBLE VERTICAL
╒	`&boxdR;`	`╒`	`╒`	BOX DRAWINGS DOWN SINGLE AND RIGHT DOUBLE
╓	`&boxDr;`	`╓`	`╓`	BOX DRAWINGS DOWN DOUBLE AND RIGHT SINGLE
╔	`&boxDR;`	`╔`	`╔`	BOX DRAWINGS DOUBLE DOWN AND RIGHT
╕	`&boxdL;`	`╕`	`╕`	BOX DRAWINGS DOWN SINGLE AND LEFT DOUBLE
╖	`&boxDl;`	`╖`	`╖`	BOX DRAWINGS DOWN DOUBLE AND LEFT SINGLE
╗	`&boxDL;`	`╗`	`╗`	BOX DRAWINGS DOUBLE DOWN AND LEFT
╘	`&boxuR;`	`╘`	`╘`	BOX DRAWINGS UP SINGLE AND RIGHT DOUBLE
╙	`&boxUr;`	`╙`	`╙`	BOX DRAWINGS UP DOUBLE AND RIGHT SINGLE
╚	`&boxUR;`	`╚`	`╚`	BOX DRAWINGS DOUBLE UP AND RIGHT
╛	`&boxuL;`	`╛`	`╛`	BOX DRAWINGS UP SINGLE AND LEFT DOUBLE
╜	`&boxUl;`	`╜`	`╜`	BOX DRAWINGS UP DOUBLE AND LEFT SINGLE
╝	`&boxUL;`	`╝`	`╝`	BOX DRAWINGS DOUBLE UP AND LEFT
╞	`&boxvR;`	`╞`	`╞`	BOX DRAWINGS VERTICAL SINGLE AND RIGHT DOUBLE
╟	`&boxVr;`	`╟`	`╟`	BOX DRAWINGS VERTICAL DOUBLE AND RIGHT SINGLE
╠	`&boxVR;`	`╠`	`╠`	BOX DRAWINGS DOUBLE VERTICAL AND RIGHT
╡	`&boxvL;`	`╡`	`╡`	BOX DRAWINGS VERTICAL SINGLE AND LEFT DOUBLE
╢	`&boxVl;`	`╢`	`╢`	BOX DRAWINGS VERTICAL DOUBLE AND LEFT SINGLE
╣	`&boxVL;`	`╣`	`╣`	BOX DRAWINGS DOUBLE VERTICAL AND LEFT
╤	`&boxHd;`	`╤`	`╤`	BOX DRAWINGS DOWN SINGLE AND HORIZONTAL DOUBLE
╥	`&boxhD;`	`╥`	`╥`	BOX DRAWINGS DOWN DOUBLE AND HORIZONTAL SINGLE
╦	`&boxHD;`	`╦`	`╦`	BOX DRAWINGS DOUBLE DOWN AND HORIZONTAL
╧	`&boxHu;`	`╧`	`╧`	BOX DRAWINGS UP SINGLE AND HORIZONTAL DOUBLE
╨	`&boxhU;`	`╨`	`╨`	BOX DRAWINGS UP DOUBLE AND HORIZONTAL SINGLE
╩	`&boxHU;`	`╩`	`╩`	BOX DRAWINGS DOUBLE UP AND HORIZONTAL
╪	`&boxvH;`	`╪`	`╪`	BOX DRAWINGS VERTICAL SINGLE AND HORIZONTAL DOUBLE
╫	`&boxVh;`	`╫`	`╫`	BOX DRAWINGS VERTICAL DOUBLE AND HORIZONTAL SINGLE
╬	`&boxVH;`	`╬`	`╬`	BOX DRAWINGS DOUBLE VERTICAL AND HORIZONTAL
▀	`&uhblk;`	`▀`	`▀`	UPPER HALF BLOCK
▄	`&lhblk;`	`▄`	`▄`	LOWER HALF BLOCK
█	`&block;`	`█`	`█`	FULL BLOCK
░	`&blk14;`	`░`	`░`	LIGHT SHADE
▒	`&blk12;`	`▒`	`▒`	MEDIUM SHADE
▓	`&blk34;`	`▓`	`▓`	DARK SHADE
□	`&squ; &square; &Square;`	`□`	`□`	WHITE SQUARE
▪	`&squf; &squarf; &blacksquare; &FilledVerySmallSquare;`	`▪`	`▪`	BLACK SMALL SQUARE
▫	`&EmptyVerySmallSquare;`	`▫`	`▫`	WHITE SMALL SQUARE
▭	`&rect;`	`▭`	`▭`	WHITE RECTANGLE
▮	`&marker;`	`▮`	`▮`	BLACK VERTICAL RECTANGLE
▱	`&fltns;`	`▱`	`▱`	WHITE PARALLELOGRAM
△	`&xutri; &bigtriangleup;`	`△`	`△`	WHITE UP-POINTING TRIANGLE
▴	`&utrif; &blacktriangle;`	`▴`	`▴`	BLACK UP-POINTING SMALL TRIANGLE
▵	`&utri; &triangle;`	`▵`	`▵`	WHITE UP-POINTING SMALL TRIANGLE
▸	`&rtrif; &blacktriangleright;`	`▸`	`▸`	BLACK RIGHT-POINTING SMALL TRIANGLE
▹	`&rtri; &triangleright;`	`▹`	`▹`	WHITE RIGHT-POINTING SMALL TRIANGLE
▽	`&xdtri; &bigtriangledown;`	`▽`	`▽`	WHITE DOWN-POINTING TRIANGLE
▾	`&dtrif; &blacktriangledown;`	`▾`	`▾`	BLACK DOWN-POINTING SMALL TRIANGLE
▿	`&dtri; &triangledown;`	`▿`	`▿`	WHITE DOWN-POINTING SMALL TRIANGLE
◂	`&ltrif; &blacktriangleleft;`	`◂`	`◂`	BLACK LEFT-POINTING SMALL TRIANGLE
◃	`&ltri; &triangleleft;`	`◃`	`◃`	WHITE LEFT-POINTING SMALL TRIANGLE
◊	`&loz; &lozenge;`	`◊`	`◊`	LOZENGE
○	`&cir;`	`○`	`○`	WHITE CIRCLE
◬	`&tridot;`	`◬`	`◬`	WHITE UP-POINTING TRIANGLE WITH DOT
◯	`&xcirc; &bigcirc;`	`◯`	`◯`	LARGE CIRCLE
◸	`&ultri;`	`◸`	`◸`	UPPER LEFT TRIANGLE
◹	`&urtri;`	`◹`	`◹`	UPPER RIGHT TRIANGLE
◺	`&lltri;`	`◺`	`◺`	LOWER LEFT TRIANGLE
◻	`&EmptySmallSquare;`	`◻`	`◻`	WHITE MEDIUM SQUARE
◼	`&FilledSmallSquare;`	`◼`	`◼`	BLACK MEDIUM SQUARE
★	`&starf; &bigstar;`	`★`	`★`	BLACK STAR
☆	`&star;`	`☆`	`☆`	WHITE STAR
☎	`&phone;`	`☎`	`☎`	BLACK TELEPHONE
♀	`&female;`	`♀`	`♀`	FEMALE SIGN
♂	`&male;`	`♂`	`♂`	MALE SIGN
♠	`&spades; &spadesuit;`	`♠`	`♠`	BLACK SPADE SUIT
♣	`&clubs; &clubsuit;`	`♣`	`♣`	BLACK CLUB SUIT
♥	`&hearts; &heartsuit;`	`♥`	`♥`	BLACK HEART SUIT
♦	`&diams; &diamondsuit;`	`♦`	`♦`	BLACK DIAMOND SUIT
♪	`&sung;`	`♪`	`♪`	EIGHTH NOTE
♭	`&flat;`	`♭`	`♭`	MUSIC FLAT SIGN
♮	`&natur; &natural;`	`♮`	`♮`	MUSIC NATURAL SIGN
♯	`&sharp;`	`♯`	`♯`	MUSIC SHARP SIGN
✓	`&check; &checkmark;`	`✓`	`✓`	CHECK MARK
✗	`&cross;`	`✗`	`✗`	BALLOT X
✠	`&malt; &maltese;`	`✠`	`✠`	MALTESE CROSS
✶	`&sext;`	`✶`	`✶`	SIX POINTED BLACK STAR
❘	`&VerticalSeparator;`	`❘`	`❘`	LIGHT VERTICAL BAR
❲	`&lbbrk;`	`❲`	`❲`	LIGHT LEFT TORTOISE SHELL BRACKET ORNAMENT
❳	`&rbbrk;`	`❳`	`❳`	LIGHT RIGHT TORTOISE SHELL BRACKET ORNAMENT
⟦	`&lobrk; &LeftDoubleBracket;`	`⟦`	`⟦`	MATHEMATICAL LEFT WHITE SQUARE BRACKET
⟧	`&robrk; &RightDoubleBracket;`	`⟧`	`⟧`	MATHEMATICAL RIGHT WHITE SQUARE BRACKET
⟨	`&lang; &LeftAngleBracket; &langle;`	`⟨`	`⟨`	MATHEMATICAL LEFT ANGLE BRACKET
⟩	`&rang; &RightAngleBracket; &rangle;`	`⟩`	`⟩`	MATHEMATICAL RIGHT ANGLE BRACKET
⟪	`&Lang;`	`⟪`	`⟪`	MATHEMATICAL LEFT DOUBLE ANGLE BRACKET
⟫	`&Rang;`	`⟫`	`⟫`	MATHEMATICAL RIGHT DOUBLE ANGLE BRACKET
⟬	`&loang;`	`⟬`	`⟬`	MATHEMATICAL LEFT WHITE TORTOISE SHELL BRACKET
⟭	`&roang;`	`⟭`	`⟭`	MATHEMATICAL RIGHT WHITE TORTOISE SHELL BRACKET
⟵	`&xlarr; &longleftarrow; &LongLeftArrow;`	`⟵`	`⟵`	LONG LEFTWARDS ARROW
⟶	`&xrarr; &longrightarrow; &LongRightArrow;`	`⟶`	`⟶`	LONG RIGHTWARDS ARROW
⟷	`&xharr; &longleftrightarrow; &LongLeftRightArrow;`	`⟷`	`⟷`	LONG LEFT RIGHT ARROW
⟸	`&xlArr; &Longleftarrow; &DoubleLongLeftArrow;`	`⟸`	`⟸`	LONG LEFTWARDS DOUBLE ARROW
⟹	`&xrArr; &Longrightarrow; &DoubleLongRightArrow;`	`⟹`	`⟹`	LONG RIGHTWARDS DOUBLE ARROW
⟺	`&xhArr; &Longleftrightarrow; &DoubleLongLeftRightArrow;`	`⟺`	`⟺`	LONG LEFT RIGHT DOUBLE ARROW
⟼	`&xmap; &longmapsto;`	`⟼`	`⟼`	LONG RIGHTWARDS ARROW FROM BAR
⟿	`&dzigrarr;`	`⟿`	`⟿`	LONG RIGHTWARDS SQUIGGLE ARROW
⤂	`&nvlArr;`	`⤂`	`⤂`	LEFTWARDS DOUBLE ARROW WITH VERTICAL STROKE
⤃	`&nvrArr;`	`⤃`	`⤃`	RIGHTWARDS DOUBLE ARROW WITH VERTICAL STROKE
⤄	`&nvHarr;`	`⤄`	`⤄`	LEFT RIGHT DOUBLE ARROW WITH VERTICAL STROKE
⤅	`&Map;`	`⤅`	`⤅`	RIGHTWARDS TWO-HEADED ARROW FROM BAR
⤌	`&lbarr;`	`⤌`	`⤌`	LEFTWARDS DOUBLE DASH ARROW
⤍	`&rbarr; &bkarow;`	`⤍`	`⤍`	RIGHTWARDS DOUBLE DASH ARROW
⤎	`&lBarr;`	`⤎`	`⤎`	LEFTWARDS TRIPLE DASH ARROW
⤏	`&rBarr; &dbkarow;`	`⤏`	`⤏`	RIGHTWARDS TRIPLE DASH ARROW
⤐	`&RBarr; &drbkarow;`	`⤐`	`⤐`	RIGHTWARDS TWO-HEADED TRIPLE DASH ARROW
⤑	`&DDotrahd;`	`⤑`	`⤑`	RIGHTWARDS ARROW WITH DOTTED STEM
⤒	`&UpArrowBar;`	`⤒`	`⤒`	UPWARDS ARROW TO BAR
⤓	`&DownArrowBar;`	`⤓`	`⤓`	DOWNWARDS ARROW TO BAR
⤖	`&Rarrtl;`	`⤖`	`⤖`	RIGHTWARDS TWO-HEADED ARROW WITH TAIL
⤙	`&latail;`	`⤙`	`⤙`	LEFTWARDS ARROW-TAIL
⤚	`&ratail;`	`⤚`	`⤚`	RIGHTWARDS ARROW-TAIL
⤛	`&lAtail;`	`⤛`	`⤛`	LEFTWARDS DOUBLE ARROW-TAIL
⤜	`&rAtail;`	`⤜`	`⤜`	RIGHTWARDS DOUBLE ARROW-TAIL
⤝	`&larrfs;`	`⤝`	`⤝`	LEFTWARDS ARROW TO BLACK DIAMOND
⤞	`&rarrfs;`	`⤞`	`⤞`	RIGHTWARDS ARROW TO BLACK DIAMOND
⤟	`&larrbfs;`	`⤟`	`⤟`	LEFTWARDS ARROW FROM BAR TO BLACK DIAMOND
⤠	`&rarrbfs;`	`⤠`	`⤠`	RIGHTWARDS ARROW FROM BAR TO BLACK DIAMOND
⤣	`&nwarhk;`	`⤣`	`⤣`	NORTH WEST ARROW WITH HOOK
⤤	`&nearhk;`	`⤤`	`⤤`	NORTH EAST ARROW WITH HOOK
⤥	`&searhk; &hksearow;`	`⤥`	`⤥`	SOUTH EAST ARROW WITH HOOK
⤦	`&swarhk; &hkswarow;`	`⤦`	`⤦`	SOUTH WEST ARROW WITH HOOK
⤧	`&nwnear;`	`⤧`	`⤧`	NORTH WEST ARROW AND NORTH EAST ARROW
⤨	`&nesear; &toea;`	`⤨`	`⤨`	NORTH EAST ARROW AND SOUTH EAST ARROW
⤩	`&seswar; &tosa;`	`⤩`	`⤩`	SOUTH EAST ARROW AND SOUTH WEST ARROW
⤪	`&swnwar;`	`⤪`	`⤪`	SOUTH WEST ARROW AND NORTH WEST ARROW
⤳	`&rarrc;`	`⤳`	`⤳`	WAVE ARROW POINTING DIRECTLY RIGHT
⤵	`&cudarrr;`	`⤵`	`⤵`	ARROW POINTING RIGHTWARDS THEN CURVING DOWNWARDS
⤶	`&ldca;`	`⤶`	`⤶`	ARROW POINTING DOWNWARDS THEN CURVING LEFTWARDS
⤷	`&rdca;`	`⤷`	`⤷`	ARROW POINTING DOWNWARDS THEN CURVING RIGHTWARDS
⤸	`&cudarrl;`	`⤸`	`⤸`	RIGHT-SIDE ARC CLOCKWISE ARROW
⤹	`&larrpl;`	`⤹`	`⤹`	LEFT-SIDE ARC ANTICLOCKWISE ARROW
⤼	`&curarrm;`	`⤼`	`⤼`	TOP ARC CLOCKWISE ARROW WITH MINUS
⤽	`&cularrp;`	`⤽`	`⤽`	TOP ARC ANTICLOCKWISE ARROW WITH PLUS
⥅	`&rarrpl;`	`⥅`	`⥅`	RIGHTWARDS ARROW WITH PLUS BELOW
⥈	`&harrcir;`	`⥈`	`⥈`	LEFT RIGHT ARROW THROUGH SMALL CIRCLE
⥉	`&Uarrocir;`	`⥉`	`⥉`	UPWARDS TWO-HEADED ARROW FROM SMALL CIRCLE
⥊	`&lurdshar;`	`⥊`	`⥊`	LEFT BARB UP RIGHT BARB DOWN HARPOON
⥋	`&ldrushar;`	`⥋`	`⥋`	LEFT BARB DOWN RIGHT BARB UP HARPOON
⥎	`&LeftRightVector;`	`⥎`	`⥎`	LEFT BARB UP RIGHT BARB UP HARPOON
⥏	`&RightUpDownVector;`	`⥏`	`⥏`	UP BARB RIGHT DOWN BARB RIGHT HARPOON
⥐	`&DownLeftRightVector;`	`⥐`	`⥐`	LEFT BARB DOWN RIGHT BARB DOWN HARPOON
⥑	`&LeftUpDownVector;`	`⥑`	`⥑`	UP BARB LEFT DOWN BARB LEFT HARPOON
⥒	`&LeftVectorBar;`	`⥒`	`⥒`	LEFTWARDS HARPOON WITH BARB UP TO BAR
⥓	`&RightVectorBar;`	`⥓`	`⥓`	RIGHTWARDS HARPOON WITH BARB UP TO BAR
⥔	`&RightUpVectorBar;`	`⥔`	`⥔`	UPWARDS HARPOON WITH BARB RIGHT TO BAR
⥕	`&RightDownVectorBar;`	`⥕`	`⥕`	DOWNWARDS HARPOON WITH BARB RIGHT TO BAR
⥖	`&DownLeftVectorBar;`	`⥖`	`⥖`	LEFTWARDS HARPOON WITH BARB DOWN TO BAR
⥗	`&DownRightVectorBar;`	`⥗`	`⥗`	RIGHTWARDS HARPOON WITH BARB DOWN TO BAR
⥘	`&LeftUpVectorBar;`	`⥘`	`⥘`	UPWARDS HARPOON WITH BARB LEFT TO BAR
⥙	`&LeftDownVectorBar;`	`⥙`	`⥙`	DOWNWARDS HARPOON WITH BARB LEFT TO BAR
⥚	`&LeftTeeVector;`	`⥚`	`⥚`	LEFTWARDS HARPOON WITH BARB UP FROM BAR
⥛	`&RightTeeVector;`	`⥛`	`⥛`	RIGHTWARDS HARPOON WITH BARB UP FROM BAR
⥜	`&RightUpTeeVector;`	`⥜`	`⥜`	UPWARDS HARPOON WITH BARB RIGHT FROM BAR
⥝	`&RightDownTeeVector;`	`⥝`	`⥝`	DOWNWARDS HARPOON WITH BARB RIGHT FROM BAR
⥞	`&DownLeftTeeVector;`	`⥞`	`⥞`	LEFTWARDS HARPOON WITH BARB DOWN FROM BAR
⥟	`&DownRightTeeVector;`	`⥟`	`⥟`	RIGHTWARDS HARPOON WITH BARB DOWN FROM BAR
⥠	`&LeftUpTeeVector;`	`⥠`	`⥠`	UPWARDS HARPOON WITH BARB LEFT FROM BAR
⥡	`&LeftDownTeeVector;`	`⥡`	`⥡`	DOWNWARDS HARPOON WITH BARB LEFT FROM BAR
⥢	`&lHar;`	`⥢`	`⥢`	LEFTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB DOWN
⥣	`&uHar;`	`⥣`	`⥣`	UPWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
⥤	`&rHar;`	`⥤`	`⥤`	RIGHTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
⥥	`&dHar;`	`⥥`	`⥥`	DOWNWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
⥦	`&luruhar;`	`⥦`	`⥦`	LEFTWARDS HARPOON WITH BARB UP ABOVE RIGHTWARDS HARPOON WITH BARB UP
⥧	`&ldrdhar;`	`⥧`	`⥧`	LEFTWARDS HARPOON WITH BARB DOWN ABOVE RIGHTWARDS HARPOON WITH BARB DOWN
⥨	`&ruluhar;`	`⥨`	`⥨`	RIGHTWARDS HARPOON WITH BARB UP ABOVE LEFTWARDS HARPOON WITH BARB UP
⥩	`&rdldhar;`	`⥩`	`⥩`	RIGHTWARDS HARPOON WITH BARB DOWN ABOVE LEFTWARDS HARPOON WITH BARB DOWN
⥪	`&lharul;`	`⥪`	`⥪`	LEFTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
⥫	`&llhard;`	`⥫`	`⥫`	LEFTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
⥬	`&rharul;`	`⥬`	`⥬`	RIGHTWARDS HARPOON WITH BARB UP ABOVE LONG DASH
⥭	`&lrhard;`	`⥭`	`⥭`	RIGHTWARDS HARPOON WITH BARB DOWN BELOW LONG DASH
⥮	`&udhar; &UpEquilibrium;`	`⥮`	`⥮`	UPWARDS HARPOON WITH BARB LEFT BESIDE DOWNWARDS HARPOON WITH BARB RIGHT
⥯	`&duhar; &ReverseUpEquilibrium;`	`⥯`	`⥯`	DOWNWARDS HARPOON WITH BARB LEFT BESIDE UPWARDS HARPOON WITH BARB RIGHT
⥰	`&RoundImplies;`	`⥰`	`⥰`	RIGHT DOUBLE ARROW WITH ROUNDED HEAD
⥱	`&erarr;`	`⥱`	`⥱`	EQUALS SIGN ABOVE RIGHTWARDS ARROW
⥲	`&simrarr;`	`⥲`	`⥲`	TILDE OPERATOR ABOVE RIGHTWARDS ARROW
⥳	`&larrsim;`	`⥳`	`⥳`	LEFTWARDS ARROW ABOVE TILDE OPERATOR
⥴	`&rarrsim;`	`⥴`	`⥴`	RIGHTWARDS ARROW ABOVE TILDE OPERATOR
⥵	`&rarrap;`	`⥵`	`⥵`	RIGHTWARDS ARROW ABOVE ALMOST EQUAL TO
⥶	`&ltlarr;`	`⥶`	`⥶`	LESS-THAN ABOVE LEFTWARDS ARROW
⥸	`&gtrarr;`	`⥸`	`⥸`	GREATER-THAN ABOVE RIGHTWARDS ARROW
⥹	`&subrarr;`	`⥹`	`⥹`	SUBSET ABOVE RIGHTWARDS ARROW
⥻	`&suplarr;`	`⥻`	`⥻`	SUPERSET ABOVE LEFTWARDS ARROW
⥼	`&lfisht;`	`⥼`	`⥼`	LEFT FISH TAIL
⥽	`&rfisht;`	`⥽`	`⥽`	RIGHT FISH TAIL
⥾	`&ufisht;`	`⥾`	`⥾`	UP FISH TAIL
⥿	`&dfisht;`	`⥿`	`⥿`	DOWN FISH TAIL
⦅	`&lopar;`	`⦅`	`⦅`	LEFT WHITE PARENTHESIS
⦆	`&ropar;`	`⦆`	`⦆`	RIGHT WHITE PARENTHESIS
⦋	`&lbrke;`	`⦋`	`⦋`	LEFT SQUARE BRACKET WITH UNDERBAR
⦌	`&rbrke;`	`⦌`	`⦌`	RIGHT SQUARE BRACKET WITH UNDERBAR
⦍	`&lbrkslu;`	`⦍`	`⦍`	LEFT SQUARE BRACKET WITH TICK IN TOP CORNER
⦎	`&rbrksld;`	`⦎`	`⦎`	RIGHT SQUARE BRACKET WITH TICK IN BOTTOM CORNER
⦏	`&lbrksld;`	`⦏`	`⦏`	LEFT SQUARE BRACKET WITH TICK IN BOTTOM CORNER
⦐	`&rbrkslu;`	`⦐`	`⦐`	RIGHT SQUARE BRACKET WITH TICK IN TOP CORNER
⦑	`&langd;`	`⦑`	`⦑`	LEFT ANGLE BRACKET WITH DOT
⦒	`&rangd;`	`⦒`	`⦒`	RIGHT ANGLE BRACKET WITH DOT
⦓	`&lparlt;`	`⦓`	`⦓`	LEFT ARC LESS-THAN BRACKET
⦔	`&rpargt;`	`⦔`	`⦔`	RIGHT ARC GREATER-THAN BRACKET
⦕	`&gtlPar;`	`⦕`	`⦕`	DOUBLE LEFT ARC GREATER-THAN BRACKET
⦖	`&ltrPar;`	`⦖`	`⦖`	DOUBLE RIGHT ARC LESS-THAN BRACKET
⦚	`&vzigzag;`	`⦚`	`⦚`	VERTICAL ZIGZAG LINE
⦜	`&vangrt;`	`⦜`	`⦜`	RIGHT ANGLE VARIANT WITH SQUARE
⦝	`&angrtvbd;`	`⦝`	`⦝`	MEASURED RIGHT ANGLE WITH DOT
⦤	`&ange;`	`⦤`	`⦤`	ANGLE WITH UNDERBAR
⦥	`&range;`	`⦥`	`⦥`	REVERSED ANGLE WITH UNDERBAR
⦦	`&dwangle;`	`⦦`	`⦦`	OBLIQUE ANGLE OPENING UP
⦧	`&uwangle;`	`⦧`	`⦧`	OBLIQUE ANGLE OPENING DOWN
⦨	`&angmsdaa;`	`⦨`	`⦨`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND RIGHT
⦩	`&angmsdab;`	`⦩`	`⦩`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING UP AND LEFT
⦪	`&angmsdac;`	`⦪`	`⦪`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND RIGHT
⦫	`&angmsdad;`	`⦫`	`⦫`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING DOWN AND LEFT
⦬	`&angmsdae;`	`⦬`	`⦬`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND UP
⦭	`&angmsdaf;`	`⦭`	`⦭`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND UP
⦮	`&angmsdag;`	`⦮`	`⦮`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING RIGHT AND DOWN
⦯	`&angmsdah;`	`⦯`	`⦯`	MEASURED ANGLE WITH OPEN ARM ENDING IN ARROW POINTING LEFT AND DOWN
⦰	`&bemptyv;`	`⦰`	`⦰`	REVERSED EMPTY SET
⦱	`&demptyv;`	`⦱`	`⦱`	EMPTY SET WITH OVERBAR
⦲	`&cemptyv;`	`⦲`	`⦲`	EMPTY SET WITH SMALL CIRCLE ABOVE
⦳	`&raemptyv;`	`⦳`	`⦳`	EMPTY SET WITH RIGHT ARROW ABOVE
⦴	`&laemptyv;`	`⦴`	`⦴`	EMPTY SET WITH LEFT ARROW ABOVE
⦵	`&ohbar;`	`⦵`	`⦵`	CIRCLE WITH HORIZONTAL BAR
⦶	`&omid;`	`⦶`	`⦶`	CIRCLED VERTICAL BAR
⦷	`&opar;`	`⦷`	`⦷`	CIRCLED PARALLEL
⦹	`&operp;`	`⦹`	`⦹`	CIRCLED PERPENDICULAR
⦻	`&olcross;`	`⦻`	`⦻`	CIRCLE WITH SUPERIMPOSED X
⦼	`&odsold;`	`⦼`	`⦼`	CIRCLED ANTICLOCKWISE-ROTATED DIVISION SIGN
⦾	`&olcir;`	`⦾`	`⦾`	CIRCLED WHITE BULLET
⦿	`&ofcir;`	`⦿`	`⦿`	CIRCLED BULLET
⧀	`&olt;`	`⧀`	`⧀`	CIRCLED LESS-THAN
⧁	`&ogt;`	`⧁`	`⧁`	CIRCLED GREATER-THAN
⧂	`&cirscir;`	`⧂`	`⧂`	CIRCLE WITH SMALL CIRCLE TO THE RIGHT
⧃	`&cirE;`	`⧃`	`⧃`	CIRCLE WITH TWO HORIZONTAL STROKES TO THE RIGHT
⧄	`&solb;`	`⧄`	`⧄`	SQUARED RISING DIAGONAL SLASH
⧅	`&bsolb;`	`⧅`	`⧅`	SQUARED FALLING DIAGONAL SLASH
⧉	`&boxbox;`	`⧉`	`⧉`	TWO JOINED SQUARES
⧍	`&trisb;`	`⧍`	`⧍`	TRIANGLE WITH SERIFS AT BOTTOM
⧎	`&rtriltri;`	`⧎`	`⧎`	RIGHT TRIANGLE ABOVE LEFT TRIANGLE
⧏	`&LeftTriangleBar;`	`⧏`	`⧏`	LEFT TRIANGLE BESIDE VERTICAL BAR
⧐	`&RightTriangleBar;`	`⧐`	`⧐`	VERTICAL BAR BESIDE RIGHT TRIANGLE
⧚	`&race;`	`⧚`	`⧚`	LEFT DOUBLE WIGGLY FENCE
⧜	`&iinfin;`	`⧜`	`⧜`	INCOMPLETE INFINITY
⧝	`&infintie;`	`⧝`	`⧝`	TIE OVER INFINITY
⧞	`&nvinfin;`	`⧞`	`⧞`	INFINITY NEGATED WITH VERTICAL BAR
⧣	`&eparsl;`	`⧣`	`⧣`	EQUALS SIGN AND SLANTED PARALLEL
⧤	`&smeparsl;`	`⧤`	`⧤`	EQUALS SIGN AND SLANTED PARALLEL WITH TILDE ABOVE
⧥	`&eqvparsl;`	`⧥`	`⧥`	IDENTICAL TO AND SLANTED PARALLEL
⧫	`&lozf; &blacklozenge;`	`⧫`	`⧫`	BLACK LOZENGE
⧴	`&RuleDelayed;`	`⧴`	`⧴`	RULE-DELAYED
⧶	`&dsol;`	`⧶`	`⧶`	SOLIDUS WITH OVERBAR
⨀	`&xodot; &bigodot;`	`⨀`	`⨀`	N-ARY CIRCLED DOT OPERATOR
⨁	`&xoplus; &bigoplus;`	`⨁`	`⨁`	N-ARY CIRCLED PLUS OPERATOR
⨂	`&xotime; &bigotimes;`	`⨂`	`⨂`	N-ARY CIRCLED TIMES OPERATOR
⨄	`&xuplus; &biguplus;`	`⨄`	`⨄`	N-ARY UNION OPERATOR WITH PLUS
⨆	`&xsqcup; &bigsqcup;`	`⨆`	`⨆`	N-ARY SQUARE UNION OPERATOR
⨌	`&qint; &iiiint;`	`⨌`	`⨌`	QUADRUPLE INTEGRAL OPERATOR
⨍	`&fpartint;`	`⨍`	`⨍`	FINITE PART INTEGRAL
⨐	`&cirfnint;`	`⨐`	`⨐`	CIRCULATION FUNCTION
⨑	`&awint;`	`⨑`	`⨑`	ANTICLOCKWISE INTEGRATION
⨒	`&rppolint;`	`⨒`	`⨒`	LINE INTEGRATION WITH RECTANGULAR PATH AROUND POLE
⨓	`&scpolint;`	`⨓`	`⨓`	LINE INTEGRATION WITH SEMICIRCULAR PATH AROUND POLE
⨔	`&npolint;`	`⨔`	`⨔`	LINE INTEGRATION NOT INCLUDING THE POLE
⨕	`&pointint;`	`⨕`	`⨕`	INTEGRAL AROUND A POINT OPERATOR
⨖	`&quatint;`	`⨖`	`⨖`	QUATERNION INTEGRAL OPERATOR
⨗	`&intlarhk;`	`⨗`	`⨗`	INTEGRAL WITH LEFTWARDS ARROW WITH HOOK
⨢	`&pluscir;`	`⨢`	`⨢`	PLUS SIGN WITH SMALL CIRCLE ABOVE
⨣	`&plusacir;`	`⨣`	`⨣`	PLUS SIGN WITH CIRCUMFLEX ACCENT ABOVE
⨤	`&simplus;`	`⨤`	`⨤`	PLUS SIGN WITH TILDE ABOVE
⨥	`&plusdu;`	`⨥`	`⨥`	PLUS SIGN WITH DOT BELOW
⨦	`&plussim;`	`⨦`	`⨦`	PLUS SIGN WITH TILDE BELOW
⨧	`&plustwo;`	`⨧`	`⨧`	PLUS SIGN WITH SUBSCRIPT TWO
⨩	`&mcomma;`	`⨩`	`⨩`	MINUS SIGN WITH COMMA ABOVE
⨪	`&minusdu;`	`⨪`	`⨪`	MINUS SIGN WITH DOT BELOW
⨭	`&loplus;`	`⨭`	`⨭`	PLUS SIGN IN LEFT HALF CIRCLE
⨮	`&roplus;`	`⨮`	`⨮`	PLUS SIGN IN RIGHT HALF CIRCLE
⨯	`&Cross;`	`⨯`	`⨯`	VECTOR OR CROSS PRODUCT
⨰	`&timesd;`	`⨰`	`⨰`	MULTIPLICATION SIGN WITH DOT ABOVE
⨱	`&timesbar;`	`⨱`	`⨱`	MULTIPLICATION SIGN WITH UNDERBAR
⨳	`&smashp;`	`⨳`	`⨳`	SMASH PRODUCT
⨴	`&lotimes;`	`⨴`	`⨴`	MULTIPLICATION SIGN IN LEFT HALF CIRCLE
⨵	`&rotimes;`	`⨵`	`⨵`	MULTIPLICATION SIGN IN RIGHT HALF CIRCLE
⨶	`&otimesas;`	`⨶`	`⨶`	CIRCLED MULTIPLICATION SIGN WITH CIRCUMFLEX ACCENT
⨷	`&Otimes;`	`⨷`	`⨷`	MULTIPLICATION SIGN IN DOUBLE CIRCLE
⨸	`&odiv;`	`⨸`	`⨸`	CIRCLED DIVISION SIGN
⨹	`&triplus;`	`⨹`	`⨹`	PLUS SIGN IN TRIANGLE
⨺	`&triminus;`	`⨺`	`⨺`	MINUS SIGN IN TRIANGLE
⨻	`&tritime;`	`⨻`	`⨻`	MULTIPLICATION SIGN IN TRIANGLE
⨼	`&iprod; &intprod;`	`⨼`	`⨼`	INTERIOR PRODUCT
⨿	`&amalg;`	`⨿`	`⨿`	AMALGAMATION OR COPRODUCT
⩀	`&capdot;`	`⩀`	`⩀`	INTERSECTION WITH DOT
⩂	`&ncup;`	`⩂`	`⩂`	UNION WITH OVERBAR
⩃	`&ncap;`	`⩃`	`⩃`	INTERSECTION WITH OVERBAR
⩄	`&capand;`	`⩄`	`⩄`	INTERSECTION WITH LOGICAL AND
⩅	`&cupor;`	`⩅`	`⩅`	UNION WITH LOGICAL OR
⩆	`&cupcap;`	`⩆`	`⩆`	UNION ABOVE INTERSECTION
⩇	`&capcup;`	`⩇`	`⩇`	INTERSECTION ABOVE UNION
⩈	`&cupbrcap;`	`⩈`	`⩈`	UNION ABOVE BAR ABOVE INTERSECTION
⩉	`&capbrcup;`	`⩉`	`⩉`	INTERSECTION ABOVE BAR ABOVE UNION
⩊	`&cupcup;`	`⩊`	`⩊`	UNION BESIDE AND JOINED WITH UNION
⩋	`&capcap;`	`⩋`	`⩋`	INTERSECTION BESIDE AND JOINED WITH INTERSECTION
⩌	`&ccups;`	`⩌`	`⩌`	CLOSED UNION WITH SERIFS
⩍	`&ccaps;`	`⩍`	`⩍`	CLOSED INTERSECTION WITH SERIFS
⩐	`&ccupssm;`	`⩐`	`⩐`	CLOSED UNION WITH SERIFS AND SMASH PRODUCT
⩓	`&And;`	`⩓`	`⩓`	DOUBLE LOGICAL AND
⩔	`&Or;`	`⩔`	`⩔`	DOUBLE LOGICAL OR
⩕	`&andand;`	`⩕`	`⩕`	TWO INTERSECTING LOGICAL AND
⩖	`&oror;`	`⩖`	`⩖`	TWO INTERSECTING LOGICAL OR
⩗	`&orslope;`	`⩗`	`⩗`	SLOPING LARGE OR
⩘	`&andslope;`	`⩘`	`⩘`	SLOPING LARGE AND
⩚	`&andv;`	`⩚`	`⩚`	LOGICAL AND WITH MIDDLE STEM
⩛	`&orv;`	`⩛`	`⩛`	LOGICAL OR WITH MIDDLE STEM
⩜	`&andd;`	`⩜`	`⩜`	LOGICAL AND WITH HORIZONTAL DASH
⩝	`&ord;`	`⩝`	`⩝`	LOGICAL OR WITH HORIZONTAL DASH
⩟	`&wedbar;`	`⩟`	`⩟`	LOGICAL AND WITH UNDERBAR
⩦	`&sdote;`	`⩦`	`⩦`	EQUALS SIGN WITH DOT BELOW
⩪	`&simdot;`	`⩪`	`⩪`	TILDE OPERATOR WITH DOT ABOVE
⩭	`&congdot;`	`⩭`	`⩭`	CONGRUENT WITH DOT ABOVE
⩮	`&easter;`	`⩮`	`⩮`	EQUALS WITH ASTERISK
⩯	`&apacir;`	`⩯`	`⩯`	ALMOST EQUAL TO WITH CIRCUMFLEX ACCENT
⩰	`&apE;`	`⩰`	`⩰`	APPROXIMATELY EQUAL OR EQUAL TO
⩱	`&eplus;`	`⩱`	`⩱`	EQUALS SIGN ABOVE PLUS SIGN
⩲	`&pluse;`	`⩲`	`⩲`	PLUS SIGN ABOVE EQUALS SIGN
⩳	`&Esim;`	`⩳`	`⩳`	EQUALS SIGN ABOVE TILDE OPERATOR
⩴	`&Colone;`	`⩴`	`⩴`	DOUBLE COLON EQUAL
⩵	`&Equal;`	`⩵`	`⩵`	TWO CONSECUTIVE EQUALS SIGNS
⩷	`&eDDot; &ddotseq;`	`⩷`	`⩷`	EQUALS SIGN WITH TWO DOTS ABOVE AND TWO DOTS BELOW
⩸	`&equivDD;`	`⩸`	`⩸`	EQUIVALENT WITH FOUR DOTS ABOVE
⩹	`&ltcir;`	`⩹`	`⩹`	LESS-THAN WITH CIRCLE INSIDE
⩺	`&gtcir;`	`⩺`	`⩺`	GREATER-THAN WITH CIRCLE INSIDE
⩻	`&ltquest;`	`⩻`	`⩻`	LESS-THAN WITH QUESTION MARK ABOVE
⩼	`&gtquest;`	`⩼`	`⩼`	GREATER-THAN WITH QUESTION MARK ABOVE
⩽	`&les; &LessSlantEqual; &leqslant;`	`⩽`	`⩽`	LESS-THAN OR SLANTED EQUAL TO
⩾	`&ges; &GreaterSlantEqual; &geqslant;`	`⩾`	`⩾`	GREATER-THAN OR SLANTED EQUAL TO
⩿	`&lesdot;`	`⩿`	`⩿`	LESS-THAN OR SLANTED EQUAL TO WITH DOT INSIDE
⪀	`&gesdot;`	`⪀`	`⪀`	GREATER-THAN OR SLANTED EQUAL TO WITH DOT INSIDE
⪁	`&lesdoto;`	`⪁`	`⪁`	LESS-THAN OR SLANTED EQUAL TO WITH DOT ABOVE
⪂	`&gesdoto;`	`⪂`	`⪂`	GREATER-THAN OR SLANTED EQUAL TO WITH DOT ABOVE
⪃	`&lesdotor;`	`⪃`	`⪃`	LESS-THAN OR SLANTED EQUAL TO WITH DOT ABOVE RIGHT
⪄	`&gesdotol;`	`⪄`	`⪄`	GREATER-THAN OR SLANTED EQUAL TO WITH DOT ABOVE LEFT
⪅	`&lap; &lessapprox;`	`⪅`	`⪅`	LESS-THAN OR APPROXIMATE
⪆	`&gap; &gtrapprox;`	`⪆`	`⪆`	GREATER-THAN OR APPROXIMATE
⪇	`&lne; &lneq;`	`⪇`	`⪇`	LESS-THAN AND SINGLE-LINE NOT EQUAL TO
⪈	`&gne; &gneq;`	`⪈`	`⪈`	GREATER-THAN AND SINGLE-LINE NOT EQUAL TO
⪉	`&lnap; &lnapprox;`	`⪉`	`⪉`	LESS-THAN AND NOT APPROXIMATE
⪊	`&gnap; &gnapprox;`	`⪊`	`⪊`	GREATER-THAN AND NOT APPROXIMATE
⪋	`&lEg; &lesseqqgtr;`	`⪋`	`⪋`	LESS-THAN ABOVE DOUBLE-LINE EQUAL ABOVE GREATER-THAN
⪌	`&gEl; &gtreqqless;`	`⪌`	`⪌`	GREATER-THAN ABOVE DOUBLE-LINE EQUAL ABOVE LESS-THAN
⪍	`&lsime;`	`⪍`	`⪍`	LESS-THAN ABOVE SIMILAR OR EQUAL
⪎	`&gsime;`	`⪎`	`⪎`	GREATER-THAN ABOVE SIMILAR OR EQUAL
⪏	`&lsimg;`	`⪏`	`⪏`	LESS-THAN ABOVE SIMILAR ABOVE GREATER-THAN
⪐	`&gsiml;`	`⪐`	`⪐`	GREATER-THAN ABOVE SIMILAR ABOVE LESS-THAN
⪑	`&lgE;`	`⪑`	`⪑`	LESS-THAN ABOVE GREATER-THAN ABOVE DOUBLE-LINE EQUAL
⪒	`&glE;`	`⪒`	`⪒`	GREATER-THAN ABOVE LESS-THAN ABOVE DOUBLE-LINE EQUAL
⪓	`&lesges;`	`⪓`	`⪓`	LESS-THAN ABOVE SLANTED EQUAL ABOVE GREATER-THAN ABOVE SLANTED EQUAL
⪔	`&gesles;`	`⪔`	`⪔`	GREATER-THAN ABOVE SLANTED EQUAL ABOVE LESS-THAN ABOVE SLANTED EQUAL
⪕	`&els; &eqslantless;`	`⪕`	`⪕`	SLANTED EQUAL TO OR LESS-THAN
⪖	`&egs; &eqslantgtr;`	`⪖`	`⪖`	SLANTED EQUAL TO OR GREATER-THAN
⪗	`&elsdot;`	`⪗`	`⪗`	SLANTED EQUAL TO OR LESS-THAN WITH DOT INSIDE
⪘	`&egsdot;`	`⪘`	`⪘`	SLANTED EQUAL TO OR GREATER-THAN WITH DOT INSIDE
⪙	`&el;`	`⪙`	`⪙`	DOUBLE-LINE EQUAL TO OR LESS-THAN
⪚	`&eg;`	`⪚`	`⪚`	DOUBLE-LINE EQUAL TO OR GREATER-THAN
⪝	`&siml;`	`⪝`	`⪝`	SIMILAR OR LESS-THAN
⪞	`&simg;`	`⪞`	`⪞`	SIMILAR OR GREATER-THAN
⪟	`&simlE;`	`⪟`	`⪟`	SIMILAR ABOVE LESS-THAN ABOVE EQUALS SIGN
⪠	`&simgE;`	`⪠`	`⪠`	SIMILAR ABOVE GREATER-THAN ABOVE EQUALS SIGN
⪡	`&LessLess;`	`⪡`	`⪡`	DOUBLE NESTED LESS-THAN
⪢	`&GreaterGreater;`	`⪢`	`⪢`	DOUBLE NESTED GREATER-THAN
⪤	`&glj;`	`⪤`	`⪤`	GREATER-THAN OVERLAPPING LESS-THAN
⪥	`&gla;`	`⪥`	`⪥`	GREATER-THAN BESIDE LESS-THAN
⪦	`&ltcc;`	`⪦`	`⪦`	LESS-THAN CLOSED BY CURVE
⪧	`&gtcc;`	`⪧`	`⪧`	GREATER-THAN CLOSED BY CURVE
⪨	`&lescc;`	`⪨`	`⪨`	LESS-THAN CLOSED BY CURVE ABOVE SLANTED EQUAL
⪩	`&gescc;`	`⪩`	`⪩`	GREATER-THAN CLOSED BY CURVE ABOVE SLANTED EQUAL
⪪	`&smt;`	`⪪`	`⪪`	SMALLER THAN
⪫	`&lat;`	`⪫`	`⪫`	LARGER THAN
⪬	`&smte;`	`⪬`	`⪬`	SMALLER THAN OR EQUAL TO
⪭	`&late;`	`⪭`	`⪭`	LARGER THAN OR EQUAL TO
⪮	`&bumpE;`	`⪮`	`⪮`	EQUALS SIGN WITH BUMPY ABOVE
⪯	`&pre; &preceq; &PrecedesEqual;`	`⪯`	`⪯`	PRECEDES ABOVE SINGLE-LINE EQUALS SIGN
⪰	`&sce; &succeq; &SucceedsEqual;`	`⪰`	`⪰`	SUCCEEDS ABOVE SINGLE-LINE EQUALS SIGN
⪳	`&prE;`	`⪳`	`⪳`	PRECEDES ABOVE EQUALS SIGN
⪴	`&scE;`	`⪴`	`⪴`	SUCCEEDS ABOVE EQUALS SIGN
⪵	`&prnE; &precneqq;`	`⪵`	`⪵`	PRECEDES ABOVE NOT EQUAL TO
⪶	`&scnE; &succneqq;`	`⪶`	`⪶`	SUCCEEDS ABOVE NOT EQUAL TO
⪷	`&prap; &precapprox;`	`⪷`	`⪷`	PRECEDES ABOVE ALMOST EQUAL TO
⪸	`&scap; &succapprox;`	`⪸`	`⪸`	SUCCEEDS ABOVE ALMOST EQUAL TO
⪹	`&prnap; &precnapprox;`	`⪹`	`⪹`	PRECEDES ABOVE NOT ALMOST EQUAL TO
⪺	`&scnap; &succnapprox;`	`⪺`	`⪺`	SUCCEEDS ABOVE NOT ALMOST EQUAL TO
⪻	`&Pr;`	`⪻`	`⪻`	DOUBLE PRECEDES
⪼	`&Sc;`	`⪼`	`⪼`	DOUBLE SUCCEEDS
⪽	`&subdot;`	`⪽`	`⪽`	SUBSET WITH DOT
⪾	`&supdot;`	`⪾`	`⪾`	SUPERSET WITH DOT
⪿	`&subplus;`	`⪿`	`⪿`	SUBSET WITH PLUS SIGN BELOW
⫀	`&supplus;`	`⫀`	`⫀`	SUPERSET WITH PLUS SIGN BELOW
⫁	`&submult;`	`⫁`	`⫁`	SUBSET WITH MULTIPLICATION SIGN BELOW
⫂	`&supmult;`	`⫂`	`⫂`	SUPERSET WITH MULTIPLICATION SIGN BELOW
⫃	`&subedot;`	`⫃`	`⫃`	SUBSET OF OR EQUAL TO WITH DOT ABOVE
⫄	`&supedot;`	`⫄`	`⫄`	SUPERSET OF OR EQUAL TO WITH DOT ABOVE
⫅	`&subE; &subseteqq;`	`⫅`	`⫅`	SUBSET OF ABOVE EQUALS SIGN
⫆	`&supE; &supseteqq;`	`⫆`	`⫆`	SUPERSET OF ABOVE EQUALS SIGN
⫇	`&subsim;`	`⫇`	`⫇`	SUBSET OF ABOVE TILDE OPERATOR
⫈	`&supsim;`	`⫈`	`⫈`	SUPERSET OF ABOVE TILDE OPERATOR
⫋	`&subnE; &subsetneqq;`	`⫋`	`⫋`	SUBSET OF ABOVE NOT EQUAL TO
⫌	`&supnE; &supsetneqq;`	`⫌`	`⫌`	SUPERSET OF ABOVE NOT EQUAL TO
⫏	`&csub;`	`⫏`	`⫏`	CLOSED SUBSET
⫐	`&csup;`	`⫐`	`⫐`	CLOSED SUPERSET
⫑	`&csube;`	`⫑`	`⫑`	CLOSED SUBSET OR EQUAL TO
⫒	`&csupe;`	`⫒`	`⫒`	CLOSED SUPERSET OR EQUAL TO
⫓	`&subsup;`	`⫓`	`⫓`	SUBSET ABOVE SUPERSET
⫔	`&supsub;`	`⫔`	`⫔`	SUPERSET ABOVE SUBSET
⫕	`&subsub;`	`⫕`	`⫕`	SUBSET ABOVE SUBSET
⫖	`&supsup;`	`⫖`	`⫖`	SUPERSET ABOVE SUPERSET
⫗	`&suphsub;`	`⫗`	`⫗`	SUPERSET BESIDE SUBSET
⫘	`&supdsub;`	`⫘`	`⫘`	SUPERSET BESIDE AND JOINED BY DASH WITH SUBSET
⫙	`&forkv;`	`⫙`	`⫙`	ELEMENT OF OPENING DOWNWARDS
⫚	`&topfork;`	`⫚`	`⫚`	PITCHFORK WITH TEE TOP
⫛	`&mlcp;`	`⫛`	`⫛`	TRANSVERSAL INTERSECTION
⫤	`&Dashv; &DoubleLeftTee;`	`⫤`	`⫤`	VERTICAL BAR DOUBLE LEFT TURNSTILE
⫦	`&Vdashl;`	`⫦`	`⫦`	LONG DASH FROM LEFT MEMBER OF DOUBLE VERTICAL
⫧	`&Barv;`	`⫧`	`⫧`	SHORT DOWN TACK WITH OVERBAR
⫨	`&vBar;`	`⫨`	`⫨`	SHORT UP TACK WITH UNDERBAR
⫩	`&vBarv;`	`⫩`	`⫩`	SHORT UP TACK ABOVE SHORT DOWN TACK
⫫	`&Vbar;`	`⫫`	`⫫`	DOUBLE UP TACK
⫬	`&Not;`	`⫬`	`⫬`	DOUBLE STROKE NOT SIGN
⫭	`&bNot;`	`⫭`	`⫭`	REVERSED DOUBLE STROKE NOT SIGN
⫮	`&rnmid;`	`⫮`	`⫮`	DOES NOT DIVIDE WITH REVERSED NEGATION SLASH
⫯	`&cirmid;`	`⫯`	`⫯`	VERTICAL LINE WITH CIRCLE ABOVE
⫰	`&midcir;`	`⫰`	`⫰`	VERTICAL LINE WITH CIRCLE BELOW
⫱	`&topcir;`	`⫱`	`⫱`	DOWN TACK WITH CIRCLE BELOW
⫲	`&nhpar;`	`⫲`	`⫲`	PARALLEL WITH HORIZONTAL STROKE
⫳	`&parsim;`	`⫳`	`⫳`	PARALLEL WITH TILDE OPERATOR
⫽	`&parsl;`	`⫽`	`⫽`	DOUBLE SOLIDUS OPERATOR
ﬀ	`&fflig;`	`ﬀ`	`ﬀ`	LATIN SMALL LIGATURE FF
ﬁ	`&filig;`	`ﬁ`	`ﬁ`	LATIN SMALL LIGATURE FI
ﬂ	`&fllig;`	`ﬂ`	`ﬂ`	LATIN SMALL LIGATURE FL
ﬃ	`&ffilig;`	`ﬃ`	`ﬃ`	LATIN SMALL LIGATURE FFI
ﬄ	`&ffllig;`	`ﬄ`	`ﬄ`	LATIN SMALL LIGATURE FFL

이미지 마우스 hover시 좌우 기울이기

2017-10-27T20:52:44+09:00

아래의 이미지와 같이 마우스 hover시 좌우로 기울이는 코드

img { border:1px solid #D4D4D4; padding:5px; }
img:hover{ border:1px solid #666666; filter:alpha(opacity=70); opacity:.7; box-shadow:0 0 10px rgba(0,0,0,.2);filter:alpha(opacity=100);opacity:1; -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg);transition:opacity .3s;-webkit-transition:opacity .3s;transition:opacity .3s; }

- box-shadow:0 0 10px -- 그림자의 확산

- -ms-transform:rotate(5deg);-webkit-transform:rotate(5deg);transform:rotate(5deg) -- 기울기수치

모바일웹에서 스마트폰으로 전화바로연결 코드

2017-06-16T17:10:37+09:00

모바일웹(스마트폰)에서 자동으로 전화 걸기 태그 는 아주 간단합니다

아래 코드만 입력하면 끝입니다.

스마트폰에서 터치하면 자동으로 등록된 전화번호가 키패드로 바로 보이고

거기서 통화 버튼만 누르면 된다.

문자를 보내고 싶다면

<a href="sms:010-1234-5678">SMS전송 거는 링크</a>

반응형 CSS 테이블

2017-06-13T20:49:52+09:00

이용 요금 안내

준성수기 : 7/1~7/14, 8/16~8/30
성 수 기 : 7/15~8/15

객실명	평형	입실인원 기준/최대	비수기	준성수기 7/1~7/14 8/16~8/30	성수기 7/15~8/15
101	20평 67m²	6인/10인	주중:20만 주말:23만	주중:23만 주말:26만	30만
102	10평 34m²	2인/4인	주중:7만 주말:9만	주중:9만 주말:14만	16만
103	12평 40m²	2인/5인	주중:8만 주말:10만	주중:10만 주말:15만	17만
104	12평 40m²	2인/5인	주중:8만 주말:10만	주중:10만 주말:15만	17만
105	15평 50m²	2인/6인	주중:10만 주말:12만	주중:12만 주말:16만	18만

- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.

상단 테이블과 같이 PC에서는 위와 같이 보이고(위의 테이블도 스마트폰에서는 아래와 같이 보임)

스마트폰에서는 아래와 같이 반응형으로 보이는 테이블 코드입니다.

.head { background-color: #327a81; color: white; font-size: 1.5em; padding: 1rem; text-align: center; text-transform: uppercase;}

.head1 { display: none; }

.price1 img { border-radius: 50%; height: 60px; width: 60px;}

.table-users { background-color: #91ced4; border: 1px solid #327a81; border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); max-width: calc(100% - 2em); margin: 1em auto; overflow: hidden; width: 100%;}

.price1 { width: 100%;}

.price1 td, .price1 th { color: #2b686e; padding: 10px;}

.price1 td, .price1 th { text-align: center; vertical-align: middle;}

.price1 td:last-child { font-size: 0.95em; line-height: 1.4;}

.price1 th { background-color: #ceeaec; font-size:13px;}

.price1 tr:nth-child(2n) { background-color: white;}

.price1 tr:nth-child(2n+1) { background-color: #edf7f8;}

.bottom { background-color: #327a81; color: white; font-size: 12px; padding: 5px; text-align: left; text-transform: uppercase;}

@media screen and (max-width: 479px) {

.head1 { display: block; }

.head1 { background-color: #327a81; color: white; font-size: 1em; padding: 0 0 5px 70px; text-align: left; text-transform: uppercase;}

.price1, tr, td { display: block; }

.price1 td:first-child { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.price1 td:not(:first-child) { clear: both; margin-left: 100px; padding: 4px 20px 4px 90px; position: relative; text-align: left; }

.price1 td:not(:first-child):before { color: #91ced4; content: ''; display: block; left: 0; position: absolute; }

.price1 td:last-child { text-align: left; width:300px;}

.price1 td:nth-child(2):before { content: '평형:'; }

.price1 td:nth-child(3):before { content: '입실인원:'; }

.price1 td:nth-child(4):before { content: '비수기:'; }

.price1 td:nth-child(5):before { content: '준성수기:'; }

.price1 td:nth-child(6):before { content: '성수기:'; }

.price1 tr { padding: 10px 0; position: relative; }

.price1 tr:first-child { display: none; }}

</style>

성 수 기 : 7/15~8/15</div>

<tbody>

<tr>

기준/최대</th>

7/1~7/14<br />

8/16~8/30</th>

7/15~8/15</th>

</tr>

<tr>

67m<sup>2</sup></td>

주말:23만</td>

주말:26만</td>

</tr>

<tr>

34m<sup>2</sup></td>

주말:9만</td>

주말:14만</td>

</tr>

<tr>

40m<sup>2</sup></td>

주말:10만</td>

주말:15만</td>

</tr>

<tr>

40m<sup>2</sup></td>

주말:10만</td>

주말:15만</td>

</tr>

<tr>

50m<sup>2</sup></td>

주말:12만</td>

주말:16만</td>

</tr>

</tbody>

</table>

<div class="bottom">- 기준인원 초과시 성인(10,000원), 아동유아(10,000원)이 추가됩니다.</div>

</div>

실시간 환율조회 html

2017-04-18T20:54:44+09:00

환율위젯

https://kr.fxexchangerate.com/exchange-rates-widget.html

미국 달러

환율변환기

https://kr.fxexchangerate.com/currency-converter-widget.html

통화 변환기

아래는 베트남동을 참가한 위젯들

<div style="font-size:14px; font-family: sans-serif,Arial, Helvetica;width:100%; line-height:24px;border:1px solid #2D6AB4;background-color:#FFFFFF;margin:0px auto;"><div style="background-color:#2D6AB4;height:2.2rem;color:#FFFFFF; font-weight:bold;text-align:left;padding:6px 0 0 6px; max-width:100%;"><i style="background-size: contain;background-position: 50%;background-repeat: no-repeat; position: relative;display: inline-block;width: 1.33333333em;line-height: 1em;
padding:0 8px 0 0px;font-size:18px;background-image:url(https://w.fxexchangerate.com/static/flags/usd.webp);"> </i><a rel="nofollow" style="color:#FFFFFF;padding-left:5px;text-decoration:none;" href="https://kr.fxexchangerate.com/usd/">미국 달러</a></div><script type="text/javascript" src="https://w.fxexchangerate.com/converter.php?fm=USD&ft=KRW,VND,EUR,JPY,CNY,&lg=kr&am=1&ty=2"></script></div>
</br>
<div style="width:100%;height:auto;border:1px solid #2D6AB4;text-align:center;font-size:14px;font-family:sans-serif,Arial,Helvetica;border-top-right-radius:5px; border-top-left-radius:5px;background-color:#FFFFFF;"><div style="width:100%; height:2.2rem;padding:5px 0px 0px 0px;background-color:#2D6AB4;font-weight:bold;"><a rel="nofollow" style="color:#FFFFFF;text-decoration:none;" href="https://kr.fxexchangerate.com/">통화 변환기</a></div><script type="text/javascript" src="https://w.fxexchangerate.com/converter.php?fm=KRW&ft=VND&lg=kr&am=1&ty=1"></script></div>

HTML 만으로 마우스오버 구현하는 방법

2017-01-07T12:21:49+09:00

[URL링크시]

<a href="#" onMouseOver="this.innerHTML='마우스오버시 변경되는 텍스트'" onMouseOut="this.innerHTML='마우스가 범위를 벗어날시 변경되는 텍스트'">기본적으로 표시되는 텍스트</a>

a href = "#": 누를시 이동되는 주소를 작성하면 됩니다.

문하우스

[이미지 링크시]

와 같은 블록 요소를 가운데 정렬하는 방법

2016-12-26T13:53:10+09:00

1. div안에 div가운데 정렬하는 방법

</div>

바깥 쪽 div에는 text-align과 margin값을 준다.

안에 있는 div의 display의 기본값은 block으로 inline-block으로 바꿔준다.

2. div안에 텍스트 세로 가운데 정렬

텍스트 가운데 정렬은 text-align:center;로 해주면 되지만, 텍스트 세로정렬은 div에 display:tabel-cell과 vertical-align:middle; 해줘야한다.

가운데

</div>

1. margin: 0 auto를 이용한 가운데 정렬

일반 텍스트의 경우 text-align:center;를 사용하면 정렬할 수 있지만,

<div>, <p>, <blockquote> 등의 block 요소에는 text-align의 영향을 받지 않습니다.

이럴 경우 해당 요소에 width를 지정해주고 margin:0 auto;를 넣어주면 쉽게 가운데 정렬할 수 있습니다.

예제 : http://jsfiddle.net/SMaker/7d7r0cnx/

2. display:inline-block을 이용한 가운데 정렬

인라인 블록 요소가 text-align의 영향을 받는 것을 이용하면, 블록 요소를 가운데 정렬할 수 있습니다.

가운데 정렬할 요소에 display:inline-block을 주고 해당 요소를 블록 요소로 감싼 뒤에, 해당 블록 요소에 text-align:center을 주면 됩니다.

예제 : http://jsfiddle.net/SMaker/o6hbggjb/

float 속성을 가진 div 100% 설정하는 방법

2016-04-21T01:02:59+09:00

css작업하다보면 간혹 곤욕스러운 경우가 많습니다.

대표적인게 float 속성인데요..

div, p 태그는 대표적인 block속성을 가지고 있는데요..

이게 float을 만나면 inlin-block으로 속성이 변경됩니다.

만약 아래 그림처럼 레이아웃을 만들려고 하는데...box2는 100%를 유지 하고 싶을때 어떻게 하실건가요?

그냥 간단하게 width:100%주면 되잖아요...하고 이렇게 말씀하실분은 직접 테스트를 해보지 않으신분이세요..

box1과 box2가 float:left 속성을 가지고 있는 상태에서 box2에 100%주면 box2는 box1 하단으로 배치되는 결과가 나타납니다.

위 그림처럼 레이아웃을 만들고 box2는 가변적인 상태, 즉 가로 크기 100%를 만들고자 한다면 스타일은 아래처럼 작성하면 됩니다.

.box1 {float:left;width:200px;}

.box2 {margin-left:200px}

box1에만 float속성을 주고 box2는 마진값만 적용해서 왼쪽에 딱 달라붙으면서도 100% 유지할 수 있게 해줍니다.

배경이미지 슬라이드 스크립트

2016-04-19T22:43:25+09:00

document.write('<st'+'yle>');

document.write('body{ background-attachment:fixed; background-repeat: no-repeat;');//배경이미지고정/반복않음

document.write('background-position: 0 0;}'); // 배경이미지 위치

document.write('</st'+'yle>');

var cnj_bg=new Array()

cnj_bg[0]="지정url/img_01.jpg"

cnj_bg[1]="지정url/img_02.jpg"

cnj_bg[2]="지정url/img_03.jpg"

cnj_bg[3]="지정url/img_04.jpg"

cnj_bg[4]="지정url/img_05.jpg"

cnj_bg[5]="지정url/img_06.jpg"

cnj_bg[6]="지정url/img_07.jpg"

cnj_bg[7]="지정url/img_08.jpg"

cnj_bg[8]="지정url/img_09.jpg"

cnj_bg[9]="지정url/img_10.jpg"

var speed=3000 // 3초

var processed=new Array()

for (i=0;i<cnj_bg.length;i++){

processed[i]=new Image()

processed[i].src=cnj_bg[i]

}

var inc=-1

function slideback(){

if (inc<cnj_bg.length-1)

inc++

else

inc=0

document.body.background=processed[inc].src

}

if (document.all||document.getElementById)

window.onload=new Function('setInterval("slideback()",speed)')

</script>

<center>Welcome</center>

문제가 첫배경이 백지로 나옵니다.

CSS3 border-radius 이해하기

2016-04-07T18:02:54+09:00

border-radius가 출현하면서 웹 디자이너들은 정말 열광했습니다 .

이전까지는 둥근모서리를 만들기 위해 엄청난 편법과 기법들이 난무했습니다.

이미지를 이용해서 둥근 모서리 만들기, 단순한 CSS만으로 둥근 모서리 만들기 등 둥근 모서리 박스를 만들기 위한 방법은 수 페이지에 걸쳐 설명한 책도 있었습니다.

하지만 CSS3가 출현하면서 간단한 코드만 입력해도 원하는 완벽한 둥근 모서리를 지닌 박스를 만들어 낼 수 있게 되었습니다. 기본적인 속성은 다음과 같이 지정되며 속성값은 보통 px, %, em으로 지정 합니다.

border-radius: 속성값;

border-radius 또한 방향성을 가지고 있기 때문에 다음과 같이 각 방향을 지정할 수 있습니다.

border-top-left-radius: 속성값;

border-top-right-radius: 속성 값;

border-bottom-left-radius: 속성 값;

border-bottom-right-radius: 속성 값;

IE를 제외한 FF4 또는 사파리5 등 최신버전의 브라우저가 아닐 때는 해당 브라우저에 맞는 스타일을 적용해야 합니다.

▶ 모질라 계열의 브라우저(파이어폭스)

-moz-border-radius: 속성값;

▶ webkit을 이용한 브라우저(사파리, 구글 크롬)

-webkit-border-radius: 속성값

▶ 모질라 계열의 방향성 지정 방식(웹 표준과는 조금 다릅니다)

-moz-border-radius-topleft: 속성값;

-moz-border-radius-topright: 속성값;

-moz-border-radius-bottomleft: 속성값;

-moz-border-radius-bottomright: 속성값;

▶ webkit 계열의 방향성 지정 방식(웹 표준과 같으나 앞쪽에 -webkit-을 붙여주는 차이)

-webkit-border-top-left-radius: 속성값;

-webkit-border-top-right-radius: 속성 값;

-webkit-border-bottom-left-radius: 속성 값;

-webkit-border-bottom-right-radius: 속성 값;

좀 더 이해하기 쉽게 그림으로 표현하면 <그림>와 같다.

그림

좌우측 각 4개의 숫자값들은 생략이 가능한데,

숫자값이 하나만 주어지면, 이는 모서리 4곳의 radius 값이 모두 동일함을 의미한다.

IE 버젼별로 css 따로 적용하는 방법

2011-02-17T20:41:11+09:00

웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. 하지만 이 모든것의 배경에는 제작과 사용을 간단하게 만든 플랫폼이 있고, 이것이 바로 웹브라우저이다. 하지만 이런 개방성 만큼 여러 종류의 브라우저가 발전하면서 호환성문제가 대두되었고 이는 다시 개발자로 하여금 양날의 칼로 머리를 쥐어짜게 만들었다.
크게 보면 1. 서로 다른 종류의 브라우저와의 호환성 2. 같은 브라우저의 버전별 호환성 으로 나눌 수 있는데 이 두가지 모두에 있어 최고의 골치는 두말할것 없이 Internet Explorer, IE 다. 특히 10살이나 먹은 IE6은 웹개발자에게는 “악마” 같은 존재이다.

이런 IE에서 버전별로 다르게 보여지는 문제를 해결하기 위한 가장 효율적인 방법은 문제가 있는 부분만 브라우저에 맞게 수정하는 방법이다.
즉, 페이지를 표준에 맞게 작성한 후 브라우저별로 테스트 한 후 특정 브라우저에서 문제가 발생하면 그 브라우저에서만 별도로 제작해둔 css를 읽어 재정의되어 수정하도록 하는 방법이다. 아래는 IE 특정 버전별로 파일을 로딩하는 방법이다.

모든 IE에서만 적용하려면

 <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]-->

IE6 버전에서만 읽어들이도록

 <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6-only.css" /> <![endif]-->

IE7 버전에서만 읽어들이도록

 <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7-only.css" /> <![endif]-->

조금 더 정교하게.

IE7 버전보다 낮은 버전에서만 (7버전 제외)

 <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than.css" /> <![endif]-->

IE7 버전보다 낮은 버전에서만 (7버전 포함)

 <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" /> <![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 제외)

 <!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than.css" /> <![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 포함)

 <!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" /> <![endif]-->

기타 다음과 같은 문구도 가능하다.

IE가 아닌 다른 브라우저만

 <!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-sucks.css" /> <![endif]-->

IE6.5 버전에서만 읽어들이도록

 <!--[if IE 6.5000]> <link rel="stylesheet" type="text/css" href="ie6.5-only.css" /> <![endif]-->

gt 는 greater than , gte 는 greater than or equal, lt 는 less than, lte 는 less than or equal 의 약자이다. 다음과 같이 스크립트도 삽입할 수 있다.

 <!--[if IE 6]> <script type="text/javascript"> alert("아직 IE6을 쓰는거야?"); </script> <![endif]-->

이정도면 대충 큼지막한 것들은 해결할 수 있으리라.

출처 http://blog.naver.com/fbwoejr123/50102957276

[다른 방법]

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* Enter your style code */
}

/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
/* Enter your style code */
}

/* IE6,7 */
@media screen\9 {
/* Enter your style code */
}

/* IE8 */
@media \0screen {
/* Enter your style code */
}

/* IE6,7,8 */
@media \0screen\,screen\9 {
/* Enter your style code */
}

/* IE9,10 */
@media screen and (min-width:0\0){
/* Enter your style code */
}

IE10미만은 이제 버려야한다고 생각한다. IE 9 공식버전 정식 출시일이 2011년 3월이다. IE 10 플랫폼 프리뷰를 2011년 4월에 출시했으니 여하튼 IE는 없어졌으면 좋겠다. 참고로 IE9이하는 좀 큰 기업의 사이트마저 지원하지 않는 곳이 많다. 따라서 특이사항이 없다면 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 해당 코드로 IE 10+만 해줘도 충분할 것 같다.

마퀴태그의 기본

2010-02-06T09:56:18+09:00

- 기본속성들 설명 -

marquee ☜ 마퀴태그의 기본입니다 앞에 꼭 넣어야 해요

scrollamount ☜ 빠르기지정.(숫자가 높을수록 절라빨라짐)

scrolldelay ☜ 흔들리는 속성

direction ☜ 방향설정(left,right,up,down)

behavior=alternate ☜ 좌우,상하왕복

loop ☜ 숫자지정(예:loop="2" 를 했을경우 두번 실행됨)

width ☜ 가로 왕복 지정

height ☜ 세로 왕복 지정

- 글씨가 좌우로 왕복 -
<marquee behavior=alternate><font size=4>글자가 좌우로 왕복 ^^*</marquee>

글자가 좌우로 왕복 ^^*

- 글씨가 왼쪽으로 -
<marquee direction="left"><font size=4>이건 왼쪽이네요 ^^*</marquee>
이건 왼쪽이네요 ^^*

- 글씨가 오른쪽 으로 -
<marquee direction="right"><font size=4>이건 오른쪽이구요 </marquee>
이건 오른쪽이구요

- 글씨가 위로 -
<marquee direction="up"><font size=4>이번에는 위로..?</marquee>
이번에는 위로..?

- 글씨가 아래로 -
<marquee direction="down"><font size=4>다운이당ㅡㅡ+</marquee>
다운이당ㅡㅡ+

- 글씨가 흔들림 -
{<marquee behavior=alternate width=30><font size=4>도 리</marquee>} ☜ 도리도리
( 도 리)

- 글씨가 느리게 -
<marquee direction="RIGHT" scrollamount="1"><font size=5> 천천히__@/``</marquee> ☜ 달팽이 기어 가네요.
천천히__@/``

- 글씨가 빨리 -
<marquee scrollamount=30><font size=4>@--- 달팽아 나 잡아봐라~빠르징~</marquee>
@--- 달팽아 나 잡아봐라~빠르징~

- 글씨가 빤짝 -
<marquee width=500 scrollamount=300><font size=5> 짜 ★~ ☆~ ★~ 짠</marquee>
짜 ★~ ☆~ ★~ 짠

- 칼라 바탕에 글씨 -
<marquee bgcolor=red><font color=ffffff>하이 방가워요~~~</font></marquee>
하이 방가워요~~~

<marquee bgcolor=blue><font color=ffffcc>하이 방가워요~~~</font></marquee>
하이 방가워요~~~

<marquee bgcolor=000000><font color=00ff00 size=4>하이 방가워요 size=4 추가 했네요~~~</font></marquee>
하이 방가워요 size=5 추가 했네요~~~

- 좌측과 우측 응용 실행소스 -
<MARQUEE direction=right><font size=4>글씨가 중간에서</MARQUEE>
<MARQUEE direction=reft><font size=4>만날수 있겠지요</MARQUEE>
글씨가 중간에서
만날수 있겠지요

<marquee direction=up><font size=4>안♡(ul)녕♡(ul)하♡(ul)세♡(ul)요♡(ul)반♡(ul)가♡(ul)워~♡(ul)요♡</MARQUEE>
안♡

녕♡

하♡

세♡

요♡

반♡

가♡

워~♡

요♡

<marquee><font size=4 color=red>사(br)랑(br)해(br)요</font></marquee>
사
랑
해
요

<marquee behavior=alternate direction=up height=50><font color=green size=4> 안녕하세요~ </font></marquee>
안녕하세요~

<marquee behavior=alternate width=150><font color=red size=4> 흔적 남기기..</font></marquee>
흔적 남기기..

<marquee direction=down height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1>어서오세요 방가워요</span></marquee><marquee direction=up height=90><Span style="COLOR:White;FILTER:shadow;height:10px"><h1<어서오세요 방가워요~</span></marquee<

어서오세요 방가워요. 야간비의 작은쉼터 랍니다.

태그공부홈이랍니다. 어서오세요 방가워요~

<marquee direction=up behavior=alternate><marquee behavior=alternate><h2>아이쿠야 어지러워라 조심하세요~ ^^*</h2></marquee>

아이쿠야 어지러워라 조심하세요~ ^^*

출처 : http://blog.paran.com/ggkorea3030/35840087

이미지 바꾸기 소스

2009-06-06T20:10:25+09:00

<table align="center" cellpadding="0" cellspacing="0" width="500">
<tr>
<td>
<SCRIPT>
// "이미지는 바꾸어서 쓰세요"
var slideshow=new Array(
"http://pds12.egloos.com/pds/200906/06/18/a0102518_4a29fe104c7e8.jpg|     이미지설명글",
"http://pds13.egloos.com/pds/200906/06/18/a0102518_4a29fe11a3192.jpg|     이미지설명글2",
"http://pds12.egloos.com/pds/200906/06/18/a0102518_4a29fe13ee7d1.jpg|     이미지설명글3",
"http://pds13.egloos.com/pds/200906/06/18/a0102518_4a29fe1539bad.jpg|     이미지설명글4")

var fntfamily="고딕체"

// "아래 2는 글씨 크기"
var fntsize=2

// "아래 black는 글씨 색상"
var fntcolor="white"

// "아래 #FFE4B5는 설명글 넣는곳 바탕색"
var bgrndcolor="#000000"

// "아래 500은 이미지의 가로크기"
var imagewidth=500

// "아래 200은 이미지 세로크기"
var imageheight=332

// "아래 5는 이미지 변환 속도"
var standstill=3

var imgstop=0
var imgsleft=0
var mestop=imageheight
var mesleft=0
var firstslide=true
var starttime
var nowtime
var imgurl=new Array()
var message=new Array()
var imgurlandmessagearray=new Array()
var imgurlandmessage
var imgpreload=new Array()
var playertop=0
var playerleft=0
var i_imgs=0
var i_loop=0
var i_preloadloop=0
var i_transition=0
var timerrotate=false
var timercheck=false
var contentimg
var contentmes
var slideshowlength=slideshow.length

var topdivheight=imageheight+10

var ns6=document.getElementById&&!document.all?1:0
var standstill=standstill*1000

function init() {
    firstslide=true
    i_imgs=0
    i_loop=0
    i_preloadloop=randommaker(slideshowlength)
    if (timerrotate) {
        clearTimeout(timerrotate)
        clearTimeout(timercheck)
    }
    imgurl=new Array
    message=new Array
    for (i=0;i<=slideshow.length-1;i++) {
        imgurlandmessage=slideshow[i].split("|")
        imgurl[i]=imgurlandmessage[0]
        message[i]=imgurlandmessage[1]
    }

    if (document.all) {
        imgs.innerHTML=""
        mes.innerHTML=""
            document.all.imgs.style.posTop=imgstop
        document.all.imgs.style.posLeft=imgsleft
                document.all.mes.style.posTop=mestop
        document.all.mes.style.posLeft=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
    if (ns6) {
        document.getElementById('imgs').innerHTML=""
        document.getElementById('mes').innerHTML=""
        document.getElementById('imgs').style.top=imgstop
        document.getElementById('imgs').style.left=imgsleft
        document.getElementById('mes').style.top=mestop
        document.getElementById('mes').style.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
        if (document.layers) {
        document.topdiv.document.imgs.document.write("")
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write("")
        document.topdiv.document.mes.document.close()
            document.topdiv.document.imgs.top=imgstop
        document.topdiv.document.imgs.left=imgsleft
                document.topdiv.document.mes.top=mestop
        document.topdiv.document.mes.left=mesleft
        checkpreloadtime()
        preloadimage()
        checkifloaded()
    }
}

function checkifloaded() {
   if (imgpreload.complete) {
        nowtime=new Date()
        nowtime=nowtime.getTime()
        nowtime=nowtime-starttime
        var interval=standstill-nowtime
        if (interval<=0 ) {
            interval=1
        }
        if (firstslide) {
            interval=1
            firstslide=false
        }
        if (i_preloadloop==i_loop) {
            interval=1
        }
        timerrotate=setTimeout("rotateimages()", interval)
   }
   else {
        timercheck=setTimeout("checkifloaded()", 100)
   }
}

function preloadimage() {
imgpreload=new Image()
imgpreload.src=imgurl[i_preloadloop]
}

function rotateimages() {
    i_loop=i_preloadloop
    i_preloadloop=randommaker()
    checkpreloadtime()
    preloadimage()
    getcontent()
    if (document.all) {
        imgs.filters[i_transition].apply()
        imgs.innerHTML=contentimg
        imgs.filters[i_transition].play()
        i_transition++
        if (i_transition>21) {i_transition=0}
        mes.innerHTML=contentmes
    }
    if (ns6) {
        document.getElementById('imgs').innerHTML=contentimg
        document.getElementById('mes').innerHTML=contentmes
    }
    if (document.layers) {
        document.topdiv.document.imgs.document.write(contentimg)
        document.topdiv.document.imgs.document.close()
        document.topdiv.document.mes.document.write(contentmes)
        document.topdiv.document.mes.document.close()
    }
    i_loop++
    checkifloaded()
}

function randommaker() {
        rand=Math.floor(slideshowlength*Math.random())
    return rand

}

function getcontent() {
contentimg="<img src='"+imgurl[i_loop]+"'>"
contentmes="<table cellpadding=2 cellspacing=0 border=0 bgcolor="+bgrndcolor+" width="+imagewidth+"><tr><td><font size="+fntsize+" color="+fntcolor+" face="+fntfamily+">"+message[i_loop]+"</font></td></tr></table>"
}

if (document.all) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;filter: revealTrans(Transition=1, Duration=2) revealTrans(Transition=2, Duration=2) revealTrans(Transition=3, Duration=2) revealTrans(Transition=4, Duration=2) revealTrans(Transition=5, Duration=1) revealTrans(Transition=6, Duration=2) revealTrans(Transition=7, Duration=2) revealTrans(Transition=8, Duration=1) revealTrans(Transition=9, Duration=2) revealTrans(Transition=10, Duration=1) revealTrans(Transition=11, Duration=2) revealTrans(Transition=12, Duration=2) revealTrans(Transition=13, Duration=1) revealTrans(Transition=14, Duration=2) revealTrans(Transition=15, Duration=2) revealTrans(Transition=16 Duration=1) revealTrans(Transition=17, Duration=2) revealTrans(Transition=18, Duration=2) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=2) revealTrans(Transition=22, Duration=2)"> </div>')
    document.write('</div>')
}

if (ns6) {
    document.write('<div id="topdiv" style="position:relative;width:'+imagewidth+'px;height:'+topdivheight+'px">')
    document.write('<div id="mes" style="position:absolute;"> </div>')
    document.write('<div id="imgs" style="position:absolute;"> </div>')
    document.write('</div>')
}

if (document.layers) {
    document.write('<ilayer name="topdiv" width='+imagewidth+' height='+topdivheight+'>')
    document.write('<layer name="mes"> </layer>')
    document.write('<layer name="imgs"> </layer>')
    document.write('</ilayer>')
}

function checkpreloadtime() {

     starttime= new Date()
        starttime=starttime.getTime()
}

function checktime() {

}

window.onresize=new Function("window.location.reload()");
window.onload=init

</SCRIPT>
</td>
</tr>
</table>

익스6에서만 작동되게하는 css구문

2009-02-19T15:57:06+09:00

<![endif]-->
위의 문구는 ie6에서만 작동하는 css파일을 지정할때 사용하는 방법입니다.

#gnb { position:absolute; top:0px; right:140px; _right:155px; font:11px arial, sans-serif; overflow:hidden; white-space:nowrap; z-index:99; }
위의 문구에서 _right:155px; 이부분 _를 추가해서 작성하면 ie6에서만 _부분이 작동이 됩니다. 전체적인 css가 필요없고 특정부분의 css가 다르게 표현될때 이 스크립트가 유용합니다.

CSS 기초 깨우치기

2008-10-12T09:23:22+09:00

css 속성	설명	사용 예
font-family	글꼴을 설정합니다.	{font-family:굴림,돋움}
font-size	글꼴의 크기를 지정합니다	{font-size:12pt}
font-style	글꼴의 스타일을 지정합니다	{font-style:ifalic}
font-weight	글꼴의 두께를 지정합니다	{font-weight:bold}
font-variant	소문자를 대문자로 지정합니다	{font-variant:small-caps}
letter-spacing	글자사이의 간격을 지정합니다	{font-spacing:10pt}
line-height	줄 간격을 지정합니다	{line-height:170%}
color	글꼴의 색상을 지정합니다	{color:orange}

font -famliy 속성은 지정된 태그나 영역의 글꼴을 지정하기 위해 사용된다.

h2{

font-family:"굴림","돋움","Comic Sans MS";

}

굴림 글꼴을 지정하여 만일 굴림 글꼴을 제대로 표시 할수 없으면"돋음" 글꼴을, 그것마저 여의치 않으면 "Comic Sans MS" 글꼴로 표시 하도록 지정한것이다.

font-size 속성은 글꼴의 크기를 지정하는 속성이다.

in cm mm pt pc meduim small x-small xx-small large x-large xx-large 속성등이 있다.

body{

font-size:9pt

}

.title{

font-size:large;

}

body 태그 내의 모든 문자의 크기를 9포인트로 지정하고 그중 class= "title" 특성이 추가돈 태그에 대해서는 9포인트의 1.5배 인 13.5 포인트로 크기로 표시합니다.

font-style 속성은 글자에 기울임 속성을 주기 위한 것으로 font-style 속성에 사용할 수 있는 값은 다음과 같다.

속성 값	설 명
normal	아무런 효과를 주지 않습니다.
italic	글자를 이텔릭 체로 표시
oblique	글자에 기울임 속성을 줍니다.

font-variant 속성

이속성은 영문 소문자를 대문자로 표시 하기 위해서 사용되는 속성이다.

속성 값	설 명
normal	아무런 효과를 주지 않습니다 .
small-caps	소문자를 대문자로 바꾸어 표시합니다.

font-weght 속성은 글꼴의 두께를 설정하는 속성

속성 값	설 명
normal	아무런 효과를 주지 않습니다.
bold	글자에 HTML의 <B>태그를 준것과 같은 두깨로 굵게 표시합니다
bolder	글자를 조금 더 굴게 표시합니다.
ligher	글자를 조금 더 얇게 표시합니다.
100~900	100(아주 앏게)부터900(아주 두껍게) 사이의 숫자를 100단위로 지정할 수 있습니다.

h2{font-weight:bold;}

.bolder{font-weight:800;}

이 예제는 <H2> 태그를 모두 <B> 태그를 지정한 것과 같은 두께로 굵게 표시하고 class="bolder"특성이 지정된 테그들은 800 정도의 두꺼운 글꼴로 표시합니다.

letter-spacing 속성은 글자와 글자 사의 간격을 조정

H2{letter-spacing:170%}

이 예제는 <H2> 태그의 글자와 글자 사이를 170% 간격으로 넓힙니다.

line-height 이 속성은 줄 간격을 설정하는 속성입니다.

body{line-height:170%}

이 예제는 <body> 태그 내의 모든 문장에 대해서 줄 간격을 170% 지정하여 줄 간격을 조금 넓힙니다.

color 이 속성은 글꼴의 색상을 지정하며 아래와 같은 방법

body{color:DarkGray;}

H2{color:#FFA500;}

이 예제는 <BODY> 태그 내의 모든 글꼴의 색상을 짙은 회색으로 <H2> 태그의 글꼴 색상은 오랜지 색으로 표시 예제에서는 보듯이 color 속성에는 글꼴 이름을 지정하거나 색상 코드를 지정할 수 있다.

css로 문단 모양 바꿔보기

이번에는 css를 이용해서 문단의 모양을 바꿀 수 있는 속성들을 살펴보겠습니다. 먼저 어떤 속성을 사용되는지 알아보겠습니다.

css 속성	설 명	사용 예
text-align	문단의 정렬 방식을 지정	{text-align:center}
text-decoration	글꼴에 선을 긋습니다.	{text-decoration:underline}
text-indent	문장에 들여쓰기 합니다.	{text-indent:3px}
vertical-align	문단의 수직 정렬 방식을 지정	{vertcal-align:middle}

text-align속성은 문단의 수평 정렬 방식을 지정합니다. 이 속성에 사용할 수 있는 속성 값은 다음 표와 같다.

속성값	설 명
left	문단을 원쪽으로 정렬합니다.
center	문단을 중앙으로 정렬합니다.
right	문단을 오른쪽으로 정렬합니다.
justify	문단을 양쪽으로 정렬합니다.

text-align 속성을 사용하는 방법

p{text-align:center}

모든<P>태그 내의 문장들을 가운데로 정렬합니다.

text-decoration 속성은 문장 내의 글자에 줄을 긋는 속성으로 다음 표와 같은 속성 값들을 사용할 수 있 습니다.

속성 값	설 명
none	아무런 효과를 주지 않습니다.
underline	글자에 밑줄에 긋습니다.
overline	글자의 위쪽에 줄을 긋습니다.
line-through	글자의 중간에 줄을 긋습니다.
bink	글자를 깜박이게 합니다.

text-decoration 속성을 이용하는 방법

A{text-decoration:none;}

A:hover{text-decoration:underline;}

하이퍼링크의 밑줄을 없애고 하이퍼링크에 마우스 화살표를 올리면 밑줄이 다시 나타나게 하는 예제

A:hover는 마우스 화살표를 울려둔 <A>태그를 의미합니다.

text-indent 속성 문단의 일정 간격 들여쓰기 하는 속성이며 앞서 font-size속성에서 살펴보았던 고정 크기 단위와 상대 크기 단위를 이용해서 문단의 들여쓰기 간격을 지정할 수 있습니다.

P{text-indent:10pt}

모든 <p> 태그의 내용을 10포인트 만큼 들여쓰기 합니다.

vertical-align 속성 글자나 이미지의 세로 정렬 방식을 지정하는 속성으로 다음 표와 같은 속성 값을 이용 할 수 있습니다.

속성 값	설 명
top	태그나 표의 위쪽을 기준으로 정렬
middle	태그나 표의 가운데를 기준으로 정렬
bottom	태그나 표의 아래쪽을 기준으로 정렬
sub	요소의 아래 청자 위치에서 정렬
super	요소의 위 첨자 위치에 정렬
text-top	요소의 위쪽을 태그나 표의 위쪽을 기준으로 정렬
text-bottom	요소의 아래쪽을 태그나 표의 아래쪽을 기준으로 정렬

IMG {vertical-align-middle:}

<IMG>태그와 함께하는 문장을 수직으로 가운데에 정렬하는 예제입니다.

<HTML>
<HEAD>
<TITLE> css 문단 특성을 지정하자 </TITLE>
<style type="css/text">
  body{text-align:justify}
  img{vertical-align:middle}
  H2{text-indent:20px; text-decoration:underline}
  p,div{text-indent:40px}
</style>
</HEAD>
<H2>css 문단 제어의 모든것!!</H2>
<P>css로 글꼴을 제어하는 속성들을 살펴봅시다</p>
<div><img src="list_icon.gif">text-align 속성</div>
<P>text-align 속성은 문단의 수평 정렬 방식을 지정합니다</P>
<div><img src="list_icon.gif">text-indent 속성</div>
<P>text-indent 속성은 문단의 들여쓰기 간격을 지정합니다. 고정 크기
단위와 상대 크기 단위 중 하나를 이용하세요</p>
<BODY>

</BODY>
</HTML>

css로 문서 배경 처리 하기

css 속성	설 명	사용 예
background-color	배경 색을 지정	{background-color:black}
background-image	배경 이미지를 지정	{background-image('icon.gif')}
background-repeat	배경 이미지의 반복 속성 지정	{background-repeat:no-repeat}
background-attachment	배경 이미지의 고정 속성 지정	{background-attachment:fixed}
background-position	배경 이미지의 위치를 지정	{background-position:center}

모두 배경 이미지와 관련된 속성

backgroud-color 속성 HTML 문서나 태그의 베경 색을 지정하는 속성

H2{background-color:Navy}

이코드는 <H2> 태그의 배경 색상을 짙은 파란색으로 표시합니다.

background-image속성 HTML 문서나 태그에 배경 이미지를 지정하는 속성

DIV{background-image:url('../icon.gif');}

BODY{background-image:url('back.gif');}

태그에 현재 파일과 동일한 폴더에 있는 back.gif라는 이미지를 사용하고 <DIV>태그에는 현제 파일이

위치한 폴더의 상위 폴더에 있는 icon.gif라는 이미지를 파일을 사용합니다.

background-repeat 속성을 이용하여 지전된 배경 이미지가 반복되는 방법을 지정하는 속성입니다.

속성 값	설 명
repeat	기본 값으로 배경 이미지가 계속 반복
repeat-x	배경 이미지가 수평 방향으로만 반복
repeat-y	배경이미지가 수직 방향으로만 반복
no-repeat	배경이미지가 반복되지 않습니다.

body{

background-imge:url('list_icon.gif');

background-repeat:repeat;

}

background-repeat 속성을 repeat로 설정한 경우 다음 그림과 같이 배경 이미지가 반복된다.

<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat;
}
</style>

</HEAD>

<BODY>
<h2>background-repeat:repeat</h2>
</BODY>
</HTML>

이예제는 전체적으로 배경화면이 list_icon.gif 파일로 가득차보인다.

<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat-x;
}
</style>

</HEAD>

<BODY>
<h2>background-repeat:repeat-x</h2>
</BODY>
</HTML>

이예제는 수평으로 list_icon.gif 그림이 퍼져보인다.

<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:repeat-y;
}
</style>

</HEAD>

<BODY>
<h2>background-repeat:repeat-y</h2>
</BODY>
</HTML>

이 예제는 list_icon.gif 그림이 수직으로 펴져보인다.

<HTML>
<HEAD>
<TITLE> css로 배경제어하기 </TITLE>
<style type="text/css">
body{
background-image:url('list_icon.gif');
background-repeat:no-repeat;
}
</style>

</HEAD>

<BODY>
<h2>background-repeat:no-repeat</h2>
</BODY>
</HTML>

이예제는 list_icon.gif 그림 파일이 전혀 반복하지 않습니다.

background-attachment 속성은 배경 이미지의 고정 방법을 지정합니다. 즉 배경 이미지가 HTML 문서를 스크롤 할 떄 따라 움직일 것인지 아니면 계속해서 현제 위치에 고정된 형태로 보여질 것인지를

지정하는 속성으로 사용 가능한 속성 값은 다음 표와 같습니다.

속성 값	설 명
Fixed	배경이미지가 현제 위치에 고정되어 나타남
Scroll	배경이미지가 HTML 문서의 스크롤 크기에 따라 함께 스크롤됩니다.

body{background-attachment:fixed;}

background-positon 속성 배경 이미지의 위치를 지정 할 수 있는 속성 입니다. 앞서

background-repeat 속성에서 no-repeat 속성 값을 설정하면 배경 이미지가 반복되지 않는데 이 경우

배경 이미지는 왼쪽 상단에 보여지게 됩니다. 이 배경 이미지를 위치를 바꾸자고자 할 때 background-position 속성을 사용하며 사용 가능한 속성 값은 다음 표와 같습니다.

속성 값	설 명
bottom	문서의 아래쪽에 나타납니다.
left	문서의 왼쪽에 나타납니다.
right	문서의 오른쪽에 나타납니다.
top	문서의 위쪽에 나타납니다.
픽셀단위 지정	배경 이미지가 지정된 픽셀만큼 떨어져서 나타납니다.
%단위 지정	배경 이미지가 브라우져의 크기에서 지정된 %만큼 떨어져서 나타납니다.

body{background-position:[가로위치][새로위치]}

<html>
<head>
  <title>CSS로 배경 이미지 제어하기</title>
  <style type="text/css">
   body {
    background-image:url('back.gif');
    background-repeat:no-repeat;
    background-position:80% 50%;
   }
  </style>
</head>
<body>
</body>
</html>

CSS 사용시 익스플로러 버그 해결하기

2008-07-19T22:54:58+09:00

보통 CSS를 사용하면 파폭, 사파리, 오페라에서는 잘 보이는데 IE에서는 깨진다거나 IE7까지는 맞출 수 있지만 IE6까지 맞출 방법이 없다거나 그렇다고 IE6에다 맞추면 다른 브라우저에서 전부 깨져보인다던가 하는 난감한 일이 발생합니다. 그런 경우를 위한 팁을 적어보겠습니다.

***HTML명령어 if IE 와 COMMENT***

if IE와 COMMENT가 무엇인가요?

두 명령어는 익스플로러에서만 지원하는 특수 명령어입니다. 다만 if IE는 웹표준 검사 시에 주석으로 인식 되어 통과가 되지만 comment는 비표준 태그에 해당하기 때문에 얄짤없이 테스트에 탈락하게 되니 웹표준 테스트에 신경을 쓰시는 분이라면 다른 종류의 방법. 이를테면 CSS핵 등을 사용하시길 권해 드립니다.

if IE는 HTML코드 사이에 IE에서만 작동하는 코드를 포함시킬 수 있는 명령어입니다. 기본적으로 주석의 형태를 가지고 있기 때문에 다른 브라우저에서는 이 명령어가 포함된 문장은 실행이 되지 않습니다. if IE가 더욱 마음에 드는 점이라면 익스플로러의 버전별로 다 명령어를 설정해 줄 수 있다는 것이지요.

COMMENT는 if IE와는 반대 되는 성격을 가진 명령어입니다. if IE가 쓰인 행이 IE에서만 인식이 되고 기타 브라우저에서는 주석으로 인식해서 비활성 처리가 되는 것에 반해 COMMENT는 IE 전용 주석 설정태그로써 이 태그가 사용된 행은 IE에서는 주석으로 인식되지만 기타 브라우저에서는 COMMENT를 비표준 태그로 인식해서 COMMENT 안에 들어간 내용을 전부 실행해 버리지요.

어떻게 사용하나요?

if IE 명령어는 이런 식으로 사용합니다.


IE에서만 실행 할 내용.

버전별로 따로 설정을 할 수도 있습니다.


같은 방법으로 <!--[if IE 7]>이라고 하면 IE7 유저에게만 보이겠지요?

comment 명령어의 사용법은 더 쉽습니다.
<comment>
기타 브라우저 사용자에게만 표시할 내용
</comment>

실제로 사용되는 사례를 가르쳐 주세요.

각 브라우저 별로 전혀 다른 페이지를 보여주는 것도 물론 가능하기는 합니다만 저는 각 브라우저별로 다른 CSS를 사용하는 데에 많이 사용합니다.

이를테면 이런 경우입니다.

이 코드를 브라우저 별로 실행시켜 보시면 IE6에선 밑줄이, IE7에서는 글씨가 회색으로, 파이어폭스 등 기타 브라우저에서는 글씨가 굵게 보일겁니다. 이런 식으로 브라우저별로 다른 CSS를 설정해 줄 수가 있는 것이지요. 그 중에서도 버그 상습범인 IE는 이런 식으로 CSS 클래스 자체를 다르게 주어서 격리를 시키는 것이 최고이지요.

CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간

2008-07-19T22:36:09+09:00

글꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가 다르며, 적용되더라도 화면의 보여지는 모습이 다릅니다. 충분한 테스트 후 활용하도록 합니다.

[ 글꼴의 굵기 지정 ]

font-weight: normal (default value);

글꼴 그룹의 어떤 굵기의 글꼴을 사용할 것인지를 설정합니다. 초기값은 normal(400)이며, 굵은 글꼴은 bold(700) 키워드를 사용합니다. 설정값은 하위 요소로 상속됩니다. 다음은 Verdana 글꼴의 굵기 속성입니다.

* normal, bold, 100~900

font-weight: normal
font-weight: bold
font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800
font-weight: 900

위와 같이, 일반적인 글꼴 그룹은 9종류의 굵기가 다른 글꼴이 준비되어 있지 않는 경우가 많습니다.

따라서, 일반적으로 100~900까지의 9단계의 굵기 지정보다는, 굵은 글꼴 표현을 위한, bold를 주로 사용합니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* lighter, bolder

100~900의 굵기의 범위에서, 현재 굵기(디폴트값 또는 상위 요소에서 상속된 값)보다 각각 한 단계 가는 글꼴, 또는 굵은 글꼴을 지정합니다.

[ 글꼴 스타일의 지정 ]

font-style: normal (default value);

글꼴 그룹의 표준, 이탤릭, 기울임 글꼴을 지정하는 속성입니다. 설정 값은 하위요소로 상속됩니다.

* normal, italic, oblique

글꼴 그룹의 종류에 따라, 이텔릭체 전용, 기울임 전용 글꼴이 디자인되어 있습니다. 해당 글꼴을 사용하도록 지정이 가능합니다. 해당 글꼴이 없는 경우에는 표준 글꼴을 기울인 글꼴이 이용됩니다. 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다. 다음은 Verdana 글꼴의 스타일 속성입니다.

font-style: normal
font-style: italic
font-style: oblique

[ 작은 대문자 지정 ]

font-variant: normal (default value);

영어 알파벳의 표기방식입니다. 알파벳을 대문자료 표기하되, 소문자 크기로 작게한 종류의 글꼴인 small-caps를 지정할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 normal이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* normal, small-caps

font-variant: normal
font-variant: small-caps

[ 대소문자 지정 ]

text-transform: none (default value);

영어 알파벳의 표기방식입니다. 문장에 있는 단어의 첫글자만을 대문자로 표시하거나, 전체를 대문자 또는 소문자로 표기하게 할 수 있습니다. ID와 같이 대/소문자의 구분입력 단위요소에 사용할 수 있습니다. 설정 값은 하위 요소로 상속되며, 기본값은 none이기 때문에, 일반 글꼴에는 특별한 지정이 필요하지 않습니다.

* none, capitalize, lowercase, uppercase

text-transform: none; Capitalization effects
text-transform: capitalize; Capitalization effects
text-transform: lowercase; Capitalization effects
text-transform: lowercase; Capitalization effects

[ 글꼴 장식 ]

text-decoration: none (default value);

글꼴 장식에 대한 속성입니다. 아래 예와 같이, 밑줄이나 윗줄, 취소선을 표시하거나 깜박이게 할 수도 있습니다.

이 속성은 상위 요소로부터 상속되지 않습니다. 다만, 블록 레벨 요소에 대하여 지정한 경우에는 해당 박스 안에 포함되는 인라인 요소에 모두 적용됩니다. 또한, 인라인 요소에 대하여 지정한 경우에는 해당 요소가 생성하는 모든 박스에 대하여 적용됩니다.

* none, underline, overline, line-through, blink

text-decoration: none a tag in li tag
text-decoration: underline
text-decoration: line-through
text-decoration: overline
text-decoration: blink

위와 같이, blink옵션값은 IE에서는 적용되지 않습니다. (Firefox 2.0에는 적용됩니다)

또한, 첫번재 줄에 사용된 코드는 다음과 같습니다. 즉, 같은 레벨의 요소에는, text-decoration값이 상속되지 않습니다.

<li style="text-decoration: none;">text-decoration: none <a href="#">a tag in li tag</a></li>

[ 줄 간격 설정 ]

line-height: normal (default value);

정확히는, 인라인 요소의 높이를 설정하는 값입니다. 만약 블록 레벨 요소에 값을 지정한 경우에는, 해당 박스에 포함될 인라인 요소 박스의 최소 높이를 지정하는 것이 됩니다. 설정 값은 하위 요소로 상속됩니다.

* 인라인 요소에 대한 높이값 표현의 디폴트 값이 IE7과 Firefox2의 차이가 현격하기 때문에, 상위레벨(body, hemtl)에서 픽셀이나 포인트로 결정해 주는 것이 좋습니다.

line-height: normal
line-height: normal
line-height: 150%
line-height: 150%
line-height: 15px
line-height: 15px
line-height: 1.5em
line-height: 1.5em

기본값은 normal이며, 브라우저가 적절한 줄간격을 설정합니다. "실수값+단위 형태"로 지정할 수 있습니다.

전각(em)의 경우는, 해당 글꼴의 줄 간격을 1로 간주하고 퍼센티지(%)는 100%로 간주하고 계산되어 집니다. 즉, 상위레벨의 값을 1(em), 100(%)으로 계산하여 표현합니다. 픽셀(px) 및 포인트(pt)등과 같은 값을 지정할 수도 있습니다. 단, 인라인 레벨의 박스 높이인 만큼 음수값을 지정할 수 없습니다.

[ 문자 간격 설정 ]

letter-spacing: normal (default value);

글자와 글자의 간격을 설정하는 속성입니다. 주의할 점은 설정하는 값이 자간이 나타내는 것이 아니라, 기본 자간에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, letter-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.

* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.

[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]

자간은 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.

[ 단어 간격 설정 ]

word-spacing: normal (default value);

공백으로 구분되는 하나의 단어와 단어 사이의 간격을 설정하는 속성입니다. 자간과 마찬가지로 설정하는 값이 단어 간격을 나타내는 것이 아니라, 기본 간격에 설정값이 추가(+)되는 것 입니다. 따라서, line-height와는 달리, word-spacing값에는 음수값을 지정할 수 있습니다. 설정 값은 하위 요소로 상속됩니다.

* 문단 정렬이 좌우 배분(text-align: justify)인 경우에는, 문단 정렬에 우선되어 간격값이 조정됩니다.

[ font-family: Verdana, Gulim, Dotum, sans-serif; font-size: 9pt; ]

단어 간격 역시, 글꼴의 종류와 크기에 따라, 웹브라우저의 상이점이 발생합니다. 위 그림의 위의 것은 IE7에서 표현되는 스크린이며, 아래는 Firefox2에서 표현되는 모습입니다. 디폴트 상태(normal)에서는 별다른 차이가 없지만, 전각(em) 포인트(pt)등의 단위에서는 약간의 차이가 눈에 띄입니다. 픽셀(px)단위가 비교적 차이가 없어 보입니다.

[ 글꼴 크기의 보정 ]

font-size-adjust: none (default value);

현재, IE7은 지원하지 않고 있으며, Firefox 2.0에서는 적용이 되는 속성으로 용도는 아래와 같습니다.

어떠한 이유로(사용자에게 글꼴이 없거나, 요소 하위에 다른 글꼴이 사용되는 등), 요소에 지정된 글꼴이 표시되지 않는 경우, 글꼴 기본 크기의 차이에 따른 이질감을 조정하기 위한 속성입니다. 해당 글꼴(지정한 글꼴) 크기에 대한 소문자 x의 높이의 비율을 지정해 두면, 다른 글꼴이 사용되더라도 소문자 x의 높이가 일정하게 유지되도록 하여 일관성을 유지하게 됩니다. 설정값은 하위요소로 상속됩니다.

아래는, Firefox 2.0에 font-size-adjust를 적용한 예입니다.

<div style="font-family: Verdana; font-size: 14pt; font-size-adjust: 0.54;">Verdana 14pt <font style="font-family: 'Times New Roman';">Times New Roman 14pt</font></div>

그림의 위쪽은 font-size-adjust를 적용하지 않은 경우이며, 아래는 0.54값이 적용된 경우입니다.

주의할 점은, 해당 값에 따라 지정된 글꼴(위의 경우 Verdana)도 크기가 보정될 수 있다는 점입니다. 따라서, 충분한 테스트 및 검증을 해 준 후 사용하도록 합니다.

한가지 재미있는 점은, 영문 글꼴을 대표글꼴로 설정하여 사용하는 경우, 한글의 크기가 브라우저에 따라 같지 않은 문제를, 이 속성을 통해 어느정도 보완할 수가 있다는 점이 있습니다. (적어도, IE에서는 적용되지 않기 때문입니다)

위와 같이, 절절한 font-size-adjust값을 주어, 한글 글꼴을 조정해 줄 수 있습니다. 물론, IE에서는 적용되지 않기 때문에, IE에 맞춘 스타일시트에 Firefox의 한글크기 문제가 있는 경우 사용할 수 있습니다.

[ 장평 설정 ]

font-stretch: norman (default value);

현재, IE7, Firefox 2.0모두 지원하지 않습니다. 총 9단계의 속성값이 있습니다.

ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded이 있으며, 왼쪽에서 오른족으로 갈 수록 폭이 넓어집니다.

[출처] CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간|작성자 거대토끼

기본적인 태그 (링크걸기)|

2008-07-12T23:37:09+09:00

위처럼 태그를 넣으면 보이는건 표시할글자 내용이고 그글자를 누르면 써넣은 주소로 이동이 됩니다

예)글자색과 링크 시키는 방법(target)을 덧 붙이면 아래 방법으로 넣으면 되겠죠

blank는 다른 새창으로 링크시킨다는 뜻입니다.

그밖에 자신의 차에서 열겠다는 _self 프레임에서나 쓰이는_top 등이 있습니다.

한가지 팁을 말씀드리자면 보통 링크시킨 글위에 커서를 가져다 놓으면

손가락 모양으로 바뀌지만 아래 스타일 태그를 넣으면 손가락 모양 대신 다른 모양으로 바꿀 수도 있습니다.

적용된 예) 마우스를 가져다 되면 손가락 모양의 커서 대신 뭔가가 나타날겁니다.

홈으로~

가장 기본적인 태그들

2008-07-12T23:36:01+09:00

1. 홈페이지 태그

※ 그림 관련 태그


<IMG>	그림을 삽입하기 위한 태그
<IMG SRC="파일명" BORDER=n>	그림을 나타나게함.테두리선은 n값
<IMG SRC="파일명" BORDER=0 WIDTH=n HEIGHT=n>	그림의 넓이와 높이를 지정
<IMG SRC="파일명" ALT="그림설명"ALIGN=LEFT,CENTER,RIGHT>	Alt=그림에 대한 설명, ALIGN=그림정렬방식
<IMG SRC="파일명" ALIGN=TOP,MIDDLE,BOTTOM>	그림 다음에 오는 글자를 그림의 상단,중앙,아랫부분에 집어넣을 수 있도록 지정

※ 링크 관련 태그


<A HREF="연결될 파일명">글자,그림</A>	글자,그림을 누르면 연결될 문서로 이동한다
<A HREF="HTTP://링크할 주소">글자,그림</A>	링크된 주소로 이동한다
<A HREF="MAIL TO:자신의 메일 주소">글자,그림</A>	편지함과 연결된다
<A HREF="문서명">글자,그림</A><A NAME="문서명">문서명 문단의 첫부분</A>	같은 문서 내에서의 이동이 가능하게 하는 태그

※ 테이블 관련 태그

<TABLE></TABLE>	표를 나타냄
<TR></TR>	TABLE안에 쓰여 한 행을 만들어 줌
<TD></TD>	TR안에 스여 한 셀을 만들어 줌
<TH></TH>	TABLE안에 셀의 제목을 나타냄
<TABLE BORDER=n CELLSPACING=n>	TABLE의 테두리선 크기,셀과 셀 사이의 간격을 조절

<TABLE CELLPADDING=n BGCOLOR=색상코드>	셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정
<TABLE WIDTH=n HEIGHT=n>	ABLE 넓이와 높이를 지정
<TD COLSPAN=n ROWSPAN=n>	셀을 가로,세로로 합치고 싶을때 사용
<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM>	좌우,중앙,상하 정렬

※ 프레임 관련 태그


<FRAMESET></FRAMESET>	한 페이지에 두개 이상의 창을 작성
<FRAMESET COLS="n%,*">	화면에 세로 방향으로 금을 그어 화면을 나누는 방식
<FRAMESET ROWS="n%,*">	화면에 가로 방향으로 금을그어 화면을 나누는 방식
<FRAME SRC="문서.파일명">	프레임에 불러올 HTML문서 링크
<MARGINWIDTH=n>	프레임 창의 가로 여백을 지정
<MARGINHEIGHT=n>	프레임 창의 세로 여백을 지정
<SCROLLING=YES,NO,AUTO>	프레임 차의 스크롤 지정여부,자동여부
<FRAMEBORDER=n>	프레임의 경계선의 크기를 지정
<TARGET=_BLANK,_TOP,파일명>	프레임 창에서 링크된 경우 링크될때 보여주는 창을 지정
<NAME= >	프레임에 고유의 이름을 간단하게 씀

※ 기타 본문 관련


<EMBED SRC="사운드.파일명" AUTOSTART=TRUE LOOP=n>	AUTOSTART를 사용해 홈페이지로 들어오면 백 그라운드 음악이 자동으로 시작하도록 지정할 수 있습니다. 이 태그는 넷스케이프에서만 적용됩니다.
<BGSOUND src="사운드.파일명" LOOP=2>	<EMBED>태그와 비슷하며 익스플로러에서만 적용됩니다.

자신의 홈에 프린트버튼을 넣자

2008-07-12T23:31:58+09:00

원하는 페이지에 넣어주세요....

상단에 아래의 소스를....
<script>
function print_this()
{
window.print();
}
</script>

원하는 위치에 다 아래의 소스를...
<input type=button onclick="print_this(); return false;" value="Print This Page">

무진장 간단하죠....

테이블(셀) 깨지지 않는 CSS

2008-07-12T23:25:58+09:00

css관련 태그 입니다.
일반적으로 테이블 크기를 정해놓고 나서 글을 공백없이 줄바꿈없이 쓰게되면..

예) 사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기사랑되찾기

테이블 크기가 깨지기 마련입니다.
이걸 보안하기 위한 스타일시트가 있습니다.

style="word-break:break-all"

<td> 와 같이 위 소스를 써주시면 지정된 테이블 크기를 그대로 유지하실 수 있습니다.

예) <td style="word-break:break-all">

그리고 테이블 내에 테이블보다 큰 이미지가 있을때 테이블이 늘어나기 마련이죠...
보통 HTML문서에는 쓰실일이 없겠지만 게시판에서는 유용할듯....
style="table-layout:fixed" 입니다.

예) <table style=table-layout:fixed>이런식으로요...
table 안에 넣어주셔야 합니다.

이와는 반대로
위와 반대 되는 경우. 특정한 경우에 셀의 너비를 지정했다 하더라도 줄바꿈하지 않고자 할때 사용하는 스타일이 있습니다.

style="word-break:nowrap" 을 사용하면
셀크기를 정해주면 텍스트가 줄바꿈을 하던 말던 셀크기가 유지됩니다.^^

style="white-space:nowrap; overflow:hidden;" 을 사용하시면
셀크기도 유지하고 셀을 벗어나는 텍스트나 이미지는 가려지는 효과, 즉 셀크기만큼만 보여줍니다

날짜 매개변수

2008-07-12T23:22:07+09:00

a : "am" 또는 "pm"

A : "AM" 또는 "PM"

d : 두자리로 표현되는 날짜, 즉 "01"~"31"

D : 세글자로 표현되는 요일, 즉 "Fri"

F : 월을 긴 문장으로 나타냅니다. 즉 "January"

h : 시간을 12시간 단위로 나타냅니다. "01"~"12"

H : 시간을 24시간 단위로 나타냅니다.

g : 시간을 12시간 단위로 0 없이 나타냅니다. "1"~"12"

G : 시간을 24시간 단위로 0 없이 나타냅니다. "0"~"24"

i : 분을 나타냅니다. "00"~"59"

j : 날짜를 0 없이 나타냅니다. "1"~"31"

l : (L의 소문자)요일을 나타냅니다. "Friday"

L : 윤년인지의 여부를 나타냅니다. "0" 또는 "1"

m : 달을 나타냅니다. "01"~"12"

n : 0 없이 달을 나타냅니다. "1"~"12"

M : 3글자로 달을 나타냅니다. "Jan"

s : 초를 나타냅니다. "00"~"59"

S : 영어에서 순서를 나타내는 2글자로 된 접미사; "th", "nd"

t : 주어진 달의 날 수; 즉 "28"~"31"

U : 기준시점(GMT 1970년 1월1일 00:00:00)으로부터 지난 시간을 초로 표시

w : 요일을 숫자로 표시합니다. 즉 "0"(일요일) ~ "6"(토요일)

Y : 4글자로 연도표시, "1999"

y : 2글자로 연도표시, "99"

z : 날짜를 표시, "0"~"365"

Z : 지역간의 시간편차를 초단위로 표시, 즉 "-43200"~"43200"

이미지 없이 그라데이션효과 주기

2008-07-12T23:01:43+09:00

스타일시트의 필터기능만으로 html 문서 내에 그라데이션 효과를 넣을 수 있습니다.
이테블은 수직그라데이션을 적용했습니다.
0은 수직그라데이션으로 그라데이션효과가 상하방향로 표현됩니다. 1은 수평그라디에션으로
그라데이션효과가 좌우방향으로 표현됩니다.

#F352FF는 그라디에션이 시작되는 지점의 색, #FCEFFF는 그라데이션이 끝나는 지점의 색입니다.

문서전체에 배경에 적용하는 방법은 ...............
<body style="filter=progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B1C7F9, EndColorStr=#EEF2FC)">

참고로 인터넷 익스플로러에서만 됩니다;

자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을

2008-07-12T23:00:04+09:00

제목 그대로 자신의 홈페이지 내에 올려진 글들중 단어를 더블클릭 네이버 새창이 뜨면서 그단어로 검색해
주는 스크립트입니다.

/******************** never검색 **********************************/
var NS=(navigator.appName=='Netscape')?1:0;

if (NS) document.captureEvents(Event.DBLCLICK);
document.ondblclick = search;

function search() {
    SearchPage = "http://search.naver.com/search.naver";
    if (NS) {
        txt = document.getSelection();
    } else {
        txt = document.selection.createRange();
        txt = txt.text
    }
    if (!NS) document.selection.empty();
    if (txt > '') {
        OpenUrl = SearchPage+'?where=nexearch&query='+txt;
        window.open(OpenUrl,"NaverSearch");
    }
}

뒤로..앞으로..새로고침 버튼 넣기

2008-07-12T22:58:52+09:00

글자대신 이미지버튼을 사용하셔도 됩니다.

★뒤로가기
<a href="javascript:history.back()">뒤로</a>

혹은

<a href="javascript:history.go(-1)">뒤로</a>

★앞으로
<a href="javascript:history.go(1)">앞으로</a>

★새로고침
<a href="javascript:location.reload()">새로고침</a>

( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서

2008-04-27T00:54:44+09:00

[최근 팁]

align="absmiddle" 속성 대신에 style로 정렬하는 방법
class="align-middle" 로 두고 아래와 같이 css를 적용하면 됩니다.

<span class="align-middle"><img src="img/replie.gif"><span>Replies</span></span>
<span class="align-middle"><img src="img/view.gif"><span>Views</span></span>

<style type="text/css">
.align-middle,
.align-middle img,
.align-middle span { vertical-align:middle; }
</style>

img align="속성" align="absmiddle" 에 대해서 몇가지 실험해봤어요 (익스와 파폭)

글자와 이미지의 세로 정렬 문제로.. 이글저글 읽어보다가 눈으로 확인하고 싶은 마음에 실험에 들어갔답니다

서투르신 분들께 도움이 되었으면 하는바램입니다...^^;

간단 명료한 설명을 위해 딱딱한 글로 기제함을 이해해주세요.

absmiddle 은.. ( absolute middle )= 절대적으로 가운데로 하란뜻이라고 보면 될듯하다

정렬후에는 세로정렬에 영향을 준다

확인 해야할부분 (로그인버튼)

이미지 테그에 적용방법 img src="ooo.gif" width="40" height="25" border="0" align="absmiddle"

캡쳐이미지1) align="absmiddle" 적용전 (위 이미지)

캡쳐이미지2) align="absmiddle" 적용후 (위 이미지)

이밖에 참고사항

img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준이므로 middle 로 수정해서 쓰라는 글로 인해

테스트겸 middle로 적용후 확인해보았다

align="middle" 로 적용된 확인결과는 아래 캡쳐 참고

캡쳐이미지3) align="middle" 적용후 (위 이미지)

테스트 결과 글자들과의 세로정렬이 absmiddle과의 차이점을 알수있다.

역시나 absmiddle 의 효과를 볼려는 이들에게는 middle의 속성으로는 그효과를 볼수없다

파폭에서도 middle 적용시 위와같은 같은 결과가 나왔다.

즉, 결론은...

이미지와 글자의 높낮이 정렬문제는 align="absmiddle"를 쓰면될듯하다

(익스 파폭 확인결과 캡쳐2이미지로 적용되었음)

속성들의 관련 자료 (참고하세요)

이미지와 텍스트의 위치를 지정하기 위해서는 img 태그의 속성중 align 속성을 사용합니다.

img 태그를 쓰고 그 뒤에 문장을 쓰면 속성값 대로 문장과 이미지가 정렬됩니다.

기본 형식은 ' <img sre="파일명" align="속성값"> 문자열 ' 입니다.

align 속성을 생략하면 기본값인 top 이 적용됩니다. (align 의 속성값은 아래와 같습니다. )

left 이미지의 왼쪽에 문자열을 정렬합니다.

right 이미지의 오른쪽에 문자열을 정렬합니다.

center 이미지의 중간에 문자열을 정렬합니다.

top 이미지의 제일 상단과 문자의 상단을 맞춥니다.

texttop 영문에서 g 보다 f 가 더 위로 튀어나온 것을 볼수 있는데

위로 올리간 문자의 맨위와 이미지의 상단을 맞춥니다.

middle 문자열의 밑선을 이미지의 가운데에 맞춥니다.

absmiddle 문자열의 가운데를 이미지의 가운데에 맞춥니다.

bottom 이미지의 하단과 문자열의 하단을 맞춥니다.

baseline bottom과 같은 역할을 합니다.

absbottom 영문문자열에서 해당되며, fight 라는 단어를 쓸때

f 보다 g 가 더 밑으로 내려와 있으므로 g 의 밑선과 그림의 하단을 맞춥니다.

[출처] ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서|작성자 셀레베스

붙어야 할 이미지가 붙지 않을때.

2008-04-19T01:50:26+09:00

버턴과 버턴이나, 아님 이미지를 잘라서 웹상에서 붙여야 할때,
문법상으로는 아무 문제가 없는데.
아래이미지와 같이 딱 붙지를 않고 약간의 공백이 생길때 황당합니다.

그럴때는 css파일에서 해당 class를 찾아서

#top_index { position:absolute; top:0px; right:0px; text-align:left;}
#top_index img { float:left; display:block;}

이렇게 해주면 붙습니다.

사각박스 코너를 이미지없이 둥글게 만드는법

2008-04-08T11:51:43+09:00

http://www.zeroboard.com/16694989

사각박스의 코너를 이미지 처리없이 둥글게 구현하는 방법이 있더군요.

색깔도 다양하게 적용할 수 있구요.

아래 페이지의 적용 예(3개의 사각박스)를 보시면 알 수 있습니다.

스킨이나 레이아웃 등으로 만들지 못해서 그냥 이곳에 팁으로 소개합니다.

실력 좋은 분들의 솜씨 기대하겠습니다.

적용예)
http://yungosan.hosting.paran.com/zbxe/aaa

다운로드 받는곳(맨아래 download를 다운 받으세요.)

http://www.html.it/articoli/niftycube/index.html

CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;]

2008-04-04T20:00:17+09:00

박종훈

http://www.zeroboard.com/1498150

XHTML및 HTML 4.01부터 사용 불가능한 태그 :
center, s, strike, u 등이 있습니다.

center의 대책!..
  CSS로 바꾸어 씁니다.
  text-align: center;

s의 대책!..[strike 포함]
  CSS로 바꾸어 씁니다.
  text-decoration: line-through;

u의 대책!..
  CSS로 바꾸어 씁니다.
  text-decoration: underline;

뽀나쑤-_-;;;
윗줄을 한번 쳐봅시다~^^..
  text-decoration: overline;

윗줄 밑줄을 동시에 치려면?
  text-decoration: overline underline;
됬죠?^^..

가장 오해하는 몇가지!...
blockquote는, 들여쓰기 할때 쓴다? 도대체 누가 그런 발상을 -_-;
이렇게 쓰시는 분들.. 모두 아니 무조건 반성하십시요.

blockquote의 쓰임을 아시는 지요.. 바로 인용문을 나타낼때 사용하는 겁니다.
즉, 어떠한 글을 인용하거나 할때 blockquote를 사용해서 알려주지죠.

그런데 어떻게 이것을 들여쓰기용으로 사용하시는 지..
  text-indent: 1em;
이렇게 하시면 한글자 들여쓰기 됩니다.

비표준 속성-_-;;;;;;;;;
  cursor: hand;
이거 표준아닙니다. FF에서 보면 이거 잘못되었다고 나오고요.
표준은, hand가 아닌, pointer입니다. IE에서 이상한 것만 만들어 내서 원..

그리고, 태그를 쓸적에.. 대/소문자 구문안한다고 했는데요.
XHTML넘어와서는 무조건!.. 소문자로 써주셔야 합니다.
속성은 모두 "등으로 묶어주고요~

네이밍 가이드

2008-04-04T18:57:34+09:00

CSS를 사용하기 이전에 예상가능한 class군을 설정하고서 제작을 하는 것이 좋습니다.

class의 네이밍에 있어서도 편리함이 있고, 제작자가 아닌 다른 이가 코딩가이드만 보고서도 그 내용을 쉽게 파악하기도 쉬우며, 그 결과물만으로도 추후 제작될 사이트 디자인에 있어 디자이너들도 어느 정도의 군을 나누게 됨으로서 조금이나마 체계적인 디자인에 도움을 줄 수 있습니다.

1. 기본적인 Text Style 지정

전체적으로 쓰일 기본적인 태그들의 Style을 지정합니다.

td, div, span, p, font, a,

{

text-decoration:none ;

font-size:9pt ;

font-family : 돋움, Dotum,Helvetica ;

color:#454545

}

이는 먼저 지정된 class의 속성을 그 이후의 class에서 상속받는 것을 이용한 것입니다.

몇몇 에이전시에서는 이러한 방법이 다수의 제작자들에게 공통으로 쓰이기 힘들다는 이유로, 또는 사이트 전체에 로드를 가져온다는 이유로 각각의 class마다 지정하는 방법을 쓰기도 합니다만, 일부는 이러한 속성을 모르기 때문입니다.

2. Logical 태그의 속성을 지정합니다.

<abbr>, <acronym>, <dfn>, <address>, <cite>, <q>, <code>,

<kbd>, <samp>, <var>, <del>, <ins>, <em>, <strong> 의 태그에 대한 스타일을 지정합니다.

위의 태그들은 각각 고유의 text style을 가지고 있습니다.

하지만, 그런 text style들은 영어권의 사람들의 눈에 익숙한 방법입니다,

한국에서는 그 효용성이 감소하며, 이탤릭체의 경우 오히려 마이너스가 됩니다.

이를 유저들에게 어필할 수 있는 색상이나 폰트, 스타일로 규정함으로서 User Interface에 뛰어난 효과를 가져올 수 있으며, 체계적인 디자인가이드를 만들 수 있습니다.

{

text-decoration : none ;

font-family : 돋움, Dotum, Helvetica ;

font-weight : bolder ;

color : #D34145

}

cite

{

text-decoration : underline ;

font-family : 돋움, Dotum, Helvetica ;

font-weight : normal ;

color : #6347EE ;

}

※ 폰트의 크기는 되도록 지정을 하지 않습니다. 이들 태그는 컨텐츠 중간중간 위치하기 때문에 컨텐츠에 지정된 스타일을 상속받도록 하는 것이 좋습니다. 예외적으로 글자의 크기를 크게 혹은 작게 지정하고 싶다면, font-size의 속성 larger, smaller를 사용하는 것이 좋을 것입니다.

strong

{

text-decoration : none ;

font-family : 돋움, Dotum, Helvetica ;

font-weight : bolder ;

color : #FF2222 ;

font-size : larger ;

}

3. 컨텐츠의 종류와 각각의 타이틀, 본문, 주석, 맺음부분을 구분하여 줍니다.

일반적으로 코딩순서상 가장 나중에 지정되는 경우가 많지만, 미리 지정하고서 디자인팀과 프로그래머팀과의 협의를 통해 각 메뉴별로 본문색이 변할 것인지, 타이틀의 단계는 몇가지가 될 것인지, 본문중에 주석이나, 맺음말부분은 존재할 것인지 등등을 통일하고 정의하는 것도 상당히 중요합니다. 하지만, 제가 겪어본 대부분의 디자이너분들이 글의 스타일은 거의 지정을 안해주더이다. 그래서 거의 제가 생각하는대로 했기 때문에 조금은 이부분이 객관화가 덜 된 부분일지 모르겠습니다.

서로 다른 본문의 스타일을 구분해봅니다.

일반적으로 카테고리별로 디자인에 맞추어 글자색이 다른 경우가 많으니 카테고리명으로 class이름을 정할 때가 많습니다.

.company_Content {color : #363636 ; line-height : 150%}

.education_Content {color : #210021 ; line-height : 150%}

임의로 본문이라는 뜻으로 Content를 자주 쓰는데, class이름을 정할 때 카테고리명을 앞에 쓸지 Content를 앞에 쓸것인지는 상황에 따라 다를 수 있습니다. 입맛대로 하시길...

간혹, 본문중간에 이미지가 들어간다던지, 테이블이 삽입되는 경우에는...

line-height속성이 각각의 자간과 줄간격을 일그러트리는 경우가 많습니다.

이때에는 class가 정의된 문단을 종료하고서 테이블을 삽입하는 것이 좋습니다.

타이틀의 class이름도 마찬가지로 정의합니다.

.company_title {color : #363636 ; font-weight : bolder ; }

.education_title {color : #210021 ; font-size : 15pt ; }

타이틀의 경우 타이틀 앞부분에 아이콘이 붙는다던지, 뒤에 링크버튼이 붙는다는지, 주석이 달린다던지...하는 경우가 많습니다. 이 점도 감안해서 각각의 경우를 정의해놓습니다.

.company_title_icon {color : #363636 ; vertical-align : bottom }

.company_title_more {color : #363636 ; vertical-align : middle }

.company_title_sup {color : #363636 ; vertical-align : top ; line-height : 19pt; }

주석과 맺음말, 그외의 다른 문단이 삽입되는 경우를 정의합니다.

이 부분은 웬만해선 미리 정의하기에는 어려운 면이 많습니다.

class이름정도만 미리 예상해놓는 것만으로도 상당히 편리할 것입니다.

.company_notes {}

.company_epil {}

4. 예상가능한 링크의 종류를 설정한다.

네비게이션의 단계의 구분이 뚜렷하다면, 이를 설정하는 것도 꽤 유용한 방법입니다.

보통은, 상단네비게이션, 좌단네비게이션, 하단네비게이션, CopyRight부분등이 이에 해당하며, 각각의 링크는 뚜렷한 연계성이 없기 때문에 각각을 구분하여 지정하는 것이 좋습니다.

한단계 더 하자면 각 위치별로 상위, 하위링크인지도 뚜렷하다면 이도 지정하는 것이 좋습니다.

*///////////////기본적인 링크의 스타일 정의////////////////////////

a:link { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; }

a:active { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; }

a:visited { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; }

a:hover { text-decoration:none ; font-family : 굴림, Gulim, Helvetica ; }

*///////////////상단 네비게이션 링크////////////////////////

a.TopNv_Hi { font-size : 15px ; font-weight : bolder ; color : #164234}

a.TopNv_Lo { font-size : 13px ; font-weight : normal ; color : #030303}

*///////////////상단 네비게이션 링크////////////////////////

a.LeftNv_Hi { font-size : 13px ; font-weight : normal ; color : #3462FF}

.LeftNv_Lo a { font-size : 13px ; font-weight : normal ; color : #3462AA}

.LeftNv_Lo { font-size : 13px ; font-weight : normal ; color : #3462AA}

<<링크와 같은 스타일의 text가 혼재한다면 같이 지정함이 좋습니다.>>

두번째로 본문에 들어갈 링크의 종류를 예상해봅니다.

일반적으로 예상가능한 종류는

다른 메뉴로의 이동, 타 사이트로의 이동, 메일주소, 이름, 주석 혹은 설명페이지로의 이동, 팦업

역시 컨텐츠에 지정된 폰트크기를 상속받게 하는 것이 좋으므로 font-size를 지정하지 않는 것이 좋으며, 종류에 따라 underline만이 필요할지, 뚜렷한 스타일이 필요할 것인지 디자이너가 판단하여야 할것 입니다.

a.text_Outer { color : #FF0000 ; text-decoration : underline ; }

a.text_email { color : #000000 ; background-color : #EEEEEE }

a.text_username{ color : #3333FF ; font-weight : bolder ; }

세번째로 게시판 리스트부분의 링크 스타일을 정의합니다.

보통은 각 카테고리마다 게시판의 디자인이 다르게 하는 경우가 많으므로 카테고리명 그대로 사용하는 것이 편할 때가 많습니다.

a.bbs_shop { color : #3232FA ; text-decoration : none ; }

a.bbs_biz { color : #4444AA ; text-decoration : none ; }

3~4줄의 리스트를 컨텐츠 페이지에서 보여주는 게시판의 경우는 active 링크에 볼드를 처리하는 경우도 있고, 자신의 글의 경우, 자신의 이름부분에 스타일을 달리하는 경우도 있겠죠.

a.bbs_shop_act { color : #3232FA ; text-decoration : none ; font-weight : bolder ; }

5. Form태그들의 스타일을 정의합니다.

form태그의 기본 문자 스타일을 정의합니다.

form

{

text-decoration:none ;

font-size:9pt ;

font-family : 굴림,Gulim,Helvetica ;

margin : 0 0 0 0

}

input, select , option, textarea, button , fieldset, legend, label

{

text-decoration:none ;

font-size:9pt ;

font-family : 굴림,Gulim,Helvetica ;

color:#454545

}

(form에서 유저가 입력하는 내용은 다른 본문과 다른 스타일로 쓰여지는 것이 UI에서 이점을 가지고 있다고 연구되어왔고, 저도 예전부터 그렇게 생각해왔지만, 디자이너분들이 사소한 부분이라고 치부하는 바람에 그다지 보편화되지는 못한 듯 합니다.)

form태그들은 각 카테고리별로 크기와 배경색, 보더를 가지기에 미리 정하기가 애매합니다.

네비게이션부분에서 쓰이는 부분, 검색부분, 로그인부분을 미리 정하고,

각 카테고리별로도 검색, 사용자입력, 기능형등으로 분류해서 정하는 것이 좋을 듯 합니다.

저두 이건 예상하기 너무 힘들어서 그때그때 씁니다...^^

6. 사이트 특징적인 부분

설명하기 애매합니다만,

쇼핑몰의 가격, Confirm부분의 YES or NO, 입력확인부분, History

커뮤니티의 유저이름, 기능성 링크, Site Depth부분, History

증권사사이트의 가격변동폭, 지수,

들과 같이 유저에게 가장 강하게 어필되어야 하는 text부분같은 것은 사이트 전체에서 일관성이 강조되어야 하는 것들입니다. 이런 것들은 기획단계에서부터 그 종류와 성격, 강조의 경중 등등을 미리 협의, 검토, 정리를 한 후 CSS코딩되어야 합니다.

워낙 많으니 예는 안 올릴렵니다.

끝냤슈~

간단하게 요약하자면

object(text) > inline > block 작은 단위에서 큰 단위로 정의하고,

다시 기능적인 부분과 특이한 경우를 세밀하게 정의하는 순서입니다.

[출처] 네이밍 가이드|작성자 과일장수

논리 태그 사용

2008-04-04T18:52:50+09:00

논리(Logical) 태그란?

태그에 한가지 의미를 가지고 있는 것으로서,

초보자용 HTML 서적이나, 웹디자인 학원, 일선현장에서

전혀 사용되지 않는 태그들입니다.

이는 익스플로러와 넷스케이프같은 비주얼 브라우저에 국한하여 디자인하는 것 때문에 이같은 일이 계속되고 있습니다.

HTML4.1에서 제시한,
사용자 접근성이 높은 웹페이지 디자인, 논리구조를 가진 Structure Design을 제작함에 있어...
HTML과 CSS의 분리(CSS Based Design)와함께
논리 태그를 씀으로서 웹페이지 자체에 논리와 의미를 가지도록 하는 것이 중요합니다.

1. Block속성의 논리 태그

<p>

이 태그는 문단과 문단의 시작과 끝을 나타내는 태그입니다.
<div>를 제외한 모든 태그들의 상위개념으로 사용되어야 합니다.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
이 태그는 글내에서 제목을 표시하는 태그들입니다.

글을 보면 큰 제목이 있고, 그보다 하위레벨의 제목이 있듯이...

HTML4.1에서는 각각 1부터 6까지 그 대,중,소를 단계적으로 사용할 것을 제시하였습니다.

<p>와 <h1>의 사용예

여학생이 남학생보다 허리 많이 휘어"

市교육청 초등5년생 13만명 조사결과.."예방엔 자세.운동.식사 좋아"

척추가 비틀어지면서 에스(S)자 모양으로 휘어지는 `척추측만증' 질환이 남학생보다는 여학생들한테 더 많이 나타나는 것으로 집계됐다.

서울시교육청 학교보건원은 작년 4∼12월 시내 551개 초등학교 5학년생 13만1천54명을 대상으로 조사한 결과, 척추가 많이 휜 학생들은 전체의 0.7%인 911명에 달했다고 25일 밝혔다.

이 가운데 남학생은 전체 6만9천229명 중 0.52%인 362명인 반면 여학생은 6만1천825명 중 0.89%인 549명에 달했다.

척추측만증으로 발전하기 전 단계인 척추만곡증 환자도 여학생이 남학생에 비해 최고 8배 가량 많은 것으로 나타났다.

HTML Code

<h1>여학생이 남학생보다 허리 많이 휘어" </h1>
<h2>市교육청 초등5년생 13만명 조사결과.."예방엔 자세.운동.식사 좋아"</h2>
<p>척추가 ...집계됐다.</p>
<p>서울시...밝혔다.</p>
<p>이 가운데 ... 달했다.</p>
<p>척추...나타났다.</p>

<blockquote>

이 태그는 글 중에 인용문이 있을 때 사용됩니다.
좌측에 40pixel의 MARGIN을 가지고 있습니다.
사용예

25일 이임식에서 유 교육감은

“서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것”

이라고 말했다.

그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다.

HTML Code

<p>25일 이임식에서 유 교육감은
<blockquote>서울교육의 변화와 ...힘을 보탤 것”</blockquote>
이라고 말했다.</p>
<p>그러나 ...돌았다.</p>

<address>

이 태그는 글의 작자, 저작자의 정보를 담는 태그입니다.
일반적으로 신문사사이트에서 기자의 이름과 이메일부분을 이 태그를 적용하여야 합니다.
사용예

25일 이임식에서 유 교육감은

“서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것”

이라고 말했다.

그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다.
이낙진 기자 lee**@kfta.or.kr

HTML Code

<p>25일 이임식에서 유 교육감은
<blockquote>서울교육의 변화와 ...힘을 보탤 것”</blockquote>
이라고 말했다.</p>
<p>그러나 ...돌았다.</p>

<address>이낙진 기자 <a href="mailto:lee**@kfta.or.kr">lee**@kfta.or.kr</a></address>

2. Block속성의 물리태그

아래의 태그들은 HTML4.1에서 사용을 자제할 것을 제시하였습니다.
<marquee>
<pre>
<listing>
<xmp>
<plaintext>
<hr>

3. Inline속성의 논리태그

<abbr>, <acronym>, <dfn>
<abbr>은 abbreviation의 줄임말로 "축약어" 을 뜻하며 (말을 줄여쓰는 것)
<acronym>는 "두문자어" 를 뜻하며 (긴 단어의 첫문자를 모아쓰는 것)
<dfn> 은 instance definition의 줄임말로 새로운 단어에 대한 정의을 붙이는 태그입니다.
<dfn>태그는 이탤릭체로 구현이 되며,
<abbr>, <acronym>태그들은 일정한 비주얼을 가지지 못하여, 일반 텍스트와 별 차이가 없습니다.
이들을 강조하고자 할 때에는 CSS로 스타일을 만들어주면 됩니다.
이 태그들에는 title속성을 써서 글에 대한 설명을 해주어야 합니다.

사용예

Massachusetts(메사추세츠 주)를 줄여 Mass. 라고 쓰고, Apartmention(아파트)를 Apt.라고 줄여씁니다. 이처럼 단어의 자음이나 모음만 맞춰서, 혹은 아무상관없이 긴 단어을 단순하게 줄여쓰는 경우가 말합니다. 우리나라에서는 이러한 형태로 줄여쓰는 경우가 그다지 많지 않아 예를 따로 만들기가 힘들군요.

두문자어는 축약어와 비슷하지만 여러 단어로 이루어진 문장 또는 복합단어의 앞글자만 따서 줄여쓰는 것을 말합니다. USA는 United States of America의 두문자어이고, NATO는 North Atlantic Treaty Organization의 두문자어입니다. 우리글의 경우에는, 경실련이나 노사모 같은 단체 이름을 두문자어로 자주 부르져.

<dfn>태그는 꽤 설명하기가 애매한데, 음악하는 밴드나 그룹의 경우 그룹명을 이것저것 짜맞춰 만드는 경우가 많죠. 오래된 밴드 015B의 경우, "까마귀날자 배떨어진다."라는 말을 숫자와 영어로 만들어낸 단어이지요. 이런 단어에 <dfn>태그를 씁니다.

HTML Code

<p>Massachusetts(메사추세츠 주)를 줄여 <abbr title="Massachusetts">Mass.</abbr> 라고 쓰고, Apartmention(아파트)를 <abbr title="Apartmention">Apt.</abbr>라고 줄여씁니다. 이처럼 단어의 자음이나 모음만 맞춰서, 혹은 아무상관없이 긴 단어을 단순하게 줄여쓰는 경우가 말합니다. 우리나라에서는 이러한 형태로 줄여쓰는 경우가 그다지 많지 않아 예를 따로 만들기가 힘들군요.</p>

<p>두문자어는 축약어와 비슷하지만 여러 단어로 이루어진 문장 또는 복합단어의 앞글자만 따서 줄여쓰는 것을 말합니다.
<acronym title="United States of America">USA</acronym>는 United States of America의 두문자어이고, <acronym title="North Atlantic Treaty Organization">NATO</acronym>는 North Atlantic Treaty Organization의 두문자어입니다.
우리글의 경우에는, <acronym title="경제 실업인 연합">경실련</acronym>이나 <acronym title="노무현을 사랑하는 모임">노사모</acronym> 같은 단체 이름을 두문자어로 자주 부르져.</p>

<p><dfn>태그는 꽤 설명하기가 애매한데, 음악하는 밴드나 그룹의 경우 그룹명을 이것저것 짜맞춰 만드는 경우가 많죠. 오래된 밴드 <dfn title="까마귀날자 배떨어진다.공일오비의 줄임말">015B</dfn>의 경우, "까마귀날자 배떨어진다."라는 말을 숫자와 영어로 만들어낸 단어이지요. 이런 단어에 <dfn>태그를 씁니다.</p>

<q>, <cite>
<q>는 다른 사람의 말이나 글을 인용했음을 나타내는 태그이고,
<cite>태그는 인용문의 출처, 출처에 대한 설명들을 나타내는 태그입니다.
<q>태그는 문장의 앞과 뒤에 인용부호(")가 붙도록 되어 있으나, 익스플로러에서는 지원하지 않으며, 넷스케이프6.0에서만 지원합니다. HTML4.1에서 <q>태그에 lang속성을 써서 인용문의 언어를 표시하기를 권장하고 있습니다.
사용예

25일 이임식에서 유 교육감은 “서울교육의 변화와 개혁은 다시 과거로 되돌릴 수 없으며 후퇴해서도 안된다. 앞으로도 미력이나마 서울교육 발전에 힘을 보탤 것”이라고 말했다.

그러나 이날 이임식에는 그가 발탁해서, 요직에 기용하고, 승진까지 시킨 공무원 상당수가 보이지 않았다. 시교육청 주변에서는 “쓸쓸한 그의 퇴임은 자업자득”이라는 말이 돌았다.

출처 : 한국교육신문

HTML Code

<p>25일 이임식에서 유 교육감은 <q lang="euc-kr">서울교육의 변화와 ...힘을 보탤 것”</q>이라고 말했다.</p>
<p>그러나 ...돌았다.</p>

<p>출처 : <cite>한국교육신문</cite></p>

<code>,<kbd>,<samp>,<var>

<code>는 프로그램코드를 화면에 출력할 때
<kbd>는 키보드로 입력된 문자나 글을 화면에 출력할 때 이용
<var>는 프로그램코드의 변수, 정수를 브라우저에 출력할 때 사용
<samp> 는 프로그램을 거쳐 출력되는 글이나 문자임을 나타낼 때

<var>는 이탤릭체로 구현이 되며, 다른 3가지는 Monospace Font로 구현이 됩니다.

                                                     (Monospace font에 대한 설명)

사용예

function X_alert() {
        window.alert('잘 둘러보구 가란 마랴!!');
}

Log1 = 12 Log2 = 2 Log3 = 23
구매결제인증이 완료되었습니다.
frui2store 님이 입력하신 별명: Tough Guy (을)를 사용하시겠습니까?

HTML Code

<code>
function X_alert() {
      window.alert('잘 둘러보구 가란 마랴!!');
}</code>

<var>
   Log1 = 12<br>
   Log2 = 2<br>
   Log3 = 23<br>
</var>
<samp>
구매결제인증이 완료되었습니다.
</samp>

frui2store 님이 입력하신 별명: <kbd>Tough Guy</kbd> (을)를 사용하시겠습니까?

<del>,<ins>
<del>은 수정으로 인해 삭제된 문자를 남겨둘 필요가 있을 때 이 태그를 사용합니다.
Line-through로 구현이 됩니다.

<ins>는 수정으로 인해 수정(삽입)된 단어를 표시할 때 사용하며, Underline으로 구현됩니다.

사용예

제 96회 재동 ~~국민학교~~초등학교 의 동창회를 개최합니다.

HTML Code

제 96회 재동 <del>국민학교</del><ins>초등학교</ins> 의 동창회를 개최합니다.

<em>,<strong>
<em>은 emphasis의 준말로 강조를 뜻할 때 사용하며,
<strong>은 strong emphasis의 준말로, <em>태그보다 더 강조되는 사항에 사용합니다.
즉, 강조하고자 하는 사항을 2단계로 구분하여 사용할 때 사용됩니다.
<em>은 이탤릭체로 구현이 되며, <strong>은 볼드체로 구현합니다.
이탤릭체는 한글사용에 있어, 강조의 뜻을 전하기는 커녕, 기독성마져 떨어트리는 경우가 많습니다. 강조의 단계를 두어 <em>을 사용할 때에는 <em>, <strong>태그 두가지에 각각 단계가 구분되는 디자인 스타일을 지정해놓고 사용하는 것이 좋습니다.

사용예

웹 페이지의 디자인은 클라이언트 보다는 사용자 가 우선임을 잊지 말아야 합니다.

HTML Code

웹 페이지의 디자인은 <em>클라이언트</em> 보다는
<strong>사용자</strong> 가 우선임을 잊지 말아야 합니다.

4. Inline속성의 물리태그

아래의 태그들은 태그 자체에 아무런 의미없이,
단지, 비주얼적인 용도로만 사용되는 태그로서
HTML4.1에서 사용을 자제하라고 제시하였습니다.

font
b
i
u
s,strike
sup sub
big small
bdo
tt
blink

※
위의 태그들을 사용을 자제하라는 W3C의 제안,
CSS를 이용하여 구현하라는 HTML4.1에서의 제시한 내용의 의미는...

이쁜 모양새만를 위한 Design을 함으로서 사용되는 태그들의 사용을 제한하라는 것입니다.
웹페이지는 논리태그들을 적극적으로 사용하여 글의 정보를 담도록 하고,
웹페이지의 디자인은 CSS를 이용하여 구현하라고 한 것입니다.

논리태그의 사용과
HTML, CSS의 분리사용(CSS Based Design)은
이런 의미를 가지고 있는 것입니다.

[출처] 논리 태그 사용|작성자 과일장수

POSITION속성과 그 속성값

2008-04-04T18:48:41+09:00

흔히들...position:absolute 이 속성을 레이어 띄우기용으로만 사용하는데...

position값의 속성을 자세히 알면...

훨씬 다양한 레이어를 구성할 수 있다.

position속성에는 4가지 값이 존재한다.

absolute, relative, static, fixed

이중

static값은 position속성을 사용하지 않았을 때의 값이고...

fixed값은 프린트용 (워드나 아래아한글에서 머리글,바닥글과 유사한 용도) CSS속성으로 비쥬얼브라우저나 미디어브라우저에서는 쓰이지 않을 것이다.

그럼 2가지밖에 없다...^^...

absolute와 relative 모두

태그가 시작하는 위치로부터 left,top,right,bottom값의 영향을 받아 위치를 변경할 수 있다.

단, 다른 점이라면...

absolute는 본래 태그가 있던 위치에 공간값을 가지지 않는 반면

relative는 본래 태그가 있던 위치에 공간값을 가진다.

쉽게 말해...(쉽게 설명하기 힘들다.)

absolute 속성을 받은 태그가 레이어로 띄워지고서 다음 태그가 그 위치로 오게 되는 것이다.

z-index를 쓰지 않아도 두번째 블록이 첫번째 블록 위치로 올라오면서

첫번째 블록은 띄워진 블록(레이어)가 된다.

단, left,top,right,bottom값은 현재 브라우저에서 z-index값을 썼을 때처럼 잘못 구현되고 있다.

position:relative만을 썼을 땐...아무런 변화가 일어나지 않는다.

현재 자신의 공간값에 그대로 있기 때문이다.

left, top 값을 사용하면 absolute값을 쓸 때 처럼 레이어 형태로 구현이 되는데...

단, 두번째 블록은 첫번째 블록 원래 위치로 올라가지 않으며, 두 블록 모두 원래 자신의 공간값에 그대로 머물러 있다.

absolute = 절대적

relative = 상대적 의 차이란 저런 것이다.

position속성을 가장 쉽게 응용 할 수 있는 것이라면

보통...사이트의 상단메뉴같은 것을 구성할 때...

위와 같이 "하위메뉴"레이어를 띄우려...position:absolute에 left,top값을 모두 입력해주는데...

그러지 말고...

상위메뉴이미지나 링크에 <BR>한번만 쓰고

레이어에는 position:absolute값만 써주면 일일히 left, top을 포토샵에 계산하는 불편이 줄어든다.

relative속성을 가장 쉽게 응용하는 것이 있다면

가끔...이런저런 이유로 이쪽에 있던 컨텐츠를 조금 다른 쪽에 위치시켜줘야할때가 있다.

아래와 같이...

원래 코딩된 것...

밑줄 아래에도 여러 컨텐츠로 구성되어 있었지만...다행히...Select Box가 들어갈 여유공간이 있어서 position:relative;top:47px만 쓰고 바꿀 수 있었다.

반대의 경우라면 top:-47px;로 해줘도 된다.
(offset의 속성값이 left, top, right, bottom값이 있지만

이상하게 아직까지도 브라우저에서 지원하지 않는다. 원래 마이너스 값은 사용하지 못하게 되어 있지만...right, bottom값이 지원하지 않는한...마이너스값을 써줘야한다.)

[출처] POSITION속성과 그 속성값|작성자 과일장수

긴 제목 마우스오버시에만 보기

2008-04-04T18:43:01+09:00

프로그래머가 음악리스트부분의 작업하는 것을 보니...

글이 길때, 마우스오버하면 제목의 text들이 우에서 좌로 스크롤되도록 한다는 것을 알았다.

그런데...스크롤...이런 거 장점은 티끌만큼 있는 반면 단점은 우질라게 많은 거다.

게다가....Mozilla Firefox에선 아예 안되는 <nobr>태그까지...으으윽

이런저런 궁리를 하다가 엉뚱한 아이디어가 떠올랐다.

<a>태그에 hover시 레이어개념으로 띄워서 긴 제목을 모두 보게 할 수 있을까?

만들었다.

이기찬의 명곡(?)

"시간은 모든 걸 잊혀지게 합니다. 하지만 사랑은 모든 걸 기억하게 하죠 (사랑이 아직 남았는데..)"

꽤 긴 제목으로 악명이 높아 웬만한 음악사이트에서 100% 말줄임표를 쓰게하는...

제목부분에 마우스오버를 하면...

요로케 된다.

a.:link {

width:100%;height:12px;vertical-align:top;overflow:hidden;position:static;color:#494949;

display:block;background-color::#EFEFEF;

}
a.:visited {

width:100%;height:12px;vertical-align:top;overflow:hidden;position:static;color:#494949;

display:block;background-color::#EFEFEF;

}

a.:active {

width:100%;height:12px;;vertical-align:top;overflow:hidden;position:static;color:#494949;

display:block;background-color::#EFEFEF;

}

a.:hover {
     display:block;
     border:1px solid #DEDEDE;
     width:495px;

     height:auto;
     position:absolute;
     overflow:show;
     color:#FF0000;
     vertical-align:top;
     background-color:#FFFFFF;
     }

위의 소스에서 눈여겨 볼것은 2가지이다.

width속성값, height속성값, 그리고 position속성값이다.

width와 height의 퍼센트(%)값은 해당태그의 겉을 감싸고 있는 태그 (어미태그)의 width값을

종속받아 그 값의 퍼센트(%)로 구현하는 것이다.

link, visited, active의 width는 <td>태그에 지정된 width값의 100%만큼의 너비를 가지게 되고

레이어로 띄우는 hover때는 495px로 고정시키는 것이다.

height의 경우는 제목의 긴 text를 감추기 위해 12px로 고정시켰다.

레이어로 띄웠을 때에는 text의 길이만큼 자동으로 height가 넓어지도록 auto값을 주었다.

position속성의 또 하나의 값 static

이것은 position의 기본값, absolute, relative값이 없을 때의 Default값이다. 안써도 별 상관없는 속성값이지만, hover시에 absolute를 쓰기 위해선 이 Default값이 지정되어 있어야 했다.

그외 자세한 디테일은 스스로 해보며 조정해나가야 할 것이다.

그런데....

참...훌륭한(?) 아이디어 이었음에도 불구하고...

이것을 쓰기에는 뭔가 불편했다.

짧은 제목이었을 때를 체크해주는 속성은 CSS에서 어떻게 해볼수가 없었다.

"녹색 정원"같은 짧은 제목일 때에도 레이어로 띄워야만 하는 것이 꽤 큰 불편함으로 다가왔다.

굉장히 긴 글인데 짧은 요약글의 형태를 기본으로 하고

마우스오버같은 액션으로 긴글을 보여줘야 하는...

다른 곳에 쓰기에는 좋은 아이디어인 듯 하다.

설명을 보여주어야 하는 popup layer같은 비속성CSS를 이용하는 경우에 대체해도 좋을 듯 하다.

[출처] 긴 제목 마우스오버시에만 보기|작성자 과일장수

xhtml 기본 작성법

2008-04-04T18:39:01+09:00

CSS를 이용하여 html을 구성하는 것은...

궁극적으로 웹문서규격이 xhtml로 옮겨과는 중간과정중이라는 이유 하나밖에 없다.

CSS를 이용하면 이런것이 좋고, 저런것이 좋고, 이런면에서 약간 어렵지만 다른 면에선 편하고

이런 것은 모두 부가적인 효과일뿐, 궁극적으로는 xhtml로 발전을 위한 중간과정일 뿐이다.

최근 몇몇 프로젝트를 진행하면서

CSS방식의 코딩을 주로 하면서, html코딩을 xhtml규격에 맞춰 코딩을 요구하는 프로젝트가 많아지긴 했는데, 조금 의아한 방식으로 요구하기도 해서 난감한 경우가 몇가지 있었다.

그래서...

기본적인 작성법 좀 써볼 까 한다.

1. 대소문자 구분

중요한 문제이다.

태그와 그 속성, 속성값을 대소문자로 구분하여 작성한 html문서들

그 이유는 유지보수시, "그것들을 구분하기 쉽다"라는 이유로 꽤 편리하지만, 코더들을 경악에 떨게 하던 그것을 xhtml에서는 사용할 수 없다.

태그와 속성, 그 속성값은 반드시 소문자로 작성하여야 한다.

왜냐면...

src값과 SRC값중, SRC를 인식하지 못하게 규격되어 있고,

그 이유는 추후에 전혀 다른 속성으로 발전할 가능성이 있기 때문이다.

2. 태그의 시작과 끝

시작태그가 있으면 끝맺음 태그는 반드시 있어야한다.

<p>이러쿵저러쿵</p>

이거 모르는 사람은 없을 것이다.

3. 독립태그

끝맺음 태그없이 독립적으로 쓰이는 <br>, <img>, <param>, <input> 같은 태그들

">" 앞에 띄어쓰기 한칸과 역슬래쉬(/)를 사용하여

<br />, <img />, <param />, <input />등으로 표기하여야 한다.

라는게 웹규약이라고 떠드는 바보들이 너무나 많다!!!!!

이건 어디까지나

작성한 html문서를 추후에 xhtml로 변환하는 과정에서의 오류를 없애기 위한 일종의 방편일뿐,

xhtml에서는 <br></br>과 같은 방법으로 작성해주어야 한다.

이는 또한, xml에서도 마찬가지이다.

추후에 xhtml로 새로운 문서를 작성하려 할 때에는 <br></br> 과 같은 방식으로 코딩해야한다.

내년에 xhtml로 리뉴얼하지 않을 대기업이 이런걸 요구할 땐 좀 어이없음

4. 속성값

1) value="3" 속성값은 반드시 따옴표 사이에 위치하여야한다.

2) selected, checked와 같이 속성값없이 쓰이던 속성들은

selected="selected", checked="checked"와 같이 표기하여야 하고,

이 값에 관련된 javascript 값 또한 새로 규격화되었다.

3) 위에도 썼지만, 대문자로 쓰면 인식을 안 할 가능성이 높다.

5. DOCTYPE 규정은 필수

프로그래머들아~~~~

제발 좀 지우지 말아다오~~~~

현재 익스플로러는 DOCTYPE규정에 따라 전혀 다른 레이아웃을 구성한다.

모질라는 DOCTYPE규정에 상관없이 같은 레이아웃을 보여주지만, 수학기호, 어플리케이션삽입과 같은 상황에서는 전혀 다른 결과값을 가진다.

6. javascript 호출을 위해 name값을 쓰지 말아라.

name값은 오로지 hash호출을 위해서만 호출하라.

...

위와 같이 일명 "스크롤링크", "앵커링크", "샵링크"와 같은 곳에만 쓰고

javascript 호출을 위해서는 id값만을 써야한다.

document.getElementById('div01').style.display = block 과 같이 사용하고

name을 호출해야한다면, 반드시 getElementByName()을 사용하도록 하자.

[출처] xhtml 기본 작성법|작성자 과일장수

display:block 쪼금 더~

2008-04-04T18:36:50+09:00

display:block;

display:inline;

display:none;

위에것은 너무나도 많이 쓸 것입니다.

오래전부터 자바스크립트를 이용하여

visibility속성과 함께 레이어를 보였다가 숨겼다가 하는 기능을 많이 사용했기 때문이죠.

기본적으로, 태그가 지닌 기본적인 display속성을 바꾸는 역할을 합니다.

div {display:inline;}

<div>태그가 <em>, <strong>, <span>태그처럼 구현되도록 바꾸죠.

span {display:block}

<span>태그가 <div>태그처럼 구현되도록 바뀝니다.

여기까지는 머 큰 차이가 없습니다.

중요한 것은 요 아래부터입니다.

정확하게 설명할만한 단어가 알려져있지 않기에

제 임의로 최종태그라고 이름붙여 사용하는 태그들이 있습니다.

<p>태그안에는 <div>, <table>, <blockquote>같은 block태그가 위치하지 못합니다.

<li>태그안에는 <div>, <table>, <blockquote>같은 block태그가 위치하지 못합니다.

<address>태그역시 block태그가 위치하지 못합니다.

즉, <p>, <li>, <address>처럼 최종태그인 태그안에는

오로지 inline태그들만이 위치할 수 있습니다.

또한, inline태그를 display:block으로 바꾸어 사용할 수도 없습니다.

이럴때 쓰는 것이 display:block입니다.

<p>

<span>이 사진은 13살때의 제 모습입니다.</span>

</p>

와 같이 코딩하고서

img에 <br />태그 없이 줄내림을 하고 싶다면

p span {display:block;}을 해주면 되는데...

<p>태그는 최종태그로 내부의 block속성을 인정하지 않습니다.

이때....

p {display:block;}

p span (display:block;}

처럼 정의해주면 원하는 디자인을 볼 수 있게 됩니다.

<ul>

<li><img src="사진.jpg" /><span>이 사진은 13살때의 제 모습입니다.</span></li>

</ul>

<li>는 list-item이라는 고유의 display속성을 지니고 있기 때문에,

역시 내부에 ul, ol, dl외의 block형식을 사용하면 태그가 완료된 것처럼 구현이 됩니다.

(한마디로 깨지져~)

이때, <ul>, <li>모두 display:block로 정의해주면

위 <p>태그에 사용한 것처럼 사용할 수 있게 됩니다.

또다른 예로

li {height:21px;}

li a {display:block;}

위와 같이 사용할 때도...li {display:block;}은 필수 입니다.

별루 어려운 내용도 아니지만,

display속성의 저런 속성을 알게 되면

보다 다채로운 태그사용이 가능해질 것입니다.

단, li태그내에 block형식이 위치할 때...

IE6.0 SP2 이하에서는 요상한 padding-bottom값 버그가 생기니

너무 긴 list에는 가급적 사용을 금합니다.

TIP!!!

팁일까?

TABLE위주로 코딩하던 시절

<tr>태그를 보였다가 숨겼다가 하기 위해선...

<tr>외곽에 <span>을 두어...

display:none 과 display:inline으로 토글하는 스크립트가 많이 사용됬습니다.

왜냐면,

<tr>은 td의 그룹핑을 위한 태그이고,

<td>는 inline범주에 속했기 때문입니다.

하지만, loose.dtd와 xhtml방식에서는

<span>은 더이상 <tr>외곽에서 아무런 효과를 주지 못합니다.

(FF에서는 table코딩방식을 사용해도 아예 먹히지도 않죠.)

의외로...이 차이점을 모르는 프로그래머들이 많아서

오래전에 구축된 프로그래밍에 디자인리뉴얼을 진행하다보면,

수정요청오는 것의 30%가 이것때문이고,

50%는 iframe문제,

나머지 20%는 id, name값 호출문제입니다.

먄약, show hide기능의 스크립트를 짜고서...

디자인이 깨진다면...

~~~.style.display='inline'을 ~~~.style.display='block'으로 바꿔주는 것만으로

90%는 해결됩니다.

나머지 10%는 innerText를 innerHTML로 바꿔주거나...

innerHTML에 <table>을 뿌려주는 것...

[출처] display:block 쪼금 더~|작성자 과일장수

글들의 상하 정렬위치 설정 vertical-align속성

2008-04-04T18:29:02+09:00

이전에 나온 모든 CSS관련된 책에는...

vertical-align이 Block내의 상하 정렬 위치를 결정하는 속성으로 설명되어 있습니다.

이는 잘못된 것입니다.

W3C.org에 권장된 사안이 아닌...브라우저에서 적용되는 예를 가지고 책의 내용을 만들었기 때문이죠. 저 또한 근 1년전까진 해도 그렇게 알고 있었지만, 익스플로러 6.0 SP1을 설치하고부터 이상하게 vertical-align속성이 이전까지와는 달라서, W3C.org에 들어가서 원문을 보니...

vertical-align속성이 하는 역할은 inline내에서 서로 다른 font와 font-size가 배열되었을 때,

글의 정렬위치를 결정하는 역할을 합니다.

아래의 예를 보시길...

이전에 알고 있던 방식(잘못구현되던 방식)

위와 같이...

한 줄 안에 서로 다른 크기의 폰트의 상하위치를 결정하는 것이 원래 vertical-align의 속성값입니다.

예제는 아래와 같이 입력됩니다.

<div>

<span style="font-size:8pt; vertical-align:text-bottom;">8포인트 텍스트</span>16포인트 텍스트

</div>

또한 영문과 한글의 혼용 예제를 들자면

li a { font-size:12px; color:#737373; text-decoration:none; line-height:30px; } 이렇게 소스를 적용하면

영문과 한글의 상하가 어긋나는 것을 볼 수 있습니다.

li a { font-size:12px; color:#737373; text-decoration:none; line-height:30px; vertical-align:middle; } 이렇게 속성를 적용하면

영문과 한글의 상하가 일치합니다

덧글달기 CSS Coding TIP

2008-04-04T18:26:33+09:00

1번은 덧글과 날짜,아이콘그룹을 <BR>로 줄을 구분하였고,

2번은 덧글과 날짜,아이콘그룹을 <BR>로 줄구분없이 한 줄안에 코딩되었습니다.

그런데, 덧글이 길어져서 오른쪽 여백이 모자르게 되면...

아이콘만 아래로 내려간다거나, 날짜의 중간부분에서 줄바꿈이 일어나

UI상 좋지 않은 부분이 되버립니다.

이러한 문제를 해결하기 위해서는 아래와 같이 해보시기 바랍니다.

<span style="white-space:nowrap">

</span>

white-space속성은 <TD>태그의 nowrap속성과 같이...

태그내에서 줄바꿈이 일어나지 않도록 합니다.

위와 같이 적용하면,

덧글이 짧을 경우, 한 줄 안에 구현이 되고...

덧글이 길 경우, 날짜,아이콘그룹 전체가 줄바꿈을 하게 됩니다.

[출처] 덧글달기 CSS Coding TIP|작성자 과일장수

iframe 대신 사용하는 object 태그

2008-04-04T18:17:59+09:00

iframe 대신 사용하는 object 태그

<object id="miniwini" width="650" height="400" type="text/x-scriptlet"> <param name="url" value=http://www.naver.com> <param name="selectablecontent" value="0"> <param name=scrollbar value="1"> </object>

TD안엔 DIV를 넣어라?

2008-04-04T18:05:09+09:00

아니다.

W3C의 어떤 곳에도 저것을 장려하거나 표준에 접합한 방법으로 제시하지 않았다.

하지만...

저것이 당연한 것으로 알고 있는 디자이너들이 너무 많다.

저것이 당연한 것으로 알게 되는 원인은 두가지이다.

1. HTML, XML에 통달한 한 외국 웹 디자이너가 칼럼에 저딴 걸 써놨기 때문이다.

근데...그 칼럼의 의도가 어떤 것이었는지 해석해 볼 노력도 없이...

<TD><DIV>내용</DIV></TD>

이렇게 써라....라는 말만 여기저기로 널리 퍼지고 옮겨져 갔다.

심지어는....아래 내용이 있는 서두부분은 싹뚝 짤리버린채...

내용만 옮겨진 곳도 많다.

그 칼럼의 의도를 요약하면 아래와 같다.

아직까지 웹브라우저가 CSS표준방식을 제대로 구현해주지 못하기 때문에

웹 디자이너는 <table>태그의 사용을 중단하기를 망설여하고 있다.

레이아웃을 쉽게 구현하는 <table>태그를 버리지 못하겠다면

최소한...

큰 레이아웃은 <table>태그로 사용하되, <td>내에서 <div>태그를 사용해서 세부적인 레이아웃을 구성하고, 점차 CSS사용법을 익혀나가는 것이 좋을 것이다.

점진적으로 익숙해질 때까지만 저렇게라도 써봐라....라는 것이다!!!!!

2. 쓰레기 프로그램 프론트페이지가 저렇게 구현하더니 구데기 프로그램 드림위버까지...

프론트페이지는 그냥 막....<TD><DIV>이렇게 만들어내더니...

드림위버는 아예...그걸 조절하는 옵션까지 만들어놔따.

저러니...웹 디자이너가 아무런 의심없이 저것이 코딩방식의 발전향이라고 받아들인 것이다.

---------------------------------------------------------------------------------------

웹 표준에는 절대!

<TD>태그안에 <DIV>태그가 들어가는 것을 장려하지 않는다.

<TD>태그는 <span>, <strong>, <acronym>같은 inline속성 태그의 범주로 구분되고 있다.

(범주로만....그렇게 구현되는 것은 아니다)

그런 증거로 <TD>태그에 valign이나 vertical-align속성이 정의되지 않았을 때의 기본이

vertical-align:middle이 아닌

vertical-align:baseline으로 규정되어져 있다.

baseline을 간단히 설명하자면. 아래정렬을 하되

서로다른 inline태그의 배열중에서 높이(line-height)가 가장 높은 것의 아랫단을 기준으로 하는 것이다. 이는 <span style="display:table-cell">내용</span>과 같은 방식을 구현하는데 그 기준으로 삼기 위한 것이다.

그래도 어렵다..^^....간단하게 말해서

<TD>내용</TD> 이렇게 코딩하면 상하정렬이 중단정렬(middle)이 기본으로 되던 것이

<TD>의 크기에 상관없이 가장 큰 폰트나 line-height의 baseline을 기준으로 정렬이 되는 것이다.

<TD>는 표를 위한 태그중 하나이다.

절대 내용을 집어넣기 위한 것이 아니다.

그렇기 때문에 <TD>안에 <DIV>가 들어갈 이유가 없다.

단지, 표로 정리된 것에 익숙한 국내유저를 위해...디자인이 그렇게밖에 진행되지 못하기에

코딩할 때 <TD>에 <DIV>를 넣는 방식을 버릴 수 없을 뿐이다.

[출처] TD안엔 DIV를 넣어라?|작성자 과일장수

제발...alt텍스트와 title텍스트를 구분해조바바

2008-04-04T18:03:53+09:00

이 일을 하면서 가장 분개하는 것은...

어떤 넘인지는 몰라도...

프로그램 하나 잘못 만들어서...

잘못된 사용법이 기준이 되는 억지의 상황이 연출된다는 것이다.

이미지 태그에 alt="회사소개"를 사용한다면...

이것은 alternative context의 약자로

이미지로딩중에 보여질 글을 보여지게 하라는 것이다.

그런데...

국내에서 정부인증까지 받은...웹표준과는 별 상관없는 프로그램이...

alt텍스트(만)를 지원한다.

그 프로그램이 만들어질때에는 alt속성에 대해서는 잘 알려진 반면

title속성은 몇몇 사람들에게만 알려진 것이었다.

그래서...대부분

alt텍스트가 정법인것으로 알고 있다.

아니란 말이다.

이미지에 대한 설명은 title속성으로 하는 것이다.

이렇게 사용하고서 이미지에 마우스를 올려보시라.

이미지로딩이전에 보여질 alt텍스트내용이 보이시는지?

의미전달을 위해 사용되는 title텍스트내용이 보이시는지?

만약, alt텍스트가 더욱 중요한 요소라면

왜 현재 사용되는 5~6개의 모든 브라우저가

alt텍스트내용보다 title내용을 보여주는지 설명하실 수 있겠습니까?

(게다가...alt보여주는건 IE뿐.......ㅡㅡ;;)

브라우저 제작사들도...

title속성이 중요하기 때문에 그렇게 만들었다라는 것...

이해되시려나?

비러머글 프로그램 얘기...

저 프로그램은

국내 웹에이전시에서 최초로 웹표준으로 만들어지기...무려 4년전에 만들어진 프로그램입니다.

웹규약 자체도

1999년에 html4.0 + css2.1 + xhtml1.0이 만들어지고

2003년에 css3.0 forum의 내용이 대거 2.1로 흡수되면서

웹표준이라고 부를 수 있는 뼈대가 다져졌고...

2005~2007년에 수많은 속성값이 신규등장하면서 많은 변화를 겪었습니다.

자...6년전을 기준으로 만들어진 프로그램에다가

2007년에 정비된 웹표준을 짜맞춰 넣으라구요?

잘 나가는 웹에이전시가

저런 구닥다리 규정에 대해 클라이언트에게 이해시키기는 커녕

카테고리 메뉴 = 이미지

로케이션 = 이미지

회사주소 = 이미지

전화주소 = 이미지

강조글 = 이미지

인사말 = 이미지

게시판제목 = 이미지

데이타테이블제목 = 이미지

웹표준에 맞지 않은 웹사이트를 만들면서

코딩은 웹표준으로 한다구요?

정말 난감합니다.

alt는 이미지가 로딩되기 이전에 유저에게 보여주는 용도일 뿐이고,

title은 태그와 태그에 대한 설명,내용을 담는 속성입니다.

단지, 비러머글 특수프로그램이 지원을 안할뿐...

[출처] 제발...alt텍스트와 title텍스트를 구분해조바바|작성자 과일장수

태그의 상세분류

2008-04-04T18:02:12+09:00

먼 HTML을 야그하는데 기초지식이니 머니 주절주절 하냐고 하겠지만,

엄연히 W3C에 의해 규정되어진, HTML뿐만 아니라 SGML, XML등등 이후의 어떠한 웹문서규격에도 공통적으로 규정되어질 것이니, 하찮은 HTML이라 하여 함부로 보지 말것이어다.

태그의 분류

일반적으로는 대부분의 사람들이 태그를 나누라고 하면

브라우저에 보이는 태그와 보이지 않는 태그로 분류할 것입니다.

이것은 시각적으로 구현되는 익스플로러, 넷스케이프, 오페라 브라우저같은 것에만 해당하는 것입니다. 즉, 음성과 음향으로 보여질 멀티미디어브라우저, 음성이나 점자로 구현하는 시각장애인용 브라우저, 청각장애자용 브라우저, 지체장애자용 브라우저와 응용기기등에서는 아무런 효용이 없다. 우리네가 인지하는 것 이상의 논리적인 그 무엇인가가 필요하는 야그입니다.

○ 문서를 구성하는 요소로서의 구분

중학교때인가? 글의 구성요소를 배운 적이 있습니다.

글>문단>문장>문자>음절...머 이런 내용...

이런 식으로 각 태그를 구분하여야 할 것입니다.

글=<html></html>

문단=<div></div>, <p></p>, <blockquote></blockquote>, <h1></h1>

문장=<span></span>, <font></font>, <strong></strong>

글의 성격을 나타내는 <title></title>, <meta></meta>

○ 기능적인 면의 구분

각각의 태그는 그 기능적인 면으로 구분될 수 있습니다.

＊ 기능을 가지고 있느냐?

＊ 화면상의 비주얼을 변경하느냐?

＊ 태그에 의미가 부여되어 있느냐? -> 논리적 코딩에 가장 중요

＊ 그룹핑을 담당하는 태그이냐?

＊ 사용자와 주고받기 위한 장치이냐?

크게 두가지 분류로 구분이 가능하며, 이와 같은 방법으로 아래 표와 같이 구분이 가능합니다.

http://mfiles.naver.net/9b4dae77623957e4c9ac/data2/2004/4/8/37/tag_1.html

다른 부분을 설명할 때 이보다 더 자세한 구분이 필요하겠지만, 기본적인 구분은 이러하다는 것은 외울 필요는 없고, 인지하시기 바랍니다.

[출처] 태그의 상세분류|작성자 과일장수

DIV - 테이블은 이제 쉬어야할때...

2008-04-04T17:55:02+09:00

DIV - 테이블은 이제 쉬어야할때...

이해하기 좋은 글 같아서 퍼왔습니다.. :-)

테이블과 div의 조화를 위해.. ^_^/

테이블은 이제 그만 쉬어야 할 때 - DIV

테이블(html의 table 을 칭함)은 이제 목적 이상의 일을 할 필요가 사라졌습니다. 그저 단순한 “표” 를 만들기 위해서 제작된 테이블이 레이아웃, 즉 홈페이지 틀을 잡기위해서 쓰이고 있다니. 그리고 그것이 테이블의 맞는 용도처럼 교육되고 있다니 이제는 슬슬 멈추어야 할때라고 봅니다. 특히 XHTML이 개발되어 나오면서 계층형과 같은 구조로 레이아웃은 디자인되며 디자인이 우선이 아닌 그 안의 내용의 구성을 먼저 생각해야하는 개념 자체의 변화가 찾아오고 있습니다. 아니, 예전 HTML 생성되었을때의 원래의 개념으로 돌리려고 하고 있습니다. 얼마전 XHTML 2.0(이 포스팅이 쓰여지는 현재는 XHTML 1.1) 이 개발되면서 약간의 내용을 볼수 있었습니다. 지금 쓰여지고 있는 모든 개념적인 HTML이 완전히 변화될듯 만들어 지고 있었습니다. 심지어 DIV만이 레이아웃의 용도가 아닌 SECTION 의 개념도 개발되어 가고 있었습니다. 이대로 가다가는 한국의 웹디자이너, 개발자들은 나중엔 너무나도 큰 공백을 매꾸어야 할 것입니다. 에플과 인텔이 손잡은 일도 그리하고 인터넷 익스플로러 만이 아닌 많은 ‘표준’ 브라우저들이 개발되어 나오면서 이제 한 방법만을, 그리고 한 부류의 소비자, 클라이언트를 겨냥하여 개발하는것은 몇년안에 ‘도박’ 으로 간주 될거 같습니다.

사용전에 개념의 문제

이 시점에서 본론으로 들어가기 전에 다루어야 할 문제가 있습니다. 제가 여러 한국 디자인 홈페이지를 만들어 보고, 보아 왔지만 한국에서 지향하거나 혹은 본의 아니게 지향되어 가고 있는 잘못된 개념이 있습니다. 바로 그 개념의 문제가 바뀌어야 하는데, 제가 잘 설명할수 있을지 모르겠군요.

최대한 말로 설명을 한다면, HTML은 디자인을 나타내는것이 아니라 문서를 유저들이 더 잘 볼수 있게 디자인 할수 있도록 만들어진 것이라는 겁니다. 문서의 개념이 디자인 보다 먼저 오는거 라는 거죠. 디자인이 먼저라면, 지금당장 HTML등을 버리고 플래쉬로 나가는게 더 나은 길일겁니다. 하지만 플래쉬가 그리도 멋지게 활용될수 있으며 여러가지 장점들이 있지만, 웹개발자, 클라이언트들에게 100% 다가가지 못하는 이유는 바로 이 ‘문서’ 의 개념을 잘 포옹하지 못하기 때문입니다. 웹페이지들의 궁극적인 목표는 바로 ‘책’ 처럼 되는 것이다 라고 하는데 이 목적을 채우기엔 역부족인거죠. 이전 HTML 에서도 그것을 잘 충족하지 못하고 오히려 역효과를 낸 것입니다. 해서 이번에 나오는 차기 XHTML은 문서의 개념을 더욱 투명하게 하고 인식을 바로 잡고 쓰기 위하는 목적으로 씌여지는거 같습니다.

문서의 요소로 예를 들어 보겠습니다. 보통 문서를 보면 서론 본론 결론으로 나뉩니다. 그 안에 제목, 문단, 단락 들이 있고, 여러가지 문서의 요소들이 있습니다. 바로 그 요소들을 HTML이 나타내고 싶은겁니다. 보통 볼수 있는 예로

는 바로 그 문단의 시작과 끝을 나타내어 주는것이고(처음 HTML 할때 젤 싫었던게 엔터치면 곧바로 에디터가 <p>로 인식을 하는거였네요. 무엇인지 모르니 짜증이 날수 밖에요 ^^) 이렇게 쓰이게 되면 HTML은 자동으로 알아서 문단이라고 인식해서 그에 맞추어 출력을 해주게 됩니다.(이런 개념을 잘 이해해서 디자인을 하면 <br>(웹표준에서는 <br /> 이 맞습니다)은 거의 쓰지 않게 됩니다 ^^)

이렇게 HTML의 속성들의 개념을 이해해 가다보면 문서의 틀을 잡아주는것에 대한것, 즉 레이아웃에 대한 속성들도 다루게 되는데 바로 그 문서의 표현을 도와 문단의 너비, 문단의 위치, 모양을 잡아주는 것이 바로 테이블 입니다. DIV 입니다. P(Paragraph, 문단의 첫글자) 속성도 있구요. 아무튼 다시한번 말합니다. 문서의 레이아웃을 돕는 HTML 속성은 DIV 입니다. ^^ DIVISION의 줄임말로 나누다 라는 뜻을 가진 div 인것이죠. 테이블로 레이아웃 사용은 문법 자체가 틀린것이라는 겁니다.

위의 긴 글을 정리하면서 다시 말하자면, HTML의 개념이 바르게 인식이 되어 가는데엔 테이블, 단순히 표를 만드는데 쓰인다는 원래의 목적을 찾아주고 레이아웃은 그에 맞는 속성을 쓰는것이 꼭 다루어져야 한다는 것입니다. 단순히 “DIV가 다루기 쉽잖아요” 가 이유가 아닌(실제로도 테이블보다 훨씬 쉽지만) 목적과 개념 자체에서부터 문제가 된다는 것입니다. 아직 뜨끔 안하셨나요? 이제 슬슬 개념뿐만이 아닌 왜 DIV가 테이블보다 나은지 다루어 보겠습니다.

table 보다 다루기가 쉽다

솔직히 예전에는 테이블이 웹페이지 레이아웃, 틀을 잡는데에 쓰일수 밖에 없었습니다. 그만한 틀을 잡아주는 속성이 약했기 때문입니다. 그리고 그 당시에는 그것이 더 편했고, 깔끔했습니다. 규격이 맞지 않아서 줄이고 늘리고 하는것이 더 문제 였으니까요. 하지만 DIV는 레이아웃을 위한 그 목적으로 씌여진 만큼, 그보다 더 다루기 쉽게, 간편하게 발전 되었습니다. 말도 안된다구요?

보통의 홈페이지 레이아웃으로 예를 들어가면서 보겠습니다.

이런 레이아웃을 만들어 보겠습니다.

테이블은

<table> <tr> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

이렇게 코딩을 합니다. div를 보겠습니다.

<div></div> <div style="float: left;"></div> <div></div>

별로 차이 안나네요.
그럼 이것에 column 을 2개 더 넣어보겠습니다.

<table> <tr> <td colspan=4></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>

은

<div></div> <div style="float:left;"></div> <div style="float:left;"></div> <div style="float:left;"></div> <div style="float:left;"></div>

또 약간 비슷합니다.여기서
이렇게 만들어 볼까요?
그렇다면 이제 슬슬 테이블은 복잡해 집니다.

<table> <tr> <td colspan=4></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan=4></td> </tr> <tr> <td colspan=4></td> </tr> <tr> <td colspan=4></td> </tr> <tr> <td colspan=4></td> </tr> </table>

div를 보겠습니다.

<div></div> <div style="float:left;"></div> <div style="float:left;"></div> <div style="float:left;"></div> <div style="float:left;"></div> <div style="clear:both;"></div> <div></div> <div></div> <div></div>

div는 간단히 끝이 났네요.

클라이언트가 위의 구성중 column이 많다고 빼달라고 요청합니다. 하나를 빼면,,
테이블로 구성한 코드는 저 위의 4라고 써진거 다 3으로 바꾸어야겠죠. 네. ‘찾기’ 기능을 아주 잘 써야겠습니다. 하지만 div는 어떤가요? float:left 는 align:left 와 같습니다. 왼쪽으로 정렬된것들 마구 넣은 후에 빼고 싶은거 빼고나서 다시 정리된 한칸을 넣을때엔 align 이 적용 안되도록 clear:both; 만 넣으면 됩니다. 개발자 분들, 너무나도 차이나는게 보이시는지요?

테이블은 느리다

다른 이유를 보겠습니다. 너무나도 잘 아는 사실이죠. 테이블의 속도 문제도 꽤나 골치 아픈 문제 입니다.

유저들은 아마도 브라우저창 타이틀 부분에는 웹사이트 제목이 떴는데 하얀 바탕으로 아무것도 나오지 않는 경우를 겪어 봤습니다. 요즘이야 워낙에 속도가 빨라지긴 했지만… 그 이유는 테이블의 속도 문제가 있기 때문입니다. 각각의 테이블이 하나하나의 요소로 받아들이기 때문에 그 테이블이 다 읽히기 전까지는 화면에 읽히지 않습니다. 그 이유 때문에 제목창에는 제목이 뜨는데 화면에는 아무것도 들어오지 않는것처럼 보이는 것이죠. 특히 커다란 포털사이트에 이런 경우가 많습니다. 기다림 후에 나타나는 화면은 이미 로딩이 거의 끝난 상태로 나타나게 되죠. 그와 반대로 div를 사용하게 되면, 틀을 잡아주는 것이기에 틀에 잡힌 텍스틀이 이미 뜬 후에 배경이라던지 이미지가 읽혀지게 됩니다. 유저들에겐 기다림의 지루함이 조금이나마 줄어들게 되는 것입니다. 그러므로 속도의 차이는 없는듯 커다랗게 나는것입니다. 예전 야심만만 이라는 프로그램에서 ‘당신에게 가장 긴 1분은 언제였나?’ 라는 질문에 웹사이트가 로딩되는 그 1분이 길었다 라는 대답이 상당히 많았던 것만 봐도 그 ‘약간’ 의 차이가 유저들에게는 얼마나 큰것인지를 알수 있습니다. 구글의 성공에도 1개의 이미지로 승부하는 속도가 커다란 몫을 했었죠.

table은 유지하기 힘들다

속도 뿐만이 아닙니다. 어찌 유지 하렵니까?
속도는 인터넷을 더 빨리 돌려버리면 된다고 해도, ‘유지’ 의 문제는 어쩔수 없습니다. 상상만 해도 울컥 솟아 오릅니다. 테이블 안에 수도 없이 이루어진 그 얽히고 얽힌 그 문제를 어떻게 유지를 할수 있을지. 새 웹마스터가 와서 웹사이트를 유지하려해도 이해할수 없는 수 많은 테이블의 tr, td 들을 그리고 그 안에 들어있는 테이블들을 어떻게 이해를 해서 하는지. 아직도 하고 계신분들에게 경의를 표합니다. 이럴때에 가끔은 프리렌서가 좋다는 생각을 합니다. 이 말도 안되는 것들만 보아도 왜 이렇게 되어야 하는지 궁금할 뿐입니다. div도 사이트가 클수록 유지하기에 복잡하지 않냐 라는 반문을 하신다면 div를 써보지 않으신 분들입니다. 각각의 레이아웃 div에는 이름을 주어서 css로 간단히 조절이 가능하기에 각각의 이름들만 알아도 새로운 css를 써버려서 내용은 그대로이되 모든 디자인이 바뀌어 버리는 놀라운 일을 할수가 있습니다. ‘스킨’ 의 개념이 보통의 html문서에서 이용되는 것입니다. 이에대해 아시는 분들은 아시지만 젠가든 이라는 곳이 그 예들을 보여줍니다. 내용은 같지만 수많은 유저들이 자신들의 css를 제출해 뽑히면 그 사이트의 디자인CSS 파일만을 바꾸어 보여줌으로써 확연히 다른 사이트로 변모하는것을 보면 확실히 이해가 가실겁니다.

CSS3?

이제 곧 나오게 될 CSS3를 살펴보니 레이어들 사이에도 이제 x, y 좌우의 위치 뿐만이 아닌 진정한 케스케이딩, 차곡차곡 쌓인 문서들 처럼 앞, 뒤 의 z 위치를 정할수 있게 되어 있습니다. 아무리 테이블이 레이아웃에 좋다고 우겨도 CSS3가 출시되는 날 부터는 ‘바보’로 취급받게 될것입니다. 투명한 PNG의 사용도 가능케 했으니, 그림자 div 위에 문서 1 div을 놓고, 그 위에 문서 2 div 를 놓고 겹치게 해 놓았다고 생각해 보십시오. 그리고 다음 페이지로 넘어갈때엔 그저 CSS의 Z 속성만 바꾸어 주면 순간에 문서 1이 2의 위에 올라가게 되니, 이거 언제 css3이 출시되나 기다려 지지 않을수가 없습니다.

table은 이제 쉬어야 할때

테이블은 이제 슬슬 좀 쉬어야 할때 입니다. 너무 큰일을 감당케 했습니다. 반대로 원래 그 일을 해야할 div를 너무 놀게했습니다. 위에서 주욱 길게 설명을 했듯이 테이블의 노동착취는 그만하시고 공평한 일자리를 주어야 할 때가 아닐까 생각합니다. 아니 그래야 합니다. 그것이 미래를, 앞을 바라보는 선경지명이겠습니다.

CSS 속성 (margin, border, padding)

2008-04-04T17:53:36+09:00

1. Margin (BOX 의 여백지정)

{ margin-left : 여백값 ; --------> %값이나 길이단위로 표시.

margin-right :여백값 ; 여백을 음수값을 주면 요소가 잘리는 현상발생

margin-top : 여백값 ;

margin-bottom : 여백값; }

- shorthand 로 표기할때 유의할 것

{margin : 10pt} --> 하나의 속성값만 표기하면 전체속성값이 동일

{margin : 10pt 20pt} --> 두개의 속성값이 표기되면 상하/좌우 속성값을 말한다.

{margin : 10pt 20pt 30pt} --> 세개의 속성값이 표기되면 상/좌우/하 속성값

{margin : 10pt 20pt 30pt 40pt} --> 네개 각각의 속성값

이와같이 shorthand 방식으로 쓸수 있는 것으로

margin, border-width, border-style, border-color, padding이 있다.

2. Border(테두리를 지정)

1) 테두리선 모양 지정

{ border-style : none/ ---------> border=0. 테두리가 없음

dotted/dashed/ --> 점선모양/굵은 점선모양 (익스플로러 5.5 부터 가능)

solid/double/ ----> 실선모양/이중 실선모양

groove/ridge/ ----> 오목하게 들어간/볼록하게 나온 액자 테두리 모양

inset/outset ;} ----> 왼쪽 빛에 의해 명암을 준 모양으로 오목/볼록한 모양

이 속성도 방향에 따라

border-top-style, border-bottom-style, border-left-style, border-right-style 의 부분속성 있다.

2) 테두리의 폭지정

{ border-width : thin/medium/thick/ --> 가늘게/보통/두껍게

길이단위값 ;}

border-top-width, border-bottom-width, border-left-width, border-right-width 가 있다.

3) 테두리 색상설정

{ border-color : 색상값/명 ;}

border-top-color, border-bottom-color, border-left-color, border-right-color 있음

3. Padding(컨텐츠와 테두리사이의 간격)

{ padding : 간격수치값 ;}

padding-top, padding-bottom, padding-left, padding-right

4. Position (BOX의 위치지정)

택스트위에 텍스트를 올리거나 이미지를 올리거나 할때 사용한다.

{ position : static/ ----> 이동성이 없는 정적인 형식. 크기속성만 있음

relative/ ----> left top의 위치와 크기속성이 따라온다. 상대적 위치 -값도 가능

위치를 지정할때 left/top 방식과 bottom/right 방식이 있으며 둘중 하나만 적용한다.

브라우저의 안쪽으로 이동하는 경우는 +, 바깥쪽으로 이동하는 경우는 - 값이 지정된다.

absolute ;} --> left top의 위치와 크기속성이 따라온다. 절대적 위치(0,0)기준

z-index : 겹쳐지는 순서. 값이 클수록 위에 위치

5. Visibility (숨김처리)

{ visibility : visible/hidden ----> hidden은 보여주지만 않을 뿐 영역은 유지된다.

[출처] [본문스크랩] 21. CSS 속성 (margin, border, padding)|작성자 햄아

이미지 없이 라운드 박스 만들기

2008-04-04T17:37:03+09:00

<html >
<head>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; background:#EEEEEE; font-size:12px}
</style>
</head>

<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">내용</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</body>
</html>

춮처:http://blog.naver.com/hmleena/42024227

검색창에 자동으로 한글 나오게 하기

2008-04-02T12:32:40+09:00

레이아웃.css를 편집기로 열어서

#isSearch .inputText { vertical-align:middle; position:relative; top:0; _top:-1px; left:1px; padding:3px 3px 1px 3px; width:94px; height:13px; color:#000000; border:1px solid #B0B0AF; background-color:#FFFFFF; ime-mode:active; }

ime-mode:active를 써주면 자동으로 한글, inactive를 써주면 영어로 써집니다.

Zbxe레이아웃 간단하게 좌측정렬로 바꾸기

2008-03-25T09:47:13+09:00

해당 레이아웃의 css를 열어서 15줄 (예; /zbxe/layouts/xe_official/css/default.css)

#bodyWrap { width:980px; margin:1.5em auto 0 auto; }를

#bodyWrap { position:absolute; width:980px; margin:1.5em auto 0 auto; } 로 변경하면 됩니다.

iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스

2008-03-09T00:20:07+09:00

iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스.

두가지의 조건
1. 같은 서버내의 페이지를 iframe으로 삽입하는 경우.
2. 타 사이트의 페이지를 iframe으로 삽입하는 경우.

[같은 서버내의 페이지를 삽입하는 경우]

1. 부모페이지에서 해결하는 방법

2. iframe으로 삽입되는 페이지에서 해결하는 방법

아이프레임으로 삽입되는 페이지의 최하단에 아래내용 삽입
<script>
document.body.scrollIntoView(true);
parent.document.all.aaa.height = document.body.scrollHeight;
</script>

부모페이지의 아이프레임 id를 aaa로 맞춤.
<IFRAME id=aaa src="xxx.htm" frameBorder=0 width=0 scrolling=no height=0></IFRAME>

[다른 서버(사이트)의 페이지를 삽입하는 경우]

물론 다른사이트의 페이지 내용을 수정할수(관리권한이) 있어야 한다.

<부모페이지>
<iframe src="http://www.aaa.com/aaa.htm" frameborder="0" id="aaa" scrolling="no"></iframe>

<타서버 불려올 페이지(http://www.aaa.com/aaa.htm)>
<head>태그사이에 아래의 스크립트 삽입

<script language='JavaScript' type='text/javascript'>

</script>

body의 onLoad태그로 위 스크립트를 불러옴
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();">

본문내용을 지정한 id로 감싼다.(infodoc)
<div id='infodoc'>
.
.
.
내용
.
.
.
</div>
</body>

[다른방법]

=== 부모창에 들어갈 소스 ====================================================

<iframe id="icon_iframe" src="http://tagin.net" width="1" height="1" marginwidth="0" marginheight="0" frameborder="no" onLoad="window.scrollTo(0,0)"></iframe>

=== iframe에 들어갈 소스 =====================================================
<html>
<head><title>태그인넷</title></head>

<body>
<div id='content_page' style="left:0;top:0;width:100%">

이 부분이 확대될 부분입니다..

</div>

<script language='JavaScript'>
function iframe_reset(){
dataobj=document.all? document.all.content_page : document.getElementById("content_page");
dataobj.style.top=0;
dataobj.style.left=0;
pageheight=dataobj.offsetHeight;
//pagewidth=dataobj.offsetWidth;
pagewidth = 800;
parent.frames("icon_iframe").resizeTo(pagewidth,pageheight);
}
window.onload=iframe_reset;
</script>

</body>
</html>

즐겨찾기 스크립트

2008-02-21T20:23:32+09:00

FF에서는 즐겨찾기에 추가 자바스크립트가 아예 안 되는줄 알았는데 구글링을 해보니 아주 좋은 소스가 있더군요.

※ 소스:
-------------
<script type="text/javascript">

function bookmarksite(title,url) {

// Internet Explorer

if(document.all){

window.external.AddFavorite(url, title);

}

// Google Chrome

else if(window.chrome){

alert("Ctrl+D키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");

}

// Firefox

else if (window.sidebar) // firefox

{

window.sidebar.addPanel(title, url, "");

}

// Opera

else if(window.opera && window.print)

{ // opera

var elem = document.createElement('a');

elem.setAttribute('href',url);

elem.setAttribute('title',title);

elem.setAttribute('rel','sidebar');

elem.click();

}else if( window.external ) {

window.external.AddFavorite(url, title);

}

</script>

※ 적용시 HTML:
--------------------------
<a href="javascript:bookmarksite('홈페이지 제목', 'http://www.abc.com')">즐겨찾기에 추가</a>

[실험결과]
IE : 정상작동

Crome : Ctrl+D키
FF : 정상작동
OPERA : 정상작동
SAFARI : 묵묵부답

[Tip] 이 소스를 XE에 넣어보기

1. 해당레이아웃 js파일안에 추가합니다.

/* 즐겨찾기 추가 */

function bookmarksite(title,url) {

// Internet Explorer

if(document.all){

window.external.AddFavorite(url, title);

}

// Google Chrome

else if(window.chrome){

alert("Ctrl+D키를 누르시면 즐겨찾기에 추가하실 수 있습니다.");

}

// Firefox

else if (window.sidebar) // firefox

{

window.sidebar.addPanel(title, url, "");

}

// Opera

else if(window.opera && window.print)

{ // opera

var elem = document.createElement('a');

elem.setAttribute('href',url);

elem.setAttribute('title',title);

elem.setAttribute('rel','sidebar');

elem.click();

}else if( window.external ) {

window.external.AddFavorite(url, title);

}

2. 해당레이아웃 layout.html안에

<a href="javascript:bookmarksite('달집', 'http://moonhouse.co.kr')">즐겨찾기추가</a>

</div>

3. 해당칼라 css안에

#fa { position:absolute; top:0px; right:0px; }

여기서 top과 right위치 적당히 잡으면서 설정하시면 됩니다.

Html

굵은 폰트만 따로 글꼴 지정하는 방법

잠시 보고 사라지게 만드는 javascript

하단 영역을 브라우즈의 최하단에 고정시키는 방법

DIV 영역 자체에 링크 거는 방법

테두리(border) 상자에 화살표 모양 css로 출력하기

접기, 펼치기 folding기능 - 와 로 간단하게 구현하기

스크롤 바(Scrollbar) 스타일링

현재 시간 실시간으로 카운트 출력

line-height 와 height의 차이점

css 사이즈 태그 em, rem, vh, vw, vmin, vmax 정리

flex로 세로 가로 정렬 하기

버튼 클릭시 클립보드에 복사하는 방법

Hover시 테두리두께 설정

CSS 색상 이름 rgb , 16진수 자료( css 색상표 )

display 속성: inline, block, inline-block

inline

block

inline-block

글 색상을 랜덤으로 출력하기

div 영역에 Width:100%; height:100%; 적용해 보기 - display:table

홈페이지에 화려한 에니메이션 효과를 주기 - aos animate

웹퍼블리셔가 알고있어야 할 display:table 속성

HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때

CSS 말줄임 처리하기

폰트(글자)의 스타일, 크기, 굵기, 색상, 글꼴, 줄간격, 캡션 등을 지정하는 방법

DIV 화면 정중앙에 박스 배치하기

DIV 가로 중앙정렬 , 세로 중앙정렬(display:flex; )

커서(cursor) 모양 정리

webkit-animation 적용 방법

각종 css3를 자동으로 만들어주는 사이트

{CSS3} animation / transform / transition

* transform

* transition

html에 사용되는 Character Entities(특수기호)

이미지 마우스 hover시 좌우 기울이기

모바일웹에서 스마트폰으로 전화바로연결 코드

반응형 CSS 테이블

실시간 환율조회 html

HTML 만으로 마우스오버 구현하는 방법

와 같은 블록 요소를 가운데 정렬하는 방법

float 속성을 가진 div 100% 설정하는 방법

배경이미지 슬라이드 스크립트

CSS3 border-radius 이해하기

IE 버젼별로 css 따로 적용하는 방법

마퀴태그의 기본

어서오세요 방가워요. 야간비의 작은쉼터 랍니다.

아이쿠야 어지러워라 조심하세요~ ^^*

이미지 바꾸기 소스

익스6에서만 작동되게하는 css구문

CSS 기초 깨우치기

CSS 사용시 익스플로러 버그 해결하기

CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간

기본적인 태그 (링크걸기)|

가장 기본적인 태그들

자신의 홈에 프린트버튼을 넣자

테이블(셀) 깨지지 않는 CSS

날짜 매개변수

이미지 없이 그라데이션효과 주기

자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을

뒤로..앞으로..새로고침 버튼 넣기

( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서

붙어야 할 이미지가 붙지 않을때.

사각박스 코너를 이미지없이 둥글게 만드는법

CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;]

네이밍 가이드

논리 태그 사용

여학생이 남학생보다 허리 많이 휘어"

市교육청 초등5년생 13만명 조사결과.."예방엔 자세.운동.식사 좋아"

POSITION속성과 그 속성값

긴 제목 마우스오버시에만 보기

xhtml 기본 작성법

display:block 쪼금 더~

글들의 상하 정렬위치 설정 vertical-align속성

덧글달기 CSS Coding TIP

iframe 대신 사용하는 object 태그

TD안엔 DIV를 넣어라?

제발...alt텍스트와 title텍스트를 구분해조바바

태그의 상세분류

DIV - 테이블은 이제 쉬어야할때...

접기, 펼치기 folding기능 -
와
로 간단하게 구현하기