☞ 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속성을 이용하면 글자끼리도 겹치게
할 수 도 있고 해당 요소를 부라우져의
경계선에서 반쯤 걸쳐있게 할 수 도 있습니다.
엄청난 기능이죠.^^ 연습 많이 해서 완전히 자기
것으로 만들면 더욱 더 좋겠죠?
margin속성에 대해선 이 정도에서 마치도록
하고 다음 페이지로 넘어가도록 하겠습니다.
|
