1. 웹개발과 HTML
인터넷이란?
여러 대의 컴퓨터를 하나로 연결해주는 거대한 통신망.
(사용하다 보니 연결된 컴퓨터 간의 정보 교환을 위한 시스템 필요.)
→ world wide web → web(웹) 탄생
웹 개발이란?
인터넷과 웹을 통해 공유할 웹 사이트를 만드는 일과 이를 서비스하기 위해 필요한 다양한 환경을 구축하는 일.
→ 이때 필요한 언어가 HTML & CSS
- HTML & CSS 을 이용해 만든 화면을 '웹 페이지'라고 한다.
완성된 웹페이지는 다른 웹페이지들과 그룹으로 묶이거나 연결되어 하나의 '웹 사이트'를 형성한다.
웹 브라우저 주소창에 주소(URL)를 입력하여 서버 컴퓨터의 웹 사이트에 접근한다.
접근하면 웹 브라우저 화면을 통해 웹 페이지를 볼 수 있게 된다.
현재는 HTML5가 웹 개발 표준이다.
HTML이란? (HyperText Markup Language)
- HyperText : 하이퍼링트를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup : (콘텐츠를) 표시하다.
- Language : 언어
→ 하이퍼 텍스트와 콘텐츠를 표시하는 언어.
웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어.
-
과정 : HTML 문서(코드) 작성 → 웹 브라우저에서 코드 해석 (렌더링) → 웹 브라우저 화면에 콘텐츠 표시
-
HTML 문서
: 코드 결국 텍스트이기 때문에 코드를 작성할 때는 메모장으로 데표되는 텍스트 편집 전용 프로그램을 사용해 'HTML 문서'를 만들어야 한다.
- HTML 문서는 응용 프로그램에 따라 다른 형태로 열린다.
( 코드를 보고 싶다면 편집기로, 웹 페이지를 보고 싶다면 웹브라우저로 열면 된다. )
2. 개발환경 구축 및 문서 만들기
- 웹 : Chrome
- 코드 : Visual Studio Code
- 플러그인 : Live Server
위 세팅을 기반으로 연습하고 작성했다.
- 코드를 작성하고 저장한뒤 하단에 Go Live 버튼을 누르면 Chrome에 내가 작성한 문서를 새로고침하면서 실시간으로 표시할 수 있다.
- 이외에도 코드 파일을 더블 클릭하거나 직접 chrome창에 드랍하는 것으로 열어볼 수 있다.
- 중지할 경우 Port:5500 버튼을 누르면 중지된다.
3. HTML 기본 문법
1. 태그(Tag)
-
태그의 구성요소
- 태그의 이름 (태그명)
- 여는 태그 (시작 태그)
- 닫는 태그 (끝 태그)
- 콘텐츠 → 태그가 표시할 내용태그의 기본 형태
: <태그명>콘텐츠</ 태그명> -
태그의 기능만 사용할 경우
- 콘텐츠 생략하고 단일 태그를 사용한다.단일 태그 형태
: <태그명> <태그명 /> -
태그 작성시 주의 사항
1) 태그 이름은 소문자로 쓴다.
2) 여는 태그와 닫는 태그를 정확히 입력한다.
3) 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다.
4) 들여쓰기를 적절하게 사용하는 것이 좋다. (★권장★)
- <p>콘텐츠</p> : text(콘텐츠) 표시
- <hr> or <hr /> : 단일 태그로 수평선 긋기2. 속성(attributes)
: 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
시작 태그의 내부에 정의하며 개수 제한은 없고, 태그에 추가할 속성이 여러 개일 경우 각각을 구분하기 위해 공백을 사용해야 한다.
속성을 추가한 태그에 의해 표시되는 콘텐츠는 속성으로 인해 형태가 바뀔 수도 있다. (그러나 겉으로 드러나지 않는 속성도 여러가지 존재!)
속성이 추가된 태그의 형태
: <태그명 속성="값">콘텐츠</ 태그명>
- <p style="color:red;">콘텐츠</p> : style 속성 추가.
- <p id="text">콘텐츠</p> : 화면에는 표시되지 않는 속성.3. 주석
: 사람에게는 보이지만 컴퓨터(웹 브라우저)에게는 보이지 않는 코드.
주석의 형태
: <!-- 주석의 내용 --.>
(표시를 위해 넣은 점을 제외하고 사용!)
- `<!--태그-->` : 태그로 웹 브라우저에는 보이지 않는다.
4. HTML 문서 기본 구조
HTML 문서에는 화면에 표시되는 콘텐츠 외에 '문서 정보'도 포함된다.
- DOCTYPE : 문서의 타입.
- head : 문서의 정보를 기입하는 부분.
- body : 문서의 내용을 기입하는 부분.
<<HTML 기본 문서 구조>>
<!DOCTYPE html>
<html>
<head>
문서의 정보
</head>
<body>
화면에 표시될 내용
</body>
</html>- 속성 추가하기
DOCTYPE에 추가
- lang="ko" : 언어는 한국어 (화면 표시X)
head에 추가
- <title>콘텐츠</title> : 탭에 표시되는 제목 추가 (늘 써준다 생각하면 된다.)
- <meta charset="utf-8"> : 화면에 문서 렌더링 하기 전에 브라우저가 문서를 해석하는 단계에서 문서의 인토딩 단계를 한차례 확인
ex) 인코딩 방식이 달라 문자가 깨져보이는 것.
5. 텍스트 표시하기
1. 문단
- p 태그
: 문단 요소를 나타내는 태그, 가장 많이 사용되는 텍스트 태그다.
하나의 p 태그는 하나의 문단을 표현한다.
문단과 문단 사이에는 여백이 있다.
- h 태그
: 제목(표제) 요소를 나타내는 태그이다.
숫자와 함께 사용되며, 숫자 1에서 6 순으로 작아진다.
- hr 태그
: 수평선을 표시하는 태그이다.
주제 변경 또는 내용 구분을 위해 주로 사용된다.
2. HTML 텍스트의 특징
- 엔터를 이용한 줄바꿈을 무시한다.
- 스페이스를 이용한 공백을 한 번씩만 허용한다.
→ 여러 enter를 해도, 여러 space를 해도 스페이스 한번만 유일하게 허락된 공백이다.
- 줄바꿈 태그와 공백 문자.
- br 태그 : 줄바꿈 표시를 하기 위한 태그이다.
: 두개 이상의 공백을 표시하기 위한 태그이다.
아래는 여러 예시를 직접 실습해본 내용입니다.
6. 요소의 구분과 인라인 텍스트 요소
요소의 구분
태그를 통해 표현하는 웹 요소들은 '블록 레벨 요소'와 '인라인 요소'로 구분할 수 있다.
-
<블록 레벨 요소/>
→ 자기가 속한 영역의 너비(칸)를 모두 차지하여 블록을 형성한다. -
<인라인 요소/>
→ 자기에게 필요한 만큼의 공간만 차지한다.
- 아래는 인라인 텍스트 요소 종류 예시이다.
내가 하는 요소가 블록 레벨 요소인지 인라인 요소인지 다 알고 있어야하는 건가??
→ 이것에 도움을 주는 것이 개발자 도구!(F12)
아래는 여러 예시를 직접 실습해본 내용입니다.
7. 컨테이너와 전역 속성
1. 컨테이너 (컨테이너 요소)
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 요소이다.
<div></div>: 블록 레벨 컨테이너<span></span>: 인라인 컨테이너
2. 전역 속성
모든 HTML 태그에서 공통으로 사용할 수 있는 속성.
주요한 전역 속성은 아래와 같다.
- id : 요소에 고유한 이름을 부여하는 식별자 역할
- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할
- style : 요소에 적용할 CSS 스타일 선언
- title : 요소의 추가 정보를 제공하는 텍스트로, 툴팁 제공함.
더 많은 전역 속성을 알고 싶다면 :
https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes
1) id
div 는 문구들을 묶어 놓는건데 여러개가 있으면 구별이 안된다.
이걸 id를 사용하여 이름을 줄 수 있다!
하나의 식별값을 특정요소에만 줄 수 있다.
2) class
텍스트 마다 특성을 추가할 수 있는데 이때 사용한다.
별도의 식별값을 여러개에 여러 clsss로 부여 가능하다!
공백을 두고 구별한다.
3) title
텍스트 위에 마우스를 올려놓으면 표시되는 추가 정보
8. 이미지 표시하기
1. 이미지 태그 (img)
이미지를 표시할 때 사용하는 태그이다.
단일 태그로써, 닫는 태그는 필요하지 않다.
콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.
src 속성(소스 속성)은 표시할 이미지의 위치정보와 파일명, 즉 이미지의 url을 입력받는다.
서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 된다.
- img 태그 사용법
:<img src="url"/>
(src → 표시할 이미지 / url → 위치정보)
- 같은 위치에 이미지가 있는 경우
: url에 이미지 파일 이름만 적어도 된다.
- 다른 위치에 이미지가 있는 경우
- 하위 폴더의 경우: 폴더 이름 / 파일 이름
- 상위 폴더의 경우: ../ 파일이름
2. 추가 속성
-
alt
: alternative의 약자로 대체 텍스트 역할을 한다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.
alt를 사용하면 이미지를 볼 수 없는 시각장애인에게 웹 페이지를 서비스해야하는 상황에 대한 대비가 가능하다.(웹 접근성!) → 음성인식기가 이미지 대신 이를 활용한다. -
width, height
: 이미지가 표시될 크기를 지정할 수 있는데 이때 너비와 높이를 각각 따로 지정할 수 있으며, 단위 없이 정수 값만 지정한다.
- 너비는 width, 높이는 height 사용! → 각각 픽셀 단위로 적용된다.
- width 또는 height만 작성시 원본 비율에 맞춰서 줄어든다.
아래는 여러 예시를 직접 실습해본 내용입니다.
9. Mini Project. 프로필 페이지 만들기
위에서 배운 내용을 토대로 개인 프로필 페이지를 만들어 봅시다~!
+) 엔티티 코드(©) : 저작권 표시
더 많은 엔티티 코드는 아래 페이지를 참고하여 주세요. :
https://symbl.cc/kr/html-entities/
아래는 여러 예시를 직접 실습해본 내용입니다.
10. 링크 표시하기
1. 링크란?
현재 문서에서 다른 문서로 이동할 수 있는 수단이다.
2. 링크를 만드는 태그
1) a 태그
: a 태그 요소는 다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크(연결)역할을 한다.
- 이때 href(hyper text reference) 특성이 필요하다.
- 콘텐츠는 href가 걸린 곳으로 가기 위한 단추 역할을 한다.
(우리가 흔히 보는 밑줄 쳐진 파란색 하이퍼링크 글자 처럼 말이다!)
2) 새 탭에서 열기
target 특성을 추가하면 새로운 문서를 열 때 현재 택에서 열지, 새로운 택에서 열지 결정할 수 있다.
- target="_self" : 현재 탭에서 열기 (기본값)
- target="_blank" : 새 탭에서 열기
+) 웹 사이트 말고 경로만 알고 있다면 다른 곳으로의 링크도 생성 가능합니다!
아래는 여러 예시를 직접 실습해본 내용입니다.
11. 목록 만들기
1. 목록(list)
: 연관있는 항목(item)들을 나열한 것을 의미한다.
- 블록 레벨 요소만드는 태그이다.
- 자동으로 들여쓰기가 들어간다.
-
순서 없는 목록 (Unordered List)
- 항목을 나타내는 기호가 같다.
- 목록을 나타낼 때는
<ul></ul>을 사용한다. - 항목을 나타낼 때는
<li></li>를 사용한다.
-
순서 있는 목록 (Ordered List)
- 항목을 나타내는 기호가 서로 다르고, 순차적으로 표시가 된다.
- 목록을 나타낼 때는
<ol></ol>을 사용한다. - 항목을 나타낼 때는 순서 없는 목록과 동일하게
<li></li>를 사용한다.
( 위에 기제된 아이돌 순서는 철저히 주관적인 아무 근거 없는 순위임을 말씀드립니다 (_ _) )
2. 추가 속성
- 순서 변경
순서 있는 목록에서 처음 시작하는 순서를 바꾸고 싶다면
→ start=" " 추가하면 된다.
- 순서 유형 변경
순서 있는 목록에서 숫자 말고 다른 것으로 순서를 정하고 싶다면
→ type=" " 추가하면 된다.
아래와 같이 5가지 유형이 있다.
( 1: 숫자 / A: 알파벳 (대문자) / a: 알파벳 (소문자 / I: 로마 숫자 (대문자) / i: 로마 숫자 (소문자) )
3. 목록 안에 목록 넣기
목록 안에 또 다른 <ul> 이나 <ol>을 넣으면 된다.
아래는 여러 예시를 직접 실습해본 내용입니다.
12. 표 만들기
표는 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(cell)이 콘텐츠를 나타내는 최소 단위다.
1. 표 (table)
목록과 마찬가지로, 표는 하나의 태그 안에 여러개의 태그를 채워 넣음으로써 완성할 수 있다.
<표를 만드릭 위해 사용하는 태그들>
<table>: 하나의 표를 나타내는 태그<tr>: 표 안에서 하나의 행(가로)을 나타내는 태그<th>: 행 안에서 제목에 해당하는 셀을 나타내는 태그<td>: 행 안에서 콘텐츠에 해당하는 셀을 나타내는 태그
* 위에서 아래로 내려올 수록 단위가 작아진다.
2. 표의 콘텐츠 관련 속성, 태그
1) border 속성
: 표의 테두리 두께를 지정하는 속성이다.
2) caption 태그
: table 태그의 안쪽에서 제목 또는 표에 대한 설명을 나타내는 역할을 수행한다.
태그의 콘텐츠는 기본적으로 가운데 정렬이 된다.
3. 표의 구조 잘 나타내기
사용자는 셀에 표시된 콘텐츠의 성격이나 표의 구조에 따라 여러개의 셀을 그룹으로 묶어서 관리할 수 있다.
이때 사용할 수 있는 태그들은 다음과 같다.
<thead>: 표의 제목이나 주제를 나타내는 영역<tbody>: 표의 본문을 나타내는 영역<tfoot>: 표의 요약글이나 맺음말을 나타내는 영역
위와 같은 태그들을 블록 레벨 컨테이너로 사용하면 코드 상에서 표의 구조가 명확하게 드러나 코드 유지 및 보수가 편해진다. (웹 접근성에도 도움이 된다!)
13. 입력 태그 <input>
1. 입력
여태까지 배운 태그들은 모두 콘텐츠 출력을 담당하는 '출력 요소'였다.
이제부터는 웹 브라우저 화면을 통해 사용자가 데이터를 입력할 수 있도록 해주는 '입력 요소'를 알려준다.
그 중 대표적인 태그가 <input>이다.
2. <input> 기본 형태
<input type = "데이터 유형">
- input의 핵심은 type 속성이다.
3. 텍스트를 입력 받는 type들
- text : 기본값. 텍스트를 입력받는다. (내용 공개 O)
- email : 이메일을 입력 받는다.
- password : 비밀번호를 입력 받는다. (내용 공개 X)
- search : 검색할 텍스트를 입력 받는다.
- date : 날짜와 시간을 입력 받는다.
4. 수치를 입력 받는 type들
- color : 색깔을 선택할 수 있다.
- number : 수치를 선택할 수 있다. (스피너가 추가)
- range : 수준(달성도)을 선택할 수 있다.
- checkbox : 체크 할 수 있다.
+) 추가 속성
- placeholder : input 요소 안에 설명 넣기.
5. label과 함께 사용
label 태그는 입력 요소에 라벨을 붙이는 역할을 한다.
이를 이용하면 웹 이용자에게는 좀 더 직관적인 입력 요소를 제공할 수 있고, 코드의 가독성 및 명확성이 향상되어 코드 작성자에게도 도움이 된다.
(로그인 시 아이디, 비밀번호와 같은 것이 label!)
<label 태그를 추가하는 방법>
1. label 안에 input을 넣고 input 앞에 label 내용을 적는 방법.
2. label 태그 안에 for="id 이름"을 추가하고 input 태그 안에 id 태그를 추가하여 사용하는 방법.
아래는 여러 예시를 직접 실습해본 내용입니다.
14. <input>외 입력 태그들
1. 선택지 제공 (select)
select 태그는 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴를 만든다.
메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시한다.
value 속성으로 값 구별해주는 것이 좋다.
- select 태그 기본 형태
<select>
-<option>콘텐츠</option>
- ...
</select>
- 선택지의 우선순위를 줄 수 있다.
→ selected 속성 - 여러개를 선택할 수도 있다.
→ multiple 속성
실제 고를 때에는 ctrl 버튼을 누르고 고를 수 있다.
단, dropdown 형태가 아닌 선택지가 모두 보이는 모양이기 때문에 이를 변경하려면
→ size 속성
2. 여러 줄의 텍스트 (textarea)
input 태그를 이용해 텍스트를 입력받을 때는 단 한 줄 밖에 입력받지 못한다. 반면 textarea 태그를 사용하면 여러 줄의 텍스트를 입력 받을 수 있다.
텍스트 영역의 크기는 글자 수를 기반으로 결정할 수 있다.
- textaera 태그 기본 형태
<textarea cols="숫자" rows="숫자"></textarea.>
여기서 cols(가로), rows(세로) 길이는 각 문자수이다.
하지만 문자별로 그 크기가 다르기 때문에 화면에 표시되는 것이 상이할 수 있다.
- cols와 rows로 텍스트 칸의 크기를 정해놨지만 입력창 오른쪽 하단에 빗금을 마우스로 움직이면 사이즈를 마음대로 조절할 수 있다. → re-sizing
3. 진척도 표시 (progress)
progress 태그는 작업이 어느 정도 진행되었는지를 나타낼 때 사용한다.
max 속성은 작업 완료에 필요한 작업량을 지정하는 속성이며, value 속성은 화면에 표시할 진척도를 지정하는 속성이다.
- progress 태그 기본 형태
<progress value="숫자" max="숫자"><progress>
- 아무것도 적지 않은 progress 태그는 진척도가 뚜렷히 나타나지 않고 진행 중을 나타내는 움직이는 형태로 보인다.
4. 클릭 (button)
button 태그는 클릭을 입력으로 받는 버튼 요소를 만드는 태그로, 태그 사이의 콘텐츠는 버튼에 표시될 텍스트 역할을 한다.
참고로 input 태그의 type 속성에 "button"을 지정해도 버튼을 만들 수 있는데, 둘은 외형적으로 아무런 차이가 없다.
- button 태그 기본 형태
<button>PUSH</button>
- input 이용한 형태
<input type="button" value="PUSH">
5. 강조하는 태그 (fieldset)
추후 CSS에서 할 수 있지만 HTML에서도 사용 가능한 스타일 태그이다.
- 영역 표시 기능
6. 범례 (legend)
field (영역) 에 제목을 넣는 태그이다.
아래는 여러 예시를 직접 실습해본 내용입니다.
15. 양식을 만들고 값 전송하기
1. 서버
입력 양식을 만들어주는 form 태그는 사용자가 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그이다. 따라서 서버에 대한 이해가 필요하다.
- 입력 양식이 사용된 페이지의 예
- 로그인 페이지
- 회원가입 페이지
- 검색어 입력 페이지
서버란, 정보를 제공하고 처리해주는 호스트(host)이다. (컴퓨터 자체)
사용자가 작성한 아이디와 비밀번호는 네이버 서버로 전달되고 그 서버에는 로그인에 필요한 정보들이 있고 그 정보를 처리하게 된다. 그리고 로그인이 된다.
2. form 태그
입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있다.
태그의 안에 강의들에서 학습한 여러 입력 태그들을 포함시키면, 해당 입력 요소들은 양식의 개별 항목으로써 역할을 수행한다.
단순히 폼 요소 안에 입력 요소를 포함한 것만으로는 서버에 입력 값을 전송할 수 없다. form 태그가 역할을 수행할 수 있도로고 다음 속성들을 사용해야한다.
- action : 입력값을 전송할 서버의 url
- method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET or POST)
form은 블록 레벨 요소이다. 이 안에 들어가는 것들은 인라인 요소이다.
3. form 태그 사용법 및 결과
- action에는 실제 서버를 써주는 것이 맞으나 임의의 서버 주소를 넣었다.
4. GET vs POST
-
GET : 서버에 요청을 보내어 응답을 받아낸다.
→ 서버로부터 정보를 '가져오겠다'는 성격의 요청이다.
ex) 네이버 뉴스를 웹 페이지를 가져오고 싶을 때 -
POST : 서버에 요청을 보내어 작업을 수행한다.
→ 서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다. 서버의 정보를 '조작하겠다'는, '요구하는' 성격의 요청이다.
ex) 네이버 홈페이지 별명을 바꾸고 싶을 때
자세한 얘기는 현재 서버 개발을 하는 것이 아니기 때문에 이후에 공부하는 것이 좋다~!
5. name 속성
코드 작성자는 form 요소 안에 필요한 만큼의 입력 요소를 포함해 다양한 형태의 양식을 만들 수 있다. 이때 폼 요소 안에 포함되는 각 입력 요소에는 name 속성을 추가하여 각 입력 항목의 역할을 구별해줄 수 있다.
서버가 정보를 받으면, name 속성으로 항목을 구별하기 때문에 이 역할은 무척 중요하다!
- id와 name 차이점 ☆
: id는 웹 페이지 안에서의 식별자라면 name은 서버로 전달된 입력값끼리의 식별자이다.
6. submit
form 태그를 작성하고 이후 서버에 보낼때 신호를 보내야한다.
그때, input 태그에서 type submit을 사용하게 된다.
form에 있는 입력값들을 서버로 보내게 된다.
아래는 여러 예시를 직접 실습해본 내용입니다.
16. 의미론적인 코드 - 시맨틱 태그
1. 시맨틱 태그
시맨틱은 '의미론적인'이라는 뜻이다.
시맨틱 태그는 개발자와 브라우저에게 의미를 제공한다.
<의미>콘텐츠</의미>→ 태그명은 '이 요소가 가진 목적이나 역할'을 나타낸다.
→ 이는 검색 엔진에게 좋은 단서가 된다.
시맨틱 태그는 컨테이너 태그와 같다.
그러나, 이름이 다양하고 그 이름은 웹 사이트에서 구조를 나타내는 역할을 한다.
2. 시맨틱 태그 이점
대부분의 시맨틱 태그는 컨테이너 태그 (span, div ...)와 같이 특별한 스타일을 제공하지 않는다.
하지만, 다음과 같은 이점들이 있다.
- 검색 엔진은 시맨틱 태그 (태그명)을 중요한 단서로 본다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 대 참조된다. (웹 접근성을 향상시킬 수 있다.)
- 코드의 가독성이 좋아진다.
- 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편하다.
3. 대표적인 시맨틱 태그들
- article : 독립적인 콘텐츠
- aside : 별도의 콘텐츠
- details : 추가적인 상세한 정보
- figcaption : figure의 자막
- figure : 설명 붙는 독립 콘텐츠
- footer : 맺음말
- header : 머릿말
- main : 주된 콘텐츠
- nav : 네비게이션 링트
- section : 콘텐츠의 한 섹션(절)
- summary : detail의 헤더
- time : 강조할 시간
위 태그들은 다음 프로젝트에서 직접 사용해볼 예정이다.
17. 문서 정보 관리하기 - 메타 데이터
1. meta 태그
HTML 문서에 대한 메타 데이터를 정의한다.
메타 데이터란 데이터에 대한 데이터, 즉 '정보'를 의미한다.
meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.
- meta 태그를 사용하는 이유
: 웹 페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색 결과에도 반영할 수 있다.
2. 메타 데이터의 유형 & 속성
- charset : 문자 세트
- http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
- name : 문서 정보
- content : 메타 데이터 내용
3. charset
문자 인토딩에 대한 요약 정보를 기입하는 속성이다. (문자 집합 선언)
문자 인코딩이란, 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.
→ 인코딩을 명확하게 기입해두지 않으면 웹 브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리한다.
즉, 문자가 깨질 가능성이 있다.
4. http-equiv
HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.
http-equiv가 http 관련 정보를 지정하면, content라는 속성에 지정되어 있는 값이 해당 정보의 역할을 수행하게 된다.
<meta http-equiv="x-ua-compatible" content="IE=edge">
: 호환성 맞춤 설정이 결정되는 코드.
(Ie=edge → 마이크로 소프트 사 계열의 웹 브라우저를 사용할 때 edge라는 엔진에 맞춰서 개발을 했다는 의미)
<meta http-equiv="refresh" content="10">
: 10초마다 페이지를 새로고침 한다는 코드.5. name
name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 "이름 + 값" 쌍의 형태로 제공할 때 사용할 수 있다.
<meta name="author" content="페이지 작성자">
<meta name="description" content="페이지에 대한 요약 정보글">
<meta name="keywords" content="공부, 코딩, IT, 학습">실제 meta 태그에서 가장 많이 사용되는 속성★ (위 세가지가 기본으로 작성되는 경우가 많다.)
위와 같이 문서 정보를 입력하는 것은 검색 최적화에 도움이 되는 작업이다!
사용자에게 잘 전달되는 페이지를 만들기 위한 장치☆
아래는 여러 예시를 직접 실습해본 내용입니다.
+) 추가 기능, !
visual studio code에서 기본 html 문서 구조를 나타내고 싶을 때 !만 쳐도 기본 구조가 나오게 된다...! 완전 꿀팁!
18. Mini Project. 설문조사 양식 만들기
[HTML 강의 1일차 후기]
확실히 바로바로 웹 페이지로 내가 작성한 코드들이 나와서 재밌었다. 약간의 노가다 작업을 좋아하는 나로서는 백엔드말고 프론트엔드 강의를 들을 걸 그랬나 라는 생각을 잠깐이나 하게되었다. (사실 미적 감각이 없어서 프론트 엔드에는 자신이 없었달까,,,)
그리고 velog 작성은 처음 해보는데 원하는 모양(?)으로 글이 써지지 않아서 초반엔 살짝 애를 먹었다.
얼마나 했다고 Python 강의를 들을 때 항상 이용하던 Colab에 익숙해져버려서 많이 헷갈렸다.
그래도 기술 블로그를 꾸준히 작성하면 좋다고 하니 이 글 다음엔 HTML 1일차 과제로 글 작성하는 것 하나랑 Python 관련 학습한 것을 정리할 계획이다.
위 내용들은 오즈 스쿨 백엔드 코스 부트 캠프 강의를 바탕으로 배운 것을 요약했다.
추가 참고 자료는 아래 링크에서 확인할 수 있다.
https://wikidocs.net/book/7596
