미완성 블로그입니다

본문에 텍스트 작성하기

  • 기본적으로, body 태그 안에 본문을 작성합니다.
...
<body>
body 태그 안에 특별한 태그 없이도 텍스트를 바로 작성할 수 있습니다.
그런데, 단락을 사용하지 않으면, 실제로 줄 바꿈이 적용되지 않습니다.
</body>

단락

  • 단락(paragraph)는 <p>…</p> 태그로 정의됩니다.
  • 단락을 사용하면, 웹 브라우저는 자동으로 단락의 전후에 빈 줄을 추가합니다.
...
<body>
<p>이렇게 하면 p 태그 안의 내용은 하나의 단락이 됩니다.</p>
<p>실제로 이 단락은 바로 위 단락의 다음 줄부터 출력됩니다.</p>
</body>

줄 바꾸기

  • <br> 태그를 사용하여 줄을 바꿀 수도 있습니다. 주로 하나의 단락 안에서 사용하거나, 빈 줄을 추가할 때 사용합니다.
...
<body>
<p>이렇게<br>단락 안에서도<br>break 태그로 줄 바꿈을<br>할 수 있습니다.</p>
<br><br>
<p>위 단락은 총 4줄이며, 단락 간 빈 줄을 추가할 수도 있습니다.</p>
</body>



  • 기본적으로 HTML 코드에서 space bar로 줄 바꿈을 할 수 없습니다.
  • 다만, <pre> 태그 안에 작성한다면, space나 tap 등 입력한 그대로 출력할 수 있습니다.
...
<body>
<pre>
pre 태그를 사용하면

이렇게 space bar로 줄바꿈해서 작성한 html 파일도


줄 바꿈이 적용되어 출력됩니다.
</pre>
</body>

Heading

  • h1부터 h6까지 6가지 종류의 태그로 작성 가능
  • h1이 가장 큰 텍스트 사이즈, h6이 가장 작은 텍스트 사이즈이다.

h1로 작성한 텍스트입니다. (가장 큰 텍스트)

h6로 작성한 텍스트입니다. (가장 작은 텍스트)
<body>
<h1>h1로 작성한 텍스트입니다. (가장 큰 텍스트)</h1>
<h2>h2로 작성한 텍스트입니다.</h2>
<h3>h3로 작성한 텍스트입니다.</h3>
<h4>h4로 작성한 텍스트입니다.</h4>
<h5>h5로 작성한 텍스트입니다.</h5>
<h6>h6로 작성한 텍스트입니다. (가장 작은 텍스트)</h6>
</body>

텍스트 서식

<b>...</b> <!-- 볼드체로 만든다 -->
<i>...</i> <!-- 이탤릭체로 만든다 -->
<strong>...</strong> <!-- 텍스트를 강하게 표시한다 -->
<em>...</em> <!-- 텍스트를 강조한다 -->
<code>...</code> <!-- 텍스트가 코드임을 표시한다 -->
<sup>...</sup> <!-- 위첨자(superscript) -->
<sub>...</sub> <!-- 아래첨자(subscript) -->
  • 사용 예시
볼드체로 만든다
이탤릭체로 만든다
strong 텍스트
emphasized 텍스트
This text is code
subscript 와 superscript


수평선 : <hr> 사용

<p>수평선은 horizontal line 입니다.</p>
<p>바로 아래 수평선이 있습니다.</p>
<hr>      <!-- 수평선을 추가하고 줄을 바꿉니다. -->
<p>바로 위에 수평선이 있습니다.</p>

특수 문자

HTML 코드 실제 문자 설명
&lt; < Less Than (작다)
&gt; > Greater Than (크다)
&amp; & Ampersand (앤퍼샌드)
&quot; " Quotation Mark (큰따옴표)
&apos; ' Apostrophe (작은따옴표)
&nbsp; (공백) Non-Breaking Space (줄바꿈 없는 공백)
📌 클릭하여 더 자세한 표 보기
HTML 코드 실제 문자 설명
&lt; < Less Than (작다)
&gt; > Greater Than (크다)
&amp; & Ampersand (앤퍼샌드)
&quot; " Quotation Mark (큰따옴표)
&apos; ' Apostrophe (작은따옴표)
&nbsp; (공백) Non-Breaking Space (줄바꿈 없는 공백)
&copy; © Copyright (저작권)
&reg; ® Registered Trademark (등록 상표)
&trade; ™ Trademark (상표)
&cent; ¢ Cent (센트)
&pound; £ Pound (파운드)
&yen; ¥ Yen (엔화)
&euro; € Euro (유로화)
&deg; ° Degree (도)
&plusmn; ± Plus-Minus (플러스 마이너스)
&times; × Multiplication (곱하기)
&divide; ÷ Division (나누기)
&sum; ∑ Summation (시그마, 합계)
&infin; ∞ Infinity (무한대)
&alpha; α Greek Alpha (알파)
&beta; β Greek Beta (베타)
&gamma; γ Greek Gamma (감마)
&delta; δ Greek Delta (델타)
&pi; π Greek Pi (원주율)
&radic; √ Square Root (제곱근)
&hearts; ♥ Heart Symbol (하트)
&spades; ♠ Spade Symbol (스페이드)
&clubs; ♣ Club Symbol (클로버)
&diams; ♦ Diamond Symbol (다이아몬드)

리스트

  • <ul> : 번호 없는 리스트 (unordered list)
  • <ol> : 번호 있는 리스트 (ordered list)

<ol> 태그에는 type 속성을 지정할 수 있다.

📌 클릭하여 설명 보기
타입 (type 속성) 설명 예제
type="1" 숫자 리스트
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
type="a" 소문자 알파벳 리스트
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
type="A" 대문자 알파벳 리스트
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
type="i" 소문자 로마 숫자 리스트
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
type="I" 대문자 로마 숫자 리스트
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
📌 코드 블럭 보기 
<ol type="1">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ol type="a">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ol type="A">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ol type="i">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>

<ol type="I">
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ol>
  • <li> : 리스트 항목 (list)
<ul>
    <li>번호 없는 리스트 항목1</li>
    <li>번호 없는 리스트 항목2</li>
    ...
</ul>

<ol>
    <li>번호 있는 리스트 항목1</li>
    <li>번호 있는 리스트 항목2</li>
    ...
</ol>
📌 클릭하여 실제 출력 결과 보기
  • 번호 없는 리스트 항목1
  • 번호 없는 리스트 항목2
  1. 번호 있는 리스트 항목1
  2. 번호 있는 리스트 항목2


  • 정의 리스트(definition lists)
<dl>
    <dt>California</dt>
    <dd>Los Angeles, Sacramento, San francisco</dd>
    <dt>Texas</dt>
    <dd>Houston, Austin, Dallas</dd>
</dl>
📌 클릭하여 실제 출력 결과 보기
California
Los Angeles, Sacramento, San francisco
Texas
Houston, Austin, Dallas



——-이곳으로 이동했습니다.——-

링크

  • <a> 태그로 하이퍼링크를 정의한다. a는 anchor를 의미한다.
  • href 속성은 hyper reffernce를 의미한다.
  • target 속성은 링크 클릭 시, 페이지가 열리는 장소를 지정한다.
속성 설명 예제
_blank 새로운 탭(또는 창)에서 링크를 엽니다. 네이버 링크
_self 현재 창(또는 현재 프레임)에서 링크를 엽니다. (기본값) 네이버 링크
_parent 부모 프레임에서 링크를 엽니다. (프레임이 없으면 _self와 동일) 네이버 링크
_top 전체 창에서 링크를 엽니다. (프레임 구조를 무시하고 최상위 창에서 열림) 네이버 링크 
<!-- 새로운 창에서 네이버 홈으로 가는 링크를 설정한다 -->
<a href="https://www.naver.com" target="_blank">네이버 링크 바로가기</a>
📌 클릭하여 실제 출력 결과 보기
네이버 링크 바로가기
  • <a> 태그를 사용해 사용자를 현재 페이지의 다른 위치로도 이동시킬 수 있다.
<a href="#linksection">링크 목차로 다시 이동합니다.</a>

직접 해보기

  • 이메일 링크, 다운로드 링크
<a href="mailto:(메일주소)?subject=Feedback">메일 보내기</a>
<a href="(파일 주소)">파일 다운로드</a>

태그:

카테고리:

업데이트:

참고