생활코딩

Coding Everybody

코스 전체목록

닫기

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. 현우쌤아
    몰아붙이지 않고 약간은 쉽고 재미있게 설명해주셔서 감사합니다.
    아무래도 막막하기만 했던 것들이 조금씩 풀려나가면서 재미를 붙일 수 있을 것 같습니다.
    감사합니다! 20200202
  2. 스티븐잡숴
    완료
  3. 저도 이래요ㅠㅠㅠ
    대화보기
    • 아르하트
      감사합니다^^.
    • 코딩왕김꿈나무
      완료
    • 김명래
      완료~~ 감사합니다.
    • 완료!
    • 디르베르
      완료!
    • 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태그들을 배우기만 하면 여러가지 일들을 할 수 있게 되었네요. 이번 영상도 잘 보았습니다.
            • sung박
              여러 사이트를 각각 찾아 들어가기 귀찮아서 연결했더니 편리하네요
            • AaSAS
              FODASE VAI TOMA NO CU
            • jy1234
              감사합니다.
            • 동동그리
              너무나도 감사드립니다. 이 오픈튜토리얼스 홈페이지가 누군가에게는 한줄기의 빛같은존재네요
            • 오이시대
              감사합니다
            • eenj
              mac에서 안되시는 분들 주소 입력할 때 localhost:8080 으로 주소 입력해보세요 **웹서버 설치 강의 참고 https://youtu.be......HK8
            • 많은 강사분들의 강의를 듣다보면 목표, 목적을 잊어버리곤 하는데,

              항상 목적과 목표를 명확히 또 자주 이야기 해주셔서

              정말 좋은 강의라고 생각합니다.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기