웹 애플리케이션 만들기

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. Qlrhdro
    아, 이제 됐습니다. 중간에 제가 !와 "를 빼먹었더라고요.
    대화보기
    • Qlrhdro
      윈도우 사용자입니다. 똑같이 메모장 들어가서 했는데
      �덈뀞�섏꽭��. �앺솢肄붾뵫�낅땲��.
      이렇게 나오네요. 이거 어떻게 하나요? 왜 이런거에요??
    • 성열
      한국어가 들어가면 번역을 못하는지
      �ш낵
      �멸린
      諛�
      이런식으로 나오는데 어찌 해야 하나여ㅜㅜ
    • coding_prince
      감사합니다.
    • Hello 경
      완료입니다.
    • 웹전문가
      2021.02.12
    • 임동희
      2021/01/25
    • 아마 확장자가 txt일거에요. 확장자를 html로 변경하면 됩니다
      대화보기
      • 제사마
        Done
      • 김서눅
        2021 .01 .17
      • 박재현
        20.12.23
      • 늦은나이가아님
        2020.12.11 감사합니다
      • Twitch_ts
        저 윈도우 사용자인데 메모장에 입력후 들어가보니 텍스트로 <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        </head>
        <body>

        </body>
        </html>
        이렇게 나오는데 뭐가 문제인가요?
      • 박병진
        2020,11,10 꿈을 위해. 온라인 셀러 개발자.
      • ohsori
        11/02 출석함
      • 09 29 시작
      • 배고프다
        /strong입니다
        대화보기
        • 허우룩
          2020.09.08
        • 강민규
          2020 08 04 강민규
        • 엘리심
          안녕하세요.

          윈도우는 '모든파일' 이라는 문서형식을지정하시던데,
          혹시 Mac 으로 사용할경우, (html의)문서 저장형식은 따로 선택안해도 되나요?
        • 권오상
          이제 본격적인 공부가시작되었네요.
          잘 배우고 갑니다.
          잘 설명해 주셔서 감사합니다.
        • Eunjae Lee
          오타 나신 것 같네요~
          </storng> 을 </strong>으로 바꿔보세요
          대화보기
          • 김영효
            왜 그런지는 모르겠는데 <strong></storng> 명령어가 먹히지 않는거 같습니다. 굵은 글씨로 나오지 않고 그냥 평범한 글씨로 나오내요.
          • 장성우
            잘 배우고 갑니다!
          • sovreen
            The article you shared here is great. I really like and appreciate your work Good job. thank you for the html course. https://www.websofttutorials.com......ns/
          • 산노을
            good job!
          • 장동규
            문법이 깨지지않게하기 때문입니다
            대화보기
            • 몽몽
              실습2번에서 _blank와 _self도 href처럼 a태그의 속성이 되는 건가요?
              <a href="링크주소" taget="_blank">로 예를 들면 a태그는 속성을 총 3개 가진건가요 아니면 2개인가요?
            • 몽몽
              해결했습니다. .html도 같이 적어야했네요.
              대화보기
              • 몽몽
                localhost하고 뒤에 '/파일명'을 입력했는데 404오류가 떠요.
                htdocs로 들어가서 파일을 열면 '안녕하세요. 생활코딩입니다.'이라는 웹페이지는 잘 뜨는데
                직접 주소를 입력하면 안 뜹니다. 강의내용처럼 서버도 깔았는데 문제가 있는 것 같아요. 어떻게 해야하나요..?
              • ckstmznf@naver.com
                html 기본 문법편에 예제를 따라할때 오류가 나서 왜이러지 하던중에 4번줄에 <meta charset="utf-8" />을 지우고 다시 실행해보니 제대로 실행이 됩니다. 그 이유가 먼가요?
              • 열심히사는사람
                2020 3 29 완료
              • 열심히사는사람
                2020 3 28 1단계 완료
              • guddk1999
                2020.3.25 하루한시간 꾸준히
              • 중딩
                설명 너무 잘하세요
                피드백도 없이 나쁜 말만 하는 애들
                무시하시고 숨만쉬고 돈 버시고 똥을싸고 명성을 얻으시길 기원합니다
                강의 잘봤어여
              • 히히하헤호
                파일이름 끝에 .html을 입력하시면 됩니다~
                대화보기
                • 코딩 입문
                  모든 파일로 저장했는데
                  파일 형식이 계속 텍스트 문서로 저장되는데
                  어떻하면 될까요?
                • 현우쌤아
                  몰아붙이지 않고 약간은 쉽고 재미있게 설명해주셔서 감사합니다.
                  아무래도 막막하기만 했던 것들이 조금씩 풀려나가면서 재미를 붙일 수 있을 것 같습니다.
                  감사합니다! 20200202
                • 스티븐잡숴
                  완료
                • 저도 이래요ㅠㅠㅠ
                  대화보기
                  • 아르하트
                    감사합니다^^.
                  • 코딩왕김꿈나무
                    완료
                  • 김명래
                    완료~~ 감사합니다.
                  • myjin
                    완료!
                  • 디르베르
                    완료!
                  • 2019.11.28 완료
                  • 3log2
                    좋은 강의 감사합니다 :D
                  • BM-0916
                    니가해
                    대화보기
                    • 웹초보
                      20101021 완료

                      감사합니다.
                    • 수강완료
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기