생활코딩

Coding Everybody

코스 전체목록

닫기

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"> 이거 한번 넣어보세요
      대화보기
      • 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 자세히 보기