생활코딩

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 정리

소스코드

쉬어가기

댓글

댓글 본문
작성자
비밀번호
  1. 김한설
    잘 봤습니다 :)
  2. 밀하우스
    잘봤습니다.^^
  3. 이여사
    잘 보았습니다
  4. 손창범
    맥유저분들~코드 그대로 나오시는분들 참고해서 도움되시길 바랍니다~

    텍스트 편집기 켜시고 새파일 여신뒤 포맷에서 일반텍스트 만들기에 코드 입력하시고 확장자 꺼주신뒤 저장하시면 실행되실꺼에요. 저도 한참해보다가 해결해냈습니다..ㅋㅋ
  5. 아나이스
    다시 한번 더 듣고 한꺼번에 댓글 올려용~
  6. 맥 유저인데 텍스트 편집기에 따라 적고 웹으로 보면 코드만 나옵니다. 오타가 있나해서 사이트에 있는 코드 복사해서도 해봤는데 그대로네요 뭐가 문제일까요?ㅜㅜ
  7. WAlk7
    후아 강의 잘 들었어요 !
  8. 쵸텔
    기말고사 끝나고 못들었던거 빨리 따라잡을게요:)
  9. Untitle
    혹시 코드애니웨어 쓰시는 분들 중에 저장이 안되시는 분 계신가요?

    Unknown connection만 자꾸 뜨네요..
  10. 배미숙
    잘 봤습니다.
  11. 민쎄이
    해결했습니다 의견감사합니다~
    대화보기
    • 최원철
      잘봤습니다 :)
    • 하카하카
      메모장의 제목이 ex_html_2 이것인지

      저장할 때 확장자를 .html 을 하셨는지

      저장할때 파일이름 밑에 파일 형식 모든문서로 바꾸고 그 오른쪽 하단에 인코딩을 "UTF-8" 로 바꾸셨는지

      저장 위치가
      Bitnami --> wampstack-7.0.18-0 --> apache2 --> htdocs 폴더에 잘 들어갔는지


      이런 부분들을 확인해야 하지 않을까 싶습니다~ ㅎ
      대화보기
      • 민쎄이
        localhost/ex_html_2.html 이렇게 주소를 치고 들어가면 자꾸 연결할수 없다고 뜨는데 어떻게하면 고칠수있나요???ㅜ
      • 이종역(pandora)
        잘 보았습니다.
        감사합니다.
      • Hyojeon Kim
        잘 봤습니다. html = 정보
      • 왜 모든파일로 저장이 안될까요?ㅜ
      • dong
        감사합니다!
      • 김성훈
        고등학교 때 선생님께서 교과서의 중요한 내용을 빨간줄을 치거나 형광펜 칠하라고 하는 것

        또는 직장 상사에게 보고서를 올릴 때 중요한 부분을 밑줄 치는 것.

        즉, 중요한 내용을 "표시 또는 강조 (= 마크업, mark up)"하는 겁니다.

        방금 제가 " " 와 ( ) 를 쓴 것도 마크업입니다.

        우리가 교과서의 중요한 부분을 마크업하면 눈길이 가듯이.

        프로그래머가 태그를 사용하여, 컴퓨터에게 이 부분이 중요하구나고 알게 하는 거죠.

        태그를 사용하는 언어를 mark up language이고

        이것을 컴퓨터와 인간 사이의 문법으로 적용하면 HTML이죠.
        대화보기
        • JaydenB
          중국에서 VPN사용해서 동영상보고 있는데 오늘은 오류가 있다면서 동영상 재생이 안되네요..

          ID는 SVewg8F105-aj19b 무슨 뜻일까요ㅠ
        • 강의 감사합니다.
        • Cenfun
          하나씩 완료하는 재미가 있군요. 잘 봤습니다.
        • 황성준
          잘들었습니다.
        • Jay Yoon
          태그를 통해 txt를 감싸는 행위(markup)를 하는 language이지 않을까요ㅎㅎㅎ
          대화보기
          • 공지만
            그래서 markup language이 정확이 무슨 뜻인가요
          • 허영재
            오오오~ 슬슬 재미있어 지네요~

            질문 하나 : "html문법-속성"에서 target="blank"로 잘못 입력했는데 똑같이 새로운 탭에서 링크가 연결되더군요~

            언더바(_)의 유무 차이는 무엇일까요?
          • Mateo Hernandez Kim
            매일 빠지지 않고 봐야할 텐데...
            다시 정주행 중입니다..
          • 이정훈
            정보처리기사 정보보안기사
          • 김크크
            Mac OS를 사용중입니다!! ex_html_1.html 을 웹브라우저에서 보면 외계어가 나와서 댓글을 쭉 읽어봤는데 해결방법을 달아주신 감사한 분들이 계셔서 해결했습니당ㅎㅎㅎ 혹시 저처럼 문제 생기신 맥유저 분들.. 댓글이 아래로 밀려서 못 보신 분들 계실까봐 아래에 해결방법 적어주신 오경훈님의 댓글을 복사해왔습니다!!


            오경훈님 댓글 복붙합니다.
            =====
            맥에서 �덈뀞�섏꽭��. �앺솢肄붾뵫�낅땲��. 이렇게 외계어로 나오는 문제는 "utf-8" 을 쓰는 과정에서 " 따옴표가 꺾인 따옴표로 자동전환되기 때문이에요
            macOS 시스템 환경설정 을 실행하고 <키보드> 로 들어가 텍스트 탭에서
            큰따옴표 꺾인 따옴표를 맨 아래 곧은 따옴표로 변경해 주면 해결될 것입니다.
            =====

            해결완료!
          • 따란
            codeanywhrere유저를 만나서 기쁘네요ㅠㅠ 저도 설치가 부담스러워서 codeanywhrere를 쓰고 있어요
            run project 하시고 나서 페이지에 컨탠츠가 추가되지 않는다는 피드백을 주셨는데
            프로그램에 컨텐츠를 입력하신 후에 run project가 있는 상태바를 보시면 맨끝에서 두번째 아이콘,
            즉 save 아이콘이 보이실거에요.
            우리가 codeanywhrere에 코딩한 내용이 웹페이지에 실행되려면 save아이콘을 누르셔서 파일 내용을 저장하셔야합니다.
            save버튼을 누르신 후에 해당 웹페이지로 가셔서 새로고침을 하시고 나면, 코딩하신 내용을 웹페이지가 받게 되는것 입니다.
            대화보기
            • 고준일
              저도 현재 복습 중입니다.
              지 속적인 복습만이 저 같은 코딩 백치는 꼭 필요합나다.
              ㅠㅠㅠㅠㅠㅠ
            • 저 codeanywhere 사용해서 배운거 실습해보는데, 수정하는것들 바로바로 잘 떠요.
              혹시 run project 하시기 전에 저장 하셧나요?
              대화보기
              • 돼로밍
                잘봤어요~!
              • sprk
                일단 설치 생략하고 볼륨 끄고 화살표로 쭉쭉 진행하면서 훑어보고 있습니다.
              • 명진
                주말에 복습했어요~~
              • Daydream
                진도가 많이 늦었네요

                어서 따라잡아야겠어요~~
                고고
              • Penjuin
                정말 쉽게 설명해주시네요!
                감사합니다
              • 까꿍
                그 HTML문서에다 마우스 커서 올려두시고 오른쪽 마우스 누르신 다음에 속성>공유>공유 버튼 누르니까 해결 되더라구요!
                대화보기
                • test
                  실제로 홈경로가 안잡혀있는거 같아요
                  대화보기
                  • 진도늦어져 따라잡는중!
                  • 저는 왜 웹사이트가 localhost/ex.dahsld 라고 안되고 files/user/sdfhjsk/siudfh/ex.sdfhskj 라고 더 복잡하게 되는데 무슨 문제일까요?
                  • Scia
                    이히히~ :)
                    하지 말라는 짓을 해버렸어요 ㅋㅋ

                    배운 속성만 들어가봤는데
                    https://opentutorials.org......786
                    정말 정리 잘 해놓으셨더군요!! bb 진심 존경스럽

                    https://dev.w3.org......ent
                    여기는 좀 아는 속성부터 탐구해야 어떤 약속으로 설명하는지 이해될거 같네요.
                  • Scia
                    가끔 영미 보다가
                    자막을 메모장으로 켜서 프로그램 언어는 뭔지도 모르지만
                    자막에 띄어쓰기가 보기 안좋다던가 맞춤법 틀린거 볼 때 가끔 고쳐보았는데
                    거기서 본 언어들이 이제 뭔지 하나하나 알게될거 같아요.
                  • 뉴뉴뉴비
                    와앗! 감사합니다!!

                    고구마 백만개의 답답함이 해결되었어요!
                    대화보기
                    • 유웅비
                      맥에서 파일 저장후에 다시 열면 코드를 볼 수 없던데 어떻게 하면 코드들이 다시 다 보이도록 할 수 있을까요?
                    • 맥사용자
                      이 안내를 제일 위로 올려주세요

                      맥의 텍스트 에디트를 사용하시는 분은 '그냥 따옴표'가 '보기 좋은 따옴표'로 바뀔 수 있습니다. 그럼 링크가 잘못될 수 있습니다. 아래의 방법을 참고해서 설정을 바꿔주세요. 편집 > 대체> 스마트 인용을 끄면 됩니다.
                    • reponist
                      codeanywhere 사용 유저입니다.

                      code 작성 후 다시 save 하시고 file preview 클릭하시면 작성 내용으로 된 페이지 확인 가능합니다
                      대화보기
                      • 뉴뉴뉴비
                        codeanywhere 사용하는 유저인데요

                        회사에서 자막보면서 따라가고 있어요

                        코딩 후 run project 하면 페이지 생성은 되는데

                        페이지 내용이 아무것도 없어요 ㅠㅠ

                        댓글들 좀 읽어 봤는데 뭐가 잘못 된건지 모르겠네요ㅜㅜ

                        codeanywhere 쓰시는분 없나요??
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기