서른네번째 수업 | HTML

Faithful Dev·2024년 11월 13일

MS AI School

Microsoft Korea 5th AI School

목록 보기

40/59

김자영 강사님

개발환경 구축

확장프로그램 설치

한국어
Material Icon Theme: 파일 아이콘을 직관적으로 표시
Prettier - Code formatter: 코드를 일관된 스타일로 자동 포맷팅
Auto Rename Tag: 태그의 이름을 변경할 때 여는 태그와 닫는 태그를 자동으로 함께 변경
live server: 로컬 서버를 바로 실행하고, 파일 변경 시 자동 새로고침

기본 브라우저 설정

Chrome을 기본 브라우저로 설정한다. ~~Edge 미안,,~~

웹 문서 만들기

html 기본 코드 작성하기

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <title>문서제목</title>
    </head>
    <body>
        <h1>웹 개발 기초</h1>
        <p>html</p>
        <p>css</p>
        <p>javascript</p>
        <button>시작하기</button>
    </body>
</html>

CSS 파일 만들기

h1 {
	color: red;
}
p {
	color: blue;
{
button {
	background-color: yellow;
}

웹문서 스타일 지정하기

html에 css파일 연결하기(외부 스타일시트)

<link rel='stylesheet' href='css 파일' />

html에서 css 지정하기(내부 스타일시트)

<style>
	h1 {
    	color: green;
    }
</style>

태그에서 css 지정하기(인라인 스타일)

<h1 style='color: purple'>웹 개발 기초</h1>

웹 문서에 동작 추가하기

js 파일 만들기

const btnStart = document.querySelector('button');
btnStart.onclick = function () {
	alert('start');
};

html에 js파일 연결하기(외부 JavaScript 파일)

<script src='js 파일'></script>

js 파일은 어디서든 연결할 수 있지만 내용이 다 작성된 후 마지막에 body가 닫히기 전인 위에서 연결하는 것을 권장한다.

html 내부에 script 작성(내부 JavaScript)

<script>
	let element_h1 = document.querySelector('h1');
    element_h1.onclick = function () {
    	element_h1.onclick = element_h1.style.backgroundColor = 'aqua';
    };
</script>

태그에 script 직접 작성(인라인 방식)

<p onclick='alert('html')'>html</p>

HTML/CSS/Javascript

웹의 동작 원리

웹은 클라이언트-서버 모델을 중심으로 이루어진다. 이 과정은 사용자가 웹 페이지에 접근할 때 웹 브라우저를 통해 요청(Request)을 보내는 것으로 시작된다. 요청을 받은 서버는 해당 요청에 맞는 HTML, CSS, Javascript 파일과 이미지 같은 웹 리소스를 준비하고 응답(Response)한다. 이 응답이 사용자에게 도착하면, 브라우저는 이를 해석해 웹페이지를 화면에 렌더링하여 사용자에게 보여준다.

HTML 기본 구조 및 구성요소

HTML 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<!-- 웹페이지 내용 -->
</body>
</html>

<!DOCTYPE html>: 문서가 HTML5 형식임을 브라우저에 알린다.
<html>: 전체 HTML 문서의 루트(root) 요소.
<head>: 문서의 메타데이터(제목, 문자 인코딩, 뷰포트 설정)를 포함하며, 브라우저가 페이지를 해석하는 데 도움을 준다.
- <meta charset="UTF-8">: UTF-8 인코딩을 사용해 다양한 언어와 기호가 표시될 수 있게 한다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서도 콘텐츠가 화면 너비에 맞춰 보이도록 설정한다.
- <title>: 브라우저 탭에 표시될 문서 제목을 설정.
<body>: 사용자가 화면에서 보게 될 모든 콘텐츠(텍스트, 이미지, 링크, 테이블 등)를 포함한다.

HTML 구성 요소

HTML의 구성 요소는 웹 페이지의 구조와 콘텐츠를 정의하는 기본 단위로, 태그(tag), 요소(element), 속성(attribute), 내용(content) 로 이루어져 있다.
1. 태그(tag)
- HTML 문서에서 특정 기능을 지정하기 위해 사용하는 코드.
- 대개 시작태그와 종료태그로 구성된다.
- <img>와 같은 일부 태그는 종료태그가 없는 단일 태그이다.
2. 요소(element)
- HTML에서 시작태그와 종료태그 사이에 위치하는 전체를 하나의 요소라고 부른다.
- ex: <p>안녕하세요</p>에서 <p> 태그와 안녕하세요라는 내용이 하나의 요소를 구성한다.
- 요소는 페이지의 특정 구조나 내용을 지정하는 데 사용되며, 속성과 내용을 포함할 수 있다.
3. 속성(attribute)
- 요소에 추가적인 정보를 제공하는 부분. 속성은 항상 시작태그에 정의되며 속성명="속성값" 형태를 가진다.
- ex: <img scr="image.jpg" alt="이미지 설명">에서 src와 alt가 속성으로, 이미지의 경로와 설명을 지정한다.
- 여러 개의 속성을 사용할 수 있으며, 각 속성은 공백으로 구분된다.
4. 내용(content)
- 시작태그와 종료태그 사이에 위치한 실제 텍스트나 다른 HTML 요소들을 말한다.
- 이미지나 빈 태그처럼 내용이 없는 태그도 존재할 수 있다.

HTML 주요 태그

문서 구조 관련 태그

<html>: HTML 문서의 루트 요소로, 전체 문서를 감싸는 태그.
<head>: 메타데이터(문서 정보)와 관련된 내용이 들어가며, 브라우저에서 직접 표시되지는 않는다.
<title>: 웹페이지의 제목을 정의하여 브라우저 탭에 표시.
<body>: 웹페이지에서 실제 표시되는 콘텐츠를 포함.

텍스트 및 포맷팅 관련 태그

<h1> ~ <h6>: 제목(heading) 태그로, <h1>이 가장 큰 제목, <h6>가 가장 작은 제목을 나타낸다.
<p>: 단락을 정의하는 태그로, 일반적인 텍스트 콘텐츠를 담는다.
<strong>: 굵게 강조된 텍스트를 나타낸다.
<em>: 기울임꼴로 표시하여 강조된 텍스트를 나타낸다.
<br>: 줄바꿈을 생성.
<hr>: 수평선을 추가해 구분선 역할을 한다.

링크 관련 태그

<a>: 하이퍼링크를 생성하여 다른 페이지나 같은 페이지 내의 특정 위치로 이동할 수 있게 한다.
- 주요 속성
  - href: 링크할 주소나 경로를 지정.
  - target: 새 창이나 현재 창 등 링크를 열 위치를 설정.

목록 관련 태그

<ul>: 순서가 없는 목록을 생성한다. (불릿포인트로 표시)
<ol>: 순서가 있는 목록을 생성한다. (숫자나 문자로 표시)
<li>: 목록의 각 항목을 정의한다. <ul>과 <ol> 내부에서 사용된다.

이미지 및 미디어 관련 태그

<img>: 이미지 파일을 표시.
- 주요 속성
- src: 이미지 파일 경로를 지정한다.
- alt: 이미지를 불러올 수 없을 때 표시할 대체 텍스트를 제공한다.
<video>: 동영상 콘텐츠를 삽입한다.
<audio>: 오디오 콘텐츠를 삽입한다.

테이블 관련 태그

<table>: 테이블을 생성한다.
<tr>: 테이블의 행(row)을 정의.
<th>: 테이블의 제목 셀(header cell)을 정의.
<td>: 테이블의 데이터 셀을 정의.

폼(form) 관련 태그

<form>: 사용자 입력을 받기 위한 영역을 정의하고 서버로 데이터를 전송할 수 있다.
- 주요 속성
- action: 폼 데이터를 보낼 서버의 URL을 지정.
- method: 데이터를 전송하는 방식(GET 또는 POST)을 정의.
<input>: 사용자의 입력을 받을 수 있는 필드를 생성. type 속성에 따라 다양한 입력 방식(텍스트, 비밀번호, 라디오 버튼 등)을 설정할 수 있다.
<textarea>: 여러 줄의 텍스트 입력 필드를 제공한다.
<button>: 클릭 가능한 버튼을 만든다.

레이아웃 관련 시멘틱 태그

<header>: 문서나 섹션의 헤더 영역을 정의.
<footer>: 문서나 섹션의 푸터 영역을 정의.
<nav>: 내비게이션 링크 모음을 정의.
<section>: 문서 내 주제를 가진 특정 영역을 정의.
<article>: 독립적이고 재사용 가능한 콘텐츠를 정의.
<aside>: 페이지의 사이드바 또는 부가적인 내용을 정의.

텍스트 문서 작성하기

텍스트 작성 태그

<h1> ~ <h6>: 제목을 정의하는 태그.
<p>: 단락(paragraph)을 정의하는 태그로, 텍스트를 한 문단 씩 구분할 때 사용된다. <p> 태그는 기본적으로 위아래에 여백이 있어 문단 간 구분을 돕는다.
<div>: 블록 레벨 컨테이너로, 주로 페이지의 레이아웃을 구성하고 큰 영역을 나눌 때 사용된다. <div>는 전체 가로 폭을 차지하며, 내부 콘텐츠를 블록처럼 묶어준다.
<span>: 인라인 컨테이너로, <div>와 달리 줄바꿈 없이 사용된다. 텍스트의 일부분에 스타일(색상, 글꼴 등)을 적용할 때 유용하다.
<pre>: 미리 서식화된 텍스트를 표시하며, 입력한 대로 줄바꿈과 공백이 보존된다. 코드나 특정 서식을 유지해야 하는 텍스트에 적합하다.
<br>: 줄바꿈을 생성하는 태그로, 단락을 나누지 않고 단순히 줄을 바꿔야 할 때 사용한다.
<hr>: 수평선을 삽입하여 콘텐츠 간에 구분선을 만들어준다.

텍스트 포맷팅 태그

<strong>: 굵은 텍스트로 표시하며, 의미론적으로 중요한 내용을 강조한다.
<em>: 기울임꼴 텍스트로 표시하며, 강조해야 할 텍스트를 나타낸다.
<b>: 굵은 텍스트를 만들지만 <strong>보다는 의미론적 강조가 약하다.
<i>: 기울임꼴 텍스트로 표시하며, 의미 없이 스타일만 적용할 때 사용한다.
<u>: 밑줄이 그어진 텍스트를 생성한다.
<mark>: 하이라이트되어 강조된 텍스트를 나타낸다.
<small>: 작은 글자로 표시한다.
<del>: 삭제된 내용을 나타내며, 텍스트에 취소선을 그어준다.
<ins>: 삽입된 내용을 나타내며, 주로 밑줄이 그어진다.
<sub>와 <sup>: 아래 첨자와 위 첨자를 표시하는 태그.
<code>: 컴퓨터 코드처럼 보이도록 서식화하는 태그로, <pre>와 함께 사용하면 코드 예제를 그대로 표시할 수 있다.
<blockquote>: 긴 인용문을 들여쓰기하여 표시한다.
<q>: 짧은 인용구에 사용되며 보통 따옴표로 감싸진다.

하이퍼링크

HTML에서 하이퍼링크는 웹페이지 간 또는 웹페이지 내부의 이동을 가능하게 하는 중요한 요소이다. 하이퍼링크는 <a> 태그를 사용해 생성하며, 속성으로 링크의 경로와 열리는 방식을 지정할 수 있다.

하이퍼링크 기본 태그
- <a> 태그는 HTML에서 링크를 정의하는 태그이다.
- 형식: <a href="URL">링크 텍스트</a>
주요 속성
- href (Hypertext REFerence): 연결할 웹페이지나 리소스의 URL을 지정하는 필수 속성.
- target: 링크가 열리는 위치를 지정.
  - _self: 현재 창에서 링크를 연다. (기본값)
  - _blank: 새 창이나 새 탭에서 링크를 연다.
- download: 링크된 파일을 다운로드 할 때 사용한다. 이 속성이 설정되면 사용자가 클릭했을 때 파일이 자동으로 다운로드된다.
- title: 링크에 대한 설명을 나타내며, 마우스를 올리면 툴팁으로 표시된다.
- id: 내부 링크에서 앵커(링크 위치)를 설정하는 데 사용된다. 페이지의 특정 위치로 이동할 수 있다.
내부 링크와 외부 링크
- 외부 링크: 다른 웹사이트로 연결하는 링크. URL 경로에 외부 사이트의 주소를 사용한다.
- 내부 링크: 동일한 웹사이트 내에서 페이지나 섹션으로 이동할 때 사용한다. 주로 #id 형식을 사용하여 해당 id를 가진 요소로 이동한다.

HTML에서 목록은 정보를 구조적으로 나열할 때 사용하는 중요한 요소이다.

순서 없는 목록 (Unordered List)
- <ul> 태그와 <li> 태그를 사용하여 생성한다.
- 목록 항목 앞에 불릿 포인트(점, 원 등)를 사용해 순서 없이 나열한다.
- 불릿 스타일은 CSS를 사용해 변경할 수 있다.
순서 있는 목록 (Ordered List)
- <ol> 태그와 <li> 태그를 사용하여 생성한다.
- 각 항목 앞에 숫자나 알파벳이 표시되어 순서를 나타낸다.
- 주요 속성
  - type: 마커 유형을 설정한다.
    - start: 목록이 시작할 번호를 설정한다.
    - reversed: 목록을 역순으로 표시한다.
정의 목록 (Description List)
- <dl> 태그를 사용하여 용어와 설명을 정의한다.
- <dt> 태그는 정의할 용어를 나타내며, <dd> 태그는 용어에 대한 설명을 제공한다.

테이블

HTML에서 테이블은 데이터를 행과 열 형태로 정리해 보여주는 데 사용된다.

테이블의 기본 구조
<table>: 테이블 전체를 감싸는 태그.
<tr> (table row): 테이블의 행을 정의.
<th> (table header): 제목 셀을 정의하는 태그로, 보통 굵게 표시되며 테이블의 열 제목이나 행 제목을 나타낸다.
<td> (table data): 데이터 셀을 정의하며, 테이블의 실제 데이터를 입력하는 영역.
테이블 그룹 태그
- <thead>: 테이블의 헤더 영역을 정의하는 태그로, 보통 각 열의 제목을 지정한다.
- <tbody>: 테이블의 본문을 정의하며, 실제 데이터가 포함된다.
- <tfoot>: 테이블의 푸터 영역을 정의하여, 합게나 요약 정보 등을 표시할 때 사용된다.
셀 병합 (colspan, rowspan)
- colspan: 셀을 가로 방향으로 병합하여 여러 열에 걸쳐 확장한다.
- rowspan: 셀을 세로 방향으로 병합하여 여러 행에 걸쳐 확장한다.
테이블 스타일링: 테이블은 CSS를 사용해 스타일링할 수 있다. 가장 기본적인 방법은 테두리와 여백을 설정하는 것.
테이블 캡션
- <caption>: 테이블의 제목을 설정하는 태그로, 테이블의 맨 위에 배치된다.

이미지 및 멀티미디어

HTML에서는 이미지와 멀티미디어 요소를 통해 시각적, 청각적 콘텐츠를 웹페이지에 삽입할 수 있다.

이미지 태그 (<img>)
- 이미지 파일을 웹페이지에 삽입할 때 사용한다. <img> 태그는 종료 태그가 없는 단일 태그이다.
- 주요 속성
  - src: 이미지를 불러올 파일의 경로를 지정.
    - alt: 이미지를 불러오지 못할 경우 표시되는 대체 텍스트로, 접근성 향상을 위해 필수적으로 사용된다.
    - width / height: 이미지의 가로, 세로 크기를 지정한다. 픽셀(px)이나 퍼센트(%) 단위로 설정할 수 있다.
    - title: 이미지에 마우스를 올렸을 때 나타나는 툴팁 텍스트.
비디오 및 오디오 태그(<video>, <audio>)
- 비디오(오디오) 파일을 웹페이지에 삽입할 때 사용하며, 종료 태그를 포함한다.
- 주요 속성
  - src: 비디오(오디오) 파일의 경로를 지정한다.
    - controls: 재생, 일시정지 등의 기본 컨트롤을 사용자에게 제공한다.
    - autoplay: 페이지가 로드될 때 비디오(오디오)가 자동 재생된다.
    - loop: 비디오(오디오)를 반복 재생한다.
    - muted: 비디오(오디오) 소리를 제거하여 무음으로 재생한다.
    - width / height: 비디오의 가로와 세로 크기를 설정한다.
    - poster: 비디오가 재생되기 전 화면에 표시할 이미지 썸네일을 지정한다.

사용자 입력

HTMl에서 폼(form) 은 사용자로부터 입력을 받아 서버로 전송할 때 사용되는 요소이다. 로그인, 검색, 회원가입 등 다양한 사용자 상호작용에 사용된다.

폼 태그 (<form>)
- <form> 태그는 입력받은 데이터를 서버로 전송하는 컨테이너 역할을 한다.
- 주요 속성
  - action: 데이터를 전송할 서버의 URL을 지정한다.
    - method: 전송 방식을 지정하며, 일반적으로 GET 또는 POST가 사용된다.
      - GET: URL에 데이터를 붙여 전송하며, 주소창에 데이터가 표시된다. 주로 검색과 같이 데이터를 보여줄 때 사용한다.
      - POST: 데이터를 HTTP 요청의 본문에 담아 전송하며, 보안성이 높고 긴 데이터를 보낼 수 있다.
    - target: 전송 결과를 표시할 위치를 지정. (_self: 현재 창, _blank: 새 창)
입력 필드 태그 (<input>)
- <input> 태그는 다양한 사용자 입력을 받는 가장 기본적인 요소이다. type 속성 값에 따라 여러 종류의 입력 필드를 생성할 수 있다.
- 주요 속성
  - text: 한 줄 텍스트 입력
    - password: 비밀번호 입력 (문자 대신 ***로 표시)
    - email: 이메일 주소 입력
    - radio: 여러 선택지 중 하나를 선택할 수 있는 라디오 버튼
    - checkbox: 체크박스
    - submit: 폼을 제출하는 버튼
    - reset: 입력 내용을 초기화하는 버튼
- name: 폼 데이터를 전송할 때 사용되는 이름.
- value: 기본 입력값을 설정한다.
- placeholder: 입력 필드에 힌트로 표시되는 텍스트.
- required: 필수 입력 필드를 지정.
텍스트 영역 (<textarea>)
- 여러 줄의 텍스트를 입력받을 때 사용한다.
- 주요 속성
  - rows, cols: 텍스트 영역의 행과 열의 개수를 설정한다.
선택 필드(<select>와 <option>)
- 드롭다운 목록을 생성하여 사용자가 여러 항목 중 하나를 선택할 수 있게 한다.
- <option> 태그는 목록의 각 항목을 정의하며, selected 속성을 사용해 기본 선택 항목을 지정할 수 있다.
버튼 (<button>과 <input type="submit">)
- <button> 태그는 클릭 가능한 버튼을 정의하며, 텍스트, 이미지 등을 추가할 수 있다.
- <input type="submit">와 <button type="submit">은 폼을 제출하는 버튼 역할을 한다.

레이아웃 구성 관련 시멘틱 태그

<header>
- 문서나 섹션의 헤더(머리글) 역할을 하는 태그.
- 주로 페이지나 섹션의 제목, 로고, 내비게이션 링크 등을 포함한다.
- 페이지 전체의 헤더뿐 아니라 각 <section>, <article> 내에도 사용할 수 있다.
<nav>
- 내비게이션 링크 모음을 정의하는 태그로, 사이트의 주요 탐색 메뉴에 사용된다.
- 페이지의 주요 링크, 메뉴 항목 등을 포함하여 사용자가 페이지 간 이동을 쉽게 할 수 있게 한다.
<section>
- 문서의 특정 주제나 섹션을 정의하는 태그로, 여러 콘텐츠를 묶어 하나의 주제로 나누고자 할 때 사용한다.
- 각 <section>은 고유한 주제나 기능을 가질 수 있으며, 중첩하여 사용할 수 있다.
<article>
- 독립적이고 재사용 가능한 콘텐츠 영역. 블로그 글, 뉴스 기사, 포럼 게시물 등과 같이 독립적으로 읽을 수 있는 콘텐츠를 감싸는 데 적합하다.
- <article>은 다른 문서에서도 재사용할 수 있도록 독립적인 내용을 담고 있다.
<aside>
- 본문과 간접적으로 관련된 콘텐츠를 담는 태그로, 주로 사이드바나 부가 정보 영역을 정의할 때 사용된다.
- 광고, 추천 글 목록, 관련 링크 등 본문과 직접 관련은 없지만 유용한 콘텐츠를 담는 데 적합하다.

Personal Insight

프로젝트가 끝나고 나니 수업이 쉬운 것만 같은 이 느낌적인 느낌.

Faithful Dev

Turning Vision into Reality.

이전 포스트

서른세번째 수업 | AI Agents

다음 포스트