웹 애플리케이션 만들기

HTML 이론

 HTML의 기본문법

우리는 계속 메모장을 사용하지 않을 것이기 때문에 메모장이나 텍스트 에디트의 편집기능이 다소 불편해도 불안해하지 마셔요. 지금 불편한 만큼 전문적인 도구를 만났을 때 감동도 클 것입니다. 

 ex_html1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    안녕하세요. <strong>생활코딩</strong>입니다.
  </body>
</html>

 HTML 문법 - 속성

ex_html2.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    안녕하세요. <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>입니다.
  </body>
</html>

맥의 텍스트 에디트를 사용하시는 분은 '그냥 따옴표'가 '보기 좋은 따옴표'로 바뀔 수 있습니다. 그럼 링크가 잘못될 수 있습니다. 아래의 방법을 참고해서 설정을 바꿔주세요. 편집 > 대체> 스마트 인용을 끄면 됩니다.

HTML 문법 - 태그의 중첩

ex_html3.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <ol>
      <li>html</li>
      <li>css</li>
      <li>JavaScript</li>
    </ol>
    <ul>
      <li>최진혁</li>
      <li>최유빈</li>
      <li>한이람</li>
    </ul>
  </body>
</html>

HTML 정리

소스코드

웹접근성

시각 장애인들은 어떻게 웹의 정보에 접근하는가에 대해서 '이건 모야^^'님께서 귀한 댓글을 달아주셨습니다. 시각 장애가 있는 분들은 어떻게 웹의 정보를 사용하는가를 읽어보시면 우리가 배우고 있는 HTML이 얼마나 중요한 기술인지에 대해서 공감할 수 있을 것 같습니다. 일독을 권합니다. 

쉬어가기

댓글

댓글 본문
작성자
비밀번호
  1. JaydenB
    실습을 따라서 텍스트에디터를 사용해 코드입력한뒤에 주소창에 링크를 치면 코딩이 되지않구 입력값 그대로 나타나게 되는데 어떤문제가 있는거죠... 참고로 따옴표도 전부 바꿨습니다. 코드글자도 틀린데가 없는지 확인했구요//
    그리고 갑자기 사용하다가 사파리 브라우져에서 html파일을 읽지못하네요 도와주세요~
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    </head>
    <body>
    안녕하세요. <a href=“http://opentutorials.org/course/1>생활코딩</a>입니다.
    </body>
    </html>
  2. Jae Hyun Park
    완료
  3. emessell
    수강완료
  4. 김대희
    html이 점점 더 재미있어지는것 같아요.
    정말 잘봤슴돠.
    감사합니다.
  5. 윤희경
    잘봤습니다!
  6. 우리우리
    완료했습니다 !
  7. Kevin Nam
    좋은 강의 잘 보았습니다.
  8. White Hacker
    7/22 완료. 화이트 해커가 되어 블랙해커때문에 고통받는 사람들을 도와주리라..
  9. 김원광
    완료
  10. 박지용
    강의 잘 보고 있습니다만 이번 강의에서 잘못 언급하신 부분이 있어서 적습니다.
    저번 강의에서 팀 버너스 리에 대해서 좀 찾아보기를 바란다고 하셔서 찾아보다가 알게 된 내용인데,
    하이퍼텍스트를 고안한 건 팀 버너스 리가 아니라 테오드르 넬슨이라고 합니당
  11. 이환길
    완료했습니다. 좋은 강의 감사합니다^^
  12. 이주현
    완료
  13. 김재경
    완료! 맥북 텍스트 편집기는 제가 쓴 코드를 다시 확인할 수 없나요 ?? 저장했다가 텍스트 편집기로 열기를 하면 작성했던 코드는 보이지 않고 코딩된 작업이 바로 나오네요 ㅠㅠ
  14. 코딩학습생
    잘 봤습니다.
  15. 인재진
    수강완료^^
    감사합니다
  16. 저도 같은 문제입니다... 도움 부탁드려요!
    대화보기
    • 아이노바
      완료...감사합니다.
    • Hyeok2
      수강완료~
    • Nam Kyu Lee
      수강완료~!
    • swemily7
      수강완료 :)
    • kaliblog
      눈으로 완료
    • 강명균
      완료
    • Myeongjin Ko
      완료
    • 허늬
      완료, 감사합니다
    • 이용성
      HTML을 현재로서도 아주 잘 쓰고 있고 아는 내용도 있지만 초심을 잡는다는 마음으로 깔끔히 정리가 된 문법과 총 정리를 볼수있어서 좋았습니다~ 감사합니다 !!
    • 박윤혜
      완료
    • 재규최
      잘 들었습니다. 퇴근을 조금 늦게 해서 지금 들었네요 감사합니다.
    • jimmyzip
      완료
    • 최칸트
      감사합니다 ㅠㅠㅠㅠ
      꼼꼼히 본다고 봤는데 빼먹었네요ㅠ 진짜 감사해요!
      대화보기
      • 최칸트
        아 감사해요 ㅠㅠㅠ 덜렁대서 빼먹었나봐요
        저는 한 열번 봐도 못찾았는데 감사합니다
        대화보기
        • 꿀맛바밤바
          완료!!! 감사합니다!!
        • Minje Jeon
          코딩의 세계에 발을 들여놓을 수 있게 도와주셔서 감사합니다.
        • Skynovil
          완료
        • Minje Jeon
          감사합니다. 덕분에 문제를 해결할 수 있었어요 ㅠ
          대화보기
          • 이재욱
            html 강의 잘 들었어요~ 감사해요^^
          • dlwovlf2
            저도 같은 문제입니다.. 도와주시면 감사 드리겠습니다!
            대화보기
            • 이상화
              18일 못봤던 수업 몰아서 보기 완료!
            • 즐라탄 이브라히모비치
              감사합니다. 늘 행복하세요.
            • Sangbin Choi
              복습!
            • 김현민
              완료
            • 이예지
              완료했습니당~!!
            • 최수진
              완료 아주 간결하고 테마 테마로 잘 분리해주셔서 보기 정말 편해요! 감사합니다!
            • 정규원
              완료
            • YeonHoon Jeong
              수강완료하였습니다. 유튜브 생활코딩 HTML 목록을 듣고 다시 이 강의를 들으니
              재정리하는 기회였습니다. 감사합니다.
            • vitamihee
              재밌게 잘 들었습니다.
            • skyde47
              점점 더 흥미가 생기는거 같네요!
            • 아타고
              띄어쓰기는 해도 되고 안해도 됩니다.
              동영상에도 잠깐 나오는데 인간의 가독성을 위한 것일 뿐입니다.
              실제로 html 에서 공백 한칸 이상을 모두 한칸으로 인식합니다.
              따라서 한개 이상의 띄어쓰기를 표현하려면 &nbsp; 여러개로 표현해야합니다.
              대화보기
              • lets oh
                여태껏 태그를 배울때 그냥 외우라고만 했지..어떤 책이나 수업에서도 이것이 어떤것의 약자라고 자세하게 풀어준것을
                보지 못 했습니다. 정말, 생활코딩 그 어떤 강의보다 훌륭한것 같네요 ㅎㅎ..앞으로도 열심히 강좌 듣겠습니다!
              • 권수빈
                재밌어요~~
              • 박용준
                예제들을 보면 <head>나 <body>를 탭해서 띄어쓰기하고 있는데 영상에서는 실전을 보여줄 때 띄어쓰기하지 않고 다 붙여서 쓰고있네요. 둘다 정상적으로 작동되긴 한데 띄어쓰기하는게 맞나요, 안하는게 맞나요?
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기