HTML 문서구조 #2 구조를 설정을 위한 요소 학습하기

<p>

 - 문단의 시작과 끝에 p요소를 지정!

 

<pre>

 - 공백을 포함한 입력한 텍스트가 그대로 웹 브라우저에 출력 되어진다. 

 - 컴퓨터 코드나 문자 그림을 표현하는데 적합하다. 

 

<hr> 

 - 문단 레벨에서 주제를 분리

 - 단일요소로 사용 되어진다. 

 - 하나의 선이 생성 되어진다.  

- 아래의 선이 <hr> tag를 사용해서 만든 선이다. 

---

목록 

 - 순서가 있는 목록 : <ol> 요소

 <ol>
            <li>선발타자</li>
            <li>후발타자</li>
            <li>후보</li>
 </ol>

 - 아래와 같이 표현 되어진다. 

1. 선발타자
2. 후발타자
3. 후보

- 순서가 없는 목록 : <ul> 요소 - 말머리 기호로 표현이 되어진다. 

        <ul>
            <li>선발타자</li>
            <li>후발타자</li>
            <li>후보</li>
        </ul>

 

- 정의 목록 

  - 사전적 정의를 위해 사용

  - 하나 이상의 '정의 제목' '정의 내용'의 쌍으로 이루어진다. 

 <dl> 정의 목록 요소

 <dt> 정의 목록 제목 요소 

 <dd> 정의 목록 데이터 요소

<dl>
	<dt>정의는 중요하죠</dt>
    <dd>정의는 진짜 중요하다 책</dd>
</dl>

 

<figure> 

 - 사진, 일러스트, 비디오 등을 표시하고 주석을 다는 용도.

 

<div> 

 - 콘텐츠를 분리하기 위해서 사용 되어진다. 

 

  << 전역 속성 : 모든 요소에서 사용 가능

id 속성 : HTML 코드 내 유일한 식별자

 <img id="Button" src="Button.jpg">

 

class 속성 : 같은 값 다수 가질 수 있다, 여러 요소에 동일한 스타일, 동작 등을 적용하기 위해 사용 

 <p class="Yellow Text">노란색 글씨</p>

 <p class="blink Text">깜빡이는 글씨</p>

 

title 속성 : 요소의 조언 정보를 나타낸다.

 

 

텍스트 관련 요소

 <a>  하이퍼링크를 나타낸다. 

- <a href="/">Home</a> 

   tip ! target 속성 

        -  _self : 현재의 웹 브라우저 창에서 링크가 열린다. 

        -  _parent : 현재의 웹 부라우저 창의 부모 창이 있다면 그 부모 창에서 열린다.

        -  _top : 최상의 웹 브라우저 창에서 열린다. 

        -  _blank : 새로운 웹 브라우저 창을 생성하고 링크가 열린다. 

  <a href="/" target="_blank">Home</a> 

 

<em> 내용을 강조하기 위해 사용한다. 

<strong> 내용이 중요함을 표시한다. 

<q> 인용을 나타내는 인라인 요소

<cite> 인용 문구의 원본 주소

<abbr> 약어 및 두문자어 나타낸다. 

<p>최근 <abbr title="Information Technology">IT</abbr>주식이 많이 올랐다.</p>

최근 

IT

주식이 많이 올랐다.  - 이렇게 표현 된다. IT에 마우스 가져다 놓으면 알 수 있음.

 

<i> 문장 내에서 다른 나라 언어를 사용할 때 주로 사용. 

<b> 눈에 띄게 하기 위해 사용한다. 

<sup>, <sub> 위첨자, 아래첨자 

        <p>2<sup>5</sup></p>
        <p>co<sub>2</sub></p>

2⁵

co_{2  - 형식으로 표현되어진다.} 

_{<span> : 인라인 레벨에서 줄 바꿈 없이 콘텐츠를 분리.}

_{<br> 문단 분리가 아닌 줄바꿈을 표시한다.}

_{<img> 이미지를 의미한다.  src : 이미지 경로 지정, alt : 대체 위한 텍스트}