웹 애플리케이션 만들기

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. 배우는 중
    메모장 저장하실 때 인코딩 형식을 utf-8로 하셔야 사이트에서도 깨짐 현상이 없습니다~
    대화보기
    • 리젤린
      감사합니다!
    • <meta charset="utf-8"> 이거 넣어도 한글이 깨져 나와요 ㅠㅠ 어떡하죠?
    • Juan
      No entiendo nada XD
    • 위비
      맨 위쪽에 <meta charset="utf-8"> 이거 한번 넣어보세요
      대화보기
      • ttori
        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 로 보이게 기본 설정하시고 시작하시면 편리합니다.
                    • 파일이름 적고 뒤에 .html 붙이셔야돼요. 저도 한참 왜그러나 찾았네요...ㅋㅋㅋㅋ
                      대화보기
                      • daniel
                        171212
                      • 171212
                      • 짜몽
                        20171210 감사합니다
                      • mood hacking
                        utf-8 로도 바꾸고 다 바꿔봤는데 소스코드가 나오는데 어떡하죠 ㅠㅠ
                      • Yong Choi
                        #171208 수강완료!
                      • 빛보다 밝은 빛
                        해결했습니다.
                        Safari > 보기 > 텍스트 인코딩 > 기본값 으로 되어있던 것을

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

                        다행입니다ㅜㅎㅎ
                      • 빛보다 밝은 빛
                        �덈뀞�섏꽭��. 援먰쉶怨듬� �낅땲��. 요렇게 나옵니닷
                      • 빛보다 밝은 빛
                        1번 강의 들으면서 실습하였는데요, 글꼴을 인식하지 못하는 것 같아
                        웹에서 불러오면서 글꼴이 깨지는 것 같아요. 요걸 해결하는 방법은 없을까요 ?
                      • Kim Liam KunTae
                        감사합니다.
                        잘 들었습니다.
                        고맙습니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기