릴게임G컴퓨터활용good: 실전 응용

스타일시트를 이용한 글자의 위치결정

지금 부터는 css 의 실전에서 쓰이는 방법을 구체적으로 보여 주면서 설명하도록 하겠습니다. 앞 장까지는 css 의 종류를 나열하면서 예을 들었지만, 이제는 실전에 쓰이는 예제 위주로 설명을 드릴 테니 직접 사용해 보도록 하십시요.

<html>
<head>
<style type="text/css"></style>
</head>
<body>
<h1>POSITION<br>RELATIVE<br><span id="sub">위치에 변화를 주는 것만으로도<br>제목이 참신해집니다</span></h1>
</body>
</html>

이것은 스타일시트의 position 을 이용하여 글자의 위치를 겹치게 놓은 것입니다. 잘 이용하면 홈페이지에 멋지게 써 먹을수 있겠지요.
크게 보면 head 부분에서 h1 으로 시작하는 태그의 스타일을 지정하였고, 또 하나는 id 가 sub 인 태그의 속성을 지정하였습니다. sub 라는 말 대신에 아무 단어나 써도 되지요.

h1 태그에 들어가는 속성으로는 글꼴(font-family) 는 2개를 지정했군요. 다른 사람의 컴퓨터에 폰트가 없는걸 대비해서 2개를 썼습니다. [,]를 써가면서 여러개를 써도 되지요. 글자의 칼라(color)는 #99ccff 로 하고, 배경색(background-color)은 흰색으로 지정을 했지요. 글자의 크기(font-size) 는 60px 로 지정을 하고 글자을 가운데 정렬(text-align) 하라고 했습니다.

다음으로 id=sub인 태그의 스타일로는 역시 글꼴(font-family) 를 3개를 지정했군요. 글자의 색(color)는 검정색으로, 배경색(background-color)는 투명하게 하라고 지정했고, 글자의 크기(font-size)는 20px 로 지정을 하였습니다. 글자의 위치를 맞추어주는 기능를 하는 position 를 상대 위치로 정했군요. 앞 부분에서 열심히 공부하신 분들은 기억 나실겁니다. position 의 속성값에는 4개가 있습니다. static(위치 지정을 하지 않음), relative(상대위치), absolute(절대위치), fixed(위치고정) 가 있다는거 기억하시나요? 기억 안나시는 분은 앞 부분을 다시 공부하시도록 하시고... ^^; 앞부분 글자의 위치에 따라 상대적으로 정해지는데 top이 -90 이므로 "position" 글자의 위로 90px 만큼 이동합니다.

이 번에는 위의 소스를 똑같이 쓰고 단지 background-color:#ffffff ; top:-110 으로 바꾸어 보았습니다.
가운데 검정 글자가 약간더 위로 올라갔고 배경이 투명에서 흰색으로 바꾸니까 아래 글자가 가려지는 군요.
여러분 들도 소스를 가져다가 이리 저리 바꾸어 보도록 하세요.

한가지 더 예를 들도록 하겠습니다.

송파나루터 저의 홈에 자주오세요

<font style=color:gray; font-family:굴림체; font-size:22pt; font-weight:bold> 송파나루터</font>
<font style=color:red; font-family:궁서체,돋움체; font-size:20pt; font-weight:bold; position: relative; left:-100; top:10pt>저의 홈에 자주오세요</font>

소스를 보시면 다른 부분은 위에서 설명한 것과 비슷하므로 위에 것을 보면되고, 가장 중요한 부분만 설명하겠습니다. position 을 relative(상대적 위치) 로 했으므로 앞의 위치에 따라 상대적으로 변화 시키겠다는 소리입니다. 그리고 top 을 10px 로 했으므로 앞 글자의 높이로 보터 10px 아래로 내려오고, left 를 -100px 로 했으므로 앞의 글자와 100px 겹치게 뒤로 이동하게 되므로 저런 모양이 나옵니다.

스타일시트로 배경이미지를 정렬하고 위치를 지정하는 방법

html 로 배경을 지정하게 되면 이미지를 반복해서 바둑판 식으로 밖에 지정할 수 없어 자기가 원하는 모양을 낼 수 없는 경우를 종종 경험 했을 것입니다. 하지만 스타일시트로 배경을 설정하게 되면 다양하게 배경을 지정할 수 있게 됩니다. 그럼 하나 씩 알아 보도록 하겠습니다.

background-image:url(http://www.studyho.com/image/face/img5.gif)
background-repeat:no-repeat

위의 그림은 스타일시트로 이미지 경로를 지정 (background-image) 하고 나서, 배경이미지를 반복하지 않겠다고 (background-repeat:no-repeat) 헤드 부분에 선언을 한것입니다.

background-image:url(http://www.studyho.com/image/face/img5.gif)
background-repeat:no-repeat
background-position:right bottom

이번 그림을 보시면 background-position 이라는 스타일이 추가 되었군요. background-position 은 배경이미지를 어디에 둘것인가를 결정하는 것인데 오른쪽 아래(right bottom) 에 위치 시킨다고 했으므로 위의 그림과 같이 위치가 변경된것입니다.

background-image:url(http://www.studyho.com/image/face/img5.gif)
background-repeat:no-repeat
background-attachment:fixed

이 번에는 배경을 고정 시켜 보았습니다. 스크롤 해보시면 배경은 고정된 채 내용만 올라갑니다. 배경 이미지를 고정(background-attachment) 시키고 스크롤 하여도 배경이 움직이지 않게(fixed) 값을 주었습니다.
background-attachment 속성값에는 2개가 있습니다. fixed (배경 이미지의 위치를 고정 된다) 와 scroll (배경 이미지를 다른 내용과 함께 스크롤 된다) 이 있다는 것은 스타일 시트 공부할 때 학습 하셨을 겁니다. 기억이 안나시면 다시 한번 천천히 읽어 보십시요. 자꾸 보다보면 이해가 이해가 될겁니다.

background-image:url(http://www.studyho.com/image/face/img5.gif)
background-repeat:repeat-x

이 번에는 배경 이미지를 스타일시트로 지정하고 나서 배경 이미지를 x 축으로만 반복되게 했습니다. 마찬 가지로 y축으로 배경이미지를 반복 시키려면 repeat-y 로 바꾸어 적으시면 됩니다.
제일 위에 그림은 no-repeat 였는데 이번에는 repeat-x 로 한 것 뿐입니다. 그림을 보아 가면서 소스를 보시면 이해가 되리라 생각합니다.

background-image:url(http://www.studyho.com/image/face/img5.gif)
background-repeat:repeat-y

위에 그림은 앞서 설명한 것과 같이 background-repeat 의 값을 repeat-y 로 주었으므로 y 축으로 배경 이미지가 반복되어 나타나는 것입니다. 다시 한번 background-repeat 의 속성값을 설명하자면 repeat (배경 이미지를 바둑판식으로 정렬), repeat-x (x 축으로 반복하여 정렬), repeat-y (y 축으로 반복하여 정렬), no-repeat (배경 이미지를 반복하지 않고 한 번만 표시) 가 있습니다. 잘 기억해 두십시요.

릴게임G컴퓨터활용good

2011년 1월 11일 화요일

실전 응용

댓글 없음:

댓글 쓰기