WEB1 - HTML & Internet

기본 문법 - 태그

 

 

---

 

 

이제부터 진짜로 코딩을 해보겠습니다.

 

먼저 우리가 만들었던 기획서를 다시 보시죠.

이런 모양의 웹페이지를 한 번에 만들수는 없습니다. 조각조각 구현하면서 전체적으로 완성해 나가면 됩니다. 이번 시간에는 붉은색으로 표시된 부분을 작업 해보겠습니다.

 

 

본격적으로 수업을 시작하기에 앞서서
여러분에게 부탁드리고 싶은 것이 있습니다.

 


이 웹페이지를 남의 문제가 아닌
나의 문제라고 상상해주세요.
저와 똑같이 하셔도 됩니다만,
그것보다는 자신의 삶에서 중요한 정보들이 있을 거예요.
그런 정보들을 채워가면서 수업을 따라오신다면
우리 수업이 보다 의미 있지 않을까요?

 

 

1.html에 아래와 같은 내용을 저장한 후에 웹브라우저를 리로드 했습니다.

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.

의미 있는 정보를 웹브라우저에 표시했습니다. 이것만으로도 처음에는 행복할 것입니다. 하지만 이 화면을 계속 쳐다보고 있으면 여러가지 불만족이 생겨날꺼예요. 여기서 creating web pages라는 부분이 중요한 내용이라는 생각이 들었다면 어떻게 하고 싶겠어요?

 

 

강조표시하고 싶겠죠? 우리는 글씨를 진하게 표시하고 싶어졌습니다. <strong>과 </strong>으로 진하게 표시하고 싶은 구간을 감싸주면 됩니다.

강조표시가 되었죠?! 신기하지 않나요? 우리가 지금 한 것은 사소한 것이 아닙니다. 웹이 아무리 복잡해도 본질적으로는 이것을 벗어나지 않습니다.

다시 화면을 쳐다보세요. 여러분은 또 불만족이 생깁니다. creating web pages에서 web이라고 되어 있는 부분이
더 중요하다는 생각이 들었습니다. 그럼 어떻게 하고 싶겠어요? 분명 밑줄을 치고 싶을 거예요. (그렇다고 해주세요)

 

 

밑줄이 영어로 먼가요? underline이죠? 그중에 첫 글자는 무엇인가요? u입니다. <u>와 </u>로 감싸면 됩니다.

변경사항

 

 

밑줄을 긋는 것이 별거 아닌 것 같지만,
실제로 컴퓨터 화면에 밑줄을 긋기 위해서는
큰 노력이 필요합니다.
누군가(웹브라우저 개발자)는 저 밑줄을 긋기 위해서
며칠 밤을 새웠을지도 모릅니다.
하지만 그렇게 고생을 하면
전세계인이 웹페이지에 밑줄을 그을 수 있습니다.
밤을 새울만하죠?

 

 

이렇게 해서
웹페이지를 만드는 가장 중요한 규칙을
경험적으로 살펴봤습니다.

 

 

이제부터는 지금까지 경험한 것을 이론적으로 정리해봅시다.

위의 그림에서 strong이라는 것을 HTML에서는 문법적으로 태그라고 부릅니다. 앞에 있는 태그를 열리는 태그
뒤에 있는 태그를 닫히는 태그라고 구분해서 부르기도 합니다. 닫히는 태그는 태그명 앞에 /를 붙입니다.

<strong>creating <u>web</u> pages</strong>을 보시면 아시겠지만, 태그는 중첩해서 사용할수도 있습니다.

 

 

한번 생각해봅시다.
태그라는 말 들어보셨죠?
어디서 들어봤나요?

 

 

옷을 살 때 붙어 있는 것이 태그죠.
태그가 하는 역할이 무엇인가요?
그 옷을 설명합니다.

 

다시 HTML을 태그를 바라봅시다.
HTML과 같은 언어를 만든 사람들은
이 언어를 만들 때 자신들이 만든 문법을
사람들이 쉽게 이해하기를 원했습니다.
그래서 일상에서 자주 쓰는 말 중에
이 문법과 비슷한 말을 찾았겠죠.
그래서 찾은
비유,
은유가
바로 태그입니다.

 

 

정보기술은 역사가 길지 않습니다.
좋게 말하면 최신이고, 
안 좋게 말하면 근본이 약합니다. 
부족한 근본을 어디서 빌려왔을까요?
많은 것이 일상에 대한 비유와 은유입니다.
그런 점에서 컴퓨터는 하나의 거대한 입니다.
컴퓨터가 차갑게 느껴질 수 있지만,
컴퓨터 공학은 사실
낭만적인 것으로 가득 차 있습니다.

 

 

여러분은 이제
HTML을 지배하는 가장 중요한 문법을
사용할 수 있게 되었습니다.
여러분에게 얼마나 중요한 사건이 일어난 것인지
다음 시간에 알아보겠습니다.

 

 

 

 

자주 묻는 질문

  • 한글이 깨지면 어떻게 해야 하나요?
    <meta charset="utf-8">를 추가해보세요. 여러분이 파일을 저장하면 UTF-8로 저장이 됩니다. 그럼 웹브라우저에게 UTF-8로 페이지를 열라고 해줘야 합니다. 그걸 브라우저에게 알려주는 코드가 <meta charset="utf-8"> 입니다. 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다!
  2. 베니
    오늘은 여기까지!!
  3. 푹스
    감사합니당
  4. 감사합니다. 정말 멋진강의에요. 쉽고 간단하게 설명해주셔서 너무 흥미로워요~!
  5. 콜드브루
    하나의 거대한 시 (박수박수)
  6. 블루베리
    지루하지 않고 이해하기 쉽게 설명해주셔 감사합니다~!!
  7. RITA
    강의 잘봤습니다~오늘도 출첵하고가요!
  8. joy1800@naver.com
    file - settings- editor 으로 들어가시고 옆칸을 밑으로 쭉 내리시면....
    soft wrap 에다가 체크 해주세요...
  9. JINJIN
    자동 줄바꿈이 안된다는 말인것 같습니다.
    바로 전 강좌 맨 끝에 보면

    "자동 줄바꿈을 하고 싶습니다.
    메뉴에서 preference -> editor -> Soft Wrap 항목을 체크해주세요. 참고" 가 있습니다
    대화보기
    • 김김2
      이고잉님. 저도 화면 분할해서 왼쪽엔 웹 브라우저, 오른쪽엔 아톰을 열고 있는데요. 2-3문장의 글을 복사 붙여넣기 하면 그게 다 한줄로 나와서 태그 달기가 번거롭습니다.
      이고잉님 설명하실 때에는 화면 사이즈에 맞게 한 줄이 분할되어 태그달 곳을 찾기가 쉬운데 저는 한줄로 길게 되어 있어서 뒤쪽에 태그를 달려면 그쪽으로 이동해서 봐야해요. 어떻게 이고잉님처럼 할 수 있을까요?
    • 밍성
      Hypertext Markup Language (HTML) is the standard markup language for <strong>creating web pages</strong> and <u>web</u> applications.


      파일을 열면 이렇게 그대로 나오는데 어떻게 해야 바뀔 수 있는건가요 ㅠㅠ
    • 크오-
    • 내일은프로그래머
      달에 첫발을 내딛는 기분이랄까요.ㅎㅎ 너무 거창한가?^^
      무언가를 배운다는게 즐거울수 있다는걸 알아가고 있습니다~
    • 바다의왕자
      공부에 많은 도움이 됩니다.
    • 뉴크민둥
      넘나 재밌어요 ㅠ 이전에 프로그래밍 배웠을 때와 완전히 다른!!
    • 존잼탱
      진짜 재밌어요. 컴퓨터 공학이 한 편의 거대한 시와 같다고도 한 말이 정말 인상적이네요 ㅎㅎ
    • 공부가 좋아
      감사합니다~
    • yamaDeus
      감사합니다
    • KyuHoon Lee
      <meta charset="utf-8"> 이건 어디에 추가를 해야하는건가요^^
    • KyuHoon Lee
      한글로적으면 글자가 깨지던데 어땋게해야할까요^^
    • 와우
      관점이 너무 재밌으세요. 킵고잉~ 하겠슴다 ㅎㅎ
    • 햅싸
      0511 감사합니다
    • 블루노트
      아 너무 재미있네요
      좋은 영상 감사합니다
    • htmlhm
      해드바디타이틀메타 없이도 웹이 만들어진다는게 신기합니다
    • 우루롹끼
      앞으로가 걱정이지만 재밌어요~~ 차근차근 알려주셔서 감사합니다.
    • ㅇㅇ
      와..... 컴퓨터학원에서 기초설명도 그냥 훑기만하고 넘어가고 그냥 코드만 입력하면 따라치는것만 해서 하나도 이해가 안가서 기초부터 다시 공부하러 왔는데요 진짜 넘 설명잘하시네요 ㅠㅠㅠㅠ진작 여기를 알았다면 ㅠㅠㅠㅠㅠㅠ선생님 복받으새오
    • 컴퓨터박사
      너무 재밌네용
    • 눈곰
      web 폴더 안에 파일을 만들 때 확장자를 .html로 지정해주세요
      대화보기
      • 누러버
        정말 쉽게 알려주시는거 같아 감사드립니다!
      • 미래학자
        정말감사합니다. 모두 행복하시고 번창하세요!
      • 야지징
        너무나 재밌따 ㅜ ㅜ
      • 시깅
        감사합니다. 공부가 잘되는거 같네요 ㅋㅎ
      • 솔백아
        2018.04.12 감사합니다!
      • 효림
        쉽게 설명해주셔서 이해가 잘 돼요!
      • suhwan
        one day mission accomplished!
      • Dreaming_Joyy
        HTML programming을 위한 grammar!! HTML의 grammar인 TAG에 대해서 배웠습니다! Tag는 옷의 가격표 처럼 'the thing'에 대해서 설명을 하는 것이지요! 어떻게 컴퓨터랑 소통할 지의 약속이라고 보면 되겠네요!! 오늘은 bold font와 underline을 배웠습니다! <strong> ~ </strong>; <u> ~</u> 오홍오홍! 세상에 있는 모든 Tag grammar에 대해 알고싶은 열정이 막 샘솟네요!!
      • 노진국
        파일의 확장자가 .html 혹은 .htm으로 저장된지 확인해보세요.
        대화보기
        • Junbum Park
          감사합니다
        • 윤태웅
          감사합니다~!
        • 드루
          좋은 강의네요 정말 감사합니다
        • egoing
          웹페이지에서 오른쪽 클릭해서 소스보기 하면 어떻게 나오나요?
          대화보기
          • 최인준
            감사합니다!
          • Yuri Kim
            저도 그래요ㅠㅠ밑에 의견들 다 참고해도 웹에는 글자 그대로 표시되네요...ㅠ
            대화보기
            • Songhee
              HTML을 지배하는 가장 중요한 문법! 옷을 설명해주는 이름표처럼 컴퓨터에게도 설명을 해주기 위해 붙여주는 TAG! ㅎㅎㅎ 아... 컴퓨터언어는 거대한 시와같다는 말씀.. 하아.... 컴터공학이 이렇게 흥미로울수있다니 지나가던 미대생이 좋아요+1 합니다
            • 챙매이
              정말 강의를 아름답게 만드셨네요 ㅎㅎㅎㅎ 감사합니다 ㅎㅎㅎ
            • 감사합니다 ~ ♡
            • 정요
              [질문 ㅠ]
              웹브라우저에서 태그 내용을 전혀 인식하지 못하고 있어요.

              1. 이슈사항: 크롬 브라우저에서 <strong> --- </strong>, <u> ---- </u> 등의 소스코드가 그대로 보임
              2. 작업환경: 맥os + 아톰 + 크롬 브라우저
              3. 아톰 하단 설정: CRLF / UTF-8 / HTML

              고수님들 뭐가 문제인지 도움 부탁드립니다 ㅠ
            • 좋은 강의 감사합니다!!
            • 츄쳔
              감사합니다!
              대화보기
              • cactusky
                이고잉님의 시.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기