선생님을 위한 프로그래밍 수업

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. 가넷스타
    2024/2/26 완료 ^^
  2. 두번째도전
    22.09.14
  3. 두번째도전
    글자가 깨지는데 댓글에 상세하게 나와있지 않아 찾아보다가 알게되었습니다.
    한글이 깨저서 �덈뀞�섏꽭��. �앺솢肄붾뵫�낅땲��.이렇게 나오는분들은
    https://support.google.com......=ko 이곳 구글 고객센터 글을 확인해보시기 바랍니다.
    저는 윈도우 pc 크롬이라 크롬 웹 스토어에 들어간 후 Charset라는 것을 추가한 후 오른쪽 상단에 확장 프로그램에서 Charset 클릭 후 utf-8을 선택해서 문제를 해결했습니다.!!
  4. 이학준
    220910
  5. solfany
    2022.08.21
  6. 니오
    20220721 나의 공부 고맙습니다.
  7. 터병
    20220329 감사합니다.
  8. 물통붕붕이
    이번강의도 굿입니다!!
  9. 엔더버35g
    HTML은 '정보'다
  10. H4PPY
    211205
  11. 다야
    2021/09/28
    이해 잘되는 좋은 강의 만들어주셔서 감사합니다.
  12. 영티븐잡스
    리스트할때 한글이깨지네요 ㅠㅠ 어떻게 하죠?
  13. 영티븐잡스
    속성까지 공부중 ex_html_1파일이 html파일로 메모장파일이 아니라 웹브라우저로 바로연결이 되는데요
    ex_html_2를 따라가는데 무리는 없었지만 아이콘속성은 어떻게 바꾸는지 궁금합니다
  14. 가치의한계
    2021/06/26
  15. heyri
    21/06/07
  16. 안제경
    utf를 붙여쓰니까 한글로 제대로 출력이 됩니다!
    대화보기
    • 안제경
      영어는 제대로 출력이 되는데 한글은 이상하게 출력이 됩니다. 어떻게 나아요?
    • 목담과
      별 문제는 아니지만 ol이나 ul태그 없이 li태그만 사용하니까 저는 앞에 점이 안보이네요. 영상 잘보고있습니다. 감사합니다.
    • 안제경
      5일차! 꾸준히 해볼게요!
    • 초딩 개발자
      2021/05/13
    • Qlrhdro
      아, 이제 됐습니다. 중간에 제가 !와 "를 빼먹었더라고요.
      대화보기
      • Qlrhdro
        윈도우 사용자입니다. 똑같이 메모장 들어가서 했는데
        �덈뀞�섏꽭��. �앺솢肄붾뵫�낅땲��.
        이렇게 나오네요. 이거 어떻게 하나요? 왜 이런거에요??
      • 성열
        한국어가 들어가면 번역을 못하는지
        �ш낵
        �멸린
        諛�
        이런식으로 나오는데 어찌 해야 하나여ㅜㅜ
      • coding_prince
        감사합니다.
      • Hello 경
        완료입니다.
      • 웹전문가
        2021.02.12
      • 임동희
        2021/01/25
      • andy
        아마 확장자가 txt일거에요. 확장자를 html로 변경하면 됩니다
        대화보기
        • 제사마
          Done
        • 김서눅
          2021 .01 .17
        • 박재현
          20.12.23
        • 늦은나이가아님
          2020.12.11 감사합니다
        • Twitch_ts
          저 윈도우 사용자인데 메모장에 입력후 들어가보니 텍스트로 <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8" />
          </head>
          <body>

          </body>
          </html>
          이렇게 나오는데 뭐가 문제인가요?
        • 박병진
          2020,11,10 꿈을 위해. 온라인 셀러 개발자.
        • ohsori
          11/02 출석함
        • 09 29 시작
        • 배고프다
          /strong입니다
          대화보기
          • 허우룩
            2020.09.08
          • 강민규
            2020 08 04 강민규
          • 엘리심
            안녕하세요.

            윈도우는 '모든파일' 이라는 문서형식을지정하시던데,
            혹시 Mac 으로 사용할경우, (html의)문서 저장형식은 따로 선택안해도 되나요?
          • 권오상
            이제 본격적인 공부가시작되었네요.
            잘 배우고 갑니다.
            잘 설명해 주셔서 감사합니다.
          • Eunjae Lee
            오타 나신 것 같네요~
            </storng> 을 </strong>으로 바꿔보세요
            대화보기
            • 김영효
              왜 그런지는 모르겠는데 <strong></storng> 명령어가 먹히지 않는거 같습니다. 굵은 글씨로 나오지 않고 그냥 평범한 글씨로 나오내요.
            • 장성우
              잘 배우고 갑니다!
            • 산노을
              good job!
            • 장동규
              문법이 깨지지않게하기 때문입니다
              대화보기
              • 몽몽
                실습2번에서 _blank와 _self도 href처럼 a태그의 속성이 되는 건가요?
                <a href="링크주소" taget="_blank">로 예를 들면 a태그는 속성을 총 3개 가진건가요 아니면 2개인가요?
              • 몽몽
                해결했습니다. .html도 같이 적어야했네요.
                대화보기
                • 몽몽
                  localhost하고 뒤에 '/파일명'을 입력했는데 404오류가 떠요.
                  htdocs로 들어가서 파일을 열면 '안녕하세요. 생활코딩입니다.'이라는 웹페이지는 잘 뜨는데
                  직접 주소를 입력하면 안 뜹니다. 강의내용처럼 서버도 깔았는데 문제가 있는 것 같아요. 어떻게 해야하나요..?
                • ckstmznf@naver.com
                  html 기본 문법편에 예제를 따라할때 오류가 나서 왜이러지 하던중에 4번줄에 <meta charset="utf-8" />을 지우고 다시 실행해보니 제대로 실행이 됩니다. 그 이유가 먼가요?