[HTML5] HTML/CSS 1일차

HTML / CSS

✔ Preview

meta, 제목태그, 문단태그, 목록태그 등 기본적인 태그의 사용법 및 속성 활용

 

---

✍ Tag Summary

Meta

: <meta> 태그는 메타데이터를 정의할 때 사용하는 태그이며 닫는 태그가 따로 없는 빈태그이다. 보통은 인코딩 설정 등을 할 때에 주로 사용함.

* 빈태그 : 닫는 태그가 없는 경우

<meta charset="UTF-8">

* EUC-KR: 한글만 사용 가능, UTF-8: 한글과 한자 모두 사용 가능

 

 

Title

: <title> 태그는 제목 표시줄의 문서 제목을 정의하는 태그이다.

<title>제목을 입력하세요.</title>

 

 

Header (h1 ~ h6)

: <h1> ~ <h6> 태그는 제목을 나타내는 태그이고, h1이 가장 크며 h6에 가까워질수록 글씨 크기가 작아진다.

<h1>가장 큰 크기의 제목입니다.</h1>
<h6>가장 작은 크기의 제목입니다.</h6>

 

 

Paragraph (p)

: <p> 태그는 하나의 문단(Paragraph)을 만들 때 사용된다.

<p>삽입하고자 하는 문단을 여기에 적으세요.</p>

 

 

Unordered List (ul)

: <ul> 태그는 목록태그로서 순서가 없는 목록을 만들 때 사용된다. 여러 항목들을 나열하는 경우, List(li) 태그인 <li>를 사용한다.

<ul>
	<li>목록1</li>
	<li>목록2</li>
	<li>목록3</li>
</ul>

 

 

Ordered List (ol)

: <ol> 태그는 목록태그로서 순서가 있는 목록을 만들 때 사용된다. 여러 항목들을 나열하는 경우, <ul> 태그와 마찬가지로 <li> 태그를 사용한다.

<ol>
	<li>1번항목</li>
	<li>2번항목</li>
	<li>3번항목</li>
</ol>

 

 

Preformatted Text (pre)

: <pre> 태그는 미리 정의된(Preformatted) 형식의 텍스트를 정의할 때 사용된다. <p> 태그와는 다르게 여기에서는 띄어쓰기나 엔터도 그대로 표현된다.

* 주로 프로그래밍 코드를 적을 때 사용

 

 

Details

: <details> 태그는 부가적인 세부사항을 나타낼 때 사용된다. 이 태그를 활용해 내용을 숨기거나 보여줄 수 있으며 open 속성을 설정하기 전까지는 기본적으로 숨겨져 있는 상태로 보인다.

<details>
	<summary>토글 제목</summary>
	<p>p태그를 넣어서 문단을 만들 수도 있고</p>
	<ul>
		<li>리스트로</li>
		<li>목록을</li>
   		<li>보여줄</li>
   		<li>수도</li>
		<li>있습니다.</li>
	</ul>
</details>