웹 애플리케이션 만들기

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. 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
          • 많은 강사분들의 강의를 듣다보면 목표, 목적을 잊어버리곤 하는데,

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

            정말 좋은 강의라고 생각합니다.
          • susu
            강의 잘보고 있습니다~~!!
            첫번째 올려주신 html 의 기본문법 강의를 보면서 똑같이 따라해도 파일 이 깨져서 나오네요 맥유저입니다
            혹시 텍스트에 빨간색 밑줄이 있는데 이것 때문인가요?
          • Sosd
            인코딩 ANSI->UTF 8
            대화보기
            • Shmi
              Bitnami 실행 하셨나요~~?
              대화보기
              • Shim
                Bitnami 실행 하셨나요~~?
                대화보기
                • 룰루팡
                  저는 pc 윈도우에서 코딩을 한후, 파일을 저장후에

                  vm웨어상의 우분투에, 아파치를 설치후 그 폴더에 복사하고

                  다시 pc 브라우저에서 결과를 보는 방식으로 연습하려고 하는데요



                  근데 윈도우상에서 코딩을 한후, vm웨어의 리눅스에 바탕화면에는 드래그앤 드랍으로 복사가 가능한데

                  서버가 설치되어 있는 폴더 (computer/opt/lampstack-7.1.13-1/apache2/htdocs) 안에는 복사가 안됩니다.

                  무슨 권한 문제? 인거 같은데 어떻게 권한을 주는지도 모르겠네요.

                  우분투 바탕화면->htdocs폴더로 복사도 안되고

                  윈도우에서 드래그앤드랍 ->htdocs로도 복사가 안됩니다.



                  우분투 안에서 코딩을 하긴 좀 불편해서 윈도우에서 한후 우분투로 복사하려는건데 제 방법이 잘못된건가요?

                  보통 어떤식으로 작업을 하는지 궁금합니다...

                  저가 지금 생각하는 방법이 나쁜 방법이 아니라면... htdocs폴더 안에 어떻게하면 코딩한 파일을 복사할수 있는지 궁금합니다.
                • gabi
                  첫 번째 강의 6:40 부터 보시면 나오네요.
                  tax 폴더에 저장된 index_2.html 파일을 htdocs 폴더로 옮기면 됩니다.
                  대화보기
                  • 박지현
                    궁금한게 있는데요 제가 메모장에 어떻게 하다가 파일 저장을 바탕화면에 있는 tax 폴더에 저장을 했는데요
                    그 파일을 투클릭해서 열때는 크롬창이 열리는데 크롬에 들어가서 주소창에 localhost/index_2.html이라고 치면 못 팢더라구요 이럴때는 크롬창에 뭐라고 치면 파일을 찾을수 있는지 알고 싶어요
                  • 카늬
                    01.23 감사합니다.
                  • 일미리
                    영기님 댓글보고 많은걸 해결했습니다 ㅠㅠㅠ 감사해요
                    대화보기
                    • 배민수
                      영어로 해봐요 그럴땐
                      대화보기
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기