목록

☞ text-align , text-indent
  text-align 속성은 뭘 까요? 그냥 척 보면 알겠죠.... 정렬해주는 기능이죠. 뭘 정렬해주냐고요? 글자뿐만 아니라 이 속성에 포함된 요소의 정렬방식을 결정해주는 기능을 합니다.  text-indent속성은 들여쓰기의 길이를 정해주는 기능을 합니다. 들여쓰기가 뭔지는 아시겠죠?  문단의 첫 부분을 다른 행에 비해 조금씩 넣어주는 것을 말하죠. 자...그럼 예제를 보겠습니다.
 
 <style type="text/css">
  <!--
   p { font-size:13px; color:blue; text-align:right; }
   .love { text-indent:5%; text-align:left; }
  -->
 </style>
 <body>
  <p> 디스플레이의 경우 보다 부피가 적은 모니터와 선명하고 안정적인 화면이 동시에 요구되고 있어 LCD와 PDP제품의 개발 및 줄시가 증가하고 있다. LCD모니터는 일본시장에서 이미 테스크탑 모니터의 50%이상을 차지하는 등 빠른 성장세를 나타내고 있으며 가격도 지속적으로 하락하고 있어 국내에서도 올 하반기를 기점으로 시장점유율이 큰 폭으로 상승할 것으로 전망된다.</p>
 <p class=love>PDP는 현재까지 40인치 이상의 대형화면을 표현하는 데 가장 적합한 매체로 알려져 대형화면을 요구하는 소비자를 대상으로 판매가 확대되고 있다. PDP는 기존 모니터와 비교해 처박형이면서 완전평면으로 대형화면표시가 가능하며, 시야각이 160도 이상으로 넓어 차세대 디스플레이로 각광받고 있다....</p>
 </body>

 어때요? 첫번째 문단의 경우 우측정렬이 되져...그리고 두번째 문단은 좌측정렬이 되면서 문단 첫머리가 지정해준 만큼 들여쓰기가 되구요.....
 
  ☞ margin-top , margin-left , margin-bottom , margin-right
  마진(margin).....이란..?  설명하자면 여백을 조절하는 속성이라고 할 까요? 제가 말솜씨가 없어서 그런지 ... 아님 원래 우리말로 표현이 어려운 건지.....더 이상 어떻게 설명 드리는 게 좀 힘 드네요..^^   이건 예제를 보면서 익히면 금방 이해하실 수 있을 겁니다. 예제를 보기 전에 참고적으로 , margin속성의 수치단위는 px , pt , in ,cm를 사용할 수 있고요... 마이너스(-)값도 사용할 수 있습니다. 퍼센트 값을 사용할 수 도 있는데 그러면 브라우져에 따라 유동적이기 때문에 원래 원하던 표현이 안될 수도 있답니다. margin 속성은 잘 만 사용하면 정말 멋진 웹페이지를 만들 수 있답니다. 이제 예제를 볼까요?

 <style type="text/css">
  <!--
   body { font-family: 돋움체; }
   .love { font-size : 130px; color:red; font-weight:bold; margin-bottom:0px; }
   .story { margin-top:-110px; margin-left:87px; margin-bottom:0px; font-size:30px; color: blue; }
   .kiss { font-size:15px; margin-left:50px; margin-right:50px; text-align:justify; }
  -->
 </style>
 <body>
  <p class=love>태그매니아</p>
  <p class=story>태그를 좋아하는 사람들의 배움터</p>
  <p class=kiss>태그를 좋아하는 사람들의 모임입니다. 태그를 좋아하는 사람들의 홈페이지입니다. 태그를 좋아하는 사람들의 장소입니다. 태그를 좋아하는 사람들의 터입니다. 태그를 좋아하는 사람들의 공간입니다. 태그를 좋아하는 사람들의 클럽입니다. 태그를 좋아하는 사람들의 지대입니다. </p>
 </body>

 어때요? HTML로는 도저히 표현할 수 없는 효과를 낼 수 있죠?  margin-top은 상단여백을 조정해주고 , left는 왼쪽여백 , right 는 오른쪽여백 , bottom은 당연 아래쪽 여백을 조절해주는 속성이죠.  멋지죠? 예제에서 봤듯이 margin속성을 이용하면 글자끼리도 겹치게 할 수 도 있고 해당 요소를 부라우져의 경계선에서 반쯤 걸쳐있게 할 수 도 있습니다. 엄청난 기능이죠.^^ 연습 많이 해서 완전히 자기 것으로 만들면 더욱 더 좋겠죠? 

이 게시물을