[HTML] 텍스트,리스트,이미지/비디오,하이퍼링크

link717·2020년 8월 8일
0

HTML

목록 보기
5/5
post-thumbnail

🌼 HTLM(Hyper Text Markup Language)

HTML은 HyperText Markup Landuage의 약자로 웹 사이트의 기본 구조를 정의할 때 사용한다. HyperText는 서로 다른 웹페이지를 연결한다는 의미를 갖고 있으며 Markup은 웹페이지의 컨텐츠들을 구조화할 때 사용하는 여러가지 태그들을 의미한다. 또 다른 Markup 언어로는 XML(extensible markup language), GML(generalised markup language) 등이 있다.

🌼 Tag(element)

HTML 요소들은 'tag'라고 부르며 "<"과 ">"을 태그 이름으로 감싼 형태이다. 이 때, 태그의 이름은 대문자/소문자 혹은 대,소문자가 섞인 형태로도 쓰여질 수 있다. 기본은 소문자 형태를 사용한다.

  • <!DOCTYPE html> : html5의 선언문으로 버전별로 차이가 있다. html 구조를 잡을때는 버전을 미리 선언해서 내용을 올바르게 표시할 수 있도록 해야하며 html 태그 앞, 문서의 가장 최상단에 위치한다.

  • <head>: 메타 데이터의 집합을 정의할 때 사용한다. head에 입력된 요소들은 화면에 표시되지 않는다. 메타 데이터는 일반 사용자는 읽을 수 없지만 컴퓨터가 처리해야하는 html 문서와 관련된 정보들이 담겨 있다. <title>, <style>, <link>, <meta>, etc.

  • <body>: html 화면을 구성할 때 사용하며 text, image, video 등의 여러가지 종류의 구성 요소들을 감싸며 HTML 문서에는 단 하나의 body 요소만이 존재할 수 있다.

  • <title>: 웹페이지의 이름을 정의할 때 사용하며 제목 표시줄 혹은 페이지 탭의 제목으로 노출된다.

  • <!--text-->: 코드 작성시 주석 입력의 용도로 사용하거나 코드를 주석처럼 변경할 때 사용한다. test로 코드 변경시 예전 코드를 훼손하지 않고 비활성화할 수 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="여기는 사이트에 대한 설명을 적는 위치입니다."></meta>
    <!--이렇게 적은 설명은 사이트 검색시 링크 아래의 설명 형태로 노출됩니다.-->
  </head>
    <title>Study</title>
    <!-- 주석 내용 -->
  <body></body>
</html>

🌼 텍스트 관련 요소

  • <div>, <span>: 어떠한 기능도 의미도 없이 특정 영역을 CSS로 꾸미는 기능을 주고 싶을때 사용한다.
  • <h1> ~ <h6>: h는 heading을 의미하며 기사의 헤드라인 혹은 text의 제목을 강조할 때 사용한다.

  • <p>: p는 paragraph을 의미하며 줄 글의 형태의 text 정보를 입력할 때 사용한다.

  • <br>: br은 break를 의미하며 단락을 줄바꿈할 때 사용되며 클로징 태그가 없다.

    • \n: escape character(문자열 내에서 특수한 기능을 사용하는 문자)로 br과 동일하게 단락을 줄바꿈하는 기능으로 사용할 수 있다.

    • &nbsp(non-breaking space): 문자열 내에서 띄어쓰기의 기능을 수행

<body>
  <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>
      The brown bear (<em>Ursus arctos</em>) is native to parts of northern
      Eurasia and North America. Its conservation status is currently
      <strong>Least Concern.</strong><br /><br />
      There are many subspecies within the brown bear species, including the
      Atlas bear and the Himalayan brown bear.
    </p>
    <h3>Species</h3>
    <h3>Features</h3>
  </div>
</body>

Q. html에 비슷한 기능을 하는 태그가 있을 경우, 무엇을 쓰는 것이 좋을까?

  • 정답은 없다. 하지만 html 언어의 목적이 웹사이트의 구조를 정의할 때 사용하는 언어이기 때문에 스타일 적인 요소보다는 강조의 의미가 있는 태그를 사용하는 것이 html이라는 언어의 특성을 생각했을 때 더 좋은 선택이지 않을까 싶다.

    • <i>: text를 italic 스타일로 입력할 때 사용한다.
    • <em>: em은 emphasis를 의미하며 문장을 italic 스타일로 강조할 때 사용한다.

    • <b>: 문장을 Bold 스타일로 입력할 때 사용한다.
    • <strong>: 문장을 Bold 스타일로 강조할 때 사용된다.

🌼 리스트 관련 요소

  • <ul>: ul은 unordered list를 의미하며 별도의 순서가 없는 리스트를 의미한다. 순서가 없기때문에 기본 스타일로 list 앞에 숫자가 아닌 글머리 기호가 붙는다.

  • <ol>: ol은 ordered list를 의미하며 별도의 순서가 있는 리스트를 의미한다. 순서가 있기 때문에 기본 스타일로 list 앞에 숫자 형태의 기호가 붙는다.

  • <li>: li는 list를 의미하며 ul과 ol로 구분된 리스트 아이템을 표현할 때 사용한다.

<body>
 <div>
   <h3>Species</h3>
   <ul>
     <li>Arctos</li>
     <li>Collarus</li>
   </ul>
   <h3>Countries with Large Brown Bear Populations</h3>
   <ol>
     <li>Russia</li>
     <li>United States</li>
   </ol>
 </div>
</body>

🌼 이미지/비디오 관련 요소

  • <img />: img는 image를 의미하며 일반적인 태그들과 다르게 self-closing 형태이다. 이미지 타입의 데이터를 표현할 때 사용하며 태그 안의 여러가지 attribute를 사용하여 이미지의 속성을 정의할 수 있다.

    • src: image의 source attribute를 의미하며 나타낼 이미지의 주소를 정의하는 위치이다.

    • alt: alternative text를 의미하며 image에 대한 정보 설명시 사용한다. 이미지를 음성언어로 전환시 해당 정보를 대신 읽을 수 있는 장점(SEO: Search Engine Optimization)이 있고 관련 이미지 조회시 검색어와 일치할 경우, 해당 정보로 웹브라우저 상위에 랭크 될 수 있다.

  • <video>: 동영상 타입의 데이터를 표현할 때 사용한다.

    • width, height: 동영상 데이터의 사이즈를 정의할 때 사용하는 attribute로 video tag 안에 재생될 동영상 크기를 반드시 지정해줘야 한다.
    • control : 동영상 데이터의 pause, play, skip 등의 기능을 재공한다.
    • text: video tag 사이에 입력된 text는 동영상이 재생되지 않을 때 안내 문구를 정의할 때 사용한다.
  • <source>: video 태그 안에서 여러 형태의 동영상 타입(.mp4, ogg, etc.) src를 정의할 때 사용한다. 브라우저는 여러 소스 포맷중에 해당 브라우저에서 지원하는 첫번째 소스를 보여준다.

<!--video tag에 직접 src를 정의할 수 있지만 권장하지는 않는다.-->
<div id="media">
  <h2>Media</h2>
  <img src="https://via.placeholder.com/150" alt="Media" />
  <video src="video-url.mp4" width="320" height="240" controls>
    Video not supported
  </video>
</div>
<!--모든 브라우저에서 동일한 UX를 주기 위해 여러가지 타입을 정의하는 것이 좋다.-->
<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
  Sorry, your browser doesn't support embedded videos.
</video>

🌼 하이퍼 링크 관련 요소

  • <a>: a는 anchor를 의미하며 web page 간 혹은 web page 내 화면을 연결할 때 사용한다. anchor 사이의 문자는 Hyperlink의 이름이며 anchor 사이에 img tag를 사용하면 text 형태가 아닌 image 형태의 hyperlink를 사용할 수 있다.

    • href: href는 hyperlink reference를 의미하며 anchor와 같이 사용하여 연결하고자 하는 경로를 활성화할 때 사용하는 attribute이다. href 입력시 각각의 페이지가 같은 폴더에 있다면 relative path로 대체해서 사용이 가능하다. (href="./name.html)

    • id: div와 함께 사용하여 구역별 정보를 제공하는 용도로 사용한다. a tag와 함께 사용하면 같은 화면에서 원하는 단락으로 이동할 수 있다. (href="#id")

    • target: link로 연결된 웹브라우저를 어떤 형태로 열 것인지 정의한다.
      (새탭 혹은 새창으로 열기: *_balnk : 새창으로 열기)

<html>
  <head>
    <title>Brown Bears</title>
	</head>
  <body>
    <ul>
      <li>
        <a href="#introduction">Introduction</a>
      </li>
    </ul>
    <a href="./index.html" target="_blank">
      <img src="https://en.wikipedia.org/wiki/Brown_bear" />
    </a>
    <a href="./aboutme.html">About Me</a>
    <h1>The Brown Bear</h1>
    <div id="introduction">
      <h2>About Brown Bears</h2>
      <p>
        The brown bear (<em>Ursus arctos</em>) is native to parts of northern
        Eurasia and North America. Its conservation status is currently
        <strong>Least Concern</strong>.<br /><br />
        There are many subspecies within the brown bear species, including the
        Atlas bear and the Himalayan brown bear.
      </p>
      <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"
        >Learn More</a
      >
    </div>
  </body>
</html>

출처: Codecademy, MDN

profile
Turtle Never stop

0개의 댓글