태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

지난 시간까지 HTML문서의 기본 구조에 대해 알아봤습니다. 오늘은 이전 시간에 배운 내용을 총 복습하고 직접 테스트해 보는 시간을 갖도록 하겠습니다.

잊어 버렸다거나 잘 이해가 되지 않았던 부분이 없나 꼼꼼히 살펴 보신 후 부족한 것은 복습하시고, 첨부된 테스트지로 그 동안 배운 내용을 테스트 해 보시길 바래요.

시험이라고도 할 수 있고, 편하게 예스비™의 html 강좌를 보면서 얼마만큼 배웠는지 알아보는 시간이니까 너무 부담 갖지 마시고, 꼭 테스트 해보세요.

 

● HTML,문서 기본구조 총정리

1. 태그/html이란? :

태그(Tag)란 html문서를 수행하는 명령어를 말하며, HTML이란 "Hyper Text Markup Language"의 약자로 인터넷에서 웹을 통해 보여지는 언어입니다.

2. HTML 문서의 기본 구조:

독립태그외에 태그 공식은<태그명령어> 내용</태그명령어>로 나타내며, html문서의 기본 구조는 아래와 같습니다.

3. HTML문서의 제목에 해당하는 태그:

  • <hn> 제목 </hn>입니다.(n은 1~6까지의 숫자)
  • <hn align="위치"></hn> (위치를 나타내는 태그:오른쪽-right, 가운데-center, 왼쪽-left)

4. HTML 문서의 본문 글자를 나타내는 태그:

<font> 본문 내용</font>의 공식으로 이루어 지며, <font>안에 글자에 관한 몇가지 속성을 지정 할 수 있습니다.

  • <font size="크기"> 본문 내용</font>: 본문 글자 크기를 지정
  • <font color="색상"> 본문 내용 </font>: 본문 글자 색상을 지정(#xxxxxx_x는 6자리 코드값)
  • <font face="글꼴"> 본문 내용 </font>: 본문 글자 글꼴을 지정

5. HTML 문서 본문 단락을 나타내는 태그:

<br>은 줄바꿈 태그이며,<p>는 문단 단락을 나누는 태그입니다. 이 둘 태그는 단독으로 쓰이는 태그이기도 합니다. <p>태그안에는 관련 태그들로 속성을 부여 할 수 있습니다.

6. HTML 문서의 수평선을 긋는 태그:

문서에 수평선을 그어주는 태그는 <hr>이며, 태그안에 수평선의 속성을 지정 할 수 있습니다.

 

● TEST 하는 법과 체점하는 법

지금까지 기본구조에 대한 태그들을 공부했습니다. 과연 위의 공식들을 보지 않고 html문서로 작성 할 수 있습니까? 이제부터 테스트 해볼까요?(No cheating~!)

1. TEST 하는 법:

아래 테스트 항목에 대해 첨부 파일이 있습니다. html형식의 파일과 한글 파일입니다. 보기 편하신 것을 다운 받아 각 항목에 작성하시면 됩니다.

테스트 응모라고 하시고 답안지를 받을 메일을 비밀 댓글로 남겨 주시거나, 작성된 테스트지를 공지에 나와 있는 제 블로그 전용 한메일로 신청해 주시면 정답을 메일로 보내 드립니다.

제가 직접 시험답안을 받아 채점해 드리려고 하였으나, 참가율이 저조 할 것 같아 스스로 해보시기 바랍니다.

2. 채점하는 법:

채점은 단답형과 서술형이 있습니다. 각 문제당 점수를 문항 뒤에 표기 하였습니다.

서술형을 채점하실때 오타나 단어가 빠졌을 경우도 감점처리 해주십시요. html의 경우는 오타가 나거나, 글자 하나라도 빠졌을 경우 실행이 되지 않기때문에 정확히 작성해주셔야 됩니다. 나중에 스킨을 만들때 오타를 잡아내는 것도 중요한 부분이기 때문입니다.

※ 참고로 테스트 문항중에 제가 설명하지 않은 것이 있을 수 있습니다.

시험지 한글 파일로 받기
시험지 텍스트 파일로 받기

 

● 튜토리얼에 관해...

태그를 배우는 것은 다음에 블로그 스킨을 만들때 필요한 부분이기에 불가피하게 강좌를 시작했습니다. 현재의 html강좌가 웹표준에 근거해 맞지 않는다는 분들이 계십니다만, 직접 그 부분에 대해 공유해 주실 생각은 해보셨는지 부터 묻고 싶습니다. 본인도 하기 싫고 힘들고 귀찮은 부분이 바로 튜토리얼입니다. 예스비™도 무척이나 귀찮고 힘듭니다.

포토샵도 그렇지만 html 강좌 역시 한 개의 글을 발행하기 위해 몇 시간이 걸릴거라고 생각하나요? 튜토리얼에 관한 공지도 있지만, 몇 시간이 아니라 몇 일이 걸립니다. html강좌를 시작하면서 관련 서적을 4권을 더 사서 읽게 되더군요. 혹시나 내가 가지고 있는 책과 지식이 잘못된 것은 아닌지 확인하기 위해서죠.

현재는 html기초 강좌 글만 발행하고 있습니다. 꼭 알아야 할 태그만을 정리해서 올리고 있습니다. 한글로 따지면 엄마, 아빠등 단어에 해당 하겠네요. 단어를 모르는데 말을 할 수 있을까요?

기초태그가 끝나면 웹표준에 근거한 튜토리얼을 할 겁니다. 그 다음에는 직접 스킨 제작을 할 것이구요. 제발 부탁드리는데, 한 편의 튜토리얼 을 읽고 섣부른 태클은 하지 말아 주세요. html과 포토샵 강좌의 모든 구조적인 아웃라인이 잡혀 있고 그 것에 맞추어 진행중에 있습니다. 예스비™의 튜토리얼은 하나의 글로 완성되는 것도 아닙니다. 중구난방으로 그때 그때 필요한 부분만을 포스팅 하는 것도 아닙니다.튜토리얼에 대한 것은 모두가 연결되어 있습니다.이전 글을 모르면 다음 글을 이해하기 어렵습니다.

체계적이지 않은 중구난방식의 튜토리얼은 많습니다. 예스비™의 강좌 는 이런 아쉬운점들 때문에 시작한 강좌입니다. 스스로 공부하면서 가장 힘들었던 부분이 무엇을 먼저 배우고 나중에 배워야 할 지 막막했던 기억, 따라하면서 너무나 답답했던 이유를 분석해 보니 바로 체계적인 가이드가 없었기 때문이죠. 그래서 시작한 강좌입니다.

어설프게 아는 것보다 확실히 알려 드리고자 강좌 하나를 위해 여러 권의 책을 보고 인터넷 뒤지고...자료를 정리하고... 많은 시간을 투자하고 있습니다. 이런 점을 조금만 헤아려 주셨으면 좋겠네요.

앞으로 웹표준 어쩌고 운운하며 딴지를 거는 댓글은 무조건 통보 없이 삭제 하겠습니다.(본인이 나서서 글 좀 써주시죠~부탁드립니다. 저도 부족한 것 좀 편하게 배우게요.) 잔소리를 너무 길게 했군요ㅠ 죄송합니다. 오늘은 이렇게 마무리 짓고, 아시죠? 다 읽으셨으면 두 손 번쩍 들어~~다음과 믹시 그리고 알라딘 창작블로그에 추천 누르는 것~~잊지 마세요^^& 참, 월요일에 블로그 이벤트 당첨자 안내와 이벤트선물안내가 포스팅됩니다. 확인하시고~당첨자 분들은 연락처,이름,주소,메일을 비밀댓글로 남겨 주세요.

 

이 글이 링크되어 있는 곳:

블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://lelocle.tistory.com BlogIcon 악랄가츠 2009.06.30 14:02 수 정 댓 글

      하하~! 재밌어요~!
      쉬워요~!
      진작에 여기서 배웠어야 했는데 ㅜㅜ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.30 19:20 수 정

        가츠님은 배우실게 없으신듯...
        새달이 시작되는 군요.
        새롭게 다시 출발 해볼까요?

    2. Favicon of http://lowr.tistory.com BlogIcon White Rain 2009.06.30 15:04 수 정 댓 글

      하하. 시험까지. 이젠 블로그로 시험도...^^
      좋은데요?
      이따가 저녁에 차분한 마음으로 내용 정리 후
      시험에 응해야겠습니다.
      그런데 이것도 '시험'이라 왠지 마음이 떨리는군요...ㅠㅠ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.06.30 19:22 수 정

        호응도가 떨어질까봐 걱정이 되요ㅠ
        시험하면 저역시도 겁부터 나니ㅋㅋㅋ
        새롭게 새 달 맞이해요.
        5일날은 추어탕 먹는 날이라는데...
        남원까지 1시간도 안걸리는데~
        한번 가봐야 겠어요~ㅋㅌ

    3. Favicon of http://toyvillage.tistory.com BlogIcon 라이너스™ 2009.06.30 20:49 수 정 댓 글

      오늘도 즐겁게 공부하고갑니다^^
      그나저나 시험지.ㄷㄷ;
      시험하면 아직도 머리에 쥐가.ㅎㅎ

      • Favicon of http://www.yesbedesign.com BlogIcon 예스비™ 2009.07.01 00:14 수 정

        ㅎㅎ 아무래도...
        저도 시험하면 머리가 쭈뼛서지요.
        그냥 복습한다 생각하시면 부담 없으 실거에요^^
        전 시험문제 내느라 머리에 쥐가...

    4. Favicon of http://blog.daum.net/moga2641 BlogIcon 모과 2009.12.12 10:15 수 정 댓 글

      저는 도무지 뭔 소리인지 모르겠습니다.
      1월부터 컴퓨터 초급반에 등록해서 다시 들어야겠습니다.
      블로그도 카테고리를 정비해서 다시 시작하려구요.
      예스비님의 글이 이해되는 그날까지 공부 하렵니다.
      주말에는 어떻게 지나세요?
      행복한 일 빵 터져서 2009년을 기억했으면 좋겠습니다.^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.12.12 16:45 신고 수 정

        처음부터 하나씩 일거보시고 예문을 따라해 보세요.
        이건 웹디자인과 웹코딩에 관한 전문정보라서 일반 컴퓨터 강좌에서는 안가르쳐 준답니다.

    5. Favicon of http://blog.daum.net/maisan2 BlogIcon 표고아빠 2009.12.12 10:44 수 정 댓 글

      저두 하나하나 배워야하는데 언제나 마음만
      가득하네요. 좀더 좋은 정보들 주고받기 위해서 꼭 공부를좀 해야하는데
      맘처럼 쉽지 않네요

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.12.12 16:46 신고 수 정

        아무래도 전문 분야이니...어렵긴 하죠.
        저처럼 웹디자인엔 필수니까 해야되지만...일반분들에게는
        기초태그는 꼭 스킨을 만들어서라기보다는...글쓸때 유용하니 알아두시면 좋아요.

    6. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2009.12.12 14:12 수 정 댓 글

      쉽게 설명을 해주샤서 오늘 도 잘배우고 갑니다.

    7. Favicon of http://blog.naver.com/bluewin_int BlogIcon Bluewin 2009.12.12 17:01 수 정 댓 글

      초심자에게 충분히 도움이 될 수 있는 강좌가 될 수 있을것 같습니다.^^

    8. Favicon of http://reignman.tistory.com BlogIcon Reignman 2009.12.12 18:35 수 정 댓 글

      복습 잘 하고 갑니다.
      블로그 시작하면서 기본적인 것은 자연스럽게 알게 되더라고요.
      역시 블로그는 재밌고 유익한 것 같습니다. ㅋㅋ

    9. Favicon of http://22st.net BlogIcon 안지용 2009.12.12 19:10 수 정 댓 글

      언니~~~ 넘 쉽게 설명잘했어요..

      그나저나 연말에 한번 뭉쳐야죵?

    10. Favicon of https://badjunko.tistory.com BlogIcon 못된준코 2009.12.13 18:57 신고 수 정 댓 글

      아 역시 오늘도 좋은 정보~~~감사합니다.
      체계적으로 공부해야 하는데....어깨 넘어서만 배우고 있네요.~~

    11. Favicon of http://smilecap.tistory.com BlogIcon 스마일맨 2009.12.14 17:54 수 정 댓 글

      우와~ 시험도 보시는구나... ㅎ
      옛날에 이곳에서 배웠으면 정말 쉽게 배웠을텐데 말이에요...
      머리에 쏙쏙~ 들어오네요 ^^

    12. Favicon of http://blog.naver.com/introwjdgur BlogIcon 뀨우 2009.12.17 10:13 수 정 댓 글

      컴맹인 저에게 가뭄의 단비같은 블로그군영 하아하아
      자주 찾아뵙겠어요 저는 지금 부들부들 떨고 있다구요

      Olleh!!

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2009.12.17 13:20 신고 수 정

        올레~ 감사합니다^^&
        어깨가 갑자기 무거워 집니다ㅋ
        앞으로 더 튼실한 포스팅을 해야겠네요.
        찾아 주셔서 감사합니다.

    13. Favicon of http://www.astrabeds.com BlogIcon tempurpedic 2011.01.07 18:42 수 정 댓 글

      좋아요! 이것을 읽을 수 좋네요. 이건 아주 좋은 가치 읽어라고 생각합니다.

    최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool