생활코딩

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. 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 자세히 보기