웹 애플리케이션 만들기

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. psy1088
    친절한 설명감사합니다!
  2. hth0893
    소스코드를 인코딩으로 utf-8로 설정해도 글자가 깨지는경우가 있습니다.
    메모장툴에서 다른이름 저장을 누르면 인코딩을 바꾸는 부분이 있는데 찾아 UTF-8로 설정하여 저장을하면 해결됩니다.
  3. ㅁㅁ
    유튜브에서 추가된 기능입니다. 여기서 징징대지 마세요
    대화보기
    • 아 일시정지 할때마다 동영상 더보기 떠서 너무 짜증납니다.

      다시 올려주세요 ㅜㅜ;;
    • 김도형
      정말 신기해요 ㅋㅋㅋㅋ 와 이게,, 이런 소소한 재미와 성취감이 있구나.. 저 혼자서 제 노트북에 설치한 서버로 영화 추천 사이트를 만들어봤는데 너무 신기해요 ㅋㅋㅋ html만 배웠는데 이렇게 할수가 있군요. 앞으로 더 분발하겠습니다.
    • eh ini grup apaan dah?
    • 배우는 중
      메모장 저장하실 때 인코딩 형식을 utf-8로 하셔야 사이트에서도 깨짐 현상이 없습니다~
      대화보기
      • 리젤린
        감사합니다!
      • <meta charset="utf-8"> 이거 넣어도 한글이 깨져 나와요 ㅠㅠ 어떡하죠?
      • No entiendo nada XD
      • 위비
        맨 위쪽에 <meta charset="utf-8"> 이거 한번 넣어보세요
        대화보기
        • sublime이랑 atom 다운받아서 쓰고있는데요
          sublime으로 만든 html파일은 웹으로 잘 열리는데
          atom으로 만든 html파일은 utf-8로 설정되어있는데 웹으로 열면 �삱由쇳뵿�? 援?젣�쟻�씤 �뒪�룷痢� 寃쎄린 이렇게 한글이 다 깨져서 나와요 ㅠㅠ ; 왜그런건가여...
        • 정말 잘 들었습니다!
        • 손영민
          여러가지 태그들을 통한 문서작성을 하기 쉬워지면서 일반인들도 html태그들을 배우기만 하면 여러가지 일들을 할 수 있게 되었네요. 이번 영상도 잘 보았습니다.
        • sung박
          여러 사이트를 각각 찾아 들어가기 귀찮아서 연결했더니 편리하네요
        • FODASE VAI TOMA NO CU
        • jy1234
          감사합니다.
        • 동동그리
          너무나도 감사드립니다. 이 오픈튜토리얼스 홈페이지가 누군가에게는 한줄기의 빛같은존재네요
        • 오이시대
          감사합니다
        • mac에서 안되시는 분들 주소 입력할 때 localhost:8080 으로 주소 입력해보세요 **웹서버 설치 강의 참고 https://youtu.be......HK8
        • 많은 강사분들의 강의를 듣다보면 목표, 목적을 잊어버리곤 하는데,

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

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

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

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



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

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

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

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

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



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

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

                저가 지금 생각하는 방법이 나쁜 방법이 아니라면... htdocs폴더 안에 어떻게하면 코딩한 파일을 복사할수 있는지 궁금합니다.
              • 첫 번째 강의 6:40 부터 보시면 나오네요.
                tax 폴더에 저장된 index_2.html 파일을 htdocs 폴더로 옮기면 됩니다.
                대화보기
                • 박지현
                  궁금한게 있는데요 제가 메모장에 어떻게 하다가 파일 저장을 바탕화면에 있는 tax 폴더에 저장을 했는데요
                  그 파일을 투클릭해서 열때는 크롬창이 열리는데 크롬에 들어가서 주소창에 localhost/index_2.html이라고 치면 못 팢더라구요 이럴때는 크롬창에 뭐라고 치면 파일을 찾을수 있는지 알고 싶어요
                • 카늬
                  01.23 감사합니다.
                • 일미리
                  영기님 댓글보고 많은걸 해결했습니다 ㅠㅠㅠ 감사해요
                  대화보기
                  • 배민수
                    영어로 해봐요 그럴땐
                    대화보기
                    • 배민수
                      <!DOCTYPE html>
                      <html>
                      <head>
                      <metacharset="utf-8" />
                      </head>
                      <body>
                      구글코딩<strong>너무꿀젬</strong>에요!
                      </body>
                      </html>
                    • 상자
                      18.1.12 직접 따라하면서 배우니까 너무 재밌어요~~~~
                    • chunjoo
                      감사합니다^^
                    • 한재원
                      제가 codeanywhere로 실습을 하는데요 리스트 학습할때 저는
                      html
                      css
                      javascript 부분 옆에 동그라미 가 안생기고 그냥 글자들만 출력되는데 제가 무언가 잘못 한건가요?ㅠ
                    • 으미
                      저장한 html 파일을 클릭해서 열면 제대로 나오는데 브라우져에 ex_html_1.html을 치면 �덈뀞�섏꽭��. �앺솢肄붾뵫�낅땲��. 이렇게 나와요ㅠㅠ 뭐가 문제일까요..
                    • 슝태
                      20180105
                    • "시각장애인들은 어떻게 웹의 정보에 접근가" 클릭해도 현재페이지 그대로 새창이 열리는데 확인 부탁드려도 될까요?
                    • 한승주
                      ios에서 텍스트편집기에서 html로 저장하고
                      웹에 html로 잘 저장했는데 저장후 텍스트편집기로 해당 확장자가 html인 파일을열면 코드가 안보이고
                      텍스트만 뜨네요 ㅠㅠ
                      어떻게 하면 편집하는 모습으로 띄울수 있나요?
                    • 동구
                      저장된 파일을 클릭해서 여니 되네요 ?

                      오잉또잉..
                      대화보기
                      • 동구
                        저도 밑에 댓글에 조언들, 스마트 인용 다 끄고, manage servers도 실행했는데 왜 소스코드가 그대로보일
                        까요 ?..
                      • SeunghwnaKim
                        질문있습니다. 공부할때 지금까지는 그냥 동영상 보기만 하고 있는데 노트에 따로 정리하면서 보는게 좋을까요? 아니면 가벼운 마음으로 보기면 하는게 좋을까요?
                      • 171230 감사합니다!
                      • ㄹㄹㄹ
                        너무 재밌어요 감사합니다 돈많이 벌어서 후원할게요
                      • 람보르기니피그
                        이런 유익한걸 무료로 해주셔서 감사합니다. 무료인만큼 열심히 끝까지 배우겠습니다.
                      • 이나탄
                        맥북에서 textedit 사용하시는 분들
                        preference에서 1) 포맷 plain text로 선택, 2) smart quotes 해제, 3) HTML 파일은 HTML 로 보이게 기본 설정하시고 시작하시면 편리합니다.
                      • jack
                        파일이름 적고 뒤에 .html 붙이셔야돼요. 저도 한참 왜그러나 찾았네요...ㅋㅋㅋㅋ
                        대화보기
                        • daniel
                          171212
                        • 171212
                        • 짜몽
                          20171210 감사합니다
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기