HTML5 기본정리

HTML5+CSS

HTML5 기본정리

익명의 신디 2020. 3. 20. 10:55

HTML5

* 기본 개념

정의

기본구조

* 태그 (그룹 컨텐츠, 텍스트 관련요소, table, form, input)

* 시맨틱태그 (의미론적 요소를 담은 것일 뿐, 걍 div 박스)

- header : 문서 전체나 섹션의 헤더 (맨위 머릿말)

- nav : 내비게이션, (맨위 계속 달려있는 목차)

- aside : 사이드에 위치한 구분, 메인과 관련성 적은 콘텐츠

- section : 문서의 일반적인 구분, 콘텐츠의 그룹을 표현

- article : 문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역 (기사 아녔음?)

- footer :문서 전체나 섹션의 푸터 (맨아래)

CSS

* 기본 개념

정의

활용 <style> 영역의 디자인 부분을 따로 파일로 정리한것

* 선택자 관련 개념 우선순위

* 단위

16px = 1rem

* 박스모델

* 블록, 인라인, 블록인라인

* 디스플레이 display

<FLEX> display: flex;

- 부모 요소 container 자식 요소 item

- main axis (justify-content) , cross axis (align-items)

<table>

display: table;

display: table-cell;

옆으로 나란히 할때 3가지

display: table;

display: table-cell;

display: inline-block;

display: flex;

justify-content: center;

flex-direction: column; (위아래로 할 때)

* position, float

position : relative; 마진있음

position : absolute; 마진없음 딱 잘림 위에 겹쳐짐

자바스크립트 JS

* 기본 개념

데이터 타입 (원시, 객체)

연산자

* 객체 선언 및 활용

* 배열, 순회

* 함수 (함수 정의 화살표함수~ 클로저)

* 이벤트, DOM 조작

** 자바스크립트랑 파이썬 차이점

# 자바스크립트(js)는 주로 웹 클라이언트(웹 브라우저)상에서 로직을 처리하기 위해 만들어진 언어

# 파이썬은 그 반면 웹 뿐만 아니라 서버나 상용 소프트웨어를 포함한 여러 용도로 활용 가능

최근 js는 v8 엔진 및 node.js의 등장으로 웹 서버 개발용으로도 활용 될 수 있게 되었지만

그럼에도 현재까지도 JS의 주 용도는 웹 클라이언트의 로직 처리용.

js 기반으로 성능 개선과 용도를 넓히기 위해 타입스크립트, 데노 등 여러가지 프로젝트가 추진하나 그닥...이라합니다.

실습

https://jsfiddle.net/daehwan/xk0od1av/28/

배너 레이아웃구성