HTML/CSS 3.TAG1 - basic/text/link

정선용·2022년 3월 8일
ITIT > TECHIT > TECH > FEIT > TECH > FE > html/css
0

프론트엔드 기본기(2022)

목록 보기
5/15
post-thumbnail

3. TAG

3.1 Basic TAG

  • 문서 형식정의 tag

    문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다.
    • HTML5
      <!DOCTYPE html>
    • HTML 4.01
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • XHTML 1.0
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • html tag

    ○ html : html의 프레임을 나타내는 태그, 문서에 1번만 등장한다. 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외,
    html은 lang이라는 attribute를 가지며 글로벌 어트리뷰트 중 언어를 나타냄 ex ) <html lang="ko">
    <!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>문서 제목</title>
  </head>
  <body>
    화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
  </body>
</html>
    • a. head : 메타데이터를 포함하기 위한 요소이며 웹페이지에 단 하나만 존재. 메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.
      • a.1. title : 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시.
      • a.2. style : HTML 문서를 위한 style 정보를 정의한다.
        <head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
  body {
    background-color: yellow;
    color: blue;
  }
</style>
</head>
      • a.3. link : 외부 리소스와의 연계 정보를 정의. 주로 HTML과 외부 CSS 파일을 연계에 사용.
        <head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
      • a.4. script : client-side JavaScript를 정의
        <head>
<meta charset="utf-8">
<script>
  document.addEventListener('click', function () {
    alert('Clicked!');
  });
</script>
</head>
        js모듈(파일)을 로드할 수도 있다.
        <head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
      • a.5 meta : description, keywords, author, 기타 메타데이터 정의에 사용. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용되고, 그 중 charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의.
        <head>
<meta charset="utf-8">
</head>
        SEO를 위해 keywors 태그를 정의한다. : 검색엔진이 사용할 키워드 의미.
        <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta http-equiv="refresh" content="30">
<meta name="author" content="John Doe">
<meta name="description" content="Web tutorials on HTML and CSS">
        refresh, description,author는 각각 몇 초마다 웹페이지를 refresh할지, 페이지 설명, 저자를 의미한다.
    • b.body : HTML 문서의 내용. metadata를 제외한 모든 페이지 구성요소들

3.2 text TAG

  • 제목 (Headings) tag

    Heading 태그: 제목, h1에서 h6까지 존재.
    h1에 가까울수록 중요, 텍스트 사이즈 큼.
    시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋다. 검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 크다.

    <body>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>
  </body>

  • 글자 형태 (Text Formatting) tag

    • b : bold체 지정.
    • strong : b tag와 동일하게 bold체를 지정한다. 하지만 의미론적(Semantic) 중요성의 의미를 가짐.
      <p>normal</p>
<b>bold</b>
<strong>strong</strong>

      결과

      normal
      bold
      strong

    • i : Italic체를 지정한다. 의미론적(Semantic) 중요성의 의미는 없음.
    • em : emphasized(강조, 중요한) text를 지정한다. i tag와 동일하게 Italic체를 지정. 의미론적(Semantic) 중요성의 의미를 가짐.
      <p>normal</p>
<i>i tag</i>
<em>em tag</em>

      결과

      normal
      i tag
      em tag

    • small : small text를 지정.
      <p>normal</p>
<small>small</small>

      결과

      normal
      small

    • mark : highlighted text를 지정.
    • del : deleted (removed) text를 지정.
    • ins : inserted (added) text를 지정
    • sub / sup : sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정.
      <p>normal</p>
<small>small</small>
<p>HTML <mark>Marked</mark> Formatting</p>
<br>My favorite color is <del>blue</del> red</br>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

      결과

      normal
      small
      HTML Marked Formatting
      My favorite color is blue red
      My favorite color is red.
      This is subscripted text.
      This is superscripted text.

  • 본문 tag

    • p : 단락 (Paragraphs)을 지정
      <body>
 <h1>This is a heading.</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

      This is a heading.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • br : (강제)개행 (line break)을 지정. br tag는 빈 요소(empty element)로 종료태그가 없음.
      HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시, 1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시
      연속된 개행은 <br>, 연속된 공백은 &nbsp;으로 표시한다.
    • pre : 형식화된(preformatted) text를 지정. pre 태그 내의 content는 작성된 그대로 브라우저에 표시.
    • hr : 수평줄을 삽입.
       <body>
 <p>normal text</p>
 <hr>
 <pre>
var myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true;  // [ , , ... , , true ]
console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
   </pre>
</body>

      normal text

      var myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true;  // [ , , ... , , true ]
console.log(myArray.length); // 1001
console.log(myArray[0]);     // undefined
    • q : 짧은 인용문(quotation)을 지정.
    • blockquote : 긴 인용문 블록을 지정.
      <body>
  <p>Browsers usually insert quotation marks around the q element.</p>
  <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </blockquote>
</body>

      Browsers usually insert quotation marks around the q element.

      WWF's goal is to: Build a future where people live in harmony with nature.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      velog도 모두 html태그를 사용하고 있던 것이고 마크다운 문법을 사용해서 html요소들을 제공해주고있었던 것. 위와같이 blockquote의경우 css로 여러가지 스타일 적용이 가능.

HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미.
: HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능이 하이퍼링크(hyper link)

  • a tag

    : a(anchor) - html의 하이퍼링크를 담당하는 태그.
    어트리뷰트로 href, target 등을 가진다.

  • href attribute

    : href 어트리뷰트는 a tag에서 이동하고자 하는 파일의 위치(경로)를 값으로 받으며 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미.

    • 디렉터리(Directory)
      디렉터리는 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재(폴더)

      • 루트 디렉터리
        파일 시스템 계층 구조 상의 최상위 디렉토리 ( Unix: / , Windows: C:)
      • 홈 디렉터리
        시스템의 사용자에게 각각 할당된 개별 디렉토리 ( Unix: /Users/{계정명} / Windows: C:\Users{계정명} )
      • 작업 디렉토리
        작업 중인 파일의 위치한 디렉터리이다. (./)
      • 부모 디렉터리 (../)

    • 1.2 파일 경로(File path)
      파일 경로는 파일 시스템에서 파일의 위치를 나타냄..

      • 절대경로(Absolute path)
        현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치(root기준)
      http://www.mysite.com/index.html
/Users/leeungmo/Desktop/myImage.jpg
C:\users\leeungmo\Desktop\myImage.jpg
/index.html
      • 상대경로(Relative path)
        현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치(부모,현재경로로 표시)
      ./index.html
../dist/index.js
../../dist/index.js
index.html
html/index.html

    • href attribute에 사용 가능한 value

      value설명
      절대 URL웹사이트 URL(href=”http://www.example.com/default.html”)
      상대 URL자신의 위치를 기준으로한 대상의 URL (href=”html/default.html”)
      fragment identifier페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
      메일mailto:
      scripthref=”javascript:alert(‘Hello’);”
       <!DOCTYPE html>
 <html>
   <body>
     <h2 id="top">Top of page!</h2>
     .
     .
     .
     <a href="http://www.google.com">URL</a><br>
     <a href="html/my.html">Local file</a><br>
     <a href="file/my.pdf" download>Download file</a><br>
     <a href="#top">fragment identifier: go to top</a><br>
     <a href="mailto:someone@example.com?Subject=Hello again">Send Mail</a><br>
     <a href="javascript:alert('Hello');">Javascript</a>
   </body>
 </html>

  • target attribute

    : arget 어트리뷰트 - 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정

    ValueDescription
    _self링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값)
    _blank링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다

    target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 존재. 따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장되고있음. 참고로 noopener 속성은 성능 상 이점도 있는 것으로 알려져있다.
    참고 ) tabnobbing 원리

profile
정선용
정선용
이전 포스트

HTML/CSS 2.HTML 시맨틱 요소와 검색엔진

다음 포스트

HTML/CSS 4.TAG2 - List/Table/Multimedia

0개의 댓글