생활코딩

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. 일미리
    영기님 댓글보고 많은걸 해결했습니다 ㅠㅠㅠ 감사해요
    대화보기
    • 배민수
      영어로 해봐요 그럴땐
      대화보기
      • 배민수
        <!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
      • ellen
        "시각장애인들은 어떻게 웹의 정보에 접근가" 클릭해도 현재페이지 그대로 새창이 열리는데 확인 부탁드려도 될까요?
      • 한승주
        ios에서 텍스트편집기에서 html로 저장하고
        웹에 html로 잘 저장했는데 저장후 텍스트편집기로 해당 확장자가 html인 파일을열면 코드가 안보이고
        텍스트만 뜨네요 ㅠㅠ
        어떻게 하면 편집하는 모습으로 띄울수 있나요?
      • 동구
        저장된 파일을 클릭해서 여니 되네요 ?

        오잉또잉..
        대화보기
        • 동구
          저도 밑에 댓글에 조언들, 스마트 인용 다 끄고, manage servers도 실행했는데 왜 소스코드가 그대로보일
          까요 ?..
        • SeunghwnaKim
          질문있습니다. 공부할때 지금까지는 그냥 동영상 보기만 하고 있는데 노트에 따로 정리하면서 보는게 좋을까요? 아니면 가벼운 마음으로 보기면 하는게 좋을까요?
        • JN87
          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 사용하고 있습니다.
            • 카터필러
              저 window 10사용하고 있습니다. bitnami설치 강의 다시 한 번 볼게요~^^
              대화보기
              • 어렵다웹
                혹시 사용하시는 운영체제가 윈도우 10이신가요?
                설치하신 bitnami에서 서버가 구동되고 있는지 확인 가능하십니다 (이고잉님이 올려주신 bitnami 설치 강의를 다시한번 보시면 될거같습니다)
                근데 보통 서버문제라면 404 에러가 아니라 localhost 에러가 뜨기 마련인데 서버는 작동되지만 해당 웹페이지를 가져오질 못하는 문제같네요.
                만일 맥북을 쓰고계신다면 localhost:8080처럼 포트번호까지 다 써주셔야 될겁니다.
                대화보기
                • Hye-won Lee
                  어제 봤어요. 댓글을 깜빡~
                • 카터필러
                  혹시 죄송한데 서버가 작동되고 있는지는 어떻게 알 수 있나요??
                  아래와 같이 뜨네요~ 제가 스펠링은다 맞게 확인을 했고 htdocs 폴더안에도
                  파일이 들어있는 것을 확인했습니다.~ㅠㅠ

                  웹 페이지를 찾을 수 없습니다.
                  HTTP 404
                  예측 가능한 원인:
                  •주소에 오타가 있을 수 있습니다.
                  •클릭한 링크가 만료된 것일 수도 있습니다.
                  가능한 해결 방법:
                  주소를 다시 입력하십시오.
                  이전 페이지로 돌아갑니다.
                  기본 사이트로 원하는 정보를 찾습니다.
                  대화보기
                  • 카터필러
                    네 한 번 해보고 다시 답글 올릴께요. 감사해요^^
                    대화보기
                    • 어렵다웹
                      혹시 서버가 작동되고 있는지 확인 해보셨나요?
                      not found라면 서버는 작동되고 있는데 해당 문서를 못찾는것 같습니다.
                      문서가 루트 디렉토리에 들어가 있는지도 확인해보세요.
                      대화보기
                      • 카터필러
                        한 가지 질문이 있어요.
                        생성된 파일을 더블클릭하면 웹페이지로 잘 열리고 생활코딩 링크도 잘 되는데
                        웹상에 localhost/(문서명)
                        으로 명령을 내리면 Not FOUND라고 자꾸 뜹니다.
                        서버설정이 잘 못 되어 있는건지 서버를 인지하지 못하는 것인지 궁금하네요.
                        항상 감사하는 마음으로 들으며 모두들 화이팅!!
                      • Hye-won Lee
                        완료했습니다~
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기