HTML 수업

웹의 신체

문단, 줄바꿈, 띄어쓰기

문단 (paragraph)

문단이란 글에서 하나로 묶을 수 있는 짧은 단위를 의미한다. HTML에서는 <p> 태그를 사용한다.

문법(Syntax)

<p>문단</p>

설명(Description)

  • P는 paragraph의 약자
  • 문단을 구분할 때 사용함
  • 문단과 문단 사이에 공백라인이 들어감

예제(Example)

example1. (jsfiddle, github, ?)

<p>앞으로 제가 준비하는 생활코딩 강의를 몇번 더 할까합니다. 어제는 jQuery를 다루지 못해서 무척 아쉬웠었습니다. JQuery는 별도의 강의로 스핀오프하는게 좋겠다는 생각입니다.</p>
<p>다만 자바스크립트 자체의 강의는 하루동안 프로그래밍 전체에 대한 개념을 (학습이 아니라) 체험? 한다는 취지이기 때문에 분산하지는 않을 생각입니다. 대신 강의를 좀 더 간결하게 진행하고 수강생들이 익숙해져야 <p>하는 것들은 (개념에 대한 설명 없이 걍무조건) 빽빽이라도 요구할까 생각 중입니다. ㅋ 그래서 두시간안에 모두 끝내는 것를 목표로 생각하고 있습니다.</p>
아쉬운 것이 실전사례를 두가지밖에 발표하지 못했다는 점, 실습해 보지 못했다는 점입니다. 더 많은 케이스를 통해서 프로그래머들은 어떻게 문제를 해결하는가를 가감없이 전달해드리고 싶었는데 말이죠. 그런 점에서 저는 개발자로는 별로지만 강사로는 괜찮은 것 같습니다. 영어와 수학을 잘 못하거든요.</p>
<p>기회가 되면 브라우저 밖의 자바스크립트도 꼭 보여드리고 싶군요. 이를테면 HTML/CSS/자바스크립트만으로 이루어진 크롬익스텐션, 웹페이지를 사용자 마음대로 수정해주는 그리스몽키, (PHP, ASP, JSP 와 같은 언어처럼 서버쪽 언어지만 자바스크립트의 문법을 하고 있는) node.js 같은 것들 말입니다. 제가 수업내내 자바스크립트와 HTML은 완전히 다른 언어고 서로 독립되어 있다고 말씀 드렸죠? 자바스크립트로 할수 있는 것은 무궁무진 합니다. 자바스크립트는 자비스크립트입니다. ㅎㅎ</p>
<p>그리고 생활코딩은 '가난한 자들의 컨퍼런스를 지향합니다' 장소스폰이 가장 절실한데 참석자의 직장내 강의공간을 빌려주시는 것이 가장 굿케이스입니다. 강의에 필요한 A-Z를 강사와 학생들이 십시일반으로 조달하는 독립수업! 제가 꿈꾸는 모델입니다. 저는 아쉬운 소리 하는 걸 세상에서 두번째로 싫어하거든요;; 또 다른 스폰으로는 음식이 있을 것 같고, 나머지는 여러분이 창의력을 발휘해 보아요. :) </p>

줄바꿈 (line break)

요약(Summary)

엔터를 입력하면 줄바꿈이 된다. 이것은 줄바꿈에 해당되는 문자가 입력되기 때문인데, 이런 문자를 개행문자라고 한다. 개행문자는 줄바꿈을 의미하는 것이기 때문에 눈에는 보이지 않는다. (ascii 코드 중 10, 13번) 그런데 HTML에서는 개행문자를 무시한다. 대신 <br /> 태그를 사용해야 한다.

문법(Syntax)

문장<br />

예제(Example)

example2. 아래 예제는 개행문자의 사용법을 보여준다. 엔터를 쳐서 소스에서는 줄바꿈이 됐을지라도 실제로 브라우저에서는 줄바꿈이 되지 않는데 이런 때 <br /> 태그를 사용한다. (jsfiddle, github, ?)

 

앞으로 제가 준비하는 생활코딩 강의를 몇번 더 할까합니다. <br />
어제는 jQuery를 다루지 못해서 무척 아쉬웠었습니다. JQuery는 별도의 강의로 스핀오프하는게 좋겠다는 생각입니다.<br />
다만 자바스크립트 자체의 강의는 하루동안 프로그래밍 전체에 대한 개념을 (학습이 아니라) 체험? 한다는 취지이기 때문에 분산하지는 않을 생각입니다.<br /><br /><br /><br />
대신 강의를 좀 더 간결하게 진행하고 수강생들이 익숙해져야 하는 것들은 (개념에 대한 설명 없이 걍무조건) 빽빽이라도 요구할까 생각 중입니다.<br />

띄어쓰기

스페이스 키를 누르면 눈에 보이지는 않지만 space 문자가 입력된다. (ascii 코드 중 32번) HTML에서는 스페이스 문자는 한번만 인정된다. 그래서 한번 이상 스페이스를 입력해도 한 칸만 띄어쓰기가 된다. 이럴 때 &nbsp; 기호를 사용한다. 

문법(Syntax)

문장&nbsp;문장

설명(Description)

  • HTML의 코드 상에서 스페이스로 공백을 주어도 공백이 하나 이상 만들어지지 않는다.
  • &nbsp;를 이용하면 여러개의 공백을 만들 수 있다.

예제(Example)

example3. 아래 예제는 &nbsp; 기호를 사용했을 때와 스페이스를 사용했을 때의 차이점을 보여준다. (jsfiddle, github, ?)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<p>
			test1&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;test1 의 결과 :
			test1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test1
		</p>
		<p>
			test1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;test1의 결과 :
			test1     test1
		</p>
	</body>
</html>

댓글

댓글 본문
  1. conny
    너무 이해하기 쉽게 설명해주셔서 감사해용~!
  2. Christalnam
    너무잘듣고있습니다. 화이팅!
  3. NAMO
    감사합니다!
  4. gummybear
    sumlime text3 으로 따라하고 있는데 ㅜㅜ 예제를 인식을 잘 못해요... 뭐가 잘못된걸까요?
  5. 많은 도움이됩니다. 정말 감사합니다.
  6. JustStudy
    고맙습니다
  7. qoeksl87
    이런 깨알자료들 무료로 올려주셔서 아주아주 잘 보고있어요. 너무 고마워요 이고잉님 하트하트
  8. 이상완
    감사합니다 ㅎㅎ
  9. 이승훈
    거참 띄어쓰기 몇번 하기 어렵네요
  10. 보현
    감사합니다 한번 띄우는게 여러 문자의 조합으로 이루어졌네요!!
  11. 코코
    감사합니다~ 혼자 책보고 공부할 때 보다 훨씬 재밌고 좋네요
  12. 감사합니다
  13. jerry
    좋은 강의 감사합니다.
  14. 정윤호
    감사합니다.
  15. 어부바
    감사합니다.
  16. YellowBall
    문단, 줄바꿈, 띄어쓰기 잘 들었습니다.2015/4/21
  17. 사용하시는 서버가 UTF-8을 지원안하시는경우 charset=utf-8 << 이렇게 정의하시면 한글이 깨져서 나옵니다
    그럴경우 charset=euc-kr로 고치셔야 한글이 제대로 나오실꺼에욤~
    파일 인코딩도 잘 보셔야해욤
    인코딩이 ansi 인지 utf-8인지도 보셔야한다능 ' ㅅ '
    대화보기
    • 왕초보
      잘배우고 갑니다....^^
    • Mr.Kim
      항상 잘보고 있습니다. 이고잉님 좋은강의 감사드려요
    • 제가 알기로는 </br> 태그는 열리는 태그와 닫히는 태그의 개념이 없어서 그냥 아예 닫히는 태그로 되있는걸로 알고 있습니다
      대화보기
      • 서현뿌뿌
        감사합니다~강의 잘듣고 있습니당 ^.^
      • 카르테진
        굉장히 간단한 코드들이고 이해하기 쉽네요.
        강의 감사합니다.
      • 욱희
        br 에 슬래시 붙이지 않아도 되지않아요?? 슬래시 왜붙은건가용?
      • Allen Cho
        문자형식을 UTF-8 로 지정하면 모바일에서 깨져나오는데 어떻게 해야 하죠?
      • 중딩코딩
        메타태그를 이용하면 됩니다
        <META http-equiv="Content-Type" content="text/html; charset=utf-8">
        저기에서 utf-8은 유니코드니까 찾아보시면 알게 될겁니다
        대화보기
        • 중딩코딩
          메타태그를 이용하면 됩니다
          <META http-equiv="Content-Type" content="text/html; charset=utf-8">
          저기에서 utf-8은 유니코드니까 찾아보시면 알게 될겁니다
          대화보기
          • 우진
            잘 보고 있습니다.
            저 질문이 있어요 제가 앞에 강의에서 설명하신 '압타나'로 실습해보고 있는데,
            한글이 깨져서
            "�떎留� �옄諛붿뒪�겕由쏀듃 �옄泥댁쓽 媛뺤쓽�뒗 �븯猷⑤룞�븞 �봽濡쒓렇"
            이런식으로 나와요. 어떻게 하면 한글로 나오나요??
          • 김주식
            잘보고 있습니다. 좋은 강의 많이 부탁드립니다.
          • 유형찬
            감사합니다!
          • 이시대리더
            혁신적인 egoing
          • 최창원
            &amp는 &문자로 표시되는 군요. &의 특수한 역할 때문에. ..
            감사합니다.
          • 유스유스
            제가 듣기로는 태그의 표준때문으로 알고 있습니다.
            태그는 열리고, 닫히는 형태가 표준이기 때문에
            <br> 과 같은 경우도 태그 표준으로 하면
            <br /> 로 하는게 표준에 맞지요.
            하지만 예전부터 이렇게 자동으로 닫히는 태그들을 사용했기 때문에
            <br>로만 써도 됩니다.
            표준에 맞추시려면 닫아 주시는게 좋구요.
            대화보기
            • 감사님
              잘 봤습니다!
            • 로망
              예전에는 <br> 로 썼었는데 <br /> 로 사용하는 별도의 이유가 있나요?
            • HOTSHOT
              줄바꿈을 할 때, 'br'과 '/'를 띄워서 쓰시는데 이유라도 있나요?
            • 쾅시폭포
              첨 알았네요 nbsp 는 non-breaking space. 댓글에서도 많은 도움이 되네요
            • 캥캥
              2013.10.02
            • visual00
              같잖은 웹관련 서적만 보다가 난잡하고 외우는것만 많은 느낌을 받아서

              계속 웹앱 웹프로그래밍 입문에 좌절하곤 했는데

              이 싸이트를 알게되고

              이렇게 친절한 강의를 보면서 하나 하나 배우니까 너무 도움이 됩니다. ^^

              정말 감사합니다 ^^
            • Hyunduk Yi
              &은 어떤 규약이 있어서 바로 사용할 수 없군요. &로 사용하여야만 되는군요.. 감사합니다.오늘 배운게

              , ,   (non-breaking space)
            • ㅇㅇ
              결론은 라인피드+캐리지리턴으로 다음줄 맨앞으로 이동~
              대화보기
              • ㅇㅇ
                캐리지 리턴은 줄바꿈이 아니라 커서를 그줄 맨앞으로 보내는 것입니다 참고하세요 ㅎ
              • Park Seong Whan
                잘들었습니다. 감사합니다.
              • egoing
                정정 했습니다. 고맙습니다.
                대화보기
                • manorgass
                  example3 8번째 줄에서 test2 -> test1 으로 수정 바랍니다.
                • Starmomo
                  도움이 되었습니다. 고맙습니다.     ^^
                • roopy
                  참고로 nbsp 는 non-breaking space(줄 바꿈 없이 여백)의 약자입니다. 이것도 넣으면 좋을 것 같습니다.
                • Guruzerocool
                  잘 들었습니다. 감사합니다.
                • Jmogoon
                  잘 들었습니다..고맙습니다.
                • Choc
                  쉽게 이해가 가요. 고맙습니다 :)
                • 윤태원
                  강의 잘들었습니다.^^