P의 사용에 대하여(1)

P 에관하여 P 의 사용에 대하여 잠시 말씀 드리겠습니다

p 의 사용을 줄 띄움에만 사용 하시지만 p 의 스타일 지정에는 아주 많은것들이 있답니다 이것 역시 게시판을 보던중 생각이 나서 올립니다. 꼭 p 가 아니더라도 style 의 사용은 여러곳에서 응용 됩니다 응용은 여러분의 몫이죠^^

1. font-style: 이것은 기울여 쓰기 입니다 normal, italic, oblique 이렇게 3가지의 명령어가 있어요.

하나씩 예를 들어 보죠 <p style="margin-left:70px">이렇게는 많이들 쓰고 계시죠? 이것과같이 p 에 font-style:을 지정해 봐요. 예 <p style="font-style:italic;">이순신</p> <p style="font-style:oblique;">김삿갓</p>

결과보기 이순신 김삿갓 비숫 하죠? 그럼 <p style="font-style:italic;">이순신</p> 이것 하나만 알면 되겠군요 참고로 normal은 보통이라는뜻이니깐 예를 모두 생략 합니다

2. font-weight: 이것은 글자의 굵기 입니다 bold, bolder, lighter,100, 200, 300 ~ 900 이렇게 여러가지 명령어가 있어요. 모두 알필요는 없고 (관심 있으신분은 하나식 각자 실험해 보세요^^) bold만 알면 될꺼예요. 이것이 가장 많이 쓰이니깐요.

그럼 예를 볼까요? 위 1 의 지정에서 추가 시켜보지요 예 <p style="font-style:italic; font-weight:bold;">이순신 김삿갓 홍길동</p>

결과보기 이순신 김삿갓 홍길동

3. font-size: 이것이 글자의 크기라는건 다아실껄요 smaller,x-small,x-large,em, ex,값%,값pt 의명령어가 있어요. 사용 방법만알면 되니 우리가 흔히 사용하는 pt를 사용하여 예를 보겠습니다

예 <p style="font-style:italic; font-weight:bold; font-size:77pt;">국기봉</p>

결과보기 국기봉 너무 크게 불렀나요^^

4. line-height: 이것은 줄 간격 입니다 normal, number, length, 값% 로 사용 하는데 난 주로 %를 사용 하니깐 그것으로 예를 보지요

음--- 게시판에가서 글을 하나 구해 올께요 어느님 글이 좋은가... 예 : line-height:100%; <p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:100%;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p> line-height:150%; <p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:150%;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p> line-height:200%; <p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:200%;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p>

결과보기 : line-height:100%; 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ line-height:150%; 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ line-height:200%; 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ 줄간격의 차이를 느끼시겠어요?

5. font-family: 이건 글꼴 마음에 드는 글꼴로 넣으면 됩니다만 보는 사람의 컴에 해당 글꼴이 없으면 보이지 않고 기본 글꼴만 보인답니다. 저는 거의 사용 하지 않지요. 구형컴 나말고 또 사용하는분 많은것 같아서요. 기본글꼴과 궁서체만 사용해요. 궁서체야 기본적으로 있으니깐요

예 <p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:200%; font-family:궁서;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p>

결과보기 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~

6. color: 이것은 글색 이것도 예를들필요가 있을까 만은 그래도 한번 보지요

예 <p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:200%; font-family:궁서; color:green;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p> 결과보기 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~

7. 중간 결산 이렇게 사용하니깐 모든게 한꺼번에 되어 좋긴 한데 소스가 넘 길고 복잡하지요^^ 그래서 이걸 줄여야해요. 앞의 명령어 생략하고 본명령만 사용하면 되죠. 아마 외우셔야 할겁니다. 1 2 3 4 5 6 순서대로 넣으셔야 하고요 필요 없는 명령어는 넣지 않아도 됩니다

예 <p style="font:italic bold 12pt/200% 궁서; color:green;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p> 글자크기와 줄간 사이에 / 넣는것에 유의 하시길

결과보기 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~

8. 중간 결산2 필요 없는 명령어 빼기

예 1 이탤릭체를 빼자 <p style="font:bold 12pt/200% 궁서; color:green;"> 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~ </p>

결과보기 몇일전에 아들이 걸레를 들고서 이곳 저곳을 청소하고 있더라구요. 그래서 전 애구 홍인이 착하네...했더니. 글쎄 뭐라고 하는줄 아세요??? 응 엄마.산타할아버지한테 선물 받을려고 그래....하는거 있죠. 에구 예뻐라~~~

예 2 이탤릭체를 빼고 한줄이니깐 줄간격도 빼자 <p style="font:bold 12pt 궁서; color:green;"> dbfl님 안녕 하세요? 보고 계시나요?^^ </p>

결과보기 dbfl님 안녕 하세요? 보고 계시나요?^^ 간단 하죠? 소스가 많이 짧아져 이제는 해볼만 하지요^^ 오늘 p 에 관하여 다 할려고 했는데 글이 너무 길어져서 제 2편으로 넘어 가야 겠어요. 여기 다 못쓰겠네요. 다음에 시간이 나면 다시 후편을 올리겠습니다 p 스타일만 다 알아도 무척 편리하게 사용할수 있어요 오타난거 수정할 시간이 없네요. 그냥 올릴테니깐 오타는 있더라도 양해를... 아래에 숙제가 있어요. 숙제 꼭 하세요^^ 안녕히~~

숙제 이 소스보고 연구하기.