본문 바로가기

front-end/html

day01_format

<!--
     서식 태그

    ▶ <strong> , <b> 태그
        감싼 내용을 굵게  표현

    ▶ <i> , <em> 태그
        감싼 내용을 기울이게 표현

    ▶ <mark> 태그
        감싼 내용을 하이라이팅 표현

    ▶ <del> 태그
        감싼 내용의 중앙에 가로 줄을 그어서 지운 효과 표현

    ▶ <ins> 태그
        감싼 내용의 아래에 가로 줄을 그어서 강조 효과 표현

    ▶ <sup> , <sub> 태그
        감싼 내용을 위 첨자 , 아래 첨자로 표현
        제곱이나 화학기호(H2O) 같은거 사용할 때 표현

    ▶ 단축키
        주석 : Ctrl + /
        기본 html 세팅 : ! + tab키
        서식태그 단축키 : 서식태그 이름 + tab키
        Open with Live Server : Alt + L -> Alt + O
        Alt + 커서 : 공통 선택
 
 
 
     내용을 명령어로 인식하지 못하도록 하는 문법

      < : &lt; (less than)
      > : &gt; (greater than)
      & : &amp; (ampersand)
      " (인용) : &quot; (quotation)
      " (진짜 따옴표) : &ldquo;
      " : &rdquo;
      ' : &lsquo;
      ' : &rsquo;
      공백 : &nbsp;
      줄바꿈 : <br>

 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="https://image9.coupangcdn.com/image/coupang/favicon/v2/favicon.ico" type="image/x-icon">
    <title>서식태그 숙제</title>
</head>
<body>

    <strong>일상의 혁신을 위한 디지털 전환</strong>
    <em>플랫폼</em>을 통해 <mark>이용자가 및 파트너</mark>가 보다 편리하고 <del>효율적</del>으로 <ins>디지털 기술의 혜택을 누릴 수 있도록</ins>
    <sup>디지털</sup> <sub>전환을</sub> 돕습니다.
<br>
<br>
    <h1>&quot;10&quot;이 100보다 작다<br>
        10 &lt; 100
        &gt;<br>
        &amp;<br>
        안녕&nbsp;&nbsp;&nbsp;하세요
<br>
<br>
    <strong>무슨 일이든 &quot;본질&quot;</strong><br>
    <I>남기고 처음부터</I><br>
    <mark>다시 생각해 봅니다.</mark><br>
    &quot;Back to Basic&quot;<br>
    <ins>&ldquo;원래 그게 당연한거 아냐?&rdquo;</ins><br>
    <sup>불편</sup>하고 <sub>복잡</sub>한 게 <b>당연할 리 없습니다.</b><br>
    <em>그래서 우리는 <del>본질</del>에서 출발합니다.</em><br>
    시작부터 &nbsp;&nbsp;&nbsp;다르게&nbsp;&nbsp;&nbsp; 질문합니다.<br>
    <strong>끊임없이 &lsquo;왜?&rsquo;라는 물음을 던집니다.</strong><br>
    그렇게 익숙한 것을 &quot;새롭게&quot;, &quot;가치 있게&quot; 만듭니다.
   
</body>
</html>

실행결과 1
실행결과 2
실행결과 3