HTML 핵심개념

HyperText Markup Language

---

링크의 상대주소

 

- folder1

    ㄴ folder2  - index.html

                       - other.html

    ㄴ index.html   (홈페이지) 

 

folder2에 있는 index 홈페이지로 가려면? (현재 폴더)

folder2/index.html 또는 folder2/ 또는 ./ 

 

 

other.html에서 folder2/index 페이지로 가려면? (상위 폴더)

../ 또는 ../index.html 바로 위 폴더로 돌아가기

 

other.html에서 홈페이지로 가려면? (최상위 경로)

../../ 또는 ../../index.html 

또는

/또는 /index.html   

=> 홈페이지 주소가 www.naver.com/  이라면 www.naver.com/index.html  로 이동하게 되는것

---

URL 플래그먼트

주소 맨마지막에 붙어서 해당 주소의 일부분을 가르킴 

<a href=" #id"> </a> 링크를 걸어주면 해당하는 id 를 가진 내용으로 이동됨 => 목차에 활용

주소창에는 www.naver.com/#id  로 주소 보임

---

새 창(탭) 열기

<a href="주소~~" target="속성값"></a>

_blank : 새 탭 열기

_self : 현재 창에서 열기

아무거나 :  페이지 이름을 지정해서 다른 링크를 눌러도 해당 창에서 열리게 할 수 있다. (처음에 새 탭으로 열림)

---

URI 스킴Scheme

<a href="속성:속성값"></a>

mailto:받는사람 이메일 주소

tel:+821099999999

 

Uniform Resource Identifier (URI) Schemes (iana.org)

---

태그의 종류 ... 적용되는 서식이 아닌 의미 구분을 위해 태그 적용하는 것이 좋다 

제목 태그 <h1> ~ <h6>

본문 <p>

줄바꿈<br>

중요 <stron> : 두껍게 표시

강조 <em> : 기울기 (크롬 기준)

취소 <s> : 취소선

인용 <blockquote> : 들여쓰기?

짧은 인용 <q> : ""표시

주제전환 <hr> : 가로선 (horizontal line)

각주 <sup> : 위 첨자

각주 <sub> : 아래 첨자

<pre> : html에 적힌 서식 그대로

<code> : 코드

---

<ol> : 순서가 있는 리스트

<ul> : 순서가 없는 리스트 

 

<li> ol/ul 태그 안에 item을 넣어준다. => 불렛포인트

 

<ol type="  ">

속성값에 따라 표현 방식이 바뀐다

a -> a, b, c

A -> A B C

i -> 로마숫자

I -> 로마숫자

1 (default)

 

CSS로 모양만 바꿔주려면?

ol {

   list-style : disc; decimal; none; .... -> 개발자도구에서 기타 옵션 확인할 수 있음

}

none으로 하고 inline-block 속성값을 준 다음 마치 div태그처럼 사용하기도 함

html에서는 리스트임이 표시됨 

기본적으로 상하 margin 을 갖는다

---

table 태그 

<table> -> 테이블 전체를 감싸는 태그

<tr> : table row (개별 행을 감싼다) => 이게 있어야 줄이 넘어감 (행이 생성됨)

 

<thead> : table head 머릿글 감싸준다

<th> : table header (데이터가 아닌 헤더값임을 표시)

 

<tbody>

<td> : table data cell (1셀에 해당)

 

<tfoot> 바닥글 

 

header에 있는 <th> 들도 <tr>로 감싸주어야함

---

스타일 적용하기

테두리  : <table> <th> <td> 선택자로 잡고 border 속성 넣어준다 

border-collapse : collapse; -> 테두리 사이의 간격을 줄여줌 (일부 테두리가 생략됨)

border-spacing: 00 px;

---

멀티미디어

 

이미지

<img>

src="파일경로 or 파일명"

alt="이미지 설명"  : 이미지 불러오기 실패했을때 / 시각장애인용 스크립트에 표현되는 내용

width="300"

height="480"

웹브라우저 입장에서 이미지를 받아오지 않아도 페이지를 로딩할 자리를 비워놓을수 있다

(css로 크기 변경 가능)

---

비디오

<video>

src="파일경로 or 파일명"

autoplay 자동재생

muted 음소거 ( 크롬 브라우져에서는 muted를 같이 걸어줘야 자동재생이 됨)

controls 컨트롤바 추가

width=""

height=""

단위 적지않으면px (디폴트), %도 가능함

---

오디오

<audio>

src="   "

controls 넣어야 화면에 뜸

autoplay

Chrome의 자동재생 정책  |  Blog  |  Chrome for Developers

Chrome의 자동재생 정책  |  Blog  |  Chrome for Developers

오 신기.. 동영상이 실제로 재생중이지 않을때 일시정지 표시가 뜨게하지 않도록 권장하고있다. 

생각보다 유저의 편의성?을 많이 고려하는구나 

 

<img><video> 태그 사이의 띄어쓰기 (또는 엔터) 가 각 요소 사이에 공백이 생기게 한다.. 홀리

---

<iframe> : inline frame 

한 HTML 문서 안에서 다른 HTML 문서를 보여주는 기능 

src="파일 이름"

width

height

지도, 결제창, 배너 등을 띄울때 사용

---

폼<form> : 작성한 내용을 전송하는 태그 

 

<label for=" ">라벨 (아이디, 비밀번호,...등 사용자가 적어야하는 내용을 알려줌)

<input id=" " name=" "  type="  "> 인풋 (문자, 숫자, 비밀번호, 라디오, 체크박스, 버튼, 파일 등 입력을 받는 칸)

 

인풋 아이디와 동일한 내용을 label for 속성에 넣어주면 (또는 라벨 태그로 인풋을 감싸면)

라벨을 클릭했을때 연결된 인풋으로 포커스가 이동

 

입력받은 값을 name에 매칭됨-> 데이터를 전송할때 사용

 

type = "email / password / " -> 입력받는 데이터의 타입

 

    <form>
      <label for="username">아이디</label>
      <input id="username" name="username">
      <label for="password">비밀번호</label>
      <input id="password" name="password" type="password">
      <button>로그인</button>
    </form>

 

label 의 for <=> input 의 id 는 연결된다

그럼 name 은? 입력받은 데이터를 전송하기 위해 사용. 입력받은 데이터에 이름을 붙여준다

-> 주소창에 username=123 이라고 들어감 

type = password로 해야 입력한 비밀번호가 안보임

 

<button type="   > form 안에 있으면 눌렀을때 내용을 전송합니다-> 어디루?

type = button(눌러도 전송 x/ 전송 외 다른 역할) / submit (전송= 디폴트) / reset (내용 초기화)

form태그 바깥에 만들면 -> 내용을 전송하거나 리셋하지 않음 

---

form 태그

1. action 속성 = "페이지 주소" 

+ 인풋으로 name=내용을 입력받으면 = > 페이지 주소/?name=~~~ 라는 주소로 이동하게됨

(쿼리 문자열: ? 이후에 붙는 데이터)

 

2. method 속성 = "get" (디폴트) / "post"

폼 버튼을 눌렀을때 페이지를 이동한다 = 웹브라우저가 어떤 서버로 get 리퀘스트를 보낸 것

사진 파일 등 크기가 너무 크면 get 리퀘스트와 쿼리문자열 만으로는 보낼 수 없다 -> post 리퀘스트

---

input태그 - type 종류 

type="checkbox" -> 체크하는 경우 name = on이라는 문자열을 받는다

value=" "  의 속성값을 문자열로 받는다 -> 여러 항목을 선택할 때 

 

type="date"

type="file"

accept="  " 파일의 확장자를 정해줄 수 있다

muliple (참/거짓 속성) 여러개 선택 가능

 

type="email" 올바른 이메일 형식인지 자동으로 검사

 

type="number" min=" " max=" " step=" " 

최소값, 최대값 지정 / 버튼을 눌렀을때 증/감할 간격 정해주기

 

type="password"

 

type="radio" 동그란 선택버튼 / 하나만 선택 가능 

<input id="very-bad" name="feeling" value="0" type="radio">
<label for="very-bad">아주 나쁨</label>
<input id="bad" name="feeling" value="1" type="radio">
<label for="bad">나쁨</label>
<input id="soso" name="feeling" value="2" type="radio">
<label for="soso">보통</label>
<input id="good" name="feeling" value="3" type="radio">
<label for="good">좋음</label>
<input id="very-good" name="feeling" value="4" type="radio">
<label for="very-good">아주 좋음</label>

 

feeling= 에 선택한 옵션의 value값이 들어가게된다 

 

type="range"

 

type="text"

 

type="select" 여러값 중 하나를 선택할 수 있다

<option value=" " >옵션 태그, value 속성과 함께 쓴다 

 

<label for="genre">장르</label>
<select id="genre" name="genre">
  <option value="korean">한국 영화</option>
  <option value="foreign">외국 영화</option>
  <option value="drama">드라마</option>
  <option value="documentary">다큐멘터리</option>
  <option value="vareity">예능</option>
</select>

 

<textarea></textarea> 긴 글을 입력할 수 있는 인풋

---

인풋 속성 추가하기

 

인풋에 적혀있는 설명 = placeholder 속성 추가

<input name=" ", placeholder="이메일 또는 휴대전화">

 

CSS 선택자는

input::placeholder{ ... } 

 

필수값으로 지정 => required 추가 

 

자동완성

autocomplete="on"

autocomplete="tel"

autocomplete="email"

---

링크 link 태그 : 외부에서 파일을 불러올때 쓰는 태그 

<head>에 적어준다?

 

<link     rel="  "           href=" ">

rel 불러올 링크의 정보/종류 (용도) : stylesheet, icon, 

href 불러올 링크 (경로)

 

favicon : 파비콘(Favicon)이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지입니다.

 

<script> -> .js 불러오기 

src ="파일위치 " 

주로 <body> 태그 안에서 맨 아래에 적어준다 또는 <head>안에 위치

---

<meta>

메타데이터 = 데이터에 대한 데이터

encoding이나 sns에서 보여줄 미리보기에 대한 정보 등을 담는다

 

<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정해요.
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.

: 현재는 접근성 문제로 크롬에서 지원하지 않음

<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.

<meta name="robots" content="noindex">
name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.

 

---

semantic tag: 웹페이지 안에서 각 영역을 구분하는 div 대신 의미있는 태그를 붙여주자 -> 작성하는 사람의 의도를 담는다

header

nav

main (한 페이지에 한 영역만)

footer

 

article : 하나의 독립적인(완전한) 내용 ex. 댓글 

section 일부분을 나타내는 영역 

 

figure 이미지+이미지 설명 

 

시맨틱 태그를 써야하는 이유?(3)

1. 검색엔진 최적화 Search Engine Optimazation (SEO) ---검색엔진로봇

: 검색했을때 적합한 결과가 나오도록 사이트를 최적화

웹페이지의 메타데이터와 시맨틱 태그가 잘 갖추어져있으면 검색엔진이 해당 사이트를 보다 정확하게 파악할 수 있다

 

2. 웹 접근성 Web Accessibility (A11y)

시맨틱태그는 배리어프리 인터넷을 만드는데 중요한 역할을 한다. (예. 시각장애인은 스크린리더를 이용해 웹서핑을 한다)

 

3. 개발자의 생산성 향상 ---개발자

코드를 읽고 이해하기 쉽다.

---

HTML 참고 사이트

https://whatwg.org/