웹 애플리케이션 만들기

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. ttori
    sublime이랑 atom 다운받아서 쓰고있는데요
    sublime으로 만든 html파일은 웹으로 잘 열리는데
    atom으로 만든 html파일은 utf-8로 설정되어있는데 웹으로 열면 �삱由쇳뵿�? 援?젣�쟻�씤 �뒪�룷痢� 寃쎄린 이렇게 한글이 다 깨져서 나와요 ㅠㅠ ; 왜그런건가여...
  2. JaVaz
    정말 잘 들었습니다!
  3. 손영민
    여러가지 태그들을 통한 문서작성을 하기 쉬워지면서 일반인들도 html태그들을 배우기만 하면 여러가지 일들을 할 수 있게 되었네요. 이번 영상도 잘 보았습니다.
  4. sung박
    여러 사이트를 각각 찾아 들어가기 귀찮아서 연결했더니 편리하네요
  5. FODASE VAI TOMA NO CU
  6. jy1234
    감사합니다.
  7. 동동그리
    너무나도 감사드립니다. 이 오픈튜토리얼스 홈페이지가 누군가에게는 한줄기의 빛같은존재네요
  8. 오이시대
    감사합니다
  9. mac에서 안되시는 분들 주소 입력할 때 localhost:8080 으로 주소 입력해보세요 **웹서버 설치 강의 참고 https://youtu.be......HK8
  10. 많은 강사분들의 강의를 듣다보면 목표, 목적을 잊어버리곤 하는데,

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

    정말 좋은 강의라고 생각합니다.
  11. 강의 잘보고 있습니다~~!!
    첫번째 올려주신 html 의 기본문법 강의를 보면서 똑같이 따라해도 파일 이 깨져서 나오네요 맥유저입니다
    혹시 텍스트에 빨간색 밑줄이 있는데 이것 때문인가요?
  12. 인코딩 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 로 보이게 기본 설정하시고 시작하시면 편리합니다.
                • 파일이름 적고 뒤에 .html 붙이셔야돼요. 저도 한참 왜그러나 찾았네요...ㅋㅋㅋㅋ
                  대화보기
                  • daniel
                    171212
                  • 171212
                  • 짜몽
                    20171210 감사합니다
                  • mood hacking
                    utf-8 로도 바꾸고 다 바꿔봤는데 소스코드가 나오는데 어떡하죠 ㅠㅠ
                  • Yong Choi
                    #171208 수강완료!
                  • 빛보다 밝은 빛
                    해결했습니다.
                    Safari > 보기 > 텍스트 인코딩 > 기본값 으로 되어있던 것을

                    유니코드(UTF-8)로 바꾸니 클리어하게 보이네요 !

                    다행입니다ㅜㅎㅎ
                  • 빛보다 밝은 빛
                    �덈뀞�섏꽭��. 援먰쉶怨듬� �낅땲��. 요렇게 나옵니닷
                  • 빛보다 밝은 빛
                    1번 강의 들으면서 실습하였는데요, 글꼴을 인식하지 못하는 것 같아
                    웹에서 불러오면서 글꼴이 깨지는 것 같아요. 요걸 해결하는 방법은 없을까요 ?
                  • Kim Liam KunTae
                    감사합니다.
                    잘 들었습니다.
                    고맙습니다.
                  • 수업잘들었습니다
                  • 이근환
                    2017-11-28 수강2일차

                    수강완료하였습니다!!:)
                  • Jinsoo Choi
                    감사합니다 :)
                  • 박인호
                    11-21
                    수강완료.
                    본질은 정보다.
                  • PassionOfStudy
                    17-11-21 2일차 - 5번째 강의

                    수강완료!


                    HTML - HyperText Markup Language
                    ----------- -------- ------------
                    링크 태그 약속

                    HTML의 본질은 정보!

                    * 태그사전참고
                    https://dev.w3.org......or/
                    https://opentutorials.org......058
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기