HTML 요소 정리, 텍스트, 앵커(anchor),<div>태그와 <span>태그, 리스트 태그

텍스트를 꾸며주는 요소

• <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
• <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다. ( HTML5 버전에서는 의미를 가지는 태그)
• <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
• <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)

---

앵커(anchor) 요소

 

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다.

 

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다.

href 속성의 값은 링크의 목적지가 되는 URL입니다.

 

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

 

네이버

 

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성입니다.

속성값으로는 _self, _blank, _parent, _top이 있습니다.

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

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

_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로, 최근에는 프레임을 잘 쓰지 않음.

 

 

내부링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아닙니다.

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 합니다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자

하는 요소의 id 속성값을 적으면 됩니다.

 

ex) 웹페이지에서 맨 위로 기능

<a href="#top">000</a>

 

<a href="#some-element-id">회사 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">회사 소개</h1>

 

 

👇참고하기👇

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

 

 

---

의미없이 요소를 묶기 위한 태그 (container)

 

가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>입니다.

 

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그입니다.

블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현합니다. ex) <p>

반면, span 태그는 인라인 레벨 태그입니다.

인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다. ex) <b><i><u><s>

 

 

---

리스트

 

 

<ul>

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

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

각 재료는 나오는 순서가 바뀌어도 상관이 없으므로 이러한 것은 순서가 없는 리스트로 표현할 수 있습니다.

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

 

 

<ol>

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

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

콩나물국을 끓이는 순서를 나열한 리스트입니다.

이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <ol>을 사용해야 합니다.

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

 

 

 

<dl>태그

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

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

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

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

 

용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능합니다.

 

---

리스트 중첩할 때 <ul>,<ol> 밑에 <li>만 자식태그로 올 수 있다. 

<p><div>태그는 자식 태그로 못온다.