乾坤一擲(건곤일척) 고사성어 쓰기 노트

고사성어 쓰기 노트입니다. 겉뜻 : 하늘이냐 땅이냐를 한번 던져서 결정하다. 속뜻 : 승패(勝敗)와 흥망(興亡)을 걸고 마지막으로 결행하는 단판승부. 원래 하늘과 땅을 걸고, 즉 운을 하늘에 맡기고 한번 던져 본다는 뜻인데, 중국 당(唐)나라 제일의 문장가 한유(韓愈)가 지은 <과홍구(過鴻溝)>라는 칠언절구(七言絶句)에 다음과 같은 것이 있다. “용피호곤할천원 억만창생성명존 수권군왕회마수 진성일척도건곤(龍疲虎困割川原 億萬蒼生性命存 誰勸君王回馬首 眞成一擲賭乾坤:용은 지치고 범도 피곤하여 강과 들을 나누어 가졌다. 이로 인해 억만창생의 목숨이 살아 남게 되었네. 누가 임금에게 권하여 말머리를 돌리게 하고, 참으로 한 번 던져 하늘과 땅을 걸게 만들었던고)” 이 글은 한유가 옛날 항우(項羽)와 유방(劉邦)이 싸우던 홍구(鴻溝)라는 곳을 지나다 초(楚) ·한(漢)의 옛 일이 생각나서 지은 글이다. 
[글출처 : [네이버 지식백과]두산백과]
출전 : [韓愈(768∼824)의‘過鴻溝’의 詩]
유사성어 : 在此一擧 유사표현 : 모 아니면 도

jquery Ajax 기초 1

Ajax란 Asynchronous JavaScript and XML 약자로 전체페이지를 다시 로딩하지 않고 부분적으로 서버와 데이터 교환을 하는 것입니다. 취미 삼아 만드는 사이트라 지금까지 ajax 의미도 모르면서 남의 코딩만 베껴서 자바스크립트로 ajax를 하다가, 또 jquery로 하다가 그냥 대충 되기만 하면 장땡이지 하는 식으로 사이트를 구축해 왔습니다. 갑자기 반성모드.. 

콘솔창을 보면 항상

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

요런 말이 느낌표와 함께 뜨는 것이 신경쓰였으나 그냥 넘어갔는데 결국 발목을 잡히네요.. 

잘되고 있었는데 갑자기 ajax로 구현한 페이지가 로딩이 되지 않는 겁니다. 사이트 구축하면서 느낀거는 대충 훑고 지나간 공부는 반드시 다시 공부하게 된다는 겁니다.

사용자의 경험에 안 좋은 영향을 미치기 때문에 메인쓰레드에서 Synchronous XMLHttpRequest 가 더 이상 사용되지 않게 될거다.

정도로 해석되는 거겠죠? 영어도 항상 발목을 잡습니다. 영어는 정말...정말..  공부해 두어야 겠더군요.

참조사이트에는 더 이상 Synchronous XMLHttpRequest를 지원하지 않겠다. 그러니 async를 false로 설정해 사용하지 말라 라고 되어 있다고 하네요.

어차피 jquery도 자바스크립트 라이브러리이니, jquery로 사용하던 ajax를 그냥 자바스크립트로 코딩을 고쳐 쓸 까 하다가 이 기회에 jquey로 하는 ajax도 공부해 두려고 합니다. 당연히 자바스크립로 사용해도 되나 제이쿼리로 사용하는 것이 더 쉽다고 합니다. 공부하는 입장에서는 어떤 부분이 쉬운것인지 알기 어려웠습니다. 이제부터 정리해 가면 좀 알게 될까요?

우선 자바스크립트에서 ajax를 사용하는 방법부터 정확히 이해하고자 정리해 두겠습니다. 

ajax란 앞서 언급했듯이 Asynchronous JavaScript and XML의 약자입니다. 비동기적 자바스크립트와 xml이라는 것인데요, 우선 동기적과 비동기적이라는 말의 의미부터 정리하겠습니다. 

어떤일을 동기적으로 처리한다는 것은 요청하고, 응답이 끝날 때까지 대기하고, 응답이 오면 다음 업무를 처리하는 방식입니다. 비동기적으로 처리한다는 것은 요청을 하고, 요청한 결과가 나오지 않은 상태에서 바로 다음 일을 수행하는 방식입니다. 결과는 비동기적으로 진행된다는 것이겠죠.

ajax의 핵심 기술은 마이크로소프트에서 처음 개발한 xhr 객체(XMLHttpRequest)객체라고 합니다. xhr객체를 이용해서 ajax를 실현합니다.

다음 포스팅에서..이어 가야겠군요..

Let jQuery AJAX Change This Text

HTML5 순서 없는 리스트 태그

HTML5 에서 메뉴를 만들거나 목록을 작성할 때 리스트 태그를 사용합니다.

다음처럼 HTML 태그를 작성하면

<ul>

<li>HTML5</li>

<li>CSS</li>

<li>JavaScript</li>

<li>PHP</li>

</ul>

아래와 같은 결과를 얻을 수 있습니다.

• HTML5
• CSS
• JavaScript
• PHP

실제 HTML 코드를 작성하다 보면 리스트 앞의 점은 없는게 나을 때가 더 많습니다. 아래와 같이 스타일을 지정해주면,

<ul style="list-style-type:none">

<li>HTML5</li>

<li>CSS</li>

<li>JavaScript</li>

<li>PHP</li>

</ul>

점이 없는 리스트 결과를 얻을 수 있습니다.

• HTML5
• CSS
• JavaScript
• PHP

리스트 스타일을 style="list-style-type:none" 대신 다음과 같이 바꾸면 네모 형태나, 안이 비어있는 원의 형태로 목록을 디스플레이 할 수 있습니다.

style="list-style-type:square"

style="list-style-type:circle“

管鮑之交(관포지교) 고사성어 쓰기 노트입니다.

고사성어 쓰기 노트 모음을 만들려고 합니다. 쓰기 자료로 활용하면 좋을 것 같습니다. 

겉뜻 : 관중과 포숙아의 사귐

속뜻 : 영원히 변치 않는 참된 우정.

춘추시대 제나라에 관중과 포숙이라는 인물이 있었습니다. 당시 제나라는 폭군 양공으로 인해 혼란에 빠져 있었습니다. 결국 공자 규는 관중과 함께 노나라로 망명했고, 규의 동생인 소백은 포숙과 함께 거나라로 망명했습니다. 이후 양공이 권력 쟁탈전 끝에 살해되어 군주의 자리가 비게 되자, 규는 군주가 되기 위해 관중을 보내 소백을 암살하고자 하였습니다. 그러나 소백은 천만다행으로 목숨을 구했고 군주의 자리를 차지하였습니다. 결국 소백에게 잡힌 규는 자결하였고 관중은 사형 집행을 눈앞에 두었습니다. 이때 포숙이 말하길 "전하, 전하께서 제나라에 만족하신다면 신으로 충분할 것입니다. 그러나 천하의 패자가 되고자 하신다면 관중 외에는 인물이 없을 것입니다. 부디 그를 등용하십시오." 결국 관중은 자신이 죽이려던 자 휘하에서 재상이 되었습니다. 그 후 관중은 사람들에게 말했습니다. "일찍이 내가 가난할 때 포숙과 함께 장사를 했는데, 이익을 나눌 때 나는 내 몫을 더 크게 했다. 그러나 포숙은 나를 욕심쟁이라고 말하지 않았다. 내가 가난함을 알고 있었기 때문이다. 또한 내가 사업을 하다가 실패하였으나 포숙은 나를 어리석다고 말하지 않았다. 세상 흐름에 따라 이로울 수도 있고 그렇지 않을 수도 있음을 알았기 때문이다. 내가 세 번 벼슬길에 나아갔다가 번번이 쫓겨났으나 포숙은 나를 무능하다고 말하지 않았다. 내가 시대를 만나지 못했음을 알았기 때문이다. 내가 싸움터에 나가 세 번 모두 패하고 도망쳤지만 포숙은 나를 겁쟁이라고 비웃지 않았다. 내게 늙으신 어머니가 계심을 알았기 때문이다. 나를 낳은 이는 부모님이지만 나를 알아준 이는 포숙이다." [글출처 : 네이버 지식백과]

출전 : [史記]

狐假虎威(호가호위) 고사성어 쓰기 노트

고사성어 쓰기 노트를 올리고 있습니다. 고사성어 중, 고등학생 쓰기 자료로 활용하면 좋을 것 같아요~ 도움되는 자료이길^^

겉뜻 : 여우가 호랑이의 위엄을 빌리다

속뜻 : 남의 권세에 붙어 위세를 부리는 사람

중국 전국시대의 일입니다. 당시 초나라는 삼려(三閭)라는 세 집안의 세도가가 권력을 쥐고 있었는데, 그 중 소씨 가문의 소해휼(昭奚恤)이라는 자가 그 핵심에 있었습니다. 위나라 출신의 강을은 소해휼의 전횡(專橫)을 막으려는 생각을 하고 있었는데, 어느 날 선왕이 신하들과의 조회(朝會)에서 이렇게 질문을 합니다. ' 북방에 있는 모든 나라들이 우리 소해휼을 모두 두려워하고 있다는데, 사실이냐?' 소해휼이 두려워 모두 아무 말을 못했지만 강을이 말문을 엽니다. ' 제가 한 가지 우화를 말씀드리겠습니다. 호랑이는 온갖 짐승들을 잡아먹고 살고 있었는데, 어느 날 여우를 잡게 되었습니다. 그런데 꾀 많은 여우가 말하기를 '너는 감히 나를 잡아먹을 수 없다. 하느님께서 나를 온갖 짐승들의 우두머리를 시켜주셨는데, 지금 네가 나를 잡아먹는다면 이는 하느님의 명을 거역하는 것이다. 만약에 네가 나의 말을 믿지 못하겠거든 내가 너를 위해서 앞장서 갈 것이니 너는 나의 뒤를 따라 오면서 짐승들이 날 보고 감히 달아나지 않는가를 보아라.' 여우의 당당한 말에 호랑이가 믿고 마침내 함께 길을 가게 되었는데, 정말 짐승들이 보이자마자 모두 다 달아났습니다. 결국 호랑이는 짐승들이 자기를 두려워해서 달아난 것인지 모르고 여우를 두려워해서 달아난 것으로 여긴 것입니다. 지금 대왕(大王)께서는 오천리나 되는 넓은 영토와 백만의 대군(大軍)을 소해휼(昭奚恤)에게 모두 맡기고 있습니다. 그러니 모든 나라들이 소해흘을 두려워하는 것은 사실 대왕의 군사(軍士)들을 두려워하는 것이지 소해휼이 두려운 것이 아닙니다. 마치 온갖 짐승들이 호랑이를 두려워하듯이 말입니다. ' [글출처 : 이야기 한자여행]

출전 : [『전국책(戰國策)』]

유사성어 : 借虎爲狐

유사표현 : 문선왕(공자) 끼고 송사한다.

margin과 padding의 차이

margin은 바깥 여백을 padding은 안쪽 여백을 조정할 수 있습니다.


다음의 예를 보겠습니다.

다음과 같이 코딩하였습니다.

<div style="background: yellow;">
<p>margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교
margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

여기에 padding 값을 줍니다.

<div style="background: yellow;padding:30px;">
<p>margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교
margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

안쪽으로 여백이 생겼습니다.
이번에는 margin입니다.

우선 다음과 같이 코딩합니다.

<div style="background: yellow;padding:30px;">
<p style="background:blue;">margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교

margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

첫번째 <p>태그에 margin 값을 줍니다.

<div style="background: yellow;padding:30px;">
<p style="background:blue;margin:20px;">margin과 padding비교</p>
<p>margin은 바깥 여백을 다룹니다.</p>
<p>padding은 안쪽 여백을 다룹니다.</p>
</div>

결과 :

margin과 padding비교

margin은 바깥 여백을 다룹니다.
padding은 안쪽 여백을 다룹니다.

첫번째 p태그 주변으로 여백이 생깁니다.