제발 제 코드에 훈수하세요

이전에 배운 h1-h6태그에서 아웃라인을 잘 정해줘야 한다고 했었다.

그 이유는 바로 네비게이션 바에 있다.

내비게이션은 지도에서 출발지부터 목적지까지의 경로를 잘 안내해준다.

이처럼 사이트를 지도라고 생각한다면 사이트 내에서 내비게이션 바는 관련된 모든 사이트를 갈 수 있는 메뉴이다.  

리스트 태그(list tag)

리스트란?

다수의 품명(品名)이나 인명(人名) 등을 기억하거나 점검하기 쉽도록 특별한 순서로 적어 놓은 것. 목록이나 명단으로 불릴 수 있다.

순서가 있거나 어떤 내용을 나란히 나열해야 할 경우 이 태그를 사용하면 좋다!

리스트 태그는 <li>,<ol>,<ul>,<dl>가 있다.

<li>는 'list item'의 약자로 목록에 나열될 내용들을 의미한다.

<li>를 사용하기위해서는 내용을 구분할 숫자 또는 기호를 표시해주는 태그가 필요하다.

나열하기 위해 숫자로 표시하느냐 기호로 표시하느냐에 따라 <ol>, <ul>으로 나뉜다.

<ol>은 'ordered list'의 약자이고 숫자로 내용을 나열한다.

<ul>은 'unordered list'의 약자이고 숫자가 아닌 기호로 나열한다.

<ol>
  <li>주제</li>
  <li>부주제</li>
  <li>본문</li>
</ol>

<ol>로 감싼 <li>는 내용 앞에 숫자를 넣지 않아도 자동으로 숫자가 매겨져 있다.

<ul>
  <li>주제</li>
  <li>부주제</li>
  <li>본문</li>
</ul>

마찬가지로 <li>를 감싼다. 하지만 <ul>이기때문에 숫자 대신 검정 동그라미가 표시된다. 

마지막으로 <dl>는 'definition list'의 약자이고 사전처럼 용어를 설명하는 목록을 만든다.

<dl>는 다른 리스트 태그와 다르게 두 가지 태그들이 필요하다.

바로 <dt>,<dd>이다.

<dt>는 'definition term'의 약자이며 용어를 적을 때 사용된다.

<dd>는 'definition description'의 약자이며 설명하는 내용에 사용된다.

<dl>
  <dt>용어</dt>
  <dd>설명</dd>
</dl>

앵커 태그(anchor 태그)

뉴스에 나오는 사람만 앵커가 아니라  닻이라는 뜻도 있다. 

사이트 내에서는 북마크(책갈피)로 생각하면 더 쉬울 것 같다.

줄여서 <a>로 쓰는데 이 태그는 중요한 속성이 있다.

바로 우리가 자주 쓰는 링크 속성을 이 태그를 통해 사용할 수 있다.

(처음 링크 속성을 사용했을 때 정말 가슴이 웅장해졌다.)

<a> 안에 href라는 속성을 더해주면 링크 완성!

herf는 'hypertext reference'의 약자로 하이퍼텍스트 참조라는 뜻을 가지는데 링크를 걸어주는 핵심 속성이라 볼 수 있다.

바로 예시를 보여드립니다!

<a href = "https://www.naver.com">네이버로 가는 길</a>

또한 href를 이용해서 페이지 맨 위로 갈 수 있다. 바로 #을 이용하는 것이다.

<a href = "#">TOP</a>

한 편 <a>는 원래 좁은 영역이지만 편의를 위해 HTML5에서는 큰 영역들의 태그들을 감쌀 수 있다.

id 속성

HTML 문서에서 어떤 태그를 찾거나 내용을 찾고자 할 때 꼭 필요한 속성이 바로 id속성이다.

우리가 사이트에 회원가입을 하거나 주민등록번호와 같이 어떤 특정 인물을 나타내 주는 값이 바로 id이다.

그래서 보통 id는 중복이 불가능하다.

마찬가지로 id속성도 중복이 불가능하고 고유한 문자나 숫자를 사용해야 한다.

<a>의 href="#"과 id속성을 사용해서 할 수 있는 것이 바로 페이지 내에 어느 특정 부분으로의 이동이다.

예시로 리스트, 앵커 태그와 id속성으로 바로 갈 수 있는 단어들을 만들어 보았다. 

이동할 부분의 href속성에 같은 이름의 id 값을 넣어주어 만들 수 있다!!  

리스트 태그

앵커 태그

id 속성

※카더라 통신

며칠 전 아르바이트를 구하기 위해 공고를 보니 재택근무이면서 홈페이지 관리를 통해 월급을 받을 수 있는 고수익 알바가 있었다. 프로그램마다 다르지만 그 가게는 고도몰을 이용하는 것 같았다. 우리가 배우는 HTML을 통해 고도몰의 세부적인 기능까지 다룰 줄 알게 된다면 먹고사는데 크게 지장은 없을 것 같다ㅎ

이상으로 리스트 태그, 앵커 태그, id속성에 대해 알아보았다. 

내일은 멀티미디어 요소 태그들을 살펴볼 예정이다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요) 

그럼~ 앙 제바