생활코딩

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. 소소대담
    수강완료
  2. 루씨구씨
    정말 쉽게이해했습니다 감사합니다.
  3. 황구
    수강완료
  4. 구본혁
    수강완료했습니다.
  5. ㅁㄴㅇㄴㅁ
    엣지랑 익스플로러는 그러는데 크롬쓰시면 됩니다
    대화보기
    • 인하망키
      저는 <ul>을 안달아도 •이게 나오네요!
      대화보기
      • realryankim
        태그의 중첩 영상에서 코드를
        <li>html</li>
        <li>css</li>
        <li>JavaScript</li>
        라고 입력하면,
        • html
        • css
        • JavaScript
        라고 표시되는 게 아니라, 그냥
        html
        css
        JavaScript라고 표시되지않나요?

        <ul>
        <li>html</li>
        <li>css</li>
        <li>JavaScript</li>
        </ul>
        라고 입력해야, 영상에서 첫 번째 실습에서 보이는 것처럼
        • html
        • css
        • JavaScript
        라고 웹페이지에 표시됩니다.
      • 생활코딩짱
        궁금한게 있습니다.
        첫 영상에서 링크가 가장 중요하다고 하셨는데요.
        html (hypertext markup language)
        하이퍼텍스트는 넘어가셨고 마크업 랭귀지를 이해하기 위해 태그를 알아야한다고 하신 후
        따로 정리를 안해주셔서 질문 남깁니다.

        문서와 문서를 링크로 연결한다는 것에서 링크란 무엇입니까?
        (a태그를 특정하는 것은 아닌 것 같아서요...)
      • 둠해머
        수강완료!
      • 마이구미
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        </head>
        <body>
        안녕하세요. <strong>생활코딩</strong>입니다.
        </body>
        </html>

        맥에서 이렇게 메모장 대신에 텍스트편집기를 사용해서 언어를 구사하잖아요. 근데 html 파일의 연결 프로그램을 텍스트 편집지고 바꿔서 언어를 수정해보려고 했는데 텍스트편집기에는 그냥 안녕하세요. 생활코딩 입니다. 이렇게 뜨네요.

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        </head>
        <body>
        안녕하세요. <strong>생활코딩</strong>입니다.
        </body>
        </html>
        이렇게 뜨게는 못하나요?
      • Jeoung Myung Hyun
        PC에서 하니 제대로 나오네요 ^^;;
        대화보기
        • Jeoung Myung Hyun
          맥에서 메모장으로 작업해서 하고 있는데요..
          html로 저장해서 크롬에서 띄우는데, html 소스가 보입니다;;
        • usun1203
          답 감사합니다 마블리님, 위에 있는거 복사해서 썼었는데 말씀하신대로 하니까 열리네요!
          대화보기
          • 마블리
            정확한 답은 아니지만, 저도 크롬으로 열려서요. 변경했어요.
            htdocs 폴더안에 ex_html_1 파일의 오른쪽 마우스클릭하시면
            연결프로그램->메모장으로 변경 하시면 되는것 같아요.
            저도 이것 저것 눌러보다가 메모장으로 변경하니까 되더라구요^^;
            대화보기
            • usun1203@gmail.com
              저번에 html기본문법까지 듣고 오늘 다시 속성 듣고 있는데, 메모장 ex_html_1파일이 찾아도 없고, htdocs폴더 내에 있는 건 웹브라우저로만(?크롬으로) 열립니다. 원래 이런 건가요?
            • 박동희
            • Gihoon Pomme Ryu
              2017-09-30 완료
            • 송성태
              html은 정보.
              잘 배웠습니다.
              감사합니다!
            • 파이쏭
              9월28일

              html 기본

              완료~

              좋은자료 너무너무 감사합니다! ^^
            • 짱잼
              너무 재미있게 배우고 있습니다!!
              ♥ ♥ ♥ ♥감사합니다 ♥ ♥ ♥ ♥
            • 느낀 그대로
              목소리 좀 느끼하신듯
              간단하게 설명해도 되는걸 어려운 단어 골라가면서 말하는 것도 그렇고
            • 알파고
              9/24

              몇년전 블로그를 만지면서 레이아웃과 기능을 바꾸고 싶어서, 무작정 인터넷에 검색하여

              복사 붙여넣기를 통해서 블로그를 꾸몄었는데, 수업을 듣고 나니.

              몇년이 지난 지금에서야 그것이 무슨 의미였으며 왜 그렇게 작동되었는지 이해가 되었습니다.
              정말 감사합니다.

              HTML자체가 프로그래밍?? 언어중에서도 아주 쉬운 언어라고 하지만 그 작은 발걸음을 시작한 것 같아서 기쁩니다.
            • 강수경
              9/25
            • 순낚
              9/24 완료
            • 다시시작
              완료
            • 미역
              감사합니다
              대화보기
              • 돌고래
                9/24 완료
              • ssem
                9/21, 수강 완료했습니다. 너무 재밌어요!!! 감사합니다!!!
              • Nyoung
                9월21 수강완료 감사합니다.
              • 9/19완료
              • Gyoil Gu
                href 속성명 뒤에 " 따옴표로 시작하시고, "로 닫아주는 것 까지 하셨나요??
                대화보기
                • 9/18 수강완료!
                • 아티초보
                  완ㅇ료!
                • 지현이짱
                  <a>링크를 걸었는데 ... <a>링크가 시작되는 부분부터 글이 아예 웹사이트에 안나오네요.. 이거 문제가 뭐죵? 아파치 다시 껐다 켜봐도 안도요 ㅠㅠ
                • 9/18 수강 완료
                • 감사합니다!
                • complepiens
                  완료! 감사합니다.
                • 주주맘마
                  완료
                • 왓떠뻐꺼
                  완료했습니다. 감사합니다
                • 왓떠뻐꺼
                  완료했습니다. 감사합니다.
                • daniel
                  완료!
                • Gimme_Gsuit
                  완료.
                • 아이노바
                  가슴으로 말합니다. 너무 감사합니다.
                • forest
                  완료
                • 마노스
                  (메모) 현재진행: 3볼차례
                • Yeong Su Song
                  완료!
                • 홍홍
                  완료
                • 유상원
                  2017-09-03 완료!
                • Kenneth So
                  완료
                • 효효
                  완료!
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기