HTML, CSS

CSS BOX-MODEL

HTML문서에서 각 엘리먼트(요소)는 사각형 박스로 나타냅니다.

CSS에서 이 사각형 박스는 각각 표준 박스 모델을 사용하여 기술 됩니다. 각 박스는 4가지의 경계가 있습니다.

margin 경계
border 경계
padding 경계
content 경계

CSS 박스모델

마진 상쇄(margin-collapsing)

CSS에서 margin 값이 겹치는 요소가 존재하는 경우 top, bottom에 한해 겹치는 영역의 높은 값 1가지만 적용되는 현상

참고 - [CSS] 마진 상쇄 현상(margin collapsing)의 이해와 해결
http://blog.danggun.net/4276

CSS 레이아웃

CSS 레이아웃을 배웁시다
(http://ko.learnlayout.com/no-layout.html)

flex의 예

참고1> CSS Flex 속성
http://webdir.tistory.com/349

참고2> Flexbox 이해: 당신이 알아야 할 모든 것
https://www.vobour.com/1-flexbox-%EC%9D%B4%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%AA%A8%EB%93%A0-%EA%B2%83-understa

CSS 선택자

CSS3 Selector - Styling 대상을 특정하는 셀렉터
(http://poiemaweb.com/css3-selector)

CSS 3 개요

CSS의 뒤에 붙는 숫자는 CSS Level뒤에 붙는 숫자를 줄여서 표현한 것으로 CSS Level2는 2011년 6월에 권장 단계에 이르게 됨(이때까지 9년이 걸림)
CSS3(level 3)는 CSS 2.1을 상속하는 것을 목표로 하며 다중열(multi-columns), 유동적인 상자(flexible box), 격자 배치(grid layouts) 뿐만 아니라 둥그런 모서리(rounded corners), 그림자( shadows) , 부드러운 색의 변이(gradients) , 변이(transitions), 움직임(animations) 등도 지원합니다.

상속

(http://poiemaweb.com/css3-inheritance-cascading)

단위

(http://poiemaweb.com/css3-units)

당신은 모를 수도 있는 CSS의 7가지 단위
https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

transition

(http://poiemaweb.com/css3-transition)

같이 볼만한 글
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Gradient

(http://poiemaweb.com/css3-gradient)

css3-animation

(http://poiemaweb.com/css3-animation)

같이 볼만한 글
http://www.beautifulcss.com/archives/272

CSS 애니메이션 성능 개선 방법

(http://wit.nts-corp.com/2017/06/05/4571)

참고 - MDN CSS Reference(브라우저 호환성 확인)
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Reference#%EC%84%A0%ED%83%9D%EC%9E%90

HTML5

HTML5 설명(https://namu.wiki/w/HTML5)
HTML5라고 불리우는 개념은 단순히 웹 문서를 작성할 때 사용되는 마크업 랭귀지(HTML)의 문법적(syntactic) 버전 뿐만 아니라 새로운 DOM API 스펙을 포함하는 것
문법면에서는 이전에 비해 상당히 간결하고 명확해 졌다. XHTML에 있던 XML 문법도 모두 제거되어 HTML 4.01의 방식으로 돌아갔다.
또한 이전에는 JavaScript를 사용해서 엄청나게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 엘리먼트(video, audio등)로 편입됨으로서 간단하게 구현해낼 수 있게 되었으며 불필요하게 길게 적어야했던 이전 버전에서 꼭 필요한 부분만 남기도록 바뀌는 등 여러가지 개선점이 생겼다.
API면에서, HTML5에서는 비디오 및 오디오와 같은 미디어 엘리먼트에 대한 API뿐를 포함해 오프라인 웹 앱 구현, 문서 편집 등과 같은 다양한 기능에 대한 API가 추가되었으며, WHATWG에 의해 Geolocation, Web SQL, File API, Audio API등이 “Living standard”로 권고되고 있다. HTML5에서의 변화 (W3C) WHATWG 스펙 이를 통해 이전에는 플래시, 실버라이트 등의 외부 플러그인을 통해서만 지원할 수 있던 클라이언트 사이드에서의 사용자 인터페이스를 위한 기능들의 상당수를 브라우저 자체의 기능을 이용해 구현할 수 있게 되었다.
이런 API들은 사실상의 브라우저 표준 스크립트 언어인 JavaScript(이론적으로는 다른 스크립트 언어라도 관계없다. 브라우저가 지원한다면 말이지만…)를 통해 이용할 수 있다. 이 때문에 HTML5는 마크업 언어라고만 보기는 더 이상 힘들어졌다. 단, HTML5 그 자체만으로 모든 것이 된다는 오해는 삼가자. HTML5 그 자체가 제공하는 것은 문서 구조와 API이고, 이걸 API와 연결시켜 실제 동작을 구현하는 것은 JavaScript라는 언어로, 이 둘은 엄연히 별개의 것이다. HTML5와 JavaScript가 서로 연결되어 돌아가는 개념이지, HTML5 안에 JavaScript가 포함되는 것이 절대로 아니다. 단적으로, JavaScript는 ECMAScript라는 표준안이 따로 나오는 별도의 프로그래밍 언어이다.
인터넷 익스플로러는 9부터 일부 태그를 지원하기 시작했고, 10에서 거의 대부분 지원한다. 8 이하를 지원하려면 html5shiv.js[1]라는 JavaScript를 이용하면 된다. 단 이 경우 JavaScript를 사용하기에 페이지 렌더링 속도가 느려진다는 단점이 있다. 그리고 위의 브라우저 API를 이용하는 기능들은 사용이 불가능하다. 이 JavaScript가 대체하는 것은 HTML5의 마크업 뿐이기 때문이다.

API
https://ko.wikipedia.org/wiki/API

WHATWG(웹 하이퍼텍스트 애플리케이션 테크놀로지 워킹 그룹)
https://ko.wikipedia.org/wiki/WHATWG

HTML, CSS 요약(사내공유용)