수강한 html 강의 영상

[무료] 입문자를 위한 HTML 기초 강의 - 인프런 | 강의

웹사이트 만드는 데 가장 기본이 되는 HTML의 주요 개념과 기본 문법을 소개합니다. 아무런 관련 지식을 보유하지 않은 입문자들도 소화할 수 있도록 만든 강의입니다., - 강의 소개 | 인프런...

www.inflearn.com

기본 문법 - 줄바꿈, 공백, 제목, 글자 스타일

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>웹페이지의 타이틀</title>
 </head>
 <body>
  <h1>가장 큰 제목 h1~h6순으로 작아진다.</h1>
  <p>문단을 나타내는 텍스트
   <br/>줄바꿈을 할 수 있다.
   <br/>공&nbsp;&nbsp;&nbsp;&nbsp;백을 2회 이상 할때 사용!
  </p>
   <hr/>
  <h1>글자의 스타일을 나타내자</h1>
  <p>
   <strong>굵은 글자를 만든다.</strong>
   <br/> <em>기울여진 글자를 만든다.</em>
   <br/> <mark>형광펜으로 칠한 글자를 만든다.</mark>
   <br/> <strong><em><mark>강하고 기울여진 형광펜</mark></em></strong>
  </p>
 </body>
</html>

웹페이지의 타이틀

가장 큰 제목 h1~h6순으로 작아진다.

문단을 나타내는 텍스트
줄바꿈을 할 수 있다.
공 백을 2회 이상 할때 사용!

글자의 스타일을 나타내자

굵은 글자를 만든다.
기울여진 글자를 만든다.
형광펜으로 칠한 글자를 만든다.
강하고 기울여진 형광펜

이미지 태그 img

<img src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값" />

단일태그, 닫는 태그를 필요로 하지 않는다.

너비와 높이는 단위 없이 정수 값만 지정하면, 픽셀(px) 단위로 적용된다.

src 속성은 이미지의 url을 입력받는다.

alt 속성은 대체 텍스트를 입력 받는다.

컨테이너 태그

콘텐츠나 레이아웃에 영향을 주지 않는 태그 요소

영역을 묶어서 관리하고자 할 때 사용한다.

<div>
 <p><span>글자가 차지하는 영역만</span>나눈다.
  div는 블럭 전체를 나눈다.
 </p>
</div>

전역속성 Global attributes

모든 html 태그에서 공통으로 사용가능한 속성.
속성이란 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
속성은 시작태그의 내부에 정의한다.
속성의 개수에는 제한이 없다.

id : 요소에 고유한 이름을 부여하는 식별자 역할 속성.
class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성.
style : 요소에 적용할 css 스타일을 선언하는 속성.
title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁제공.

더 많은 전역속성 : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes

전역 특성 - HTML: Hypertext Markup Language | MDN

전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.

developer.mozilla.org

<태그명 속성명="속성값" 속성명="속성값" >콘텐츠</태그명>

하이퍼링크

a 태그 요소는 href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)을 만든다. 인라인 요소이며, 콘텐츠는 주로 링크의 목적지를 나타낸다.

<a href="https://www.naver.com"> 네이버로 이동하는 링크 </a>
<a href="https://www.naver.com" target="_self"> 현재 탭에서 열기(기본값) </a>
<a href="https://www.naver.com" target="_blank"> 새 탭에서 열기 </a>
<a href="tel:010-1234-5678" target="_self"> 전화 걸기 </a>
<a href=mailto:mail@gmail.com" target="_blank"> 메일 쓰기 </a>

목록 List

목록은 연관있는 항목(item)들을 나열한 것을 의미한다.

순서 없는 목록 (Unordered List) <ul></ul>

순서 있는 목록 (Ordered List) <ol></ol>

<ul>
 <li>순서없는목록</li>
 <li>순서없는목록</li>
 <li>순서없는목록</li>
</ul>

<ol>
 <li>순서있는목록</li>
 <li>순서있는목록</li>
 <li>순서있는목록</li>
</ol>

입력창 input, type 속성

사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 '필드')을 나타낸다.

기본적으로 인라인 요소이며, 단일태그이다.

참고링크 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입

developer.mozilla.org

<input type="text" name="nickname" />
<input type="text" name="job" />

input 태그에 name 식별자를 추가해 입력항목에 대한 이름을 넣는다.

<input type="text" maxlength="10" placeholder="메세지를 입력하세요" />

<input type="button" value="버튼" />

<input type="color" /> 색을 골라보세요!

<input type="range" max="100" min="0" step="10" />

<input type="date" />

<select name="test" multiple>
 <option value="1">선택지1</option>
 <option value="2" selected>선택지2</option>
 <option value="3">선택지3</option>
</select>

<textarea rows="3" cols="10" placeholder="여러줄을 쓸 수 있는 메세지 칸입니다."></textarea>

서버와 클라이언트 Form 태그

form의 내용(입력값)을 제출하기 위해 input 태그의 submit 타입을 사용한다.

<form>
 <input type="text" placeholder="아이디">
 <br>
 <input type="text" placeholder="비밀번호">
 <br>
 <input type="submit" value="로그인">
</form>

action : 입력값을 전송할 서버의 url
method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)
GET : 서버에 요청을 보내 응답을 받아낸다.
POST : 서버에 요청을 보내 작업을 수행한다. 서버의 데이터 추가/수정/삭제 후 응답받기

<form action="example.php" method="POST"> </form>

위 예제는 example.php 라는 서버 프로그램으로 입력값을 전송하여 요청할 것이다.

POST 방식으로 전송할 것이다.

meta 태그

meta 태그는 HTML 문서에 대한 메타데이터를 정의한다.

메타데이터란 데이터에 대한 데이터, 즉 '정보'를 의미란다.

meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정하는데 사용된다.

meta 태그를 사용하는 이유?

웹페이지에 대한 정보를 제공하므로 검색에닞ㄴ이 페이지를 검색할 때 참고할 수 있고, 검색 결과에도 반영할 수 있다.

meta 태그가 제공하는 메타데이터의 유형 & 속성은?

charset : 문자세트
http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
name : 문서 정보
content : 메타데이터 내용

● charset

문자 인코딩에 대한 요약정보를 기입하는 속성이다.문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.

<meta charset="utf-8">

=> 인코딩을 명확하게 기입해두지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리한다. 즉, 문자가 깨질 가능성이 생긴다.

● http-equiv

콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다. HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.

<!-- IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 10초마다 페이지 새로고침하라는 뜻 -->
<meta http-equiv="refresh" content="10">

● name

name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.

<!-- 문서 제작자 -->
<meta name="author" content="유노코딩">
<!-- 페이지에 대한 요약. 브라우저 즐겨찾기 페이지의 기본 설명 값 -->
<meta name="description" content="페이지에 대한 짧고 명확한 요약">
<!-- 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록 -->
<meta name="keywords" content="예를 들면, 고양이, 강아지, 정보, 반려동물, 등등">

뷰포트 Viewport

기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta 태그를 통해 뷰포트 관련 설정을 추가할 수 있다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

=> 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다.

저작자표시 비영리 변경금지

GMENCY 멘시의 블로그

HTML 기초 문법 강의 노트