[HTML] HTML 이해하기, HTML 태그

 

1. HTML 이해하기

- 기본적으로 HTML은 두 칸 이상의 공백을 모두 무시한다.

2. HTML 태그

 

1) <a> 태그

 

✅ anchor 태그 == a태그 == 앵커 == 링크 

e.g. 

<a href="http://www.naver.com/" target="_blank">네이버</a>

 

href 속성

✅ hypertext reference 속성

✅ href 속성의 값은 링크의 목적지가 되는 URL

 

target 속성

✅ 링크된 리소스를 어디에 표시할지를 나타내는 속성

✅ 속성값

  -  _self : 현재 화면에 표시한다는 의미. target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다.

  -  _blank : 새로운 창에 표시한다는 의미. 외부 페이지가 나타나게끔 하는 속성

  -  _parent와 _top : 프레임이라는 특정 조건에서만 동작하는 속성. 최근에는 프레임을 잘 쓰지 않는다.

 

내부링크

✅ <a>태그를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있음 

✅ 내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

e.g. 

<a href="#some-element-id">이동하기</a>

 

2) 리스트 요소

 

 <ul> 태그

✅ ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다.

✅ <ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

 

 <ol> 태그

✅ ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용한다.

✅ <ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

 

 <dl> 태그

✅ dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용한다.

✅ <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조

e.g

<dl>
	<dt>딱지</dt>
	<dd>귀여운 고양이</dd>
</dl>

<!-- 
<dt> : 용어를 나타내는 태그
<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그
-->

 

---

학습을 위해 부스트코스 비전공자를 위한 HTML/CSS 강의를 보고  정리한 글입니다.

 

Reference

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS