입문자를 위한 HTML 기초 강의 (유노코딩)

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

HTML 코드 기초 문법

HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 함.

HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 됨.

태그 : HTML 코드에서 정보(콘텐츠)를 정의하는 형식

• HTML 태그 사용법 :

1) 시작과 끝

태그는 <>과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다.

각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타냄.

<태그명>여기에 콘텐츠를 기입합니다

2) 단일 태그

시작과 끝을 구분할 필요가 없는 태그

<태그명 /> 또는 <태그명>

3) 속성

속성은 태그의 부가적인 기능을 정의하는 것, 선택사항

속성은 시작 태그의 내부에 정의함.

속성의 개수에는 특별한 제한이 없음.

<태그명 속성명="속성값">내용이 들어감</태그명>
<태그명 속성명="속성값" />

태그명과 속성 정의는 공백(space)로 구분, 큰따옴표를 사용함.

4) 주석

주석은 사람에게 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드

코드에 대한 메모를 남기기 위한 용도로 사용됨.

주석 또한 시작과 끝을 기호를 통해 구분함.

HTML 문서 기본 구조

<!DOCTYPE html>

문서의 첫 부분에서 문서 유형을 지정하는 단일 태그

문서 유형 : 이 문서는 어떤 문서이니 잘 처리해달라는 메시지를 전달하는 것

현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 'html'

<html>~</html>

문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그

<html>에서부터 HTML 문서가 시작되고, </html>에서 HTML문서가 끝남.

이 태그 내부에 다양한 태그들이 포함되어 문서의 내용을 구성함.

<head>~</head>

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어감.

<meta charset="utf-8">

문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그

문자 인코딩 : 한글을 표시하기 위해 문자 세트를 지정하는 작업, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음.

<title>~</title>

문서의 제목을 나타냄. 콘텐츠는 브라우저 탭에 표시됨.

<body>~</body>

실제 브라우저 화면에 표시될 내용을 입력하는 태그

- 텍스트를 표시하는 태그

- 이미지를 표시하는 태그

- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그

태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성 가능함.

텍스트 태그 사용 방법과 특징

문단(paragraph)

p태그 : 문단 요소를 나타내는 태그, 가장 많이 사용되는 텍스트 태그.

하나의 p태그는 하나의 문단을 표현함. 문단과 문단 사이에는 공백이 있음.

제목(headline)

h태그는 제목(표제) 요소를 나타내는 태그

숫자와 함께 사용되며, 숫자 1일 때 가장 크고 6일 때 가장 작음.

수평선

hr태그 : 수평선을 표시하는 단일태그

수평선은 주제 변경 또는 내용 구분을 위해 주로 사용됨.

<!DOCTYPE html>

</head> <!-- 들여쓰기는 포함관계를 나타냄,

필수는 아니지만 가독성 위해!-->

<body>

<p>제목의 크기가 바뀌었습니다.</p>

<p>P 태그는 하나의 문단을 나타냅니다.</p>

</body>

</html>

HTML 텍스트의 특징

일반적으로 엔터는 '줄바꿈'을 의미하는 입력이지만, HTML 코드에서는 이를 무시함.

또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않음.

줄바꿈 태그와 공백문자

HTML에서는 br태그가 '줄바꿈'을 담당함.

공백을 두 번 이상 표시하고자 할 때는  를 사용함.

태그의 구분과 인라인 텍스트 요소

블록 레벨 요소를 만드는 태그 vs 인라인 요소를 만드는 태그

• 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성

• 인라인 요소 : 자기에게 필요한 만큼의 공간만 차지

strong 태그 : 감싸고 있는 콘텐츠를 굵게 표시하는 태그

em 태그 : 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시

mark 태그 : 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그

p 태그 안에서 인라인 태그인 strong, mark 사용하기

P태그 안에 P태그 넣기

이미지 표시하기

img 태그

- 이미지를 표시할 때 사용

- 단일 태그로써, 닫는 태그를 필요로 하지 않음.

- 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 함.

기본 형태)

표시할 이미지 지정

img태그의 scr속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성

즉, 이미지의 url을 입력받음.

서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 됨.

url : 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)

이미지 설명(alt)

- alt : alternative의 약자, 대체 텍스트 역할을 함.

- 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신 대체 텍스트가 표시됨.

- 이미지를 볼 수 없는 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능함(음성인식기가 이미지 대신 이를 활용)

이미지 크기 조절하기

img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있음.

이때 너비와 높이를 각각 지정할 수 있음.

단위 없이 정수 값만 지정함.

<img scr="표시할 이미지 파일" alt="이미지 설명"

witdth="너비값" height="높이값" />

이때 너비와 높이는 각각 픽셀(px) 단위로 적용됨.

컴퓨터 폴더 안에 있는 이미지 표시하기

컴퓨터 폴더 안에 있는 이미지 with와 height 지정

alt 추가한 후 이미지에 대한 설명 나오는지 확인하기

구글에서 찾은 이미지를 표시하기

컨테이너 그리고 전역 속성

컨테이너 태그

- 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할

- 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 사용하는 것이 좋음. (CSS, JS)

<div></div> : 블록 레벨 컨테이너

<span></span> : 인라인 컨테이너

<!DOCTYPE html>

<html>

<head>

<title>이미지를 표시해보자</title>

</head>

<body>

<img src="images/bellybutton.jpg"

width="300"

alt="배꼽파" />

<p>배꼽파는 배꼽파지 않도록 열심히 개발공부를 하기로 했다!</p>

</div>

<div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>이미지를 표시해보자</title>

</head>

<body>

<img src="images/bellybutton.jpg"

width="300"

alt="배꼽파" />

<p>배꼽파는 배꼽파지 않도록 열심히 개발공부를 하기로 했다!</p>

</div>

<div>

</div>

</body>

</html>

전역 속성(Global attributes)

- 모든 HTML 태그에서 공통으로 사용할 수 있는 속성

- 속성 : 태그의 부가적인 기능을 정의하는 것, 선택사항, 시작 태그의 내부에 정의함

- 속성의 개수에는 특별한 제한이 없음.

속성 추가하는 방법)

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

• id : 요소에 고유한 이름을 부여하는 식별자 역할 속성 (태그당 하나씩만 지정)

• class : 요소를 그룹별로 묶을 수 있는 식별자 역할 속성 (다중 지정 및 중복 가능)

→ id와 class는 태그명이 같은 요소들을 식별하기 위해 사용하는 속성들

• style : 요소에 적용할 CSS 스타일을 선언하는 속성

• title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공

마우스를 갖다대면 '배꼽파의 소개'라는 글자가 뜸 → 툴팁

툴팁은 title에 의해 만들어지는 요소임.

링크 만들기

링크 : 현재 문서에서 다른 문서로 이동할 수 있는 수단

링크는 anchor

a태그 요소 :

- href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와 그 외 다른 url로 연결할 수 있는 링크(연결)을 만듦.

- 인라인 요소, 콘텐츠는 주로 링크의 목적지(이동하고자 하는 url)를 나타냄.

- target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정할 수 있음.

- href에는 전화번호나 메일 주소 등을 지정할 수 있고, 이때 각 유형별로 추가되는 텍스트가 있음.

현재 탭에서 열기(기본값)

</a>

새 탭에서 열기

</a>

목록 표시하기

• 목록 : 연관 있는 항목(item)들을 나열한 것

• HTML 목록 : 순서 없는 목록과 순서 있는 목록으로 구분됨.

- Unordered List : 토끼, 다람쥐, 청설모, 호랑이

- Ordered List : 1. HTML, 2. CSS, 3. JavaScript

목록 태그의 구분

• 순서 없는 목록 : <ul></ul>

• 순서 있는 목록 : <ol></ol>

항목 태그는 같은 걸 쓴다

<li> 태그는 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그

항목들(<li> 태그들)을 감싸는 태그가 무엇이냐에 따라 기호가 달라짐.

<ul> <li>토끼</li> <li>다람쥐</li> <li>청설모</li> <li>호랑이</li> </ul>	• 토끼 • 다람쥐 • 청설모 • 호랑이
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ol>	1. HTML 2. CSS 3. JavaScript

<ul>, <ol>, <li>는 모두 블록 레벨 요소를 만드는 태그

입력 요소 만들기

input

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

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

type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라짐.

사용 가능한 type은 20여 가지이며, 기본값은 text임.

type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보임.

input 태그에는 name 식별자(각각의 입력 항목에 대한 이름)를 추가할 수 있음.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text"

maxlength="5"

placeholder="메시지 입력해!" /> <br> <br>

<input type="button"

value="PUSH" /> <br> <br>

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

<input type="range" max="100" min="0"

step="10" /> <br> <br>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input name="text" type="text"

maxlength="5"

placeholder="메시지 입력해!" /><br><br>

<input name="push" type="button"

value="PUSH" /><br><br>

색을 골라보세요! <br><br>

<input name="number" type="range"

max="100" min="0"

step="10" /> <br> <br>

</body>

</html>

Select 그리고 textarea

select

- 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴

- 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시함.

- input과 마찬가지로 name을 지정할 수 있으며, 각각의 option에는 value 속성을 지정할 수 있음.

- value는 실제로 처리될 값을 나타냄.

cafe의 입력값은 'starbucks'이다 라는 결론이 나옴.

textarea

- 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소

- name을 추가하여 구별해줄 수 있음.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<!-- multiple은 펼쳐진 메뉴가 나옴,

ctrl누르고 여러 개 선택-->

</select>

<br>

<textarea name="content"

rows="10" cols="10">기본적으로 쓰여 있는 텍스트</textarea>

</body>

</html>

폼(form) Part 1. 서버와 클라이언트

form : 사용자가 입력한 데이터(입력값)을 서버로 보내기 위해 사용하는 태그

서버 : 정보를 제공하는 호스트(host)

클라이언트(사용자)가 요청하면, 서버는 그에 대한 응답으로 정보를 제공함.

ex. 로그인

로그인 양식은 3개의 입력 요소로 구성되어 있으며, 3개의 입력 데이터는 form을 통해 서버로 전송됨.

폼(form) Part2. 폼 태그

form은 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있음.

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

'로그인' 버튼을 누르면 입력된 아이디와 비밀번호가 서버로 전송되고(요청),

서버 측에서 데이터를 처리한 결과를 클라이언트에게 보내준다(응답)

action : 입력값을 전송할 서버의 url

method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)

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

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

GET vs POST

GET :

서버에 요청을 보내어 응답을 받아낸다.

서버로부터 정보를 '가져오겠다'는 성격의 요청

ex. 서버의 이미지 파일 받아오기, 기상청 날씨정보 받아오기

POST :

서버에 요청을 보내어 작업을 수행한다.

서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.

서버의 정보를 '조작하겠다'는 성격의 요청이다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br>

</select>

<br>

</form>

</body>

</html>

메타 태그 (meta)

• meta 태그 :

- HTML 문서에 대한 메타데이터를 정의함.

- 메타데이터는 데이터에 대한 데이터, 즉 '정보'를 의미함.

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

• meta 태그를 사용하는 이유?

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

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

- charset : 문자 세트

- http-equiv : 콘텐츠 속성 정보에 대한 http 헤더

- name : 문서 정보

- content : 메타데이터 내용

• charset

- 문자 인코딩에 대한 요약 정보를 기입하는 속성

- 문자 인코딩 : 한글을 표시하기 위해 문자 세트를 지정하는 작업, 영문과 한글을 모두 사용하기 위해 utf-8 방식 사용

인코딩을 명확하게 기입해두지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리함.

문자가 깨질 가능성이 생김.

• http-equiv

- 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공함.

- HTTP : 인터넷에서 데이터를 주고 받을 수 있는 프로토콜

ex.

• name

- name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍 형태로 제공

ex.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

뷰포트 (viewport)

• 뷰포트(viewport)

- 현재 화면에 보여지고 있는 영역

- 기기별로 뷰포트가 다르기 때문에, 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 발생함.

• 발생하는 이유?

태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계되었음.

컴퓨터 화면에서의 웹페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 함.

이때문에 PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있음.

• name="viewport"

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

ex.

뷰포트 너비를 단말기 너비에 맞추고, 초기 배율을 1로 함.

<!DOCTYPE html>

<html>

<head>

content="width=device-width", initial-scale="1.0">

</head>

<body>

<h1>안녕하세요!</h1>

<h1>안녕히계세요!</h1>

</body>

</html>

https://inf.run/7rws

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

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

www.inflearn.com

728x90

'강의노트' 카테고리의 다른 글

입문자를 위한 자바스크립트 기초 강의 (유노코딩) - 자바스크립트 기초 (이벤트~삼항연산) (0)	2023.04.02
입문자를 위한 자바스크립트 기초 강의 (유노코딩) - 자바스크립트 기초 (DOM ~ 함수) (0)	2023.03.31
입문자를 위한 자바스크립트 기초 강의 (유노코딩) - 자바스크립트 기초 (0)	2023.03.31
입문자를 위한 CSS 기초 강의 (유노코딩) (0)	2023.03.29

'강의노트' Related Articles

배꼽파지 않도록 잘 개발해요