반응형
SMALL
HTML
HyperText Markup Language
- HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup : (콘텐츠를) 표시하다
- Language : 언어
= 하이퍼 텍스트와 콘텐츠를 표시해주는 언어.
쉽게 말해, HTML은 웹브라우저를 통해 표시되는
웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어!
HTML은 웹피이지의 콘텐츠를 정의하기 위해 사용하는 언어.
개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될지를 정의한 HTML 문서를 만듬.
완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어지고
HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 "렌더링"이라고 함.
HTML 문서는
파일의 확장자가 html 또는 html 인 문서.
- 파일을 수정하고 싶다면, 텍스트 편집기로 열기
- 결과(웹페이지)를 확인하고 싶다면, 웹브라우저로 열기
- 대표적인 텍스트 편집기 : 기본 메모장, Brackets, VSCode 등
- 대표적인 웹브라우저 : 크롬, 익스플로러, 엣지 등
3줄요약
- HTML은 웹페이지 콘텐츠를 정의하는 언어(문서 작성 양식)이다.
- HTML 코드는 HTML 파일에 작성한다. 확장자는 *.html 또는 *.htm 이다.
- 텍스트 에디터에서 작성한 HTML 코드는 웹브라우저를 통해 표시할 수 있다.
개발자 도구
웹사이트 개발용 도구, 대부분 최신 브라우저에는 개발자 도구가 탑재되어 있음.
코드 에디터
프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어
[텍스트 자동 완성] + [하이라이팅 기능] 두가지가 추가된 메모장이라 생각하면 됨!
HTML은 언어이다.
한국어, 영어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용해야 하듯,
HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야함!
태그(tag) ★
- <> , </> 기호를 사용해 콘텐츠의 시작과 끝을 표시함.
- 태그명은 콘텐츠의 성격과 의미를 나타냄.
- <태그명> 콘텐츠를입력 </태그명>
단일태그
- <태그명 /> 또는 <태그명>
- 단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않음.
속성
- 태그의 부가적인 기능을 정의하는것 / 선택사항
- 시작 태그의 내부에 정의 / 갯수에 특별한 제한이 없음.
- <태그명 속성명="속성값"> 내용이 들어감 </태그명>
- <태그명 속성명="속성값" /> ← 단일태그
- 태그명과 속성 정의는 공백(space)로 구분하며, 큰따옴표를 사용함.
주석
- 코드에 대한 메모리를 남기기 위한 용도로 사용
- 총 7개의 기호가 사용.
- <!-- 이 사이 내용은 주석처리 -->
- 형식은 다르지만 기호로 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
</body>
</html>
★ meta charset ="utf-8"
- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
- 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로
- 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음.
4줄 요약
- HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성
- 들여쓰기를 통해 태그 간의 포함 관계를 나타냄, 가독성에 도움이 되지만 문법적으로 필수 X
- <head>태그에는 문서의 정보, <body> 태그는 표시할 내용 포함
- 태그의 콘텐츠로 또 다른 태그가 포함될 수 있음.
문단(paragraph)
- p태그는 문단 요소를 나타내는 태그
- 가장 많이 사용됨
- 하나의 p태그는 하나의 문단을 나타냄
- 문단과 문단 사이에는 공백이 있음
제목(headline)
- h 태그는 숫자와 함께 사용 1~6 까지 사용
- 6이 가장 작음
수평선
- hr태그
- 주제 변경 또는 내용 구분에 사용
- <ht /> = <hr> (단일태그라 둘 다 사용 가능)
HTML 텍스트의 특징
- 일반적으로는 엔터는 "줄바꿈" 이지만 HTML 코드에서는 이를 무시
- 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않음.
HTML에서는 br 태그가 "줄바꿈"을 담당.
공백을 두번 이상 표시하고자 할 때는 를 사용함.
5줄요약
- p 태그는 문단을 표시하는 태그
- h1~h6 태그는 헤드라인을 표시하는 태그, 숫자가 작을수록 사이즈는 큼
- 수평선 hr은 주제 변경이나 내용 구분 시에 사용하는 태그
- HTML은 텍스트의 줄바꿈, 공백 등을 엔터와 스페이스로 처리하지 않음.
- 스페이스는 한번씩만 허용( 연달아 입력할 경우 한 번 외엔 무시)
- 태그 br 은 줄바꿈을, 문자조합   는 공백을 나타냄.
블록 레벨 요소
- 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
인라인 요소
- 자기에게 필요한 만큼만 차지하는 요소
- <strong></strong>
- <em></em> = 기울이기
- <mark></mark> = 형광색
3줄요약
- HTML 문서의 요소는 블록 레벨 요소와 인라인 요소로 구분 가능
- 블록 레벨 요소는 너비(공간)를 모두 차지하여 블록을 형성
- 인라인 요소는 콘텐츠를 표시하기 위해 필요한 공간만 차지함.
이미지 태그
img 태그
- 이미지를 표시할 때 사용
- 단일태그로써, 닫는 태그를 필요로 하지 않음.
- 이미지에 대한 정보를 "속성으로 지정"해주어야함.
- url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)
이미지 설명(alt)
- alternative의 약자로 대체 텍스트 역할
- 이미지가 로딩되기 전이나 실패한 경우 대체 텍스트가 표시
- 시각장애인에게 웹페이지를 서비스해야 하는 상황에 대비 가능
이미지 크기 조절하기
- 너비와 높이를 각각 지정 할 수 있음.
- 단위 없이 정수 값만 지정 가능.
- 픽셀 단위로 적용됨.
4줄 요약
- 이미지를 표시할 때는 닫는 태그가 없어도 되는 img 태그를 사용
- src 속성은 이미지의 url을 입력받는 속성
- alt 속성은 대체 텍스트를 입력받음. 이미지 유실 상황에 대응할 수 있음.
- width와 height 각각 이미지와 너비와 높이를 입력받는 속성
컨테이너 요소 & 전역 속성
컨테이너 태그
- 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할
- 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 개발자는 컨테이너를 사용하는것이 좋음.
- 나중에 css를 통해 영역별로 설정 가능!
- <div></div> : 블록 레벨 컨테이너
- <span></span> : 인라인 컨테이너
전역 속성
- Global attributes
- 모든 HTML 태그에서 공통으로 사용할 수 있는 속성
- 속성이란? = 태그의 부가적인 기능을 정의, 선택사항
- 속성은 시작 태그의 내부에서 정의. 갯수에는 특별한 제한 없음.
대표적인 전역 속성들
- id : 요소에 고유한 이름을 부여하는 식별자 역할 속성
- class : 그룹 별로 묶을 수 있는 식별자 역할 속성
- style : 요소에 적용할 CSS 스타일을 선언하는 속성
- title : 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공
6줄 요약
- 콘텐츠나 레이아웃에 영향을 주지 않는 태그 요소를 컨테이너라 함
- 컨테이너는 영역을 묶어서 관리하고자 할 때 사용
- 모든 태그에 공통적으로 지정 가능한 속성을 전역 속성이라 함
- id와 class는 태그명이 같은 요소들을 식별하기 위해 사용하는 속성
- id는 태그당 하나씩만 지정해야 하나, class는 다중 지정 및 중복 가능
- 특정 태그에만 지정 가능한 속성들도 존재한다.
링크
- 링크란 현재 문서에서 다른 문서로 이동할 수 있는 수단
- anchor 라는 a 태그 요소를 사용.
- href 속성을 통해 다른 페이지, 주소, 전화번호 등 다른 url로 연결할 수 있는 링크(연결)을 만듬.
- 인라인 요소, 콘텐츠는 주로 링크의 목적지를 나타냄.
- a 태그의 target 속성을 이용하면 새로운 문서를 열 때 현재 탭에서 열 수 있음.
- a 태그의 blank 속성을 이용하면 새로운 탭에서 열수 있음.
- tel , mailto
4줄요약
- a 태그는 페이지를 다른 위치로 이동시킬 수 있는 링크를 만듬.
- htef 속성에는 링크가 참조하는(이동하고자 하는) url을 입력
- target 속성에는 새 페이지가 열릴 대상(탭)을 지정할 수 있음.
- href 속성을 통해 전화 걸기, 이메일 보내기 등을 지정할 수도 있음.
목록
- 목록은 연관 있는 항목(item)들을 나열한 것
- HTML 목록은 "순서 없는 목록"과 "순서 있는 목록"으로 구분됨
- <ul></ul> , <ol></ol>
항목 태그는 같은 것을 씀
- <li>태그
- 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그
- 항목들을 감싸는 태그가 무엇이냐에 따라 기호가 달라짐.
- <ul>, <ol>, <li> 모두 블록 레벨 요소를 만드는 태그!
4줄요약
- 목록은 연관 있는 항목들을 나열한 것
- 목록 요소는 "순서없는목록"과 "순서있는목록"으로 구분 가능
- 목록 안에 들어가는 항목 요소를 표시할 때는 li 태그를 사용!
- ol, ul, li 태그는 모두 블록 레벨 요소를 표시하는 태그.
input태그
- 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(또는 "필드" "입력창")을 나타냄.
- 기본적으로 인라인 요소이며, 단일 태그
- <input />
- name 식별자를 추가 할 수 있음
- 각각의 입력 항목에 대한 이름.
type 속성
- type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라짐.
- 사용 가능한 type은 20여가지이며, 기본값은 text
- type의 값이 달라짐에 따라 적용할 수 있는 추가 속성의 종류도 조금씩 차이가 있음.
- 클릭도 입력 유형 중 하나!
4줄요약
- input 태그는 입력 요소를 만드는 태그
- input 태그는 type 속성을 통해 형태와 입력 값 유형을 결정
- type 값에 따른 사용 방법이 다양함 (웹페이지 내에서의 역할, 추가 속성 등)
- name 속성으로 input 요소를 구별할 수 있음.
select 그리고 textrarea
select
- 다수의 옵션(선택지)를 포함할 수 있는 선택 메뉴
- 메뉴 안에 포함되는 옵션은 option 태그를 사용해 표시
- input과 마찬가지로 name을 지정할 수 있음.
- 각각의 option에는 value 속성을 지정할 수 있음.
- value는 실제로 처리될 값
textarea
- 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소
- name을 추가하여 구별해줄 수 잇는 입력 요소
- input에는 한 줄밖에 쓸 수 없지만, textarea는 여러 줄 사용 가능!
multiple
- 값을 요구하지 않는 속성
- 써놓았을때는 이것은 멀티플이다~
selected
- 선택되어 있는 속성
- 멀티플처럼 써놓았을때 이것은 셀렉티드다~
rows, cols
4줄요약
- select는 선택 메뉴를 나타내는 태그
- select의 각 선택지는 option 태그를 통해 표시
- 각각의 option에는 value를 지정하여 추후 처리 준비(JS를 통한 입력 값 처리에 value가 사용될 수 있음)
- textarea는 여러 줄의 일반 텍스트를 입력하는 요소를 나타냄
form
서버와 클라이언트
form이란?
- 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그.
- 입력 요소들을 감싸며, 입력 값을 서버 측으로 제출(submit)할 수 있음.
- 내용을 제출하기 위해 input 태그의 submit 타입 사용 가능!
form의 속성
- action : 입력값을 전송할 서버의 url을 지정하는 속성
- method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지의 방식(GET or POST)
GET VS POST
GET
- 서버에 요청을 보내어 응답을 받아냄
- 서버로부터 정보를 "가져오겠다"는 성격의 요청
POST
- 서버에 요청을 보내어 작업을 수행
- 서버에 있는 데이터를 추가/수정/삭제 한 후에 응답을 받아냄
- 서버의 정보를 "조작하겠다"는 성격의 요청
서버란?
- 정보를 제공하는 호스트(host)
- 클라이언트(사용자)가 요청을 하면, 서버는 그에 대한 응답으로 정보를 제공
- 클라이언트가 어떤 요청을 보내는가에 따라, 응답은 달라질 수 있음.
6줄요약
- form은 사용자가 입력 요소에 입력한 데이터를 서버로 전송
- 서버란 데이터를 제공하는 호스트
- 클라이언트란 데이터를 제공받아 이용하는 고객(사용자)이다.
- form은 입력 요소(input, select, textarea 등)를 감싸고, 데이터를 제출(submit)한다.
- form의 action은 서버 측 주소를 지정하는 속성
- form의 method는 데이터 전송 방식을 지정하는 속성
meta 태그
- HTML문서에 대한 메타데이터를 정의
- 메타데이터란 데이터에 대한 데이터, 즉 "정보"를 의미
- meta 태그는 항상 head 태그의 안에 들어가며, 일반적으로 문자 셋, 페이지설명, 키워드, 뷰포트 지정등 사용
- 웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지를 검색할 때 참고할 수 있고 결과에도 반영할 수 있음!
- = 검색 최적화에 사용
meta 태그가 제공하는 메타데이터의 유형 & 속성은?
- charset : 문자 세트
- http-equiv : 콘텐츠 속성 정보에 대한 http 헤더
- name : 문서 정보
- content : 메타데이터 내용
많이 쓰이는 코드 위주로만 학습해보면 됨!
charset
- 문자 인코딩에 대한 요약 정보를 기입하는 속성.
- 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로
- 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음.
- 인코딩을 명확하게 기입해두지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 추정해 처리!
- 문자가 깨질 가능성이 생김!
http-equiv
- 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공
- HTTP란 인터넷에서 데이터를 주고 받을 수 있는 프로토콜
- 쉽게 생각해서 이 속성은, 데이터를 주고받는데 필요한 정보를 제공하는 속성임!
name
- name 속성을 이름으로, content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 떄 사용 가능!
- 해시태그와 같은 느낌!
6줄 요약 정리
- meta 태그는 HTML 문서의 메타데이터(정보)를 표시하는 태그
- 검색엔진 최적화에 기여하며, 검색 결과에도 영향을 끼침
- charset는 문자 인코딩에 대한 요약 정보를 기입하는 속성
- http-equiv는 콘텐츠 속성의 정보/값에 대한 HTTP 헤더를 제공
- name 속성은 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름
- content는 메타데이터의 구체적인 내용을 기입하는 속성
뷰포트(viewport)
- 현재 화면에 보여지고 있는 영역을 의미
- 기기 별로 뷰포트가 다르기 때문에, 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해
- 화면의 크기가 다르게 보이는 현상이 나타남.
- 태블릿, 스마트폰 등 모바일 기기가 등장하기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계됨.
- 컴퓨터 화면에서의 웹 페이지는 웹브라우저라는 소프트웨어를 통해 페이지 크기를 조절해가며
- 웹을 조회할 수 있었지만, 모바일 기기에서는 고정된 사이즈(스크린 크기)_로 조회해야 하므로
- 웹의 모든 콘텐츠를 표시하기 위해서는 배율 조정을 해야만 함!
name="viewport"
- 기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해
- meta태그를 통해 뷰포트 관련 설정을 추가할 수 있음.
3줄요약
- 뷰포트는 현재 화면에 보여지고 있는 영역을 의미
- 웹 문서는 기본적으로 PC화면에 맟춰 설계 되었기 때문에, 다른 기기에서 배율 조정이 일어남
- 배율 조정 현상에 대응하기 위해 개발자는 메타 태그를 사용해 뷰포트 관련 설정을 추가할 수 있음!
반응형
LIST
'기초 물방울 > HTML' 카테고리의 다른 글
| 생활코딩 HTML 파트 메모용 #1 (0) | 2022.03.10 |
|---|