웹 애플리케이션 만들기

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. ckstmznf@naver.com
    html 기본 문법편에 예제를 따라할때 오류가 나서 왜이러지 하던중에 4번줄에 <meta charset="utf-8" />을 지우고 다시 실행해보니 제대로 실행이 됩니다. 그 이유가 먼가요?
  2. 열심히사는사람
    2020 3 29 완료
  3. 열심히사는사람
    2020 3 28 1단계 완료
  4. guddk1999
    2020.3.25 하루한시간 꾸준히
  5. 중딩
    설명 너무 잘하세요
    피드백도 없이 나쁜 말만 하는 애들
    무시하시고 숨만쉬고 돈 버시고 똥을싸고 명성을 얻으시길 기원합니다
    강의 잘봤어여
  6. 히히하헤호
    파일이름 끝에 .html을 입력하시면 됩니다~
    대화보기
    • 코딩 입문
      모든 파일로 저장했는데
      파일 형식이 계속 텍스트 문서로 저장되는데
      어떻하면 될까요?
    • 현우쌤아
      몰아붙이지 않고 약간은 쉽고 재미있게 설명해주셔서 감사합니다.
      아무래도 막막하기만 했던 것들이 조금씩 풀려나가면서 재미를 붙일 수 있을 것 같습니다.
      감사합니다! 20200202
    • 스티븐잡숴
      완료
    • 저도 이래요ㅠㅠㅠ
      대화보기
      • 아르하트
        감사합니다^^.
      • 코딩왕김꿈나무
        완료
      • 김명래
        완료~~ 감사합니다.
      • 완료!
      • 디르베르
        완료!
      • 2019.11.28 완료
      • 좋은 강의 감사합니다 :D
      • BM-0916
        니가해
        대화보기
        • 웹초보
          20101021 완료

          감사합니다.
        • 수강완료
        • klocker11@naver.com
          감사하게 공부합니다.
        • 하상민
          안녕하세요!
          존내 별로네요!
        • 들국화
          완료
        • bangbyb
          완료!
        • 맥사용자입니다. 텍스트에디터에 내용을 입력한뒤
          localhost:8080/ex_html_1.html을 들어가보니
          안녕하세요 생활코딩입니다가 나오는 것이 아닌
          텍스트에디터에 작성한 문자들이 그대로 나오는데 어떻게 해결해야 하는건가요?? ㅠㅠ
        • 메모장에 코드를 저장할 때
          마지막에 .html을 썼던 건 왜 저장 후에 메모장 이름에서 사라지는 건가요?
        • 김혜지
          7/1 완료
        • ㅇㄹ
        • midding
          완료
        • 칠칠석
          2019년 4월 7일

          완료!
        • 셜리
          완료!
        • 리마인더
          완료!
        • 최병협
          말습하시는 내용이 넘 좋아요.
          감사합니다.
        • 아에이오우
          감사합니다
        • 쫄롱이
          강의 감사합니다.
        • Sijack1234
          코드를 바르게 했는데도
          생활코딩 코드 앞에 localhost 가 지워지지 않아요.
          그래서 계속 에러라고 뜹니다.
          어떻게 해야 하나요?
        • psy1088
          친절한 설명감사합니다!
        • hth0893
          소스코드를 인코딩으로 utf-8로 설정해도 글자가 깨지는경우가 있습니다.
          메모장툴에서 다른이름 저장을 누르면 인코딩을 바꾸는 부분이 있는데 찾아 UTF-8로 설정하여 저장을하면 해결됩니다.
        • ㅁㅁ
          유튜브에서 추가된 기능입니다. 여기서 징징대지 마세요
          대화보기
          • 아 일시정지 할때마다 동영상 더보기 떠서 너무 짜증납니다.

            다시 올려주세요 ㅜㅜ;;
          • 김도형
            정말 신기해요 ㅋㅋㅋㅋ 와 이게,, 이런 소소한 재미와 성취감이 있구나.. 저 혼자서 제 노트북에 설치한 서버로 영화 추천 사이트를 만들어봤는데 너무 신기해요 ㅋㅋㅋ html만 배웠는데 이렇게 할수가 있군요. 앞으로 더 분발하겠습니다.
          • admin
            eh ini grup apaan dah?
          • 배우는 중
            메모장 저장하실 때 인코딩 형식을 utf-8로 하셔야 사이트에서도 깨짐 현상이 없습니다~
            대화보기
            • 리젤린
              감사합니다!
            • <meta charset="utf-8"> 이거 넣어도 한글이 깨져 나와요 ㅠㅠ 어떡하죠?
            • Juan
              No entiendo nada XD
            • 위비
              맨 위쪽에 <meta charset="utf-8"> 이거 한번 넣어보세요
              대화보기
              • ttori
                sublime이랑 atom 다운받아서 쓰고있는데요
                sublime으로 만든 html파일은 웹으로 잘 열리는데
                atom으로 만든 html파일은 utf-8로 설정되어있는데 웹으로 열면 �삱由쇳뵿�? 援?젣�쟻�씤 �뒪�룷痢� 寃쎄린 이렇게 한글이 다 깨져서 나와요 ㅠㅠ ; 왜그런건가여...
              • JaVaz
                정말 잘 들었습니다!
              • 손영민
                여러가지 태그들을 통한 문서작성을 하기 쉬워지면서 일반인들도 html태그들을 배우기만 하면 여러가지 일들을 할 수 있게 되었네요. 이번 영상도 잘 보았습니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기