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. apldeap
    11.19
  2. 한조박윤
    뜨리 스텝 완료
  3. 이명준
    2019.11.16 완료
  4. 신선미
    감동적인 하루네요!/완료
  5. 김지윤
    [완료]
  6. hkk_korea
    2019.11.13 완료
  7. hkk_korea
    안녕하세요. 오늘 수업에서 처음으로 웹페이지 작성을 했는데 저장이 안돼네요... unable to save file:permission denided 라는 경문창이 뜨는데 문제가 뭘까요?
  8. 누케누케
    윈도우 유저입니다.
    아톰 편집기에 <strong> Hello</strong> 라고 적었는데 크롬창에 글자의 변화는 없이 <strong> Hello</strong> 그대로 뜹니다. ㅠ.ㅠ 이유가 뭘까요?
  9. 서당무
    흑흑....당신....문과인 나를 감동시켜버렸어..... 컴퓨터공학은 사실 낭만으로 가득차있던거였어..... 사랑해요 생활코딩 들숨날숨에 재력과행복을 얻으세요ㅠㅠㅠㅠㅠㅠ
  10. 서아
    완료
  11. 신세계
    아름다운 강의입니다.
  12. 서로민
    2019.11.10 완료
  13. 완료
  14. 블랙켓
    2019-11-08 완료
  15. Channy
    2019-11-08 완료
  16. jane
    안녕하세요. 저도 계속 태그 인식이 안되서 헤맸는데 저장된 파일 확장자가 html로 되어있지 않더라구요!
    예를들어 파일명이 1104.html <- 이렇게 뒤에 .html로 되어있는지 확인해보세요!
    대화보기
    • 코취화이팅
      질문이 있어서 글 올립니다. 아톰 편집기에 <strong> Hello</strong> 라고 적었는데 크롬창에 글자의 변화는 없이 <strong> Hello</strong> 이렇게 뜨는 이유는 뭘까요? 참고로 저는 윈도10 유져입니다.
    • Juhan
      19.11.05 완료
    • 요리조리팡팡
      완료우
    • Gun-Woo Lee
      완료
    • 안선재
      감사합니다
    • 유선경
      2019-10-29 완료
    • Joanne
      동영상 하나씩 마칠 때 마다 느껴지는 이 짜릿함!! 너무 재미있었어요. 감사합니다~
    • 미옹이
      그래도 img src를 과거에 해 보고 시작해서 그런지 완전 생소하진 않네요.
    • 2010.10.27 완료
    • 이상민
      2019-10-25 완료
    • ㅇㅇ
      ㅇㄹ
    • 고병운
      재미있어요
    • 이승연
      20191017 완료
    • 완료
    • 김선주
    • 박민규
      완료
    • 람지비전
      완료
    • 탁기태
      20191012
    • 현민수
      20191110 삐약!
    • 김민재
      간다아
    • Bomi Seok
      어릴때 html 태그가 크게 유행을 했던지라 반가운 마음으로 복습했습니다. 그땐 영어도 잘 몰라서 그냥 단축키처럼 무작정 외워서 사용했었는데 이렇게 기초부터 차근차근 설명을 듣고 만드신 분들의 고뇌와 배려까지 알게되니 감회가 새롭네요. 아름다운 강의였어요. 기술에도 철학, 인문학이 필요하다는 게 이래서구나 느끼기도 했구요. 기술분야를 새롭게 바라보게 되네요. 감사합니다!
    • 육포
      20191008
    • 20191005
    • 흥성무
      20191004
    • 우영민
      개인적으로 정말 감사드려요! 댓글을 웬만해서는 달지 않는 편인데, 감명깊은 강의라 댓글까지 달게 되네요.
      다른 프로그래밍, 특히 html 및 웹 언어에 대한 강의를 들었을 때는 항상 물음표 투성이었습니다.
      그런데 여기서 어원부터해서 시작을 할 때 필요한 개념들을 잘 풀어서 설명해주시니 정말 답답했던 부분들이 잘 해소되었어요. 평소 지식의 부채가 생기는 것을 정말 싫어해서 뭐 하나라도 걸리면 쉽게 다음으로 진도를 나가지 못하는 편이어서 프로그래밍 공부의 초반이 굉장히 힘들었는데요, 궁금한 점이 생기면 생활코딩의 풀이를 보면서 구멍난 부분들을 하나 하나 채워나가는 느낌입니다.
      감사합니다.
    • 김규태
      완료
    • 엄주현
      완료
    • ㅊㄷㅎ
    • 감자
      수강 완료!
    • 우유병
      다솜 화이링
    • 코딩만이 살길이다
      완료
    • 이영찬
      완료
    • 정성균
      완료~
    • 바나나챠챠
      감사합니다
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기