비트교육센터/웹

[비트교육센터] 웹 25일차 VSCODE 설치, html 기초, html 구조

달의요정루나 2023. 7. 4. 18:04

1. VSCODE 설치하기

1) Visual Studio Code 사이트 들어가기

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

2) Download버튼을 눌러서 자신의 운영체제에 맞추어 다운로드 한다.

3) 작업폴더를 만든다.

- 이전 파이썬, 자바 파일 폴더에 HTML폴더를 만들고 그 안에 html_basic폴더를 만들었다.

 

4) 설치하기

[1] '동의합니다'를 누리고 '다음'을 누른다.

[2] '다음'을 누른다.

[3] '다음'을 누른다.

[4] '다음'을 누른다.

[5] '다음'을 누른다.

5) 작업폴더 설정하기

[1] File->Open Folder...로 들어간다.

[2] source의 HTML 폴더를 선택한다.

[3] 작업 폴더가 설정되었다.

6) Live Server 설치하기

- Live Server: 코드를 변경함에 따라 페이지가 어떻게 변경되는지 확인할 수 있다.

[1] 왼쪽 메뉴에 해당 아이콘을 클릭한다.

[2] 검색창에 live server를 입력후 Live Server가 뜨면 Install을 클릭한다.

[3] 설치된 것을 확인할 수 있다.

7) 파일 만들고

[1] 상위폴더에서 New File...아이콘을 클릭한다.

[2] 파일 이름을 입력한다.

[3] 코드를 입력한다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>첫 title</title>
</head>

<body>
    페이지에 타이틀을 다는 예제 입니다.
    타이틀은 브라우저의 타이틀바에 보여집니다.
</body>

</html>

- 해당 코드를 입력한다.

- 여담으로 ht을 입력하고 ctrl-Space를 누르고 html:5을 선택하면 기본 html 소스가 출력된다.

- 그리고 코드 구조를 정리하고 싶으면 전체코드를 선택하는 Ctrl-A를 클릭하고 Ctrl-K-F를 눌러주면 정돈된다.

 

[4] 실행하기

- 코드문에 오른쪽 마우스를 누르고 Open with Live Server를 클릭한다.

- 액세스 허용을 누른다.

- 출력된 것을 확인할 수 있다.

 

2. html 기초

- 지금부터 나오는 html 구문은 이 사이트에서 공부한 자료들이다.

http://webprogramming.co.kr/example

 

Example

브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가

webprogramming.co.kr

- 명품프로그래밍

 

1) 문단 제목 달기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>문단 제목 달기</title>
</head>

<body>
    <h1>1장 홈페이지 만들기</h1>
    <h2>1절 HTML 언어</h2>
    <h3>1. 웹</h3>
    <h4>1.1 인터넷</h4>
    <h5>1.1.1 네트워크</h5>
    <h6>1.1.1.1. 통신</h6>
</body>
<!--ctrl-k-f: 코드 정리하기-->
<!--시프트-탭: 코드 들여쓰기-->
</html>

- <h1>, <h2>, <h3>,...,<h6>의 6개 태그는 문단의 제목에 붙는다.

- h는 heading의 줄임말로 <h1>이 가장 크고, <h6>이 가장 작다.

--> 결과

문단 제목 달기

1장 홈페이지 만들기

1절 HTML 언어

1. 웹

1.1 인터넷

1.1.1 네트워크
1.1.1.1. 통신

2) 툴팁달기, title 속성

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>툴팁 달기</title>
</head>

<body>
    <h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
    <h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>
</body>

</html>

- 페이지 본문에 마우스가 올라갈 때 설명문(툴팁)이 출력되게 할 수 있다.

- 툴팁 문자열은 태그의 title 속성에 지정하며 모든 태그는 title 속성을 가진다.

--> 결과

툴팁 달기

1장 홈페이지

1절 HTML 언어

3) 단락 나누기, <p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>단락 나누기</title>
</head>
<body>
    <h3>2 개의 단락 나누기</h3>
    <p>
        HTML 문서도 본문을 여러 단락으로
        나눌 수 있다. CSS 스타일을 사용하면
        단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.</p>
    <p>
        여러 개의 빈 칸은 하나로 취급되며,
        엔터 키 역시 하나의 빈 칸으로 처리된다.</p>
</body>
</html>

- <p>태그를 이용해 문단을 여러 단락으로 나눌 수 있다.

--> 결과

단락 나누기

2 개의 단락 나누기

HTML 문서도 본문을 여러 단락으로 나눌 수 있다. CSS 스타일을 사용하면 단락 단위로 내어 쓰기와 들여 쓰기가 가능하다.

여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다.

4) 수평선 긋기, <hr>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>수평선 긋기</title>
</head>
<body>
    <h3>수평선 긋기</h3>
    <hr>
    <p>hr 태그는 horizontal에서 딴 글자입니다.</p>
    <hr>
    <p>종료 태그 &lt;/hr&gt;를 사용하지 않습니다.</p>
    <!--lt: ~보다 작은거, gt: ~보다 큰거-->
</body>
</html>

- <hr>태그를 이용해 문단 내에서 내용의 전환이 필요한 곳에 수평선을 삽입하여 시각적 효과를 만들 수 있다.

- &lt는 HTML 코드에서 모든 태그의 시작 기호이고 &gt는 HTML 코드에서 모든 태그의 끝 기호를 의미한다.

--> 결과

수평선 긋기

수평선 긋기

hr 태그는 horizontal에서 딴 글자입니다.

종료 태그 </hr>를 사용하지 않습니다.

5) 새로운 줄로 넘어가기, <br>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>새로운 줄 넘어가기</title>
</head>

<body>
    <h3>새로운 줄 넘어가기</h3>
    <hr>
    &lt;br&gt; 태그로 다음 줄로 넘어갑니다.<br>
    2 개의 &lt;br&gt; 태그로 두 번 넘어 갑니다.<br><br>
    잘 보이나요?
</body>

</html>

- html에서는 enter키를 입력해도 띄어쓰기로 인식된다. 그래서 새로운 줄로 넘어가고 싶으면 <br>태그를 선언해야 한다.

--> 결과

새로운 줄 넘어가기

새로운 줄 넘어가기

<br> 태그로 다음 줄로 넘어갑니다.
2 개의 <br> 태그로 두 번 넘어 갑니다.

잘 보이나요?

6) 텍스트 꾸미기

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>텍스트 꾸미기</title>
</head>

<body>
	<h3>텍스트 꾸미기</h3>
	<hr>
	<p>
		<b>진하게</b><br>
		<strong>중요한</strong><br>
		<em>강조</em><br>
		<i>이탤릭으로 강조</i><br>
		<b><i>진하게 이탤릭으로 강조</i></b><br>
		보통 문자 <small>한 단계 작은 문자</small><br>
		<del>삭제</del><br>
		<ins>추가</ins><br>
		보통문자의 <sup>윗첨자</sup><br>
		보통문자의 <sub>아래첨자</sub><br>
		<mark>하이라이팅</mark><br>
	</p>
</body>

</html>

- 강조하는 단어, 삭제문자, 첨자를 표시할 수 있다.

--> 결과

텍스트 꾸미기

텍스트 꾸미기

진하게
중요한
강조
이탤릭으로 강조
진하게 이탤릭으로 강조
보통 문자 한 단계 작은 문자
삭제
추가
보통문자의 윗첨자
보통문자의 아래첨자
하이라이팅

7) 블록 태그와 인라인 태그

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>&lt;div&gt;블록과 &lt;span&gt;인라인</title>
</head>

<body>
    <h3>사랑</h3>
    <hr>
    <div style="background-color:skyblue; padding:20px;">
        내가 사람의 방언과 천사의 말을 할지라도
        <span style="color:red">사랑</span>이 없으면 소리 나는 구리와 울리는 꽹과리가 되고,
        <span style="color:red">사랑</span>이 없으면 아무 것도 아니라.
    </div>
    <p>
        ~우리 서로 사랑하며 살아요~
    </p>
</body>

</html>

[1] <div>, 가장 많이 사용하는 블록태그

- <div>는 <p>와 함께 블록을 구성하기 위해 가장 많이 사용된다.

- <div>는 html태그들을 블록으로 묶는 컨테이너이다.

[2] <span>, 가장 많이 사용하는 인라인태그

- 텍스트 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 사용한다.

 

--> 결과

<div>블록과 <span>인라인

사랑

내가 사람의 방언과 천사의 말을 할지라도 사랑이 없으면 소리 나는 구리와 울리는 꽹과리가 되고, 사랑이 없으면 아무 것도 아니라.

~우리 서로 사랑하며 살아요~

8) 이미지 삽입, <img>

http://webprogramming.co.kr/download

 

Download

브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가

webprogramming.co.kr

- 여기서 부터는 예제가 필요하다. 해당 다운로드 사이트에서 '예제에 사용되는 이미지 동영상 등의 미디어 파일'로 들어가서 파일을 다운로드 한다.

- zip파일을 압축해제후 각 챕터마다 media 폴더를 꺼내 코드를 실행하고 있는 폴더에 넣는다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>이미지 삽입</title>
</head>

<body>
    <h3>이미지 삽입</h3>
    <hr>
    <p> 엘비스 프레슬리의 사진입니다.</p>
    <img src="media/Elvis1.jpg" width="150" height="200" alt="Elvis">
    <!--src: source의 약자-->
    <img src="media/kitae.jpg" width="80" height="100" alt="황기태사진없음">
    <!--alt: 해당 사진이 없을경우 출력할 문자, 사진 경로는 안됨-->
    <img src="https://t1.kakaocdn.net/kakaocorp/kakaocorp/admin/service/453a624d017900001.png" alt="사진 주소 변경됨"
        width="100" height="100">
    <img src="https://www.python.org/static/img/python-logo.png" alt="사진 주소 변경됨"
        width="300" height="100">
</body>

</html>

- <img>태그를 이용해 html폴더에 이미지를 삽입할 수 있따.

<img 	src="이미지 파일의 URL"
	alt="문자열"
        width="이미지 폭"
        height="이미지 높이">

- <img>태그의 속성들이다.

--> 결과

이미지 삽입

이미지 삽입

엘비스 프레슬리의 사진입니다.

Elvis 황기태사진없음 사진 주소 변경됨 사진 주소 변경됨

9) 리스트 만들기, <ol>,<ul>,<dl>

- <ol></ol>: 순서 있는 리스트

- <ul></ul>: 순서 없는 리스트

- <dl></dl>: 정의 리스트

[1] <ol>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>라면을 끓이는 순서</title>
</head>

<body>
    <h3>라면을 끓이는 순서</h3>
    <hr>
    <ol type="A">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ol>
    <!--순서-->
</body>

</html>

- type은 마커종류이다. type="1"(1,2,3,...)이 디폴트이다.

- 마커 종류는 A(A,B,C,...), a(a,b,c,...), I(I, II, III, ...), i(i, ii, iii, ...) 등이 있다.

--> 결과

라면을 끓이는 순서

라면을 끓이는 순서

  1. 물을 끓인다.
  2. 라면과 스프를 넣는다.
  3. 파를 썰어 넣는다.
  4. 5분 후 먹는다.

[2] <ul>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>내가 좋아하는 음식</title>
</head>

<body>
    <h3>내가 좋아하는 음식</h3>
    <hr>
    <ul>
        <li>감자탕
        <li>스파게티
        <li>올레국수
    </ul>
</body>

</html>

--> 결과

내가 좋아하는 음식

내가 좋아하는 음식

  • 감자탕
  • 스파게티
  • 올레국수

[3] <중첩 리스트>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>중첩 리스트 만들기</title>
</head>

<body>
    <h3>내가 사는 이유</h3>
    <hr>
    <ul>
        <li>내가 좋아하는 음식 많아요
            <ul>
                <li>감자탕
                <li>스파게티
                <li>올레국수
            </ul>
        <li>라면 먹기 좋아해요
            <ol type="1">
                <li>물을 끓인다.
                <li>라면과 스프를 넣는다.
                <li>파를 썰어 넣는다.
                <li>한 입에 다 먹는다.
            </ol>
        <li>여름에는 바다로
        <li>가을에는 산으로
    </ul>
</body>
<!--<thead>, <tbody>, <tfoot>-->
</html>

--> 결과

중첩 리스트 만들기

내가 사는 이유

  • 내가 좋아하는 음식 많아요
    • 감자탕
    • 스파게티
    • 올레국수
  • 라면 먹기 좋아해요
    1. 물을 끓인다.
    2. 라면과 스프를 넣는다.
    3. 파를 썰어 넣는다.
    4. 한 입에 다 먹는다.
  • 여름에는 바다로
  • 가을에는 산으로

10) 표 만들기, <table>

[1]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>기본 구조를 가진 표 만들기</title>
</head>

<body>
    <h3>기본 구조를 가진 표</h3>
    <hr>
    <table border="1">
        <caption>1학기 성적</caption>
        <thead>
            <tr>
                <th>이름</th>
                <th>HTML</th>
                <th>CSS</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>합</th>
                <th>225</th>
                <th>230</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>황기태</td>
                <td>80</td>
                <td>70</td>
            </tr>
            <tr>
                <td>이재문</td>
                <td>95</td>
                <td>99</td>
            </tr>
            <tr>
                <td>이병은</td>
                <td>40</td>
                <td>61</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

- <table>: 표 전체를 담는 컨테이너

- <caption>: 표 제목

- <thead>: 헤딩 셀 그룹

- <tfoot>: 바닥 셀 그룹

- <tbody>: 데이터 셀 그룹

- <tr>: 행. 여러개의 <td>, <th>포함

- <th>: 제목 셀

- <td>: 데이터 셀

--> 결과

기본 구조를 가진 표 만들기

기본 구조를 가진 표

1학기 성적
이름 HTML CSS
합 225 230
황기태 80 70
이재문 95 99
이병은 40 61

[2]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>표에 이미지 삽입</title>
</head>

<body>
    <h3>표에 이미지 삽입</h3>
    <hr>
    <table>
        <caption>좋아하는 과일</caption>
        <tbody>
            <tr>
                <td><img src="media/apple.png"></td>
                <td><img src="media/banana.png"></td>
                <td><img src="media/mango.png"></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

--> 결과

표에 이미지 삽입

표에 이미지 삽입

좋아하는 과일

 

11) 하이퍼링크 만들기, <a>

[1]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>링크 만들기</title>
</head>

<body>
    <h3>링크 만들기</h3>
    <hr>
    포털 사이트
    <ul>
        <li><a href="http://www.naver.com">네이버</a></li>
        <li><a href="http://www.daum.net">다음</a></li>
    </ul>
    신문 사이트
    <ul>
        <li><a href="http://www.etnews.com">
                <img src="media/iconetnews.png" alt="전자신문">
            </a>
        </li>
        <li><a href="http://www.chosun.com">
                <img src="media/iconchosun.png" alt="조선일보">
            </a>
        </li>
    </ul>
    <hr>
    <a href="ex2-17.html">예제 2-17로 이동</a>
</body>

</html>

- href를 통해 하이퍼링크로 이동한 HTML 페이지의 URL을 지정한다.

--> 결과

링크 만들기

링크 만들기

포털 사이트 신문 사이트
예제 2-17로 이동

[2] 앵커

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>링크와 앵커</title>
</head>

<body>
    <h3>Elvis Presley</h3>
    <hr>
    <ul>
        <li><a href="#love">Love me tender</a>
        <li><a href="#can">Can't help falling in love</a>
        <li><a href="#it">It's now or never</a>
            <!--id로 위치이동-->
    </ul>
    <h3 id="love">Love me tender</h3>
    Love me tender, Love me sweet, Never let me go.<br>
    You have made my life complete, <br>
    And I love you so.<br>
    Love me tender, Love me true, <br>
    All my dreams fulfilled.<br>
    For my darling I love you, And I always will.<br>
    <h3 id="can">Can't help falling in love</h3>
    Love me tender, Love me sweet, Never let me go.<br>
    You have made my life complete, And I love you so.<br>
    Love me tender, Love me true, All my dreams fulfilled.<br>
    For my darling I love you, And I always will.<br>
    <h3 id="it">It''s now or never</h3>
    It's now or never, Come hold me tight<br>
    Kiss me my darling, Be mine tonight<br>
    Tomorrow will be too late,<br>
    It's now or never. My love won't wait.<br>
</body>

</html>

- 앵커: 문서내 특정 위치로 이동하는 링크를 말한다.

- 태그의 id속성에 앵커이름을 이정하면 어떤 태그든 그 위치에 앵커가 만들어진다.

--> 결과

링크와 앵커

Elvis Presley

Love me tender

Love me tender, Love me sweet, Never let me go.
You have made my life complete,
And I love you so.
Love me tender, Love me true,
All my dreams fulfilled.
For my darling I love you, And I always will.

Can't help falling in love

Love me tender, Love me sweet, Never let me go.
You have made my life complete, And I love you so.
Love me tender, Love me true, All my dreams fulfilled.
For my darling I love you, And I always will.

It''s now or never

It's now or never, Come hold me tight
Kiss me my darling, Be mine tonight
Tomorrow will be too late,
It's now or never. My love won't wait.

12) 파일 다운로드 링크 만들기, <a>의 다운로드 속성

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>파일 다운로드</title>
</head>

<body>
    <h3>친구들아! 여기서 다운받아!</h3>
    <hr>
    <ul>
        <li><a href="media/Elvis.png" download>엘비스 이미지 다운로드</a>
        <li><a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a>
        <li><a href="media/EmbraceableYou.mp3" download>mp3 다운로드</a>
        <li><a href="ex2-09.html" download>예제 2-9 HTML 파일 다운로드</a>
        <li><a href="media/test.hwp" download>한글 파일 다운로드</a>
    </ul>
</body>

</html>

- a태그의 download속성을 이용해 파일을 다운로드 할 수 있는 링크를 만든다.

--> 결과

파일 다운로드

친구들아! 여기서 다운받아!

13) 미디어의 표준화, <audio>, <video>

[1] video

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>비디오 삽입</title>
</head>

<body>
    <h3>비디오 삽입</h3>
    <hr>
    <video src="media/bear.mp4" width="320" height="240" controls>
        브라우저가 video 태그를 지원하지 않습니다.
    </video>
</body>

</html>

- <video>태그를 이용해 비디오를 삽입할 수 있다.

--> 결과

비디오 삽입

비디오 삽입

[2] audio

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>오디오 삽입</title>
</head>

<body>
    <h3>오디오 삽입</h3>
    <hr>
    재생 버튼을 누르면 음악이 연주됩니다.
    <p>
        <audio src="media/EmbraceableYou.mp3" controls loop>
            브라우저가 audio 태그를 지원하지 않습니다.
        </audio>
    </p>
</body>

</html>

- <audio>태그를 이용해 오디오를 출력할 수 있다.

--> 결과

오디오 삽입

오디오 삽입

재생 버튼을 누르면 음악이 연주됩니다.

 

3. html 구조

1) 시맨틱 태그

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 문서 구조 시맨틱 태그 사용</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        header {
            width: 100%;
            height: 15%;
            background: yellow;
        }

        nav {
            width: 15%;
            height: 70%;
            float: left;
            background: orange;
        }

        section {
            width: 70%;
            height: 70%;
            float: left;
            background: olivedrab;
        }

        aside {
            width: 15%;
            height: 70%;
            float: left;
            background: orange;
        }

        footer {
            width: 100%;
            height: 15%;
            clear: both;
            background: plum;
        }
    </style>
</head>

<body>
    <header>header</header>
    <nav>nav</nav>
    <section>section</section>
    <aside>aside</aside>
    <footer>footer</footer>
</body>

</html>

- 시맨틱 태그는 웹 문서 구조를 표현하는 태그들이다.

- <header>: 페이지나 섹션의 메리말을 표현하는 태그이다.

- <nav>: 하이퍼링크들을 모아 놓은 섹션이다.

- <section>: 문서의 장 혹은 절을 구성하는 역할을 한다.

- <article>: 본문과 연관되어 있지만, 독립적인 콘텐츠를 담는 영역이다.

- <aside>: 웹 페이지 본문 흐름에서 약간 벗어난 글들을 담는 태그이다.

- <footer>: 꼬리말 영역을 표시하는 태그이며 저자나 저작권 정보를 담는다.

--> 결과

HTML5 문서 구조 시맨틱 태그 사용
header
section
footer

2) 시맨틱 블록 태그

- 블록을 구성하는 HTML5 시맨틴 태그들이다.

[1] <figure>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>figure 태그 활용</title>
</head>

<body>
    <h3>figure 태그 활용</h3>
    <hr>
    <figure id="1-1">
        <figcaption>alert() 함수 활용</figcaption>
        <pre>
	<code>function f() { alert("경고합니다"); }</code>
	</pre>
        <hr>
        <small>실행결과</small>
        <pre>
		<img src="media/alert.png" alt="실행결과">
	</pre>

    </figure>
</body>

</html>

- 본문에 삽입된 그림을 블록화하는 시맨틱 태그이다.

--> 결과

figure 태그 활용

figure 태그 활용

alert() 함수 활용
	function f() { alert("경고합니다"); }
실행결과 
		실행결과

[2] <details>와 <summary>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>details와 summary 태그</title>
</head>

<body>
    <h3>details와 summary 태그</h3>
    Q &amp; A 리스트
    <hr>
    <details>
        <summary>Question 1</summary>
        <p>웹 개발자가 알아야 하는 언어 3 가지?</p>
    </details>
    <details>
        <summary>Answer 1</summary>
        <p>HTML5, CSS, Javascript</p>
    </details>
</body>

</html>

- <details>는 상세 정보를 담는 시맨틱 블록태그이다.

- <summary>태그는 <details>로 구성된 블록의 제목을 표현한다.

--> 결과

details와 summary 태그

details와 summary 태그

Q & A 리스트
Question 1

웹 개발자가 알아야 하는 언어 3 가지?

Answer 1

HTML5, CSS, Javascript

3) 시맨틱 인라인 태그

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>인라인 시맨틱 태그</title>
</head>

<body>
    <h3>인라인 시맨틱 태그 사례</h3>
    <hr>
    <p>내일 <mark>HTML5 시험</mark><br>
        시간은 <time>09:00</time><br>
        난이도 <meter value="0.8" max="1.0">80%</meter><br>
        자료 업로딩(20%)
        <progress value="2" max="10"></progress><br>
    </p>
</body>

</html>

- <mark>: 중요한 텍스트임을 표시한다.

- <time>: 시간 정보임을 표시한다.

- <meter>: 주어진 범위나 %의 데이터 양을 표시한다.

- <progress>: 작업의 진행정도를 표시한다.

--> 결과

인라인 시맨틱 태그

인라인 시맨틱 태그 사례

내일 HTML5 시험
시간은
난이도 80%
자료 업로딩(20%)

4) 웹 폼

- 웹 폼: 웹 페이지를 통해 사용자 입력을 받는 폼이다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>로그인 폼</title>
</head>

<body>
    <h3>로그인 폼</h3>
    <hr>
    <form name="fo" method="post"><!--get,post(패스워드에 많이 쓰임, 정보가 노출안됨)차이-->
        <!--get: 주소에 붙여 데이터 보냄, post: 요청정보 안쪽에 데이터를 넣어 보냄-->
        사용자 ID : <input type="text" name="id" size="15" value=""><br>
        비밀 번호 : <input type="password" name="pw" size="15" value="">
        <input type="submit" value="완료">
    </form>
</body>

</html>

- <name>: 폼의 이름을 지정하는 속성으로 자바스크립트에서 사용된다.

- <method>: 폼 데이터의 웹 서버로 전송하는 형식을 지시한다.(get혹은 post)

- <action>: 아직은 없지만 폼데이터를 처리할 웹 서버 응용프로그램을 지정한다.

--> 결과

로그인 폼

로그인 폼

사용자 ID :
비밀 번호 :

5) 폼 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>텍스트 입력 폼</title>
</head>

<body>
    <h3>자기 소개서 작성</h3>
    <hr>
    <form>
        이름 : <input type="text" value=""><br>
        암호 : <input type="password" value="" maxlength="4"><br>
        자소서 : <textarea cols="20" rows="5">이곳에 자기소개서 작성</textarea>
    </form>
</body>

</html>

- input 태그 타입이 text일 경우 한줄 텍스트를 입력하는 창이 나온다.

- input 태그 타입이 password일 경우 암호입력을 위한 한줄 텍스트를 입력하는 창이 나온다.

- textarea태그는 여러 줄의 텍스트를 입력하는 창이 나온다.

--> 결과

텍스트 입력 폼

자기 소개서 작성

이름 :
암호 :
자소서 :

6) 데이터 목록을 가진 텍스트 입력 창, <datalist>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>데이터 목록을 가진 텍스트 입력</title>
</head>

<body>
    <h3>가보고 싶은 곳</h3>
    <hr>
    <form>
        나라 : <input type="text" name="country" list="countries"><br>
        <datalist id="countries">
            <option value="가나">
            <option value="스위스">
            <option value="브라질">
        </datalist>
        보고싶은것 : <input type="text" list="what"><br>
        <datalist id="what">
            <option value="산">
            <option value="바다">
            <option value="도시">
        </datalist>
    </form>
</body>

</html>

- 사용자가 선택 가능한 데이터 목록을 <datalist></datalist>로 만들고, <input>래그의 list 속성 값과 <datalist>의 id 속성 값을 동일하게 주어 이 둘을 연결한다.

- option태그는 데이터 항목 하나를 나타낸다.

--> 결과

데이터 목록을 가진 텍스트 입력

가보고 싶은 곳

나라 :
보고싶은것 :

7) 텍스트/이미지 버튼 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>버튼이 있는 입력 폼</title>
</head>

<body>
    <h3>버튼을 만들자</h3>
    <hr>
    <form>
        검색: <input type="text" size="10" value="">
        <input type="button" value="Q1">
        <button type="button">Q2</button><br>
        submit 버튼 : <input type="submit" value="전송1">
        <button type="submit">전송2</button><br>
        reset 버튼 : <input type="reset" value="리셋1">
        <button type="reset">리셋2</button><br>
        이미지버튼 : <input type="image" src="media/button.png" alt="이미지 버튼">
        <button type="button"><img src="media/button.png" alt="이미지 버튼"></button>
    </form>
</body>

</html>

- 버튼을 <input>태그나 <button>태그로 만들 수 있다. type속성으로 버튼의 기능을 선택할 수 있다.

--> 결과

버튼이 있는 입력 폼

버튼을 만들자

검색:
submit 버튼 :
reset 버튼 :
이미지버튼 :

8) 선택형 입력

[1] 체크박스 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>체크 박스 만들기</title>
</head>

<body>
    <h3>먹고 싶은 것 모두 체크하세요</h3>
    <hr>
    <form>
        짜장면 <input type="checkbox" value="1">
        짬뽕 <input type="checkbox" value="2" checked>
        탕수육 <input type="checkbox" value="3">
    </form>
</body>

</html>

- 체크박스는 선택/해제 중 하나를 선택하는 폼 요소이다. checked 속성을 넣으면 출력시 처음부터 선택된 상태로 출력된다.

--> 결과

체크 박스 만들기

먹고 싶은 것 모두 체크하세요

짜장면 짬뽕 탕수육

[2] 라디오버튼 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>라디오버튼 만들기</title>
</head>

<body>
    <h3>먹고 싶은 것 하나만 선택?</h3>
    <hr>
    <form>
        <input type="radio" name="china" value="1">
        짜장면<img src="media/jajang.png"><br>
        <input type="radio" name="china" value="2" checked>
        짬뽕<img src="media/jjambbong.png"><br>
        <input type="radio" name="china" value="3">
        탕수육<img src="media/tangsuyuk.png">
    </form>
</body>

</html>

- 라디오 버튼은 name속성 값이 같은 라디오버튼들이 하나의 그룹을 형성하고, 그중 하나만 선택되는 요소이다.

- checked 속성을 넣으면 선택된 상태로 출력된다.

--> 결과

라디오버튼 만들기

먹고 싶은 것 하나만 선택?

짜장면
짬뽕
탕수육

[3] 콤보박스 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>콤보박스 만들기</title>
</head>

<body>
    <h3>오늘 점심은?</h3>
    <hr>
    <form>
        <select name="china">
            <option value="1">짜장면</option>
            <option value="2" selected>짬뽕</option>
            <option value="3">탕수육</option>
        </select>
    </form>
</body>

</html>

- 콤보박스는 드롭다운 목록을 보여주고 그중 하나를 선택하는 폼 요소이다.

- <select>태그는 콤보박스 전체를 표현하고 <option>태그는 항목 하나를 표현한다.

- selected 속성이 있으면 출력될때 해당 option값이 고정된채로 출력된다.

--> 결과

콤보박스 만들기

오늘 점심은?

9) <label>로 폼 요소의 캡션 만들기

[1]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>로그인 폼</title>
</head>

<body>
    <h3>&lt;label&gt; 태그로 로그인 폼 만들기</h3>
    <hr>
    <form name="fo" method="get">
        <label>사용자 ID : <input type="text" size="15" value=""></label><br>
        <label for="pass">비밀 번호 : </label>
        <input id="pass" type="password" size="15" value="">
        <input type="submit" value="완료">
    </form>
</body>

</html>

- label을 이용하면 캡션과 폼 요소를 한 단위로 묶어 다룰 수 있다.

--> 결과

로그인 폼

<label> 태그로 로그인 폼 만들기


[2]

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>캡션을 가진 라디오버튼</title>
</head>

<body>
    <h3>먹고 싶은 것 하나만 선택?(&lt;label&gt;이용)</h3>
    <hr>
    <form>
        <label>
            <input type="radio" name="china" value="1">
            짜장면 <img src="media/jajang.png">
        </label><br>
        <label>
            <input type="radio" name="china" value="2" checked>
            짬뽕 <img src="media/jjambbong.png">
        </label><br>
        <label>
            <input type="radio" name="china" value="3">
            탕수육 <img src="media/tangsuyuk.png">
        </label>
    </form>
</body>

</html>

- label태그를 설정하면 해당 label로 감싼 캡션을 클릭해도 라디오버튼이 클릭된다.

--> 결과

캡션을 가진 라디오버튼

먹고 싶은 것 하나만 선택?(<label>이용)



10) 색 입력, <input type="color">

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>색 입력 받기</title>
</head>

<body>
    <h3>컬러다이얼로그로 색 입력</h3>
    <hr>
    <form>
        색 선택 <input type="color" value="#00BFFF" onchange="document.body.style.color=this.value">
    </form>
</body>
<!--RGB:비트값-->
</html>

- 컬러를 다이얼로그를 출력해 색을 입력받는 태그를 제공한다.

- value는 초기색을 지정한다.

--> 결과

색 입력 받기

컬러다이얼로그로 색 입력

색 선택

11) 시간 정보 입력

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>시간 정보를 입력하는 폼 활용</title>
</head>

<body>
    <h3>시간 정보 입력 HTML5 폼 요소들</h3>
    초기 세팅 : 2022년 3월 1일 밤 9시 30분(10초 32)<br>
    시간을 변경해 보세요
    <hr>
    <form>
        <pre>
month :	<input type="month" value="2022-03"><br> 
week : 	<input type="week" value="2022-W09"><br>
data : 	<input type="date" value="2022-03-01"><br> 
time : 	<input type="time" value="21:30"><br>
local:	<input type="datetime-local" 
			value="2022-09-01T21:30:10.32"><br>
</pre>
    </form>
</body>

</html>

- 달, 주, 날짜, 로컬 날짜시간 입력 폼 요소를 입력할 수 있다.

--> 결과

시간 정보를 입력하는 폼 활용

시간 정보 입력 HTML5 폼 요소들

초기 세팅 : 2022년 3월 1일 밤 9시 30분(10초 32)
시간을 변경해 보세요 
month :	
 
week : 	

data : 	
 
time : 	

local:

12) 스핀버튼과 슬라이드바

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>편리한 숫자 입력</title>
</head>

<body>
    <h3>홈 제어 시스템 - 온도 조절</h3>
    <hr>
    <form>
        지속시간 (0.0~10.0시간) :
        <input type="number" min="0.0" max="10.0" step="0.5"><br><br>
        온도 설정 : 10&deg;
        <input type="range" min="10" max="30" list="temperatures">30&deg;
        <datalist id="temperatures">
            <option value="12" label="Low">
            <option value="20" label="Medium">
            <option value="28" label="High">
        </datalist>
    </form>
</body>

</html>

- min, max, step속성을 통해 최소, 최대, 스핀버튼이나 슬라이드바를 조절할 때 증감단위 값을 지정한다.

- 사용자가 스핀버튼이나 슬라이드바로 입력한 숫자는 해당 태그의 value속성에 저장된다.

--> 결과

편리한 숫자 입력

홈 제어 시스템 - 온도 조절

지속시간 (0.0~10.0시간) :

온도 설정 : 10° 30°

13) 형식을 가진 텍스트 입력

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>형식을 가진 텍스트 입력</title>
</head>

<body>
    <h3>회원 정보를 입력해주세요.</h3>
    <hr>
    <form>
        email : <input type="email" placeholder="id@host"><br>
        홈페이지 : <input type="url" placeholder="http://"><br>
        전화번호 : <input type="tel" placeholder="010-1234-5678">
        <input type="submit" value="확인"><br><br>
        <hr>
        검색어 : <input type="search" placeholder="검색어">
        <input type="button" value="검색">
    </form>
</body>

</html>

- email, url, 전화번호를 입력할 수 있다.

- 형식 검사를 수행해 만약 잘못된 형식이면 오류메시지를 내보낸다.

--> 결과

형식을 가진 텍스트 입력

회원 정보를 입력해주세요.

email :
홈페이지 :
전화번호 :

검색어 :

14) 폼 요소들의 그룹핑, <fieldset>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>폼 입력 그룹으로 묶기</title>
</head>

<body>
    <h3>회원 정보를 입력해주세요.</h3>
    <hr>
    <form>
        <fieldset>
            <legend>회원정보</legend>
            이메일 : <input type="email"><br>
            홈페이지 : <input type="url"><br>
            전화번호 : <input type="tel">
        </fieldset>
        <small>질문 : Tel. 010-111-1111</small>
    </form>
</body>

</html>

- fieldset태그로 폼요소들을 그룹으로 묶을 수 있고, 그룹의 제목은 legend태그로 표현한다.

--> 결과

폼 입력 그룹으로 묶기

회원 정보를 입력해주세요.

회원정보 이메일 :
홈페이지 :
전화번호 :
질문 : Tel. 010-111-1111

'비트교육센터 > 웹' 카테고리의 다른 글

[비트교육센터] 웹 28일차 Javascript, 마우스 핸들링, 윈도우와 브라우저 객체  (0) 2023.07.07
[비트교육센터] 웹 27일차 Javascript, 이벤트  (0) 2023.07.06
[비트교육센터] 웹 26일차 CSS  (0) 2023.07.05

'비트교육센터/웹'의 다른글

  • 현재글[비트교육센터] 웹 25일차 VSCODE 설치, html 기초, html 구조

관련글

티스토리툴바