ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML 편 - 2일차
      개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 4. 30. 09:00
      반응형



       

      2일차

       

       

       

      08. 통계에 기반한 학습

      • 최신 버전의 HTML에는 150개 이상의 태그가 있다.
      • 그럼 150개의 태그를 다 외워야 할까? 그렇지 않다.
      • 전 세계에서 만들어진 수많은 웹 페이지를 분석한 정보를 기반으로 보기 좋게 정리한 사이트는 다음과 같다.
      • https://www.advancedwebranking.com/
       

      World's longest standing rank tracker - Advanced Web Ranking

      Advanced Web Ranking provides fresh daily, weekly or on demand geo-located rankings. Designed for agencies and in-house SEOs. Try it free for 30 days!

      www.advancedwebranking.com

      • 현재는 참고할 그래프가 사라진 상태임을 확인하였다.
      • 하지만 책에 나와있는 정보를 보면, 전 세계에 있는 수많은 웹 페이지들이 몇 가지 종류의 태그로 이뤄져 있는지 통계적으로 확인할 수 있다.
      • 이 통계를 봤을 때 약 25 ~ 26개 정도의 태그로 구성된 웹 페이지가 가장 많다.
      • 앞서 배운 태그는 <strong>, <u>, <h1> ~ <h6>의 총 8가지 태그를 알고 있는 상태이다.
      • 웹이 처음 이 세상에 태어났을 때 18가지의 태그가 있었고, 통계에 따르면 26개의 태그를 알고 있다면 평균은 된다는 것이다.
      • 그중 1등은 <head> 태그인데, 수업의 방향성 때문에 <head> 태그를 먼저 배우지는 않았다.
      • <h1> 태그가 55.8%의 빈도수를 보여주고, 그 아래쪽에 <strong> 태그가 있다. 하지만 <u> 태그는 랭킹 안에 없다. 그러니 잊어라. 중요하지 않다.

       

       

       

       

      반응형

       

       

      09. 줄바꿈 : <br> vs. <p>

      • 서로 경쟁관계에 있는 인기 있는 두 가지 태그를 살펴보자.
      • 기존의 코드에 다음과 같이 보충 설명을 추가할 수 있다.
      <h1>HTML</h1>
Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
      • 웹 페이지에서 보면 단락이 없어서 답답하다. 코드에 줄바꿈을 넣어도 웹 페이지에는 반영되지 않는다.
      • 즉, 줄바꿈을 하는 태그가 필요하다.
        • 추천 검색어 : 'html new line tag'
      • HTML에서 새로운 줄을 표현할 때는 <br>이란 태그를 쓰면 된다. <br> 태그는 break(line break), 즉 줄을 바꾼다는 뜻이다.
      • 하나를 쓰면 한 줄이 떨어지고 두 개를 쓰면 두 줄이 떨어져 단락처럼 느껴진다. 세 번을 쓴다면 좀 더 여백이 강조된 단락을 표현할 수 있을 것이다.
      • <br> 태그는 상당히 자주 사용하는 태그이며, 한 가지 특징이 있다.
      • <br> 태그는 줄바꿈이라는 시각적인 의미만 가지고 있기 때문에 뭔가를 감쌀 필요가 없어서 닫지 않는다. 즉, 닫히는 태그가 필요없다.

       

      • 그런데 이 <br> 태그 말고 HTML을 만든 사람들은 단락을 표현할 때 쓰기 위한 태그를 만들어 놓았다.
        • 추천 검색어 : 'html paragraph tag'
      • paragraph는 단락이라는 의미이며, <p> 태그는 첫 번째 글자를 딴 것이다.
      • <p> 태그는 <br> 태그와 달리 어디서부터 어디까지가 한 단락인지를 표현할 수 있기 때문에 열리는 태그와 닫히는 태그가 존재한다.
      • 예제에 사용하기에는 <br>태그보다 <p>태그가 더 적절한 태그이다. 왜냐하면 <p>태그는 이 웹 페이지를 좀 더 정보로써 가치있게 만들기 때문이다.
      • 즉, <p>에서 </p>까지 단락이 존재한다는 것은 의미론적으로 표현할 수 있기 때문이다. 그에 반에 <br>태그는 단지 줄바꿈일 뿐이다.

       

      • <br>태그와 <p>태그를 비교했을 때 <p>태그에는 단점이 있다. <br>태그처럼 여러 번 줄바꿈을 할 수가 없고 정해진 여백만큼 벌어지기 때문에 시각적으로 자유도가 떨어진다.
      • 하지만 CSS라는 기술이 있으며, 태그와 태그 사이의 여백을 나타내는 margin이라는 속성이 있다.
      • 여기서는 두 번째 <p>태그에 위쪽 여백을 주고 싶은 상태이므로 'margin-top:40px'이란 코드를 사용할 수 있다.
      <h1>HTML</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<p style="margin-top:40px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>
      • 보다시피 <p> 태그를 <p style="margin-top:40px;">로 변경하면 해당 <p> 태그의 상단에 여백이 40px만큼 생긴다. 40px 대신 45px를 지정하면 45px만큼 여백이 생길 것이다.
      • CSS는 이번 수업의 주제가 아니기 때문에 이 이야기를 듣고 잊어도 된다.
      • <p> 태그는 81.5%, <br> 태그는 70.3%나 차지하는 상당히 인기 있는 태그이다.

       

       

       

      10. HTML이 중요한 이유

      • 누구나 기초가 중요하다고 말한다. 하지만 기초가 중요하다는 말을 잘 들어보면 응용으로 가는 과정으로서 기초가 중요하다는 뜻인 경우도 많다. 하지만 사실 기초는 기초만으로도 할 수 있는 일이 많다.
      • HTML이 왜 중요한지 이해해보자.

       

      • 어떤 글의 제목으로 'coding'이라 쓸 때 일반인이 쓰는 'coding'과 지식인이 쓰는 'coding'에는 어떤 차이가 있을까?
      • 일반인일 때는 글씨 크기를 선택하고 글씨크기 22px, 진하게 표시할 것이다.
      • 지식인일 때는 본문을 누르고 제목2 정도를 선택할 것이다.
      • 겉보기에는 두 'coding'이 거의 똑같다. 그러나 내부적으로는 차이가 있다.
      <p><strong><span style="font-size:22px;">coding</span></strong></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>coding</h3>
      • 편집기를 이용해서 글을 쓴다는 것이 내부적으로는 HTML 코드를 생산하는 행위임을 알 수 있다.
      • 지식인의 제목은 깔끔하다. 그리고 <h3> 태그로 감싸기 때문에 어디서부터 어디까지가 세 번째로 중요한 제목이라는 정보가 코드상에 나타난다.
      • 하지만 일반인이 작성한 코드를 보면 <strong> 태그를 통해 단지 글자를 진하게 표시하고 font-size:22px이라는 CSS 코드를 이용해 디자인적으로 꾸며져 있을 뿐이다.
      • 그렇다면 일반인이 쓴 'coding'과 아무런 꾸밈이 없는 'coding'이라는 텍스트는 동급이다.
      • 하지만 CSS 코드로 꾸며져 있는 'coding'과 지식인이 쓴 <h3> 태그로 감싼 'coding'은 완전히 격이 다르다.
      • 이 차이가 별거 아닌 것처럼 보일 수 있지만 이것이 얼마나 중요한지 검색 엔진으로 확인가능하다.
      • 검색 엔진은 전 세계의 모든 웹 페이지를 내려받아 그 웹 페이지에 담긴 HTML 코드를 분석한다.
      • 그 분석은 태그에 근거해서 정리 정돈하기 때문에 제목이 'coding'인 사이트와 그냥 시각적으로 제목처럼 보이는 'coding'이라는 정보를 가진 사이트 중에서 전자의 경우가 검색하였을 때 좀 더 위쪽에 올라오고 후자는 100페이지 뒤에서나 나타나게 될 것이다.
      • 경우에 따라서 문서를 예쁘게 보이기 위해 이미지로 글을 쓰는 경우가 있는데 이럴 경우 검색 엔진에게는 존재하지 않는 페이지가 되기 때문에 HTML의 의미에 맞게 정확하게 사용해야 한다.
      • 이러한 문제는 비즈니스 측면에서 정말 생명줄과 같은 중요한 문제라는 것을 인지하여야 한다.

       

      • HTML이 중요한 또 하나의 이유가 있다.
      • 웹의 핵심적인 철학은 접근성이며, 웹은 저작권이 없는 순수한 공공재이다. 이러한 개방성 또는 접근성을 accessibility라고 한다.
      • 접근성 중 하나는 신체적인 장애가 있는 분들도 정보로부터 소외당하지 않도록 노력해야 한다는 것이다.
      • 웹 페이지를 예쁘게 만들려고 문자까지 이미지로 만든다면 시각 장애가 있는 분들에게는 존재하지 않는 정보가 된다.
      • 시각장애인을 배려하기 위한 여러 가지 기술과 테크닉이 있지만 가장 중요한 것은 HTML의 태그를 정확히 알고 의미에 맞게 사용하는 것이다.

       

       

       

       

       

       

      11. 최후의 문법 속성과 <img> 태그

      • HTML의 가장 중요한 문법인 태그를 배웠고, 이제 속성이라고 하는 태그의 심화된 문법을 배울 것이다.
      • 웹 페이지를 좀 더 화려하게 하기 위하여 사진을 넣는 방법을 살펴보자.
      • 이미지를 웹 페이지에 포함시킬 때 사용하는 태그의 이름은 <img>이다. image의 줄임말이다.
      • <img> 태그를 그냥 넣으면 사진은 보이지 않으며, 어떤 이미지를 보여줄 것이라는 이야기가 없기 때문이다.
      • 태그라는 문법을 만든 컴퓨터 공학자들은 태그의 이름만으로는 정보가 부족하다는 것을 인식하고 새로운 문법을 출현시킨다.
      • 어떤 이미지인지 알려주도록 약속된 속성이 source인데 너무 길기 때문에 줄여서 src로 쓴다. 여기에 원하는 이미지의 주소를 적으면 웹 브라우저는 그곳에 위치한 이미지를 표시한다.

       

      • 저작권에 구애받지 않고 사용할 수 있는 고품질 이미지 사이트
       

      아름다운 무료 이미지 및 사진 | Unsplash

      어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.

      unsplash.com

      • 이미지를 임의로 선택하기 위하여 위 사이트에서 'coding'으로 검색해서 이미지를 선택한 후 이미지를 내려받는다.
      • 그리고 파일을 저장할 때 현재 작업 중인 디렉터리 안에 저장한다.
      • 내려받은 이미지 이름이 길어 'coding.jpg'로 바꾼 후 <img> 태그의 src 속성에 'coding.jpg'를 넣고 저장 후 새로고침하면 이미지가 나타난다.
      • 이미지가 너무 크다면 다음과 같이 이미지 크기를 조절해서 자동으로 웹 브라우저의 크기에 맞게 이미지의 크기를 바꿀 수 있다.
      <h1>HTML</h1>
<p>
    Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. 
    Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. 
    HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="coding.jpg" width="100%">
</p>
<p style="margin-top:40px;">
    HTML elements are the building blocks of HTML pages. 
    With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. 
    It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. 
    HTML elements are delineated by tags, written using angle brackets.
</p>

       

      • <img>태그를 통해 속성이란 문법을 정리하면 속성은 Attribute라고 하며 <img> 태그의 src나 width와 같은 부분을 말한다. 이 속성은 아무 위치에나 쓰면 된다.
      • 태그가 태그의 이름만으로는 정보가 부족할 때 이 같은 속성을 통해 더 많은 의미를 부가할 수 있다고 이해하면 된다.
      • <img> 태그는 HTML의 인기있는 25가지 태그 중 하나로 86.3%가량 사용되고 있는 인기있는 태그이다.

       

       

       

       

      해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

      CSS 편 - 1일차  (0) 2025.05.04
      HTML 편 - 5일차  (2) 2025.05.03
      HTML 편 - 4일차  (1) 2025.05.02
      HTML 편 - 3일차  (1) 2025.05.01
      HTML 편 - 1일차  (2) 2025.04.29

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바