생활코딩

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. daniel
    171212
  2. koo
    171212
  3. 짜몽
    20171210 감사합니다
  4. mood hacking
    utf-8 로도 바꾸고 다 바꿔봤는데 소스코드가 나오는데 어떡하죠 ㅠㅠ
  5. Yong Choi
    #171208 수강완료!
  6. 빛보다 밝은 빛
    해결했습니다.
    Safari > 보기 > 텍스트 인코딩 > 기본값 으로 되어있던 것을

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

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

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

    수강완료!


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

    HTML의 본질은 정보!

    * 태그사전참고
    https://dev.w3.org......or/
    https://opentutorials.org......058
  15. 보물바구니
    오늘 처음배우는 새내기입니다만..ㅋ
    한글이 깨져서 보이신다는분들은 메모장 저장하실때 인코딩방식을 utf-8로 설정하고 저장하셨는지 확인해보세요
    저도 인코딩방식을 ANSI로 설정하고 저장하니까 한글이 깨지더군요.
  16. atnskynst
    11/14
  17. 루안
    ^b 수강완료 ! 2017 11-11
  18. 11/11 수강 완료
  19. 학생
    ex_html1.html 파일을 닫았다가 다시 열었는데



    썼던 코딩이 뜨지 않고


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


    이게 뜨네요..


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



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


    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
                완료했습니다~
              • 옐리젤리
                w3c 태그 레퍼런스 가려고 다는 댓글
                http://dev.w3.org......hor
                리채님 감사
                https://opentutorials.org......058
              • 김종은
                17/11/01 완료~
              • 2017/10/30 완료!
              • 와치회양
                htdocs 파일에 저장한 파일을 다시 메모장 형식으로 열 수 있나요? 실수로 메모장을 닫아버려서...
              • 세리나
                10/28완료
              • 난세영웅
                감사합니다..... 잘 들었습니다.....
              • 후반양반무
                코딩야학을 열심히 수강하시는 분들께 드리는 제언!
                우리 주변에는 일반적인 컴퓨터 사용과는 조금 다른 방식으로 웹과 모바일을 탐색하는 사용자들이 있습니다. 그 다양한 사용자 중에서 시각장애인들은 어떻게 웹을 탐색하고 정보를 파악할까요?
                - 시각장애인은 크게 두 눈이 거의 보이지 않는 전맹 시각장애인과 잔존 시력을 어느 정도 활용할 수 있는 저시력)약시) 시각장애인으로 구분해 볼 수 있고, 전체 시각장애인의 80% 이상이 중도에 시력을 잃는 후천적 시각장애인입니다.
                - 일반적으로 전맹 시각장애인은 화면 읽기 프로그램(이하 스크린 리더)와 키보드를 사용하여 정보를 탐색하고, 저시력 시각장애인은 화면 확대 프로그램과 고대비, 반전 등의 기능을 사용합니다.
                - 기본적으로 스크린 리더는 워드 프로세서의 문서를 탐색하는 것처럼 위에서 아래로)마크업된 순서대로) 웹 문서를 탐색하게 되며, 주로 방향키와 탭 키, 단축키 등을 사용합니다. 초점을 받는 요소에는 일반적인 탭 키로, 그 외 텍스트 등은 방향키를 사용합니다.
                특징적인 것은, 스크린 리더에서복잡한 웹 페이지를 시각장애인들이 탐색하기 편하도록 재구성하여 보여 준다는 것인데요... 가상커서라는 것이 그 역할을 담당합니다.
                * 시각장애인의 컴퓨터 활용
                전맹: https://www.youtube.com......LLs
                저시력: https://www.youtube.com......b_c

                - 스크린 리더는 시각장애인 사용자가 직접 구매하여 컴퓨터에 설치해야 하는 상용 소프트웨어와 오픈 소스 프로그램, 컴퓨터를 사면 기본적으로 내장되어 있는 스크린 리더 등 다양한 종류가 있는데요...
                PC용은 센스리더(엑스비전테크놀로지), JAWS for Windows(Freedom Scientific), NVDA(NV Access) 등이 대표적이고, 국내 거의 모든 시각장애인이 센스리더를 사용합니다.
                맥 제품을 사면 운영체제에 VoiceOver(Apple)가 내장되어 있고, 모바일에서도 iOS VoiceOver, Android Talkback, Windows 내레이터 등이 기본적으로 내장되어 있습니다.

                - 스크린 리더 사용자는 정보를 인식하고 운용하기 위해 이미지의 대체 텍스트, 모든 콘텐츠의 키보드 접근, 초점의 논리적인 이동 등이 절대적으로 보장되어야 합니다.
                그리고 효율적인 탐색을 위해서 문서의 구조화)HTML 5의 시맨틱 테그 사용과 헤딩, 랜드마크 등)이 매우 중요합니다. 입력서식의 레이블과 테이블 scope 등도 정보 파악에 큰 도움이 됩니다.
                * 접근성 준수에 관한 더 자세한 사항은
                Web Content Accessibility Guidelines (WCAG) 2.1 http://www.w3.org......21/
                한국형 웹 콘텐츠 접근성 지침 2.1 http://www.wah.or.kr......asp 을 참고해 보시면 좋겠습니다.
                결론적으로 표준을 잘 지키고 기본에 충실한 것이 가장 좋다는 것이겠네요! ^^
                꼭 기억해 주세요! 여러분들의 작은 노력이 정보소외계층의 삶을 변화시킬 수 있습니다. 고맙습니다. ^^
                “웹의 힘은 그것의 보편성에 있다. 모든 사람이 장애에 구애없이 접근할 수 있는 것이 필수적 요소이다.” - 팀 버너스 리(Tim Berners Lee)

                끌올
              • 감사합니디!
              • 소소대담
                수강완료
              • 루씨구씨
                정말 쉽게이해했습니다 감사합니다.
              • 황구
                수강완료
              • 구본혁
                수강완료했습니다.
              • ㅁㄴㅇㄴㅁ
                엣지랑 익스플로러는 그러는데 크롬쓰시면 됩니다
                대화보기
                • 인하망키
                  저는 <ul>을 안달아도 •이게 나오네요!
                  대화보기
                  • realryankim
                    태그의 중첩 영상에서 코드를
                    <li>html</li>
                    <li>css</li>
                    <li>JavaScript</li>
                    라고 입력하면,
                    • html
                    • css
                    • JavaScript
                    라고 표시되는 게 아니라, 그냥
                    html
                    css
                    JavaScript라고 표시되지않나요?

                    <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>JavaScript</li>
                    </ul>
                    라고 입력해야, 영상에서 첫 번째 실습에서 보이는 것처럼
                    • html
                    • css
                    • JavaScript
                    라고 웹페이지에 표시됩니다.
                  • 생활코딩짱
                    궁금한게 있습니다.
                    첫 영상에서 링크가 가장 중요하다고 하셨는데요.
                    html (hypertext markup language)
                    하이퍼텍스트는 넘어가셨고 마크업 랭귀지를 이해하기 위해 태그를 알아야한다고 하신 후
                    따로 정리를 안해주셔서 질문 남깁니다.

                    문서와 문서를 링크로 연결한다는 것에서 링크란 무엇입니까?
                    (a태그를 특정하는 것은 아닌 것 같아서요...)
                  • 둠해머
                    수강완료!
                  • 마이구미
                    <!DOCTYPE html>
                    <html>
                    <head>
                    <meta charset="utf-8" />
                    </head>
                    <body>
                    안녕하세요. <strong>생활코딩</strong>입니다.
                    </body>
                    </html>

                    맥에서 이렇게 메모장 대신에 텍스트편집기를 사용해서 언어를 구사하잖아요. 근데 html 파일의 연결 프로그램을 텍스트 편집지고 바꿔서 언어를 수정해보려고 했는데 텍스트편집기에는 그냥 안녕하세요. 생활코딩 입니다. 이렇게 뜨네요.

                    <!DOCTYPE html>
                    <html>
                    <head>
                    <meta charset="utf-8" />
                    </head>
                    <body>
                    안녕하세요. <strong>생활코딩</strong>입니다.
                    </body>
                    </html>
                    이렇게 뜨게는 못하나요?
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기