HTML 기초 4 - select 태그와 datalist 태그의 차이점

IT공부/HTML + CSS + Javascript 2021. 1. 2. 21:45

select 태그와 datalist 태그의 차이점

html에서 사용자로 하여금 여러 옵션 중 하나를 선택하게 할 때 사용하는 태그가 <select> 태그와 <datalist> 태그 입니다. 하지만 두 태그 사이에는 약간의 차이점이 있습니다.


<select> 태그 : 사용자는 문서 작성자가 만든 옵션 중에서만 선택이 가능하다.

<datalist> 태그 : 사용자는 입력창에 타이핑으로 직접 옵션을 선택할 수 있다.


직접 눈으로 확인해보도록 하겠습니다.


<select> 태그

    <form>
        <select>
            <option>내용 1</option>
            <option>내용 2</option>
            <option>내용 3</option>
        </select>
    </form>


<datalist> 태그

    <form>
        <input list="ex" type="text">
        <datalist id="ex">
            <option value="내용1"></option>
            <option value="내용2"></option>
            <option value="내용3"></option>
        </datalist>
    </form>



아래의 코드를 직접 실행하여 비교해보셔도 좋습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>date</title>
</head>
<body>
    <form>
        <label id="selectTag">select tag</label>
        <select id="selectTag">
            <option>내용 1</option>
            <option>내용 2</option>
            <option>내용 3</option>
        </select>
    </form>
    <hr>
    <form>
        <label id="datalistTag">datalist tag</label>
        <input list="ex" type="text" id="datalistTag">
        <datalist id="ex">
            <option value="내용1"></option>
            <option value="내용2"></option>
            <option value="내용3"></option>
        </datalist>
    </form>
</body>
</html>


저작자표시 비영리 동일조건

'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글

반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃  (0) 2021.01.08
HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기  (0) 2020.12.31
HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그)  (0) 2020.12.30
HTML 기초 1 - HTML 문서의 기본구조  (0) 2020.12.29
블로그 이미지

방구석 세계인

관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...

,

HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기

IT공부/HTML + CSS + Javascript 2020. 12. 31. 04:30

<map>, <area> 태그를 활용하여 하나의 이미지에 링크 여러개 달기

<map> 과 <area> 태그를 활용하면 이미지 하나에 링크를 여러개 삽입할 수 있습니다. 


그림판을 이용하여 정말 간단하게 이미지 파일 하나를 만들어 보았습니다.

안에 facebook이라 적혀있는 사각형을 클릭하면 facebook 사이트로 연결되고, 안에 google이라 적혀있는 원을 클릭하면 google 사이트로 연결되도록 만들어 보겠습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기</title>
</head>
<body>
  <h1>map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기</h1>
  <img src="example.png">
</body>
</html>


먼저 <img> 태그를 활용하여 이미지를 삽입합니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기</title>
</head>
<body>
  <h1>map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기</h1>
  <map name="linkExample">
      <area shape="rect" coords="55, 84, 214, 243" href="https://www.facebook.com/" alt="Facebook">
      <area shape="circle" coords="450, 160, 95" href="https://www.google.com/" alt="Google">
  </map>
  <img src="example.png" usemap="#linkExample">
</body>
</html>


그 후 <map> 태그를 만들고 그 안에 <area> 태그를 만듭니다. <map> 태그에는 이름을 붙여줘야 어떤 이미지에 대해 링크를 달 것인지 정할 수 있으므로 이름을 지어줘야 합니다. 저는 linkExample 이라고 지었습니다.

그 다음으로 <img> 태그 안에 usemap이라는 속성을 지정하고 그 안에 <map> 태그의 이름인 linkExample을 넣어주었습니다. 단, 여기서 주의해야할 점은 이름 앞에 반드시 #을 넣어야 한다는 점입니다.


<area> 태그 안의 속성들을 살펴보면, shape는 모양, coords는 좌표, href는 링크, alt는 이미지가 깨졌을 때 원활한 설명을 위해 대신 나오는 문구 입니다.

여기서 좌표를 어떻게 구하냐 의문이 들 수 있는데, 좌표는 그림판을 이용하여 쉽게 구할 수 있습니다.


이미지 파일을 그림판에서 열고 이미지부분에 마우스를 대면 그림판 좌측 아래 부분에 좌표가 뜹니다. 

사각형의 경우 coords="좌표 1의 x값, 좌표 1의 y값, 좌표 2의 x값, 좌표 2의 y값"이며,

원의 경우 coords="좌표 1의 x값, 좌표 1의 y값, 원의 반지름" 입니다. 



원의 반지름은 그림판에서 빨간색 박스 부분을 통해 구할 수 있습니다.


example.zip

첨부한 파일의 압축을 풀고 열어서 직접 확인해보시면 더 쉽게 이해가 갈 것입니다.



저작자표시 비영리 동일조건

'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글

반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃  (0) 2021.01.08
HTML 기초 4 - select 태그와 datalist 태그의 차이점  (0) 2021.01.02
HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그)  (0) 2020.12.30
HTML 기초 1 - HTML 문서의 기본구조  (0) 2020.12.29
블로그 이미지

방구석 세계인

관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...

,

HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그)

IT공부/HTML + CSS + Javascript 2020. 12. 30. 19:04

table(표) 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
    <tr>
        <th>1행1열</th>
        <th>1행2열</th>
        <th>1행3열</th>
        <th>1행4열</th>
    </tr>
    <tr>
        <td>2행1열 (내용)</td>
        <td>2행2열 (내용)</td>
        <td>2행3열 (내용)</td>
        <td>2행4열 (내용)</td>
    </tr>
  </table>
</body>
</html>


위처럼 코드를 작성한 뒤 실행해보면 아래와 같이 표가 출력될 것입니다.

html에서 표를 만들 때는 표에 해당하는 내용을 <table> </table> 태그 안에 작성하게 됩니다.

따라서 <table> 태그는 하나의 표를 선언하는 역할을 한다고 볼 수 있겠습니다.


행을 만드는 역할은 <tr>태그가 수행하며, 열은 <th> 또는 <td> 태그로 만들 수 있습니다.

참고로 html에서는 행을 먼저 만든 후 행 안에 열을 만드는 방식으로 표를 만듭니다. 따라서 <th>, <td> 태그는 <tr> 태그 안에 들어가게 됩니다.

한편, <td> 태그 안에 작성한 내용은 글씨 굵기가 변동되지 않고, 정렬도 왼쪽으로 됩니다. 반면에 <th> 태그 안에 작성한 내용은 볼드체에 중앙으로 정렬이 됩니다. 그래서 <th> 태그는 제목셀을 만들 때 주로 사용됩니다.



<thead>, <tbody>, <tfoot> 태그


표를 만들면 일반적으로 위의 스크린샷 처럼 제목, 내용, 내용요약 부분으로 나뉘게 됩니다. (*해당 표는 excel로 만든 표입니다.)

따라서 제목, 내용, 요약 부분의 색깔이나 폰트 등을 서로 다르게 해야하는 경우도 종종 있을 것 입니다. 이럴때 사용하는 것이 <thead>(제목), <tbody>(내용), <tfoot>(요약) 태그입니다.

표에 있는 행들을 <thead>, <tbody>, <tfoot> 태그로 묶은 후, CSS나 Javascript를 이용하여 서로 다르게 편집할 수 있습니다. 이번 포스팅은 html 기초에 대한 글이므로 실제로 해당 태그들을 이용하여 편집하는 것은 차후 CSS, Javascript에 대한 포스팅에서 다루도록 하겠습니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
    <thead>
        <tr>
            <th>제목 행</th>
            <th>제목 행</th>
            <th>제목 행</th>
            <th>제목 행</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용 행</td>
            <td>내용 행</td>
            <td>내용 행</td>
            <td>내용 행</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>요약 행</td>
            <td>요약 행</td>
            <td>요약 행</td>
            <td>요약 행</td>
        </tr>
    </tbody>
  </table>
</body>
</html>



<col>, <colgroup> 태그

<thead>, <tbody>, <tfoot> 태그는 행을 기준으로 표를 나누었다면, <col>, <colgroup> 태그는 열을 기준으로 표를 나누는 태그입니다. <col>, <colgroup> 태그를 통해 열을 나누었다면, 나뉜 열에 스타일을 다르게 지정할 수 있습니다. 


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>표 만들기</title>
</head>
<body>
  <h1>표만들기</h1>
  <table border="1">
        <colgroup>
            <col span="2" style="background-color: green;">
            <col style="background-color: pink;">
            <col style="background-color: brown;">
        </colgroup>
        <tr>
            <td>1행1열</td>
            <td>1행2열</td>
            <td>1행3열</td>
            <td>1행4열</td>
        </tr>
        <tr>
            <td>2행1열</td>
            <td>2행2열</td>
            <td>2행3열</td>
            <td>2행4열</td>
        </tr>
        <tr>
            <td>3행1열</td>
            <td>3행2열</td>
            <td>3행3열</td>
            <td>3행4열</td>
        </tr>
  </table>
</body>
</html>


<table> 태그 바로 아래에 <colgroup> 태그를 작성 한 다음, <col> 태그를 이용해 열 하나 하나에 대해 스타일을 지정하는 방식입니다. 위의 코드엔 4개의 열이 있으므로 <col> 태그를 4개 선언해야할 것입니다. 하지만 span을 이용하면 여러개의 열을 동시에 지정할 수 있습니다. 저는 첫번째 <col> 태그에서 span=2 라고 했기 때문에 3개의 <col> 태그만 사용할 수 있었습니다. 이제 코드를 실행하면 아래와 같이 결과가 나올 것입니다.



저작자표시 비영리 동일조건

'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글

반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃  (0) 2021.01.08
HTML 기초 4 - select 태그와 datalist 태그의 차이점  (0) 2021.01.02
HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기  (0) 2020.12.31
HTML 기초 1 - HTML 문서의 기본구조  (0) 2020.12.29
블로그 이미지

방구석 세계인

관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...

,

HTML 기초 1 - HTML 문서의 기본구조

IT공부/HTML + CSS + Javascript 2020. 12. 29. 18:14

HTML의 기본 구조

인터넷에서는 수많은 웹페이지들을 볼 수 있습니다. 그 웹페이지들이 웹페이지의 모습을 보이도록 해주는 컴퓨터 언어가 바로 HTML, CSS, Javascript 입니다. 


그 중, HTML은 웹페이지의 구조를 만드는 역할을 하며, CSS는 디자인적인 부분을 담당합니다. Javascript는 팝업창 같은 동적인 부분들을 구현하는 역할을 합니다. 이 글에서는 그 중 HTML에 대해서만 살펴보도록 하겠습니다.


HTML 문서를 보면 크게 4부분으로 나누어 볼 수 있습니다. 미리 각 부분들의 역할을 알아두면 이후 HTML에 대해 본격적으로 배울 때 이해하기가 더 쉬울 것입니다.


<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>기본 HTML 문서</title>
    </head>
    <body>
        <h1>시간이란?</h1>
        <img src="images/watch.jpg">
        <p>내일 죽을 것처럼 오늘을 살고 영원히 살 것처럼 내일을 꿈꾸어라.</p>
    </body>
</html>


그 전에 태그(tag)라는 개념에 대해 먼저 알아보겠습니다. <>로 표시되는 글자들 ex. <body>, <html> 등을 태그라고 부릅니다. 이러이러한 작업을 수행하거나 웹페이지에 이러이러하게 나타나도록 알려주는 명령어라고 생각하면 되겠습니다.



먼저 <!doctype> 태그입니다. 

위의 작성된 코드에서 가장 윗부분을 보면 <!doctype html>이라 작성된 것을 볼 수 있습니다. 이것은 해당 html문서의 속성을 알려주는 역할을 합니다. 위의 코드를 보면 !doctype이 html이니 컴퓨터가 해당 문서를 읽을 때, html로 간주하고 읽을 것입니다. 참고로 html5 이전에는 !doctype이 여러가지가 있었지만, html5로 넘어가면서 html만 남게 되었습니다.  


그 다음으로는 <html> 태그입니다.

<html> 태그는 해당 웹문서의 시작과 끝을 알려주는 역할을 합니다. 따라서 <html> </html>로 감싸진 부분을 웹문서 하나 라고 볼 수 있겠습니다.


3번째로는 <head> 태그입니다.

<head> 태그는 <html> 태그 안에 들어있는데, 웹브라우저가 해당 문서를 읽을 때 필요한 정보를 담고 있는 부분입니다. 문자 인코딩 방법, 웹문서 제목 같은 것을 정할 수 있습니다. 


마지막으로는 <body> 태그입니다.

<body> 태그도 <html> 태그 안에 들어있습니다. <head> 태그가 웹브라우저에게 필요한 정보를 알려주는 역할을 한다면, <body> 태그는 겉으로 보여지는 부분을 만드는 역할을 합니다. 따라서 웹페이지를 열었을 때 우리가 보는 부분들은 모두 <body>태그 안에서 작성된 내용이라고 생각하면 되겠습니다. 

저작자표시 비영리 동일조건

'IT공부 > HTML + CSS + Javascript' 카테고리의 다른 글

반응형 웹 만들기 1 - 고정 그리드 레이아웃 vs 가변 그리드 레이아웃  (0) 2021.01.08
HTML 기초 4 - select 태그와 datalist 태그의 차이점  (0) 2021.01.02
HTML 기초 3 - map, area 태그를 활용하여 하나의 이미지에 링크 여러개 달기  (0) 2020.12.31
HTML 기초 2 - table(표) 만들기 (thead, tbody, tfoot, col, colgroup 태그)  (0) 2020.12.30
블로그 이미지

방구석 세계인

관심분야 : 외국어 학습, 프로그래밍, 책 리뷰 등...

,

공지사항

티스토리툴바