mordern HTML, CSS, JS란?
기존 front-end
- 기존은 font-end는 HTML과 CSS를 혼용하여 표현하고 필요한 CSS/JS 기능은 검색하여 쓰려다보니 반응형과 호환성 고려부분에서 많이 미진한 모습을 보인다. 또한 jQuery를 사용해서, 성능이 느리다.
모던 front-end
- 이에 Mordern 방식은 HTML은 구조, CSS로 디자인 반응형과 호환성 고려하고 jQeury를 쓰지 않고 JavaScript Only(Vanilla JS)만 사용하되 미진한 JS를 개선한 JavaScript ES6문법을 사용한다.
구글 SEO (search engine optimizer)
- 검색엔진 최적화 기본 가이드로 사용자 검색시 상단 노출되고 싶다면 양식에 맞는 작성은 필수이다.
HTML
시작 태그
<!doctype html>- HTML 문서를 브라우저가 다르게 렌더링하지 않도록 하기위한 특수태그이다.
언어 태그
<html lang="ko>- 문서 범위설정 태그이며 속성은
lang이 있다. 문서언어 (ISO 639-1) 설정이다.
메타 태그
<meta name="" content=""/>- 문서 전반에 걸친 정보를 표시하기 위한 설정
- charset : 문자 인코딩을 설정
- name : author, description, keywords등을 기재한다.
- 최근에는 싱글태그로 작성이 가능하다
호환 태그
<meta http-equiv="X-UA-Compatible" content="ie=edge">- IE에서 최신 표준 모드로 렌더링 되도록 하는 설정
IE의 호환성 이슈로 기본적으로 넣어주는 것이 범용성에 좋다.
뷰포트 태그
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">- viewport 속성은 현재 화면에서 보여지는 직사각형 영역, 웹 브라우저 상에서는 현재 창에서 문서를 볼 수 있는 전체 화면을 의미한다.
- meta viewport는 초기 viewport에 대한 설정을 의미한다.
속성 설명 주요 값 width 초기 뷰포트 너비 설정 device-width 또는 양의 정수 (장치 너비 또는 특정 너비) user-scalable 웹페이지 확대 허용 여부 설정 no 또는 yes(대부분 no로 설정! no일경우 사용자가 웹페이지 확대할 수 없다. 브라우저 설정에 따라 무시가 가능함.) initial-scale 디바이스 너비와 뷰포트 너비 비율 설정 0.0~10.0 (default=1.0) maximum-scale 최대 확대 비율 설정 0.0~10.0 (default=1.0) minimum-scale 최소 확대 비율 설정 0.0~10.0 (default=1.0)
링크 태그
<link rel="stylesheet" href="path">
<link rel="icon" href="path">- html에 필요한 외부 데이터를 가져올 때 사용
- rel : html문서와의 관계 표시 (stylesheet, icon)
- href : 외부 데이터 파일 위치 지정
h 태그
<h1></h1>- 웹 브라우저 호환성을 위해, 태그를 쓰는 것이 아닌! CSS style로 별도로 지정함.
앵커 태그
<a href="" target="">링크를 넣을 문자열</a>| 속성 | 설명 | 주요 값 |
|---|---|---|
| href | 하이퍼링크 URL | URL, 또는 tel:전화번호, mailto:메일주소 |
| target | 링크된 URL 이동방법 | _self: 현재 창, _black: 새로운 창 |
폼 태그
<form action="" method="" target="">
</form>- 주로 input과 함게 사용
속성 설명 주요 값 action 데이터 처리 URL method HTTP method post, get target 링크된 URL 이동방법 _self: 현재 창, _black: 새로운 창
입력 태그
<input type="" name="">- 주요속서 외 다양한 속성을 갖고있음
속성 설명 주요 값 type 입력받을 인터페이스 설정 button, checkbox, etc... maxlength, minlength 사용자 입력 문자열 최대, 최소 길이 정수 autofocus 페이지 로드시 커서가 자동으로 놓이도록 autofocus autocomplete 자동완성 기능설정 on | off
Semantic web
- 웹페이지 각 요소에 의미를 부여하여 단순 키워드 중심 검색을 뛰어넘어 의미와 관련성을 기반으로 보다 진보된 검색 또는 서비스가 가능토록하는 시도이다.
시멘틱 웹 태그 설명 header 헤더 nav 내비게이션 asdie 옆에 위치하는 부분 section 본문의 여러 내용(article)을 포함하는 부분 article 본문의 주내용이 들어가는 부분 footer 하단부를 의미
智(지)! 德(덕)! 體(체)!