html
hypertext : 하이퍼링크를 통해 어떤문서에서 다른문서로 접근할 수 있는 텍스트
markup : (콘텐츠를)표시하다
ex) 여기부터 여기까지는 이미지, 여기부터 여기까지는 텍스트라는 것을 표시해주는의미
launguage : 언어(사람과 웹브라우저 사이를 표시해주는 언어)
하이퍼텍스트와 콘텐츠를 표시해주는 언어 (HTML)
웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어
→ 곧 html코드로 웹페이지에 어떤 내용이 표시될지를 정의하는 html문서
html코드가 웹브라우저를 통해 해석되고 표현되는 과정을 '렌더링'이라고 함
개발자 도구란?
웹사이트 개발용 도구. html&css코드 확인, 모바일 모니터링, 네트워크 상태 점검,
스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의 제공
(최신 브라우저에 대부분 탑재되어 있음)
🖥️ html 코드 기초 문법
태그(tag) : html코드에서 정보(콘텐츠)를 정의하는 형식
<>와 </>기호를 사용해 콘텐츠의 시작과 끝을 표시
(경우에 따라 시작과 끝을 구분할 필요가 없는 단일 태그 사용)
속성 : 태그의 부가적인 기능을 정의
<font family(속성명)="dotum">내용</font>
주석 : 코드에 대한 메모를 남기기 위한 용도
<!DOCTYPE html> : 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그
문서유형 : 웹브라우저에게 '이 문서는 ~니까 잘 처리해줘'라는 의미
현재 표준으로 사용되는 html 버전을 사용하기 위해 적어줌
<html></html> : 문서유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그
이 태그 내부에 다양한 태그들이 포함되어 문서의 내용을 구성
<head></head> : 브라우저 화면에는 보이지 않지만 브라우저가 알아야 할 정보는 모두 포함됨
1. <meta charset="utf-8">
문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
한글을 표시하기 위해 문자 세트를 지정하는 작업
(영문/한글을 모두 사용하기 위해 utf-8 방식을 사용
2. <title></title> : 문서의 제목
3. <body></body>
실제 브라우저 화면에 표시될 내용을 입력
ex) 텍스트, 이미지, 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)
들여쓰기? - 태그간의 포함 관계를 나타냄 (가독성에 도움)
<p></p>태그 : 문단 요소를 나타내는 태그. 문단과 문단 사이에는 공백이 있음
<h1>~<h6>태그 : 제목 요소를 나타내는 태그이며 숫자 1일 때 가장 크고, 6일 때 가장 작음.
<hr> : 수평선 태그(단일태그)
* 일반적으로 html 코드에서는 엔터를 무시하고, 스페이스바도 1번밖에 인정되지 않음.
블록(block) 태그 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
<h></h> <p></p> 태그 등
-개발자도구에서 브라우저를 전체적으로 차지한다면 블록 태그 요소
인라인(inline) 태그 요소 : 자기에게 필요한 공간만큼만 차지
<strong><em><mark> 태그 등
<img 'src'>속성은 이미지의 url을 입력받는 속성
alt 속성은 대체 텍스트를 입력 (이미지 유실 상황에 대응할 수 있음)
컨테이너 태그
콘텐츠 내용을 구분하거나 공통스타일을 적용하고자할때 사용
컨텐츠나 레이아웃에 아무런 영항도 주지 않고, 레이아웃의 요소를 묶어 관리하기 편하게 만드는 역할을 하는 태그
<div></div> : 블록요소
<span></span> : 인라인 요소
css나 javascript 사용 시 관리를 더 편하게 하기 위함
전역속성(Global Attributes)
모든 html태그에서 공통으로 사용할 수 있는 속성
속성 : 태그의부가적인 기능을 정의하는 것(선택사항), 시작 태그 내부에 정의하며 숫자에 제한이 없음
id : 요소에 고유한 이름을 부여하는 식별자 역할 속성 (태그당 하나씩만 지정)
class : 요소를 그룹별로 묶을 수 있는 식별자 역할 속성 (다중 지적 및 중복이 가능)
id, class 값 모두 사용자 지정
식별자 : 한사람 한사람에게 주민번호나 이름을 정해주는 것과 같음
style : 요소에 적용할 css 스타일을 선언하는 속성
title : 요소의 추가 정보를 제공하는 텍스트 속성 (사용자에게 툴팁(요소에 마우스커서를 올렸을때 나타나는 작은 말풍선 등) 제공)
ex) <img src="images/img.png" title="타이틀">
<a>태그의 href에는 웹문서의 주소 뿐 아니라 전화번호, 메일주소등을 지정할 수 있음
ex) <a href="tel:010-1234-5678"></a>
ex) <a re="mailto:mail@naver.com"></a>
목록
html에서 목록은 순서가 없는(Unordered list)/있는(Ordered list) 목록으로 구분됨
순서 없는 목록 : <ul></ul>
순서 있는 목록 : <ol></ol>
<li>태그는 목록에 들어가는 항목 하나하나를 표현할 때 사용하는 태그
해당 태그는 모두 블록 레벨 요소
입력요소
input : 사용자로부터 값을 입력받을 수 있는 대화영 컨트롤(또는 필트)
1. 기본적으로 인라인 요소이며, 단일 태그임
2. type 값에 따라 입력 요소 형태나 데이터 유형이 달라짐
사용 가능한 모든 속성 정보 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input
3. name 식별자 추가할 수 있음
<input type="text" name="nickname">
<input type="text" name="job">
4. 필드값에 한줄밖에 쓸 수 없음
See the Pen Untitled by cheonseonhae (@youtopia-code) on CodePen.
select : 다수의 옵션을 포함할 수 있는 선택 메뉴
메뉴 안에 포함되는 옵션은 option태그를 사용
input과 마찬가지로 name을 지정할 수 있으며 각각의 option에는 value 속성을 지정할 수 있음
value는 실제로 처리될 값을 나타냄
<select name="cafe">
<option value="starbucks">스타벅스</option>
</select>
/*cafe의 입력 값은 starbucks다 라는 결론*/
textarea는 여러 줄의 일반 텍스트를 입력할 수 있는 입력 요소(역시 name추가하여 구별)
1. select와 textarea모두 인라인 요소
2. select는 multiple이라는 속성을 추가할 수 있음
- mutiple을 넣을 경우 사용자는 ctrl을 누르면 여러개 선택할 수 있음
3. option에는 selected를 추가할 수 있음
- 추가하면 기본적으로 적용된 옵션이 selected되어잇음
(두개 모두 값을 따로 요구하지 않으며 써있으면 적용, 안써있으면 적용X)
See the Pen html_기초_02 by cheonseonhae (@youtopia-code) on CodePen.
폼(form) : 사용자가 입력한 데이터(입력값)를 서버로 보내기 위해 사용하는 태그
입력요소(input, select, textarea)를 감싸며, 입력 값을 서버로 제출(submit)할 수 있음.
서버란? : 정보(데이터)를 제공하는 호스트(host)
클라이언트(사용자)가 요청을 하면 서버는 그에 대한 응답으로 정보를 제공한다.
form의 내용(입력값)을 제출하기 위해 input태그의 submit타입 사용 가능
'로그인'버튼을 누르면 입력된 아이디/비밀번호가 서버로 전송(요청)
→ 서버측에서 데이터 처리 결과를 클라이언트에게 전달(응답)
ex)
클라이언트 - 아이디/비밀번호 입력했어요. 로그인 시켜주세요.
서버 - 네 알겠습니다. or 비밀번호가 틀립니다.
→ 클라이언트가 어떠한 요청을 보내는 가에 따라 응답은 달라질 수 있음.
로그인양식은 3개의 입력 요소로 구성됨
(아이디 입력창 / 비밀번호 입력창 / 버튼)
action : 입력값을 전송할 서버의 url
method : 클라이언트가 입력한 데이터를 어떤식으로 전송할 지 (get / post)
<form action="example.php" method="post"></form>example.php라는 서버 프로그램으로 입력값을 post 방식으로 전송하여 요청
get 방식 : 서버에 요청을 보내어 응답을 받아냄
서버로부터 정보를 '가져오겠다'라는 성격의 요청
ex) 서버에서 이미지 파일 받아오기
post 방식 : 서버에 요청을 보내어 작업을 수행
서버에 있는 데이터를 추가/수정/삭제한 후 응답을 받아냄
서버의 정보를 '조작하겠다'라는 성격의 요청
메타데이터
메타데이터란? : 데이터에 대한 데이터 = 정보 (html문서에 대한 메타데이터를 정의)
head 태그 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및
뷰포트 설정을 지정하는데 사용
사용하는 이유?
웹페이지에 대한 정보를 제공하므로 검색엔진이 페이지 검색 시 참고할 수 있고, 검색 결과에도 반영
메타데이터의 유형&속성
- charset : 문자세트
- http-equiv : 콘텐츠 속성/정보에 대한 http 헤더 제공
- name : 문서정보
- content : 메타데이터 내용
charset : <meta charset="utf-8">
문자 인코딩에 대한 요약 정보를 기입하는 속성
인코딩을 명확하게 기입하지 않으면 웹 브라우저 설정 상황에 따라
자동으로 인코딩을 추정하여 처리하나 문자가 깨질 가능성이 생김
http : 인터넷에서 데이터를 주고받을 수 있는 프로토콜
<!-- IE 브라우저의 최신 버전의 엔진(엣지)을 사용. 호환성 관련 설정시 사용-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!--10초마다 페이지 새로고침-->
<meta http-equiv="refresh" content="10">
name : 문서의 다양한 정보를 제공할 수 있는 메타데이터의 이름
content : 메타데이터의 구체적인 내용을 기입하는 속성
<!--문서 제작자-->
<meta name="author" content="제작자이름">
<!--페이지에 대한 요약. 브라우저 즐겨찾기 페이지의 기본 설명 값-->
<meta name="descriptsion" content="페이지에 대한 짧은 요약">
<!--페이지의 콘텐츠와 관련된 쉼표로 구분한 키워드 목록-->
<meta name="keywords" content="키워드1, 키워드2">뷰포트(viewport)
뷰포트 : 현재 화면에 보여지고 있는 영역
기기별로 뷰포트가 다르기 때문에, 동일한 웹페이지여도
기기에 따른 배율 조정 발생하여 화면의 크기가 다르게 보이는 현상이 발생함
→ 모바일 기기에서는 고정된 사이즈(스크린 크기)로 조회해야 하므로
웹의 모든 콘텐츠를 표시하기 위해 배율조정을 해야만 함
meta태그를 통해 뷰포트 관련 설정을 추가할 수 있음
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 해서 확대&축소가 일어나지 않게 함-->'study' 카테고리의 다른 글
| 온라인 마케팅 종류 5가지 (0) | 2022.04.12 |
|---|---|
| [Html&CSS] CSS 기초 (0) | 2022.02.26 |