html 기초 정리

html은 굉장히 중요하면서 쉬운 언어 

<>시작태그

</>닫히는 태그 

태그는 html문법의 70%

 

h1 제목 즉 헤딩의 뜻 
h2 는 소제목 

 

꺽쇠 슬래쉬 / 

 

프로그래밍 언어의 설명이란 약속임. 그 약속에 따라서 속성이라는 문법을 배우는 것. 

 

html은 하이퍼텍스트, 마크업, 랭귀지의 약자

하이퍼택스트 = 링크 

 

태그는 해당 컨텐츠가 무엇이다 라는것을 브라우저에게 알려주는 것인데, 정보가 부족하면 안뜬다

예를 들면 a태그에 href가 없음 안뜸

속성 href라는 속성의 값은 링크로 연결되도록 주소제공해야한다는 약속이 되어있는것 

 

속성의 이름에 따라서 속성의 기능이 정해져있다 
a 태그는 앵커의 약자이다

해석하면 배의 닻인데, 정박 연결되어있다는 의미로 사용 

 

html은 팀 버너스 리가 만듬 
1960년 gml이라는 마크업언어의 시조가 있고,
sgml 탄생, 그리고  sgmlguid까지 나옴

여기에 17개의 태그가 있는데, 팀버너스리가 17개 태그를 기반으로 +1태그(고것이 a태그) 추가해서 html을 개발한 것임

 

위의 부가 정보 head / 밑의 본질 정보 body

 

!doctype html
- document type declaration 

- 어떤 타입의 html로 작성되었는지를 알려준다

- 시간의 흐름에 따라 태그는 변하는데, 브라우저에게 어떤 표준을 따르고 있는 태그야! 라고 알려주는 것임 

 

아톰 등의 개발도구 중요하다 

적정수준의 도구를 선택해서 배우고 현명하게 사용한다 

 

www.martinrinehart.com/frontend-engineering/engineers/html/html-tag-history.html

html 연대기 - html1~5까지 어떤태그가 추가되었고 삭제되었는지 등 변화를 볼 수 있음

 

www.advancedwebranking.com/html/

html 통계 - 어떤태그를 가장 많이 쓰는지 알 수 있음 

 

무료 사진 pixabay 활용해봐라 

pixabay.com/ko/

 

img 태그

- alt: 이미지가 표시되지 않을때의 대체 텍스트임

- 툴팁은 title 

 

select 태그 

- 콤보박스or드롭다운이라고 하는 옵션

- 멀티블 하면 단축키와 함께 여러개 ㅇㅋ 하지만 사용자는 잘 모름 여러개 선택은 체크박스하는게 좋음

 

radio 버튼 (input태그 타입이 radio오 인것) 

- 네임값이 같은것들끼리 그루핑

- 기본적으로 선택 checked (디폴트값) 해주면 가능 

 

input 버튼 총 3개 있음 

- submit  form 태그 전송버튼으로 활용 

- button 제어하고 싶으면 자바스크립트 사용해야함 

- reset 해당 페이지에서 사용자가 입력한 내용이 모두 초기화됨

 

input type="hidden"

- ui 없이 전송하고 싶을때 사용함  

 

label

- 이름표

- for으로 해당 인풋태그의 아이디 달아주면 요소를 가리키게 됨 

- 혹은 레이블 태그로 해당 요소를 감싸면 됨

 

form 

- 데이터 전송

- get(url), post(주소창에서 숨김후 전송)
- 파일업로드 => 인풋 타입을 파일로 해줌 

 

font

- 퇴출된 태그임, 사용X

 

meta(메타) 

- 데이터를 설명하는 태그

- 웹페이지 본문을 설명하는 정보 부가적인 정보 

- name="" content="값" http-equiv="refresh" content="30" 해주면 30초마다 새로고침

 

인코딩 - 정보들을 컴퓨터에 저장하는 것

디코딩 - 저장된 정보 꺼내서 화면에 표시하는 것

 

semantic (시맨틱)

- 의미에 맞게 잘 표현되었나?
- 어떻게 하면 정보로서의 가치를 잘 높일 수 있는가에 대한 것 

- html5에서 추가된 시맨틱 태그들: header main article section footer 등 

- html을 코딩할때는 의미에 집중해야 한다

 

article

- 본문

- 본문 여러개를 섹션으로 묶어줌
- 특정역할이 애매한것은 section이다 라고 생각하면 됨

 

검색엔진

- 컨텐츠를 잘 해석하여 사용자에게 제공함

- html5 의미론적으로 잘 쓰면 그것이 최적화 임

- 사이트가 상위에 노출할 수 있도록 노력해야하지만 그렇다가 너무 과하면 사이트가 스팸처리해버릴 수 있기 때문에 유의해야함 

- 주로 구글의 검색엔진 최적화 기법을 많이 활용, 다른사이트도 대체로 구글 검색엔진 기반 비슷비슷함 

- 같은 페이지인데 주소 다른 페이지 있다면 link rel canonical 하고 오리지널 페이지 넣어줄것 혹은 리다이렉션(다른 주소로 바로 보내버리기) 해줄 것 

- 사이트 이동은 하이퍼텍스트(href)로 해주는 게 좋다 

- a태그 굳이 css 쓰지말라고 함 

- img 태그에 alt(얼터너티브 텍스트) 해줄것

- 제목 태그 h1 활용 

- robots.txt 사용; 로봇의 접근제어, 크롤링 위한 정중한 요청에 대응하는 파일 (disallow : 허용안함 / 
allow: 허용 )

- 똑같은 사이트 a,b가 있다면 a를 링크하는 사이트가 많을수록 b보다 순위 높게 됨

- 페이지랭크가 높은 사이트가 모페이지를 링크하면 페이지랭크 높아짐 

 

 

웹의 본질은 하이퍼텍스트(링크)에 있따

- html을 정보로서 가치를 높일 수 있을까를 계속 고민해야 함

 

웹개발자 도구

- 브라우저들 각자 탑재중 
- 사용방법 대체로 비슷 
- 크롬 웹브라우저의 개발자도구 기준
- 해당 영역에 오른쪽 검사 -> 해당 요소에 초점 맞춰서 개발자도구 보여줌 

- 네트워크 => 어떤것이 다운로드가 안돼서 페이지가 느려졌는지 확인 등 가능 / 네트워크 탭 보면, 어떠 어떠한 파일을  다운 받았고, 등등의 알수 있음
- 도구를 사용하면 감당할 수 있는 것이 더 커짐 

 

모바일지원 - viewport

- 접속 디바이스에 따라 맞게 보일 수 있도록 해줌 

- meta name="viewport" content="width=device-width, intial-scale=1.0

 

iframe

- 아이프레임은 보안 취약 

- sandbox 추가시 위험한 행위 js 제한 등 

 

video 태그 등장

- html5 전에는 플래시, 플러그인 으로 했는데 이태그 사용하여 간단히 처리 가능 

- 동영상파일 제공 사이트 참조 techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 

<video> controls 쓰면 컨트롤 생김 

    <source src="영상경로.mp4">

    <source src="영상경로.ogv">

</video>

- 비디오 확장자명 여러개: 브라우저마다 지원하는 확장자가 달라서, 여러개 넣어주면 지원하는 애로 알아서 재생됨 

 

태그 사용유무에 대한 정보 및 최신 웹 기술을 사용해도 되는가, 안되는가?

- caniuse에서 확인 가능 

- 많이 사용되는 브라우저 버전은 검은색

 

폼 벨리데이션

- 사용자에게 편의를 제공한다 정도로 이해 

- 보안적인 의미는 아님, 서버에서 엄격한 보안정보 체크 필요함 

- form autocompelete="on" 

  : 폼태그안에 있는 입력폼 등이 모두 자동완성됨 각 요소마다 비활성등 지정가능

- autofocus 

  : 말그대로 자동 포커싱 기능 페이지 뜨자마자 해당 입력칸에 커서 가 있음 

- required

  : 해놓으면 필수입력지정, 미입력시 경고

- pattern

  : 사용자의 입력 조건 강제, 조건은 정규표현식

 

 

html 사전 참고 

opentutorials.org/course/1058/4786

a - 생활코딩

 

 

 

 

 

 

 

 

 

 

 

 

스터디: 생활코딩(html)

opentutorials.org/course/2039