다음(Daum)카페 html5 태그와 CSS3 적용하여 꾸미기-배경이 깔린 글

[즉비]

전글에서 웹글은 html5로 만들어야 하고 이 웹글을 꾸미는 것은 CSS3로 한다는 것을 배웠고

div태그의 백그라운드 속성을 이용하여 내글에다가 멋진 배경효과를 만드는 소스도 연습해봤습니다.   

그러나 <div>의 백그라운드 속성으로는 여러개의 사진을 사용할 수 없습니다.

오늘은 긴 글일때는 배경효과를 어떻게 해야 하는지 알아보겠습니다.

1. 나의 글 준비하기

  사람의 향기
  
  프랑스의 휴양도시!!-
  니스의 한 카페에는 이런 가격표가 붙어 있다고 합니다!!..
  
  Coffee! 7 Euro.
  Coffee Please! 4.25 Euro.
  Hello Coffee Please! 1.4 Euro.
  
  우리 말로 바꾸면!
  커피!ㅡ
  라고, 반말하는 사람에게는 1만원을!
  
  커피 주세요!ㅡ
  라고, 주문하는 사람에게는 6천원을!
  
  안녕하세요!! 커피한잔 주세요!ㅡ
  라고, 예의바르고 상냥한 손님에게는 2천원을 받겠다는 얘기입니다!..
  그 카페에서는
  말 한마디를, 예쁘게 하는 것으로. 똑같은 커피를 5분의1 가격으로 마실 수 있는 셈입니다!...
  
  말은 사람의 향기라고 합니다.
  아무리 꽃이 예뻐도 냄새가 독하면. 곁에 가까이 두기 어렵고!
  
  반대로 화려하지 않아도 향기가 좋으면 그 꽃을 방안에 들여 놓게 됩니다!...

이글에다 배경그림을 깔고  카페에 올려보겠습니다.

2. html5 태그 

<div style="">

    <div style="">

    </div>
</div>

박스안에 박스를 넣는 html5태그를 사용할 것입니다

3. 나의글에 html5 태그 적용 

<div style="">

 <div style="">
  사람의 향기
  
  프랑스의 휴양도시!!-
  니스의 한 카페에는 이런 가격표가 붙어 있다고 합니다!!..
  
  Coffee! 7 Euro.
  Coffee Please! 4.25 Euro.
  Hello Coffee Please! 1.4 Euro.
  
  우리 말로 바꾸면!
  커피!ㅡ
  라고, 반말하는 사람에게는 1만원을!
  
  커피 주세요!ㅡ
  라고, 주문하는 사람에게는 6천원을!
  
  안녕하세요!! 커피한잔 주세요!ㅡ
  라고, 예의바르고 상냥한 손님에게는 2천원을 받겠다는 얘기입니다!..
  그 카페에서는
  말 한마디를, 예쁘게 하는 것으로. 똑같은 커피를 5분의1 가격으로 마실 수 있는 셈입니다!...
  
  말은 사람의 향기라고 합니다.
  아무리 꽃이 예뻐도 냄새가 독하면. 곁에 가까이 두기 어렵고!
  
  반대로 화려하지 않아도 향기가 좋으면 그 꽃을 방안에 들여 놓게 됩니다!...
 </div>

</div>

인터넷에 올릴 글이 완성되었습니다. 이것으로 html5는 끝입니다. 이대로 올려도 됩니다.
html5는 여기까지 써주면 나머지는 익스플로어나 크롬등 웹 브라우저가 알아서 처리해줍니다
이 상태만으로도 하나의 완성된 웹문서로 인정합니다.

html5의 책에 의하면, 맹인등 신체가 불편하신 분들이 나의 글을 읽을 때 인터넷글을 점자로 표시해주거나
소리로 읽어주는 기계가 인식할 수 있게 하기 위해서 <div>대신 <article>로 해야 맞습니다.

<div style="">

 <article style="">
    사람의 향기
    프랑스의 휴양도시!!-
    니스의 한 카페에는 이런 가격표가 붙어 있다고 합니다!!.. 
 </article>

 </div>

그러나 아직까지는 시대에 못따라오는 윈도우 XP 또는 몇몇 구형 스마트폰 기계 들이  <article>과 같이 새로 정해지는 태그 규칙들을 인식하지 못하는 문제가 남아있어서 그런것이 있다는 정도만 알아두시면 됩니다.

CSS3 - 나의글을 CSS3로 꾸미기

지금부터 하려는 작업은 내가 준비한 글뒤에 멋진 배경사진이 한장 깔린 HTML5글을 만들어보는 것입니다. 
배경있는 글 정도라면 그동안은 쉽게 했던 것입니다. 그런데 요즘은 세상이 변해서 새로 문제가 한가지 생겼습니다.

문제는 이렇습니다. 내글이 좀 길 경우 배경으로 준비한 그림이 pc에서는 분명히 한장의 사진으로도 충분했습니다. 그런데 이걸 스마트폰으로 봤더니 앵! 글이 그림보다 길어져서 화면 아래로 쭉 밀려나가버렸습니다. PC에서 아름답게 꾸며진 내글을 스마트폰으로도 잘보여야 하고 테블릿에도 멋있게 보여야 합니다. 

공부해야 할 기술은 단순히 내글에다가 멋진 사진을 배경으로 꾸미는 문제가 아니라는 것입니다. 세상의 모든 기계 화면에 똑같이 보이게 하는 기술을 배우는 것이 목표입니다. 그렇다고 겁먹고 포기할 필요는 없습니다. 까다롭고 복잡한 작업이기는 하지만 조금만 고생해서 공부하면 별거 아닙니다.

글을 꾸미기 방법은 위에서 작성한 HTML5의 <DIV> 태그안에다  style=""의 따옴표 사이에 여러가지 속성들을 적어줍니다.
속성과 속성은 ;로 구분해주어야 합니다.

3. 초기화하기

다음(Daum)카페에서 html5로 글쓰기할 때는, <div>들의 맨위에다 항상 아래 문장으로 감싸지 않으면 화면이 뒤죽박죽되어 알수없게 엉망이 됩니다.

<div style="clear: both; position: relative;top: 0px;left: 0px; width: 100%; ">
</div>

clear: both;
  새로 시작한다는 의미입니다. 여러 인터넷으로부터 밀려온 스타일들을 모두 막고 백지처럼 깨끗하게 정리해줍니다.
  
position: relative;top: 0px; left: 0px;
  이 박스안에 들어갈 박스들에게 처음이라는 것을  알려주면서 이 박스의 속성들을 알려줍니다.
  
width: 100%;
  화면의 가로를 100% 다 사용하겠다는 뜻입니다. 
  모든종류의 기계들 (예를 들자면 PC, 아이폰이나 삼성 LG등 수많은 회사의 모든 스마트폰등 )의 
  화면상에 나의 글이 똑같은 모양으로 보이기 위해서 반드시 적어줘야 합니다.
  
  
4. 나의 글 꾸미기

앞글에서는 글의 배경 그림을 넣을때 <div>의 백그라운드 속성을 사용했었습니다.   그러나 <div>의 백그라운드 속성으로는 여러개의 사진을 사용할 수 없습니다. 그래서 지금부터는 백그라운드 속성 대신 화면전체에다 그림으로 깔고 그 그림위에다 글을 덮어쓰는 방법을 사용하겠습니다.

  
 <div style="clear: both; position: relative;top: 0px;left: 0px; width: 100%; ">
      <img src="A.JPG>

 </div>

이렇게 하면 A.JPG가 화면에 보일것입니다. 이위에 내글을 덮어쓰면 됩니다.

이때 두가지 문제가 있습니다.

첫번째 문제는 배경과 글자색이 맞아야 한다는 것입니다. 배경 그림이 야경처럼 어두운 그림일 경우 글자색도 검은색이라면 글이 보이지 않을 것입니다. 검은 배경그림을 깔았다면 글자색을 흰색으로 정해줘야 합니다.

두번째 문제는 위에서 설명한 바로 그 문제점 즉 스마트폰등 여러기계에 똑같이 나오도록 고려해야 한다는 것입니다.   이 문제를 해결하려면 글의 길이를 짐작해서 그림을 두장이나 세장 이상 준비해야 합니다.

 <div style="clear: both; position: relative;top: 0px;left: 0px; width: 100%; ">
     <img src="A.JPG>

     <img src="B.JPG>

     <img src="C.JPG>

 </div>

 이런식으로 그림들을 이어 놓는다면 화면에 여러그림들이 연속해서 이어져서 보이고 긴 글 뒤로 여러 사진들이 배경으로 깔리게 됩니다.
 하나의 글에 대한 배경으로 여러 그림을 이어 사용할때 글자 색깔에 마추어서 같은 분위기의 그림들로 선택해야 됩니다.
 예를 들자면 첫번째 배경사진이 전체적으로 검은갈색이어서 글자를 흰색으로 하고서는
 두번째 사진을 바다의 수평선이 보이는 사진으로 한다면 수평선 바다사진 부분위에 있는 흰색글자가 보이지 않을 것입니다.

5. 그림위에다 글을 덮어쓰기

 <div style="clear: both; position: relative;top: 0px;left: 0px; width: 100%; ">

  <img src="A.JPG>

        <img src="B.JPG>

  <div style="position:absolute;top:20px;left:10%;width:70%;text-align: left; color: rgb(255, 255, 255);">
        니스의 한 카페에는 이런 가격표가 붙어 있다고 합니다!!.. 
  </div>

 </div>

 
 position:absolute;top:20px;left:10%;
 위의 써진 순서대로라면 화면에는 그림들이 순서대로 보이고 나의 글은 맨밑에 보여야 합니다.
 absolute는 독재라는 뜻입니다.  absolute는 이순서를 무시하고 내가 보이고 싶은 곳에다 내글을 보여주겠다는 뜻입니다.
 

top:20px;left:10%;  absolute속성 다음에는 반드시 top과 left로 글이 놓일 위치를 알려줘야 합니다.
 top은 위로부터 20픽셀 아래이고 좌측에서부터 left:10%떨어진 곳에 글을 시작한다는 뜻입니다.
 여기서 top은 픽셀로 하고 폭(left)을 퍼센트로 한 이유는,  모든 기계에 화면에 맞추는(모든 기계에 똑같이 보이게 하려는) 우리의 목적 때문입니다.
 
 width:70%; 문단의 폭입니다. 역시 위에서 설명한 대로 화면의 폭을 정할때는  (모든 기계에 똑같이 보이게 하려는) 우리의 목적 때문에 항상 폭은 퍼센트로 해야 합니다.
 가령 문단폭을 width:500px; 이런식으로 정한다면 화면크기가 350픽셀정도 되는 스마트폰 기계의 화면에서 볼때 글이 옆으로 짤려서 안보이게 됩니다.
 
 text-align: left; color: rgb(255, 255, 255); 배경그림들이 전체적으로 어두운 그림들이기 때문에 글자색은 흰색으로 하였고 좌측에 정렬하였습니다.
 

6. 다음카페에 그림올리기

1번 사진올리기로 내컴퓨터에 있는 사진을 다음(Daum)카페로 올립니다.

2번 html버튼을 눌려 html편집화면으로 들어가서

다음 카페에 올라간 두개의 그림입니다. 그런데 자세히 보시면 그림폭이 픽셀로 되어있습니다.

모든 기계의 화면에다 맞추는 우리의 목표가 있습니다. 그러자면 모든 가로폭은 무조건 퍼센트값이 설정 되도록 손봐야 합니다. 모든 폭의 설정은 하나도 빠짐없이 모두 100%로 바꿉니다

<p style="text-align: center;"><img src="http://cfile296.uf.daum.net/image/250E584C5462E1533412B9" class="txc-image" width="100%" style="clear: none; float: none;" border="0" vspace="1" hspace="1" exif="{}" data-filename="2625F34E54615FB31467E7.gif" actualwidth="100%" /></p>

<p style="text-align: center;"><img src="http://cfile269.uf.daum.net/image/2222D14B5462E166302DFB" class="txc-image" width="100%" style="clear: none; float: none;" border="0" vspace="1" hspace="1" exif="{}" data-filename="커피맛과_커피_종류_이야기_1.jpg" actualwidth="100%" /></p>

이렇게 고치고

전체를 복사해서 내가 작성한 소스의 <img > 있는 곳에다 대신 붙여넣기 합니다.

완성되었습니다.

전체소스

 <div style="clear: both;position: relative;top: 0px;left: 0px; width: 100%; ">

<p style="text-align: center;"><img src="http://cfile296.uf.daum.net/image/250E584C5462E1533412B9" class="txc-image" width="100%" style="clear: none; float: none;" border="0" vspace="1" hspace="1" exif="{}" data-filename="2625F34E54615FB31467E7.gif" actualwidth="100%" /></p>

<p style="text-align: center;"><img src="http://cfile269.uf.daum.net/image/2222D14B5462E166302DFB" class="txc-image" width="100%" style="clear: none; float: none;" border="0" vspace="1" hspace="1" exif="{}" data-filename="커피맛과_커피_종류_이야기_1.jpg" actualwidth="100%" /></p>

 <div style="position:absolute;top:20px;left:10%;width:70%;text-align: left; color: rgb(255, 255, 255);z-index: 3;">
<h1>사람의 향기</h1>
<br>
 프랑스의 휴양도시!!- <br>
니스의 한 카페에는 이런 가격표가 붙어 있다고 합니다!!.. <br>
<br>
&#4510;Coffee! 7 Euro. <br>
&#4510;Coffee Please! 4.25 Euro. <br>
&#4510;Hello Coffee Please! 1.4 Euro. <br>
<br>
우리 말로 바꾸면! <br>
&#4510;커피!ㅡ <br>
라고, 반말하는 사람에게는 1만원을! <br>
<br>
&#4510;커피 주세요!ㅡ <br>
라고, 주문하는 사람에게는 6천원을! <br>
<br>
&#4510;안녕하세요!! 커피한잔 주세요!ㅡ <br>
라고, 예의바르고 상냥한 손님에게는 2천원을 받겠다는 얘기입니다!.. <br>
<br>그 카페에서는 <br>
말 한마디를, 예쁘게 하는 것으로. 똑같은 커피를 5분의1 가격으로 마실 수 있는 셈입니다!... <br>
<br>
말은 사람의 향기라고 합니다. <br>
아무리 꽃이 예뻐도 냄새가 독하면. 곁에 가까이 두기 어렵고! <br>
<br>
반대로 화려하지 않아도 향기가 좋으면 그 꽃을 방안에 들여 놓게 됩니다!... <br>
 
 
</div>

 </div>

 
< 글보기 >

오늘은 향기로운 커피 한잔! 생각나겠죠 [3]