~인프런 로드맵 따라가기~
맛보기로 유노코딩 HTML이랑 CSS 조금 듣고 (JS는 유료임,,,)
다음 로드맵으로 넘어가겠음!!!
[무료] 입문자를 위한 HTML 기초 강의 - 인프런 | 강의
웹사이트 만드는 데 가장 기본이 되는 HTML의 주요 개념과 기본 문법을 소개합니다. 아무런 관련 지식을 보유하지 않은 입문자들도 소화할 수 있도록 만든 강의입니다., - 강의 소개 | 인프런...
www.inflearn.com
1. HTML이란?
HTML : HyperText Markup Language
HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어
확장자 : html / htm
수정 -> 텍스트 편집기 / 확인 -> 웹브라우저
텍스트 편집기 : 메모장, Brackets, VSCode 등
웹브라우저 : 크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등
- 실습 -
먼저 원하는 텍스트 편집기를 열고 확장자를 html로 해서 저장을 해준다.
이 파일은 이제 텍스트 편집기와 웹브라우저로 열 수 있다.
2. 개발자 도구와 코드 에디터
개발자 도구 : 웹사이트 개발용 도구로 대부분의 최신 브라우저에는 개발자 도구가 탑재되어있다. HTML CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.
개발자 도구 열기(크롬 기준)
F12 / 메뉴 - 도구 더보기 - 개발자 도구
개발자 도구가 화면 어디에 위치할 지는 Dock side를 눌러 조정한다.
코드 에디터 : 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어.
코드는 결국 텍스트. 이 텍스트를 더 빠르고 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다
(텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장)
👇👇👇
VSCode 설치!!
원하는 폴더를 열고 html 파일을 생성
① HTML 코드 기초 문법
태그 : HTML 코드에서 정보(콘텐츠)를 정의하는 형식
태그는 <>와 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시. 각 태그는 콘텐츠를 감싸며,
태그명은 콘텐츠의 성격과 의미를 나타냄
<태그명> ~ 내용 ~ </태그명>
단일 태그 : 시작과 끝을 구분할 필요가 없는 태그
<태그명/> or <태그명>
속성 : 태그의 부가적인 기능을 정의하는 것으로 선택사항.
시작 태그의 내부에 정의하며 개수에는 특별한 제한이 없다.
<태그명 속성명="속성값"> ~ 내용 ~ </태그명>
* 태그명과 속성 정의는 공백(space)로 구분하며 큰 따옴표를 사용한다.
주석 : 사람에게는 보이지만 컴퓨터에게는 보이지 않는 코드.
주로 코드에 대한 메모를 남기기 위한 용도로 사용
<!-- 내용 -->
-실습-
여는 태그와 닫는 태그를 작성하고 웹브라우저로 열었을 때 결과이다.
strong은 p태그에 비해 글자가 굵게 나온다
*주의 : 파일을 저장한 후에 실행할 것
<p>Hello~~</p>
<strong>Hello~~</strong>
두 태그 사이에 단일 태그인 <br>을 넣으니 두 문장 사이 간격이 한 줄 띄워졌다.
<p>Hello~~</p>
<br>
<strong>Hello~~</strong>
strong 태그에 속성으로 스타일값을 넣어줬다.
주석 안에 코드를 작성해도 결과로는 나타나지 않는다.
② HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서의 제목을 쓰는 곳</title>
</head>
<body>
브라우저 화면에 표시할 내용을 작성하는 곳
</body>
</html><!DOCTYPE html>
: 문서의 첫 부분에서 문서 유형을 지정하는 단일태그.
현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입은 'html'
<html> ~ </html>
: 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그
<head> ~ </head>
: 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어감
<meata charset="utf-8">
: 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로,
영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다
<title> ~ </title>
: 문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
<body> ~ </body>
: 실제 브라우저 화면에 표시된 내용을 입력하는 태그
다음과 같은 유형의 태그들을 포함
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
③ 텍스트 태그 사용 방법과 특징
문단(paragraph)
p태그는 문단 요소를 나타내는 태그로써 가장 많이 사용되는 텍스트 태그.
하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.
<p>안녕하세요! 이것은 문단을 표시하는 태그입니다.</p>
<p>문단과 문단 사이에는 공백이 있습니다. 이 문단의 위쪽을 보시면 확인 가능</p>| 안녕하세요! 이것은 문단을 표시하는 태그입니다. 문단과 문단 사이에는 공백이 있습니다. 이 문단의 위쪽을 보시면 확인 가능 |
제목(headline)
h태그는 제목(표제) 요소를 나타내는 태그이다.
숫자와 함께 사용되며, 숫자 1일 때 가장 크고 6일 때 가장 작다.
<h1>제목을 나타내자!</h1>
<h2>제목을 나타내자!</h2>
<h3>제목을 나타내자!</h3>
<h4>제목을 나타내자!</h4>
<h5>제목을 나타내자!</h5>
<h6>제목을 나타내자!</h6>
수평선
hr 태그는 수평선을 표시하는 태그이다. (단일태그)
수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.
<p>지금까지 스포츠 뉴스였습니다.</p>
<hr>
<p>날씨입니다.</p>
-실습-
HTML 텍스트의 특징
일반적으로 엔터는 '줄바꿈'을 의미하는 입력이지만 HTML 코드에서는 이를 무시한다.
또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다.
줄바꿈 태그와 공백문자
HTML에서는 br 태그가 줄바꿈을 담당한다
공백을 두 번 이상 표시하고자 할 때는 를 사용한다.
-실습-
④ 태그의 구분과 인라인 텍스트 요소
블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다.
*Block Element : <h1> <h2> <h3> <p> <ol> <ul> <li> <div>...
*Inline Element : <a> <span> ...
h태그와 p태그 모두 공간을 오른쪽 끝까지 다 차지하고 있는 것으로 보아
이 두 태그는 블록 레벨 요소를 만드는 블록 태그이다. (개발자도구로 확인)
strong 태그 : 감싸고 있는 콘텐츠를 굵게 표시하는 태그 (인라인 요소)
em 태그 : 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그 (인라인 요소)
mark 태그 : 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그 (인라인 요소)
p 태그 안에 p 태그를 넣으면 또 다른 층이 생기고 안에 넣은 p 태그 위 아래 공백도 생김
⑤ 이미지 표시하기
img 태그 : 이미지를 표시할 때 사용하는 태그.
단일 태그로써 닫는 태그를 필요로 하지 않는다.
콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.
<img src="표시할이미지파일" alt="이미지설명" />
src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성이다
alt는 alternative의 약자로 대체 텍스트 역할을 한다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.
이미지 크기 조절
이미지의 너비와 높이를 각각 지정할 수 있는데 단위 없이 정수값만 지정한다.
이때 너비와 높이는 각각 픽셀(px) 단위로 적용된다. (지정하지 않으면 원본 크기)
<img src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값" />
-실습-
현재 폴더 안에 images폴더를 생성하고 원하는 이미지 파일을 넣는다.
이미지 태그를 넣고 너비와 높이를 지정. 이때 높이를 지정하지 않으면 같은 비율로 조정된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지를 표시해보자</title>
</head>
<body>
<h1>이미지를 표시해볼게요</h1>
<img src="images/gabozago.jpg"
alt="최고심-가보자고 이미지"
width="300"/>
<p>이미지 표시에는 img 태그</p>
</body>
</html>
* 웹 서버에 있는 이미지 이용하기
원하는 이미지의 주소를 복사해 src에 넣는다
⑥ 컨테이너 그리고 전역 속성
컨테이너 태그 : 콘텐츠나 레이아웃에 아무런 영향도 주지 않고
단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
콘텐츠 내용을 구분하거나 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는 것이 좋다.
<div></div> : 블록 레벨 컨테이너
<span></span> : 인라인 컨테이너
div와 span태그의 각각 적용 영역
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>영역을 구분해보자</title>
</head>
<body>
<h1>일단 문서를 만들자</h1>
<hr>
<div>
<h2><span>공부</span> 다짐하기</h2>
<img src="images/gabozago.jpg"
alt="최고심-가보자고 이미지"
width="300"/>
<p>고심이는 공부를 열심히 하기로 했다</p>
</div>
<hr>
<div>
<h2><span>운동</span> 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자</p>
</div>
</body>
</html>
전역 속성(Global Attributes) : 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
속성이란 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
속성은 시작 태그 내부에 정의하고 개수에는 특별한 제한이 없다.
<대표적인 전역 속성들>
id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성
style : 요소에 적용할 CSS 스타일을 선언하는 속성
title : 요소의 추가 정보를 제공하는 텍스트 속성. 사용자에게 툴팁 제공
각 div에 id를 지정, h2 태그에 클래스 지정, 이미지 태그에 title 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>영역을 구분해보자</title>
</head>
<body>
<h1>일단 문서를 만들자</h1>
<hr>
<div id="study">
<h2 class="title"><span>공부</span> 다짐하기</h2>
<img src="images/gabozago.jpg"
alt="최고심-가보자고 이미지"
width="300" title="고심이의 다짐!!"/>
<p>고심이는 공부를 열심히 하기로 했다</p>
</div>
<hr>
<div id="workout">
<h2 class="title"><span>운동</span> 열심히 하기</h2>
<p>건강을 위해 운동을 열심히 하자</p>
</div>
</body>
</html>
⑦ 링크 만들기
링크 : 현재 문서에서 다른 문서로 이동할 수 있는 수단
a(anchor) 태그 : href 속성을 통해 다른 페이지, 전화번호, 이메일 주소와
그 외 다른 url로 연결할 수 있는 링크를 만든다.
인라인 요소이며 콘텐츠는 주로 링크의 목적지를 나타낸다.
<a href="url 주소">목적지 내용</a>
target 속성 : 링크를 현재 탭(_self)에서 열지, 새로운 탭(_blank)에서 열지 결정
target을 지정하지 않으면 디폴트는 _self
콘텐츠 내용으로는 텍스트뿐만 아니라 이미지 등을 넣을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<a href="https://www.naver.com/" target="_self">
네이버로 갑시다!
</a>
<br>
<a href="https://www.google.com/" target="_blank">
구글로 갑시다!
</a>
<br><br>
<a href="tel:010-1234-5678">010-1234-5678</a>
<br>
<a href="mailto:abcde@naver.com">
abcde@naver.com
</a>
</body>
</html>
* 웹페이지 주소 대신에 내 컴퓨터에 있는 html 문서 이름을 쓸수도 있다.
⑧ 목록 표시하기
목록 : 연관 있는 항목(item)들을 나열한 것을 의미한다.
HTML 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분된다.
순서 없는 목록(Unordered List) : <ul></ul>
순서 있는 목록(Ordered List) : <ol></ol>
항목 태그(List Item) : <li></li>
ul, ol, li 태그 모두 블록 요소임을 알 수 있다.
ul태그가 차지하는 전체 공간에서 왼쪽을 보면 항목 표현 전에 들여쓰기(여백)가 표현되어 있다.
이는 ul과 ol의 기본 스타일로 목록을 나타내는 여백이다.
⑨ 입력 요소 만들기
input : 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 필드)을 나타낸다.
기본적으로 인라인 요소이며 단일 태그이다.
<input />
type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다.
사용 가능한 type은 20여 가지이며 기본값을 text이다.
type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이를 보인다.
input 태그에는 name 식별자를 추가할 수 있다.
<input type="text" name="nickname" />
-실습-
5개의 input태그에 5가지 타입 지정
< type - text >
placeholder : 입력란에 안내 메시지 추가
maxlength : 개수 제한
< type - button >
value : 버튼에 메시지 추가
< type - color >
태그 옆에 메시지 입력
< type - range >
max : 최댓값
min : 최솟값
step : 단위
name을 주면 추후 서버 프로그램이나 자바스크립트 서버에서 사용자가 식별할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다양한 입력 요소 만들기</title>
</head>
<body>
<input name="text" type="text" maxlength="5"
placeholder="메시지 입력!"/> <br> <br>
<input name="push" type="button"
value="PUSH"/> <br> <br>
<input name="color" type="color" />
색을 골라보세요 <br> <br>
<input name="score" type="range"
max="100" min="0"
step="10"/> <br> <br>
<input name="birthday" type="date" /> <br> <br>
</body>
</html>
⑩ select 그리고 textarea
select : 다수의 옵션(선택지)을 포함할 수 있는 선택 메뉴
메뉴 안에 포함되는 옵션은 option태그를 사용해 표시한다
input과 마찬가지로 name을 지정할 수 있으며 각각의 option에는 value 속성을 지정할 수 있다.
value는 실제로 처리될 값을 나타낸다
textarea : 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
name을 추가하여 구별할 수 있다. 길어지면 자동으로 스크롤 가능
-실습-
value값은 실제 서버에서 처리되는 값
select 속성 추가
multiple : 값이 아니라는 뜻. ctrl을 누르고 선택하면 여러개 선택 가능
selected : 기본으로 선택 되어있는 값
textarea : 여러 줄 입력 가능하고 입력된 텍스트가 길어지면 자동으로 스크롤 생김
기본적으로 쓰여 있는 텍스트는 사용자가 지우고 수정할 수 있다.
textarea 속성 추가
name 지정 가능
rows : 행 수, cols : 열 수
(글꼴이나 문자에 따라 너비가 달라 지정한 숫자와 정확하게 맞지는 않음)
박스 우측 하단을 잡고 크기를 늘리거나 줄일 수 있음
⑪ 폼(form) Part1. 서버와 클라이언트
form : 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그
서버 : 정보를 제공하는 호스트(host)
클라이언트(사용자)가 요청을 하면 서버는 그에 대한 응답으로 정보를 제공한다
클라이언트가 어떤 요청을 보내는가에 따라 응답은 달라질 수 있다. (로그인 등)
⑫ 폼(form) Part.2 폼 태그
form : 입력 요소들을 감싸며 입력 값을 서버 측으로 제출(submit)할 수 있다.
form의 내용(입력값)을 제출하기 위해 input 태그의 submit 타입 사용 가능
< form의 속성 >
action : 입력값을 전송할 서버의 url
method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST)
GET : 서버에 요청을 보내어 응답을 받아낸다. 서버로부터 정보를 가져오겠다는 성격의 요청
POST : 서버에 요청을 보내어 작업을 수행한다. 서버의 정보를 조작하겠다는 성격의 요청
서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아낸다.
-실습-
먼저 사용할 가짜 서버 파일을 만든다(exam.php) (아무 내용 없음)
전송(submit)을 누르면 우리가 만든 서버가 실행 된다.
이때 name=name에 'hyun', name=pet에 'cat' 정보가 담겨있음
⑬ 메타 태그 (meta)
meta 태그 : HTML 문서에 대한 메타데이터를 정의한다.
메타데이터란 데이터에 대한 데이터, 즉 '정보'를 의미한다.
meta 태그는 항상 head 태그의 안에 들어가며
일반적으로 문자 세트, 페이지 설명, 문서의 작성자 및 뷰포트 설정을 지정하는 데 사용된다.
| meta 태그를 사용하는 이유? 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고, 검색 결과에도 반영할 수 있다. |
| meta 태그가 제공하는 메타데이터의 유형 & 속성은? - charset : 문자 세트 - http-equiv : 콘텐츠 속성 정보에 대한 http 헤더 - name : 문서 정보 - content : 메타데이터 내용 |
charset : 문자 인코딩에 대한 요약 정보를 기입하는 속성이다
문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로
영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다.
인코딩을 명확하게 기입해두지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리한다. (문자 깨짐)
http-equiv : 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공한다.
HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이다.
name : 속성을 이름으로, content 속성을 값으로 하여
문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.
-실습-
charset은 UTF-8로 지정
http-equiv에는 x-ua-compatible을 넣고 content로 IE=edge를 지정해준다
이를 통해 호환성 관련 설정(x-ua-compatible)에서 인터넷 익스플로어(IE)를 사용할 때 Edge에 맞춰서 호환성을 맞추게 됨
name="author"에 이 페이지를 만든 저작자를 content로 추가
name="keywords"에 어떤 키워드들로 표현할 수 있는 페이지인지 content에 추가
name="description"에 페이지에 대한 묘사를 content에 추가
이때, 페이지에는 아무런 영향이 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="hyun">
<meta name="keywords" content="메타태그, 학습, 코딩교육">
<meta name="description" content="메타태그를 추가하는 방법">
<title>메타태그 추가하기</title>
</head>
<body>
<h1>메타태그 추가하기</h1>
</body>
</html>
⑭ 뷰포트(viewport)
뷰포트(viewport) : 현재 화면에 보여지고 있는 영역을 의미한다.
기기 별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해
화면의 크기가 다르게 보이는 현상이 나타난다.
| 왜 이런 현상이? 태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계 되었다. 컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며 웹을 조회할 수 있지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 한다. 때문에 PC용 웹페이지와 모바일 웹페이지를 따로 만드는 경우도 있다. |
기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해
meta 태그를 통해 뷰포트 관련 설정을 추가할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다)
-실습-
개발자도구를 보면 반응형 디자인 모드가 있다.
이걸 누르면 모바일에서는 어떻게 보이는지 모니터링을 할 수 있다.
이렇게 모바일 화면으로 볼 수 있고 기기를 선택할 수 있다.
뷰포트를 적용하면 PC와 모바일 화면이 동일하게 조정되어 적용된다.
<!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>
<h1>감사해요!</h1>
<h1>잘있어요!</h1>
<h1>다시만나요!</h1>
</body>
</html>
'Study > Publishing' 카테고리의 다른 글
| [웹디자인기능사] 필기 06 재질감 빛과 운동 ~ 12 율동 (1) | 2024.01.03 |
|---|---|
| [웹디자인기능사] 필기 01 디자인 의미 개념 배경 ~ 05 형태 (2) | 2024.01.02 |
| [CSS] 눈누 웹 폰트 적용하기 / 굵기(font-weight) 적용하기 (2) | 2023.09.27 |
| 자바스크립트 Beginner (0) | 2023.05.03 |
| [CSS] 웹 개발 걸음마 떼기 - 2탄 (feat. 유노코딩, 인프런, CSS) (0) | 2022.08.03 |
