5. 목차스타일 설정하기

목차에 등장하는 타이틀은 본문과는 다른 스타일이 필요합니다. 스타일시트에서 본문이 ‘p’였다면 목차는 ‘h’입니다. 목차도 큰 타이틀과 소 타이틀이 있으므로 가장 큰 타이틀은 ‘h1’, 크기 순서대로 h2, h3...등으로 정해주게 됩니다. ‘pro.xhtml’ 화면에서 타이틀인 ‘Prologue’ 앞에 커서를 두고 상단 메뉴 중 ‘h1’을 클릭해주세요.

목차스타일이 변한 것을 확인하셨다면 다른 섹션의 타이틀도 모두 적용해주세요. 이제 목차의 스타일을 지정해주도록 하겠습니다. pro.xhtml화면과 Style0001.css를 모두 열고 작업영역에는 Style0001.css가 보이도록 해주세요. 본문 스타일을 지정했던 것과 마찬가지로 아래 코드를 복사하여 스타일시트에 붙여넣어주세요. 앞서 해보신 것 외에 폰트컬러변경과 그림자넣기 코드를 넣었습니다.

 

목차스타일 CSS

 

h1 {font-family:TmonMonsori;text-align:left;

font-size:3em;

color:#999900;

text-shadow:3px 3px 7px gray}

 

폰트컬러는 색상코드를 검색하셔도 되고 이 시리즈에 제가 따로 제공해드릴 예정이오니 참고하셔서 마음에 드는 컬러를 골라 사용하시면 되구요. 맨 해단은 폰트에 그림자를 넣는 코드이니 참고해주세요.

# 저작권페이지 스타일디자인

저작권섹션(copy.xhtml)을 더블클릭하고 왼쪽 상단의 <>표시를 클릭해서 HTML코드가 보이도록 해주세요. 원고 내용 중 'p'를 찾아 다음 코드를 입력해주세요. 이 명령어는 'p의 스타일은 txt1의 명령을 따르라'는 뜻입니다.

 

저작권 스타일 지정 : p class="txt1"

그런 다음 스타일시트를 열어 다음 코드를 입력해주세요. 저작권 관련 고지 원고의 스타일을 주는 코드입니다. 

 

저작권 스타일 지정 

 

.txt{

font-size:0.8em;

border:1px solid gray;

padding:0.5em;

border-bottom:5px solid gray;}

 

미리보기 화면을 통해 변화를 보시면서 원하시는 스타일대로 조정하시면 됩니다. 위 스타일은 원고 내 돌출박스 등으로 활용하셔도 좋을  것같네요.

저작권페이지 스타일이 적용된 화면입니다. 여기까지 마치시면 본문과 표지까지 기본적인 입문과정은 마스터하신 것입니다. 각 섹션들을 다시한번 보시면서 스타일을 조정해보시고 앞서 따라해보신 내용을 잘 숙지해보시기 바랍니다.

# 이미지 삽입하기

텍스트만 있는 페이지에 이미지를 삽입해보도록 하겠습니다. 저는 작가소개 페이지에 멋진 이미지를 넣어볼겁니다. 앞서 예제를 숙지하셨다면 이 부분도 매우 쉽게 하실 수 있을 거예요. 먼저, 시길 메뉴영역에서 ‘wri’섹션을 열어놓으신 후 ‘image’메뉴를 우클릭하시고 ‘기존 파일 추가’를 클릭하세요.

이미지를 추가하셨다면 본문으로 이동하여 아래 코드를 작성해줍니다.

본문에 이미지 삽입코드 : 

<div style="text-align:center;margin-top:20px;">

< img src = " . . / Images / wri - image . jpg " width = " 100 % "

height="auto"/></div>

이제 각 코드가 어떤 뜻인지 설명드릴께요. <div>는 새로운 성격의 영역을 뜻합니다. "text-align:center;margin-top:20px;"은 ‘새로운 영역의 콘텐츠를 가운데 정렬하고 윗부분에 20픽셀의 여백을 두겠다’는 명령입니다. 그 밑의 'img'는 이미지라는 것, 아시죠? 먼저 'src'라는 명령어로 이미지의 위치를 정확히 알려주어야 하는데요. "../Images/wri-image.jpg"에 정확한 파일명을 입력해주셔야 해요. 파일명 오타로 에러가 나는 경우가 많습니다. 이 코드 활용 시 이미지파일명만 바꿔 사용하시면 됩니다.

'width'는 이미지의 가로폭을 말하는데 퍼센트로 표기합니다. 저는 본문 하단을 꽉 채우고 싶어서 '100%'로 지정했답니다. 50%로 지정하면 본문의 절반 정도 크기로 가운데 정렬되겠죠? 'height'는 이미지의 높이를 말하는 것인데 auto로 지정해주면 가로폭에 맞추어 알아서 크기가 조정됩니다.