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. 이채
    설정 화면(ctrl + ,) 접속 후 auto closing tags 검색 -> 체크 해제 하면 되네요.
    저도 한참 검색하다 발견해서 공유합니다 ㅎㅎ
    대화보기
    • 사랑이
      전 html을 작성하면 선생님처럼 글이 연장되는것이 아니라 넘버링이 계속적으표기됩니다. 어떻게 하면 점자 형식으로 단락이 끝난것도 아닌데 계속 1.2.3.형식으로 넘어가는걸까요?
    • 파시
      23.05.08
    • nightsunny
      23.04.29 check.
    • 뿌에에엥
      23.04.27
    • 드림보이000
      2023.04.25. WEB1 - HTML&Internet - 기본 문법 - 태그를 시작합니다.
    • ANTIFRAGILE
      23.04.22.
    • 공부하자
      시라는 표현이 멋지네요!!
    • 성호호
      설정에서 auto closing tags 로 검색하시면 체크박스가 나옵니다. 거기서 해제하시면 되구요. 참고로 지금은 자동완성 불편한데 css까지만 가셔도 다시 자동완성 기능이 필요하실 듯 합니다.. 제가 그랬거든요 ㅋㅋㅋㅋㅋ
      대화보기
      • 관심자
        23.3.26.
      • 23.03.16.
      • 염여밍
        태그를 <strong 여기까지 치고 > 닫아버리면 자동으로 </strong> 이 뜨면서 완성이 되는데 혹시 자동완성을 끄는 방법이 있을까요? auto closing brackets 이나 quotes 등등.. 인터넷으로 찾아보고 끄면 된다는 건 다 never로 하거나 체크표시 풀었는데 도통 자동완성이 없어지지 않네요..ㅠㅠ
      • IamBeen22
        2023-03-09
      • 주황색파이리
        23.03.03.
      • ashkite12
        23.03.03
      • 태발군
        와 너무 흥미로운 강의입니다!
      • 오즐
        23.02.23
      • 23.02.22
      • 호떡이
        23.02.12
        나는 <strong> <u> 무엇이든 </u> 할 수 있다! </strong>
      • otcace
        23.02.10
      • 으앗?
        23.02.02
      • 문등리 까마귀
        2023.01.30 20:11
      • 무말랭이
        2023.01.30
      • 고원규
        2023.01.28
      • 2023-01-27
      • 열공강아지
        1/23
      • TheDuck
        2023. 01. 18 완료
      • 김디두
        2023.1.17
      • 박혜원
        2023.01.13
        시청 완료
      • 화이팅
        파일 확장자가 .html이 맞는지 한 번 확인해보세요! .txt 등으로 저장되어 있었다면 제대로 표시가 안 되었을 거에요.
        대화보기
        • Sansol Park
          작성하신 코드를 복사해서 붙여넣기해서 보여주시면 답변을 해드릴 수 있을 것 같아요!
          대화보기
          • alicena
            2023.01.12
          • 박개띠
            선생님이 보여주신것과 같이 <strong>에 빨간글자가 적혀져 있지 않아요..!!!
            대화보기
            • 박개띠
              <strong>만약에</strong> 누군가가 나한테 고맙다고 인사를 한다면?
              이렇게 visual code에 적었는데 강조표시가 되지 않고 이 문자 그대로 웹사이트에 적혀져 나와요 혹시 왜 그런지 알 수 있을까요..??!
            • Antaresc
              뒤늦게 시작한 공부인데 너무 재밌습니다.
            • 나나나11
              격려의 말씀 정말 감사합니다ㅠㅠ
              대화보기
              • wowum7
                너무 재밌어요!
              • Sansol Park
                전혀 부끄러워하지 않으셔도 괜찮습니다!

                오타는 항상 있거든요!
                대화보기
                • Sansol Park
                  첫번째 스트롱 태그가 스펠링이 잘못 적혔었네요. strong 이 아니라 storng 이라고 적혀서 적용이 안되었어요.
                  대화보기
                  • 나나나11
                    아이고 이런 간단한 오류도 스스로 체크하지 못하고 질문을 올렸다니 정말 부끄럽네요:(
                    답변 감사합니다!!
                    대화보기
                    • egoing
                      오타가 있었습니다 :)
                      storng -> strong
                      대화보기
                      • 나나나11
                        죄송합니다. 답글을 너무 늦게 확인했습니다ㅠㅠ

                        제가 작성한 코드는

                        <p>Sir <storng>Tim Berners-Lee</storng> invented the <strong>World Wide Web</strong> in 1989.</p>

                        였습니다! 이때 페이지 화면에 World Wide Web만 글자가 진하게 강조되어 나오고 Tim Berners-Lee는 아무런 효과가 적용되지 않았습니다.

                        또한 한글 문장에 같은 방식으로 <strong> 태그를 두 번 써보았는데 이 경우에는 <strong> 태그가 먼저 붙은 텍스트에만 효과가 적용되고 두 번째로 <strong> 태그를 달아준 텍스트에는 아무런 효과가 나타나지 않았습니다.


                        늦었지만 답변 주신다면 정말 감사하겠습니다...!
                        대화보기
                        • Rich4772
                          22.12.29
                        • Sansol Park
                          코드를 복사해서 댓글로 달아주시면 답변 드릴 수 있을 것 같아요!
                          대화보기
                          • 나나나11
                            안녕하세요, 우선 좋은 강의 정말 감사합니다.

                            다름이 아니라 강의 내용을 적용시켜보던 도중 질문드릴 거리가 생겨서 이렇게 댓글을 작성하게 되었습니다.

                            제가 강조 표시를 여러 군데 해보고 싶어서 strong태그를 두 군데 달았는데 처음 strong 태그를 단 곳은 웹페이지 화면에도 잘 적용이 되었지만 두번째로 태그를 단 곳은 아무리 reload해도 적용이 안 되네요. 두 군데 똑같이 <strong>강조할 내용</strong> 이런 형식으로 에디터에 작성했는데 무엇이 문제였을까요?
                          • 완주가자
                            완료~
                          • 씨퓨
                            22.12.21
                          • 오오
                            2022.12.21
                          • 민권
                            2022.12.15
                          • 퐁티
                            시를 잘 쓰고 싶어요
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기