이진욱의코딩

여러가지 태그에 대해 알아봅시다. 본문

HTML

여러가지 태그에 대해 알아봅시다.

Crucifi 2019. 9. 11. 00:02

이번 시간에는 여러 가지 태그를 알아보도록 하겠습니다. 

목록을 한 번 봅시다.

 

1. 순서를 가지는 태그

2. 순서가 없는 리스트

3. 정의어 목록 리스트

4. 하이퍼링크(앵커 태그)

 

 

1. 순서를 가지는 태그(ordered list)

 

웹에서 F12를 누른 뒤 여러 가지 목록들을 보면 부모 태그 밑에 자식 태그들이 존재한다는 것을 볼 수 있습니다.

ordered list 줄여서 <ol>이라는 태그를 쓰면 자동적으로 내가 적은 목록들 앞에 숫자가 붙는 것을 볼 수 있습니다.

그 안에 <li> 태그를 적어서 또 큰 카테고리로 나눌 수 있습니다.

말 그대로 순서를 가지는 태그이기 때문에 따로 앞에 숫자로 순서를 표기하지 않아도 자동적으로 표기가 됩니다.

예시를 보도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>순서를 가지는 태그, ordered list</title>
  </head>
  <body>
    <h1>제일 좋아하는 요리순</h1>
      <ol>
        <li>한식
          <ol>
            <li>고기</li>
            <li>찌개</li>
            <li>떡볶이</li>
          </ol>
        </li>
        <li>중식
          <ol>
            <li>짜장면</li>
            <li>짬뽕</li>
            <li>볶음밥</li>
          </ol>
        </li>
        <li>양식
          <ol>
            <li>스파게티</li>
            <li>피자</li>
            <li>와플</li>
          </ol>
        </li>
        <li>일식
          <ol>
            <li>초밥</li>
            <li>돈까스</li>
            <li>라멘</li>
          </ol>
        </li>
      </ol>
  </body>
</html>

이런식

 

 

2. 순서가 없는 리스트

 

앞서 순서가 있는 리스트를 봤다면 이번에는 순서가 없는 리스트를 보도록 하겠습니다.

코드에 적은 순서대로 숫자로 표기되지 않고 앞에 문자 생김새와 색상으로 구분이 됩니다.

제가 알기론 최대 4개까지 문자 생김새와 색상이 바뀌는 걸로 알고 있습니다.

 

<!<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>순서가 없는 리스트, unordered list</title>
  </head>
  <body>
    <h1>좋아하는 요리들</h1>
    <ul>
      <li>한식
        <ul>
          <li>비빔밥
            <ul>
            <li>산채
              <ol>
                <li>일</li>
                <li>이</li>
                <li>삼</li>
              </ol>
            </li>
            <li>죽은채</li>
            <li>더덕</li>
            </ul>
          </li>
          <li>고기</li>
          <li>찌개</li>
          <li>찜</li>
        </ul>
      </li>
      <li>중식
        <ul>
          <li>짜장면</li>
          <li>짬뽕</li>
          <li>탕수육</li>
          <li>볶음밥</li>
        </ul>
      </li>
      <li>양식
        <ul>
          <li>스파게티</li>
          <li>와플</li>
          <li>스테이크</li>
          <li>필라프</li>
        </ul>
      </li>
      <li>일식
        <ul>
          <li>초밥</li>
          <li>까스</li>
          <li>덮밥</li>
          <li>회</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

 

3. 정의어 목록 리스트

 

목록을 만드는 데는 <dl><dt><dd> 태그가 있습니다.

<dl> 태그는 사전처럼 용어를 설명하는 목록을 만들고, <dt> 태그는 정의되는 용어의 제목을 넣을 때 사용합니다.

<dd> 태그는 용어를 설명하는 데 사용합니다.

예시를 보도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>정의어 목록리스트, definition list</title>
  </head>
  <body>
    <dl>
      <dt>html</dt>
      <dd>웹페이지를 제작하는 데이터언어</dd>
      <dd>HyperTextMarkupLanguage의 약어</dd>
    </dl>
    <dl>
      <dt>css</dt>
      <dd>웹페이지에 디자인을 입히는 언어</dd>
      <dd>Cascadestylesheet의 약어</dd>
      <!-- 주석문 (ctrl + /) -->
    </dl>
  </body>
</html>

 

4. 하이퍼링크(앵커 태그)

 

마지막으로 하이퍼링크에 대해 살펴보도록 하겠습니다.

말 그대로 anchor = 닻처럼 어느 지점에 주소를 찍어서 연결하는 방법입니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>하이퍼링크, 앵커태그, anchor</title>
  </head>
  <body>
    <a href="1-heading.html">제목문서로 연결</a><br>
    <a href="http://www.naver.com/index.html" target="_blank">naver로 이동</a>
    <!-- 확장자는 다르지만 첫페이지는 무조건 index.(html or htm or jsp or php or ...)이다.  -->
  </body>
</html>

결과입니다.

 

<a> 태그 안에 href를 적은 뒤 이동하고 싶은 파일의 이름을 적어주시면 됩니다. 뒤에 확장자도 적으셔야 해요.

그리고 인터넷에 존재하는 웹사이트로도 갈 수 있는데요 주소 앞에 http:// 까지 적어주셔야 합니다. 

네이버로 예시를 들자면  http://www.naver.com  가 사이트 주소인데요 여기에는 확장자는 다르지만 웹페이지의 첫 페이지에는 무조건 index.(html, htm, jsp, php)등이 숨어있습니다. 이게 아마 백업 용도로 여러 개를 해놓은 걸로 생각합니다.

http://www.naver.com/index.html 

 

네이버

네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요

www.naver.com

이런 식으로 말이죠 뒤에 index.html이 숨어있습니다. 적어도 되고 안 적어도 사이트를 불러오는데

지장은 없습니다. 네이버 같은 경우는 html, htm이 있고 네이트 같은 경우는 php가 있습니다.

 

추가로 바로 위의 사진에 나와있는 naver로 이동을 누르면 새로운 창이 생기지 않고 현재 있는 창에서 넘어갑니다.

만약 눌렀을 때 다른 창을 생성하고 싶다면 <a> 태그 안에 target="_blank"를 적어주시면 됩니다.(꿀팁)

 

오늘은 여기까지가 공부한 내용입니다.

'HTML' 카테고리의 다른 글

table태그 기초~응용까지  (0) 2019.09.17
하이퍼링크사용법 + 이미지태그에 대해 알아봅시다.  (0) 2019.09.12
part1.프론트엔드의 기초  (0) 2019.09.10
HTML-입력방식(FORM)  (0) 2019.07.09
표-table  (0) 2019.07.08
'HTML' Related Articles more