생활코딩

Coding Everybody

코스 전체목록

닫기

기본 문법 - 태그

 

 

---

 

 

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

 

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

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

 

 

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

 


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

 

 

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. Jungsok.OH
    다음~
  4. 할배
    좀알겠네영
  5. egoing
    alt 키를 눌러보세요~
    대화보기
    • 이피
      html tag는 아직 어렵지 않은데 atom 프로그램에 적응이 잘 안되네요. (메뉴가 사라졌어용)
    • 반자동
      다음~~
    • 희아시스
      저만 그러는지 모르겠는데 확인 부탁드립니다. 3분18초부터 진행이 되질 않습니다. 3~4번 시도했는데 똑같아서요 ㅠㅠ
    • 홍계선
      ratel님 저도 그런것같아요~됐다가 안됐다가...낑낑대다가 그냥 넘어갑니다. 풀릴수도 있으니깐요~
    • Jihyun Lee
      잘봤습니다.
    • ratel
      감사합니다 저는 atom에서 파일 오픈을 하면 웹 브라우저 실행이 안되는데 왜 그런지 아시는 분 도와주세요!
    • Jake
      감사합니다.
    • 황개미
      너무 스윗하셔요...
    • 팽석
      즐겁게 공부하고있습니다!! 감사해요!!
    • 돼지나
      매번 좋은 강의 제공해주셔서 감사합니다~
    • coolnpeace
      감사합니다.
    • 염정민
      잘봤습니다
    • hjoh12
      감사합니다. 잘 보았습니다!
    • 초딩맘
      쉽고 재미있게 풀어주셔서 계속 이어가고 있습니다^^
    • Kwangsoo Koh
      좋네요 ^^
    • Kwangsoo Koh
      좋네요 ^^
    • Moony
      태그가 안먹혀서 슬픈 ㅠㅠ
    • 코딩학습생
      강의 잘 봤습니다.
    • 아가야
      너무 재미있어요...방학동안 아이와 코딩이용하여 웹페이지 만들고싶어요
    • 와 하면 할수록 신기하고 재밌네요 감사합니다^^
    • 김재학
      태그를 두개나 배웠습니다... 잊지 못할 것 같아요...^^
    • egoing
      잘 하셨습니다! :)
      대화보기
      • Hwang Sung Kim
        쉽게쉽게 넘어가고 있습니다. 감사합니다.
      • Chan
        태그가 안먹힐 경우는 어떻게 하나요???
        <strong>creating web pages</strong>을 입력하면
        글자가 볼드가 되는게 아니고 입력한 문구 그대로 뜨네요...


        자문 자답 합니다...

        우측 하단에 Plain Text 로 설정이 되어 있던 것을 HTML로 바꾸니 태그 적용이 바로 되네요.
      • 이수현
        우와~~ 너무 쉽게 설명을 잘 해주세요^^
      • 김예령
        진짜 코딩을 이렇게 재미있게 배울 수 있을 거라고는 상상도 못했어요! 너무 감사합니다!
      • Jung Min Park
        컴퓨터는 하나의 거대한 시입니다.
      • 이은정
        살짝 발을 담궜습니다. 내일은 진도에 맞게 담궜으면 좋겠네요.
      • Deen
        쉽게 설명 잘해주셔서 감사합니다 ~ ^^
      • 차녕
        며칠 쉰 거 벼락공부하고 있습니다...
      • Jayeong Jeon
        감사합니다
      • 이수민
        너무 설명 잘해주시네요! 감사합니다 ㅎㅎ
      • 서경숙
        완료
      • aimerthis(이성민)
        잘봤습니다.
      • 이영준
        감사합니다! 시에 비유하시다니 흥미로운 강의였네요.
      • 이유리
        감사합니다
      • 완료!
      • slowandsteady
        tag, 현실을 담다.
      • PassionOfStudy
        < > 태그 Tag

        2018-01-05 - 여섯번째 수강완료!
      • Gura0911
        정말 좋은 걸 배우는 것 같네요. 쓰기 좋은 태그 2개 배워갑니다.
      • 김정윤
        귀에 쏙쏙 들어와서 이해가 너무너무 잘되네요~!
      • BY Chin
        잘봤습니다!
      • koreano1cfp@paran.com
        "이제부터 진짜로 코딩을 해보겠습니다."
        위 문장에서 "해보겠습니다."를 "해 보겠습니다."로 수정해야 함.


        "이런 모양의 웹페이지를 한 번에 만들수는 없습니다."
        위 문장에서 "만들수는"을 "만들 수는"으로 수정해야 함.

        "작업 해보겠습니다."
        위 문장은 "작업해 보겠습니다."로 수정해야 함.


        "나의 문제라고 상상해주세요."
        위 문장에서 "상상해주세요."를 "상상해 주세요."로 수정해야 함.

        "중요한 정보들이 있을 거예요."
        위 문장에서 "거예요."를 "거에요."로 수정해야 함.

        "그런 정보들을 채워가면서 수업을 따라오신다면"
        위에서 "채워가면서"를 "채워 가면서"로 수정해야 함.


        "웹브라우저를 리로드 했습니다."
        위 문장에서 "리로드 했습니다."를 "리로드했습니다."로 수정해야 함.


        "여러가지 불만족이 생겨날꺼예요."
        위 문장은 "여러 가지 불만족이 생겨날 거에요."로 수정해야 함.

        "분명 밑줄을 치고 싶을 거예요. (그렇다고 해주세요)"
        여기서도 마찬가지로 "거예요."가 아니라 "거에요."로 수정해야 하고,
        "해주세요."는 "해 주세요."로 수정해야 함.

        "밑줄이 영어로 먼가요?"
        위 문장에서는 "먼가요"를 "뭔가요"로 수정해야 함.


        "밤을 새울만하죠?"
        위 문장에서는 "새울만하죠"를 "새울 만 하죠"로 수정해야 함.


        "경험적으로 살펴봤습니다."
        위에서는 "살펴봤습니다."를 "살펴 봤습니다."로 수정해야 함.


        "이제부터는 지금까지 경험한 것을 이론적으로 정리해봅시다."
        위 문장에서는 "정리해봅시다."를 "정리해 봅시다."로 수정해야 함.


        "태그는 중첩해서 사용할수도 있습니다."
        위 문장에서는 "사용할수도"를 "사용할 수도"로 수정해야 함.

        "한번 생각해봅시다."
        위 문장에서는 "한번 생각해봅시다."를 "한 번 생각해 봅시다."로 수정해야 함.
      • 한글이가깨져요
        오늘 다시 접속해서 저장된 파일을 불러와서 다시 해봤는데요.. 이제 됩니다. @.@ 귀신이 곡할노릇..;;
        다시 접속해서 되는 건 줄 알았더라면, 질문을 남기지 않았을텐데요.. ㅠ_ㅠ
        그래도 egoing님께 파일 한 번 보내봅니다. ^^
        <meta charset="utf-8"> 이 문장을 넣는 위치는 상관이 없을까요?
        대화보기
        • 한재민
          좋은 정보 감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기