사자소학 쓰기

사자소학은 주희의 소학과 기타 여러 경전의 내용을 알기 쉽게 생활한자로 편집한 한자학습의 입문서로써, 옛날에 서당에서 공부하는 아이들이 가장 먼저 배우는 한자의 기초 교과서이다. 사자소학에는 부모님에 대한 효도, 형제간의 우애, 친구간의 우정, 스승 섬기기, 바람직한 대인관계 등 올바른 마음가짐을 갖기 위한 기본적인 행동철학이 담겨져 있어, 종합적인 도덕교육과 인성교육의 보고(寶庫)라고 할 수 있다. 이 사자소학은 단순한 한자 교과서가 아니라, 세월이 흘러도 영원히 변치않는, 시공을 초월한 인성교육의 바이블로서, 이를 익히다 보면, 한자공부뿐만 아니라 도덕성 회복과 인간성 복원에 크게 기여하리라 생각한다. 이 사자소학은 비록 옛날에 나온 것이지만, 그 정신은 21세기를 맞고 있는 오늘날에 더욱 빛나고 있으며, 예전에도 그랬지만, 앞으로도 '우리가 진정으로 배워야 할 모든 것은 바로 이 사자소학에서 출발한다'라고 할 수 있다. 어린이는 물론이고 어른들도 이 사자소학을 가까이하다 보면, 참으로 느끼는 것이 많을 것이다.

css 기초 2 - 태그에서 스타일 적용하기

태그에서 바로 스타일을 적용하는 방법입니다.

<h1>css 기초 태그</h1>
<p>스타일 적용하기</p>

결과 :

css 기초 태그

스타일 적용하기

태그에서 바로 스타일을 적용해 보겠습니다.
h1태그의 글자색은 흰색,
p태그의 배경색은 노랑, 폰트크기는 30px, 넓이는 300px 로 적용해보겠습니다.


<h1 style="color:white">css 기초 태그</h1>
<p style="background:yellow;font-size:30px;width:300px;">스타일 적용하기</p>
결과 :

css 기초 태그

스타일 적용하기

首丘初心(수구초심) 고사성어 쓰기 노트

수구초심 고사성어 쓰기 노트입니다.


겉뜻 : 여우는 죽을 때 구릉을 향해 머리를 두고 초심으로 돌아간다.
속뜻 : 근본을 잊지 않음. 죽어서라도 고향 땅에 묻히고 싶어하는 마음.

 은나라 말기 강태공의 이름은 여상(呂尙)이다. 그는 위수가에 사냥나왔던 주나라 무왕의 아버지인 창(昌)을 만나 함께 은나라 주왕을 몰아내고 주(周)나라를 세웠다. 그 공로로 창의 아들 주나라 무왕으로 부터 제나라의 영구(營丘)라는 곳에 봉해졌다가 그곳에서 죽었다. 하지만 그를 포함하여 5대손에 이르기까지 다 주나라 천자의 땅에 장사지내졌다. 이를 두고 당시 사람들은 이렇게 말했다. 고지인유언 왈호사정구수인야(古之人有言 曰狐死正丘首仁也; 옛사람이 말하기를, 여우가 죽을 때 머리를 자기가 살던 굴 쪽으로 향하는 것은 인이라고 하였다.) [글출처 : ]

출전 : [『禮記』, 檀弓上篇]
유사성어 : 狐死首丘
유사표현 : 범도 죽을 때면 제 굴에 가서 죽는다.

HTML5 테이블 태그 정리

HTML5 테이블을 만들어 보려고 합니다.

<table><tr><th><td>로 테이블을 만들 수 있습니다.

<tr>테이블의 줄(table row),, <th> 테이블의 제목(table header), <td>는 테이블의 데이타(table data) 입니다.

그럼 간단하게 테이블을 만들어 보겠습니다.

<table>
  <tr>
    <th>국어</th>
    <th>영어</th>
    <th>수학</th>
  </tr>
  <tr>
    <td>70점</td>
    <td>60점</td>
    <td>50점</td>
  </tr>

<table>

아래와 같은 결과를 보실 수 있습니다.

국어	영어	수학
70점	60점	50점

테이블 테두리를 만들어 보겠습니다. 블로그에서는 안됩니다만 css로 한번에 속성을 지정해 줄 수도 있습니다.

<table style="border: 1px solid black;">
<tr style="border: 1px solid black;">
    <th style="border: 1px solid black;">국어</th>
    <th style="border: 1px solid black;">영어</th>
    <th style="border: 1px solid black;">수학</th>
  </tr>
<tr style="border: 1px solid black;">
    <th style="border: 1px solid black;">70점</th>
    <th style="border: 1px solid black;">60점</th>
    <th style="border: 1px solid black;">50점</th>
</tr>
</table>

국어	영어	수학
70점	60점	50점

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

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