웹 애플리케이션 만들기

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. susu
    강의 잘보고 있습니다~~!!
    첫번째 올려주신 html 의 기본문법 강의를 보면서 똑같이 따라해도 파일 이 깨져서 나오네요 맥유저입니다
    혹시 텍스트에 빨간색 밑줄이 있는데 이것 때문인가요?
  2. 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 감사합니다.
          • 일미리
            영기님 댓글보고 많은걸 해결했습니다 ㅠㅠㅠ 감사해요
            대화보기
            • 배민수
              영어로 해봐요 그럴땐
              대화보기
              • 배민수
                <!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
                  • 보물바구니
                    오늘 처음배우는 새내기입니다만..ㅋ
                    한글이 깨져서 보이신다는분들은 메모장 저장하실때 인코딩방식을 utf-8로 설정하고 저장하셨는지 확인해보세요
                    저도 인코딩방식을 ANSI로 설정하고 저장하니까 한글이 깨지더군요.
                  • atnskynst
                    11/14
                  • 루안
                    ^b 수강완료 ! 2017 11-11
                  • 11/11 수강 완료
                  • 학생
                    ex_html1.html 파일을 닫았다가 다시 열었는데



                    썼던 코딩이 뜨지 않고


                    "안녕하세요. 생활코딩입니다."


                    이게 뜨네요..


                    파일 형식도 plain text 가 아니라 rich text 형식으로 바뀌어서 뜨고요..ㅠㅠ



                    도움 부탁드립니다.
                  • 학생
                    해결 됐습니다..


                    smart quote 가 자동설정되서 그랬던거네요


                    undo 하니까 한글이 깨지지 않고 나오는데


                    생활코딩이 굵은 글씨로 나오지 않네요..ㅠ
                    대화보기
                    • 학생
                      메모장에 말씀하신대로 입력하고


                      http://localhost......tml


                      들어갔는데


                      안녕하세요. 생활코딩입니다

                      대신

                      안녕하세요. 생활코딩입니다.


                      이렇게 문자가 깨져서 나오네요 ㅠㅠ


                      맥 쓰고 있고 mampstack-7.1.11-0 버전입니다


                      감사합니다!
                    • 11/9
                    • 2017년 11월 9일 수강완료
                    • <meta charset="utf-8" />을 적었는데도 한글이 깨져 나오는 이유는 뭘까요?ㅠㅠ
                      영어는 제대로 나옵니다.
                      윈도우 10 사용하고 있습니다.
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기