• 4. 그림 삽입하기
  • [레벨:18]Zappy (IP: *.140.105.100)
    조회 수: 16534, 2010-05-11 13:05:12(2010-05-10)
  •    그림 삽입하기

      그림을 삽입하는 도구입니다.

      지금부터 표안에 그림을 삽입하여 문서를 꾸며보겠습니다. 표가 감추기로 되어있기 때문에 표는 그림들을 정돈시키는 역할을 하게 됩니다.

       

     표의 왼쪽 안 부분을 클릭하여 커서를 위치 시킵니다(그림을 삽입할 부분)

     그림과 같이 그림삽입하기를 클릭합니다.
    홈페이지/img 폴더에서 img_02.jpg를 선택하고 열기를 클릭합니다. (왼쪽 그림에서 18 x 484  4578바이트라고 쓰여 있는 부분을 주목하세요. 삽입하려는 그림의 가로 세로 길이와 그림파일의 크기(용량)을 알려줍니다.)

    그림이 삽입되었습니다. 위에서 본 그림의 가로세로 길이가 18 x 484였는데 셀(표안의 한칸 한칸 부분)은 그보다 길어 보이네요.

     셀의 가로 길이 조절을 위해 마우스 오른쪽 클릭->셀 속성으로 들어갑니다.

     너비를 픽셀단위로 18을 주고 확인을 클릭합니다.
    그래도 왼쪽 그림과 같이 셀의 크기가 완벽하게 그림과 맞지 않게 될 수도 있습니다. 하지만 다른 셀에도 그림들을 채워 넣어가면 보기 좋아질 것입니다. 중간 맨 위 셀에 커서를 옮기고 역시 그림삽입하기를 하여 home.gif 그림을 삽입합니다.
    home 밑에는 셀마다 각각 news, story, actor를 삽입합니다. (그림과 같이 이상하게 보일 수도 있지만 그것은 왼쪽 셀에 삽입된 그림의 세로길이가 길어서 그런 것이니 개의치 말고 그대로 따라해 주세요)
     삽입할수록 그림마다 폭이 좁아지는 것을 보실수 있을 겁니다. 이제 셀마다 gallery, board 그림을 삽입하고 맨 아래 셀에는 img_4.jpg 그림을 삽입합니다.
    보기 좋아졌습니다. 아직 하나가 빠졌습니다. 오른쪽 셀에 커서를 위치시키고 img_03.jpg 그림을 삽입합니다.
     표가 완성되었으니 저장을 해봅시다. 메뉴표시줄에서 파일->모두 저장하기를 클릭합니다.
    그림과 같이 왼쪽 프레임 문서에서 삽입된 그림들의 경로 지정이 나옵니다. 두 번째 항목을 선택하고 확인을 합니다.

     모두 저장되었으니 우리가 지금까지 작업한 내용들이 익스플로러 브라우저에서는 어떻게 나타나는지 확인해 봅시다. 그림과 같이 인터넷 익스플로러로 보기(F11)를 클릭합니다. (문서의 작업중에 저장을 하지 않고 이 명령을 실행하면 문서가 위치한 폴더안에 _temp_XXXXX 같은 htm 파일이 자동생성 됩니다. 이 파일은 익스플로러 화면에 보여주기 위해 일시적으로 생기는 파일이니 지워도 상관없습니다)

    그림과 같은 화면이 나옵니다

      상단 문서 배경부분이 반복되어 나오기 때문에 눈에 거슬릴 수도 있지만 나중에 다 해결할 것이니 문제삼지 마시고 ^^ 다음 페이지로 이동하겠습니다. 메뉴 부분은 완성이 되었으니 내용 부분을 하나씩 만들어보도록 하겠습니다.

       

       

      <-이전단계로           다음단계로->

       

       

댓글 0

번호 제목 닉네임 조회  등록일 
notice [레벨:18]Zappy 20432 2010-05-10
5 [레벨:18]Zappy 18132 2010-05-10
[레벨:18]Zappy 16534 2010-05-10
3 [레벨:18]Zappy 16574 2010-05-10
2 [레벨:18]Zappy 18377 2010-05-10
1 [레벨:18]Zappy 35073 2010-05-10
XE Login