CSS

CSS 는 CSS 속성이 웹 브라우저에서 지원되는지를 체크해서 지원되는 경우와 되지 않는 경우에 대한 구분 처리를 할 수 있습니다. 웹 브라우저 호환성에 따른 구분 처리를 할 수 있기 때문에 자바스크립트 없이도 많은 웹 브라우저 호환성 문제를 해결할 수 있습니다. 인터넷 익스플로러를 제외한 모든 웹 브라우저가 지원을 하므로, 특히 인터넷 익스플로러

플렉스박스와 그리드는 유연한 레이아웃을 만들 수 있는 HTML의 최신 박스 모델입니다. 기존에는 HTML 요소 안에 아이템(들)을 가운데 정렬하기가 여러가지로 불편했었는데, 이런 점들까지 획기적으로 개선해서 전용의 정렬 속성을 제공합니다. 플렉스박스와 그리드 안의 아이템을 수평, 수직으로 가운데 정렬하려면 다음처럼 CSS 속성으로 구현할 수 있습니다. 가운데 정렬을 위한 "align-items" 와 'justify-content"

반투명으로 아웃 포커싱된 배경을 만드는 CSS 기법은 여러 가지가 있지만, 만드는 방법이 다소 복잡한 편입니다. 새 CSS 속성을 사용하면 반투명 유리 배경 효과를 단 1줄의 CSS 속성으로 만들 수 있습니다. CSS 속성 중 "backdrop-filter"가 있습니다. 속성 값은 여러 가지를 지정할 수 있지만 우리가 만드려고 하는 반투명 흐린 배경 효과를

모바일 대응  타입들 HTML5 표준에 새로 추가된 타입들 중 모바일 대응을 위한 타입들이 몇가지 있습니다. 모바일 전용은 아니지만 모바일 환경의 터치 및 드래그 환경에 더 적합지거나, 기본적인 입력 체크 기능을 통해 UI 메시지가 출력되도록 해서 가벼운 실행 환경을 위한 배려를 했습니다. 다만, HTML5 표준 태그 정의가 대부분 그렇듯이 표준만 정해져

그리드는 레이아웃을 동적으로 만들고 영역을 배치할 수 있는 다양한 방법을 제공합니다. 그중 가장 대표적인 방법이 앞서 배웠던 영역 매핑(Area mapping)을 이용해 구획 영역을 합치는 방법입니다. 우리가 만드는 그리드 레이아웃은 웹페이지의 전체 구조를 생성하는 것 일수도 있지만, 배너나 아이템 목록 처럼 조금 더 단순하고 반복되는 항목들의 나열일 수도 있습니다.

1. 영역 구획 속성들 시작/끝 위치로 영역 지정 바둑판 모양으로 나누어진 그리드의 셀 영역 1개에는 1개의 자식 요소(태그)가 자리를 차지합니다. 행, 또는 열의 크기를 바꿀 수는 있지만, 모든 행, 또는 열 안에 1개의 요소(태그)가 자리를 차지하는 것에는 변함이 없기 때문에 여러 셀에 걸쳐서 영역을 차지하는

그리드(Grid) 속성을 사용하는데 최대의 걸림돌은 인터넷 익스플로러입니다. 인터넷 익스플로러가 서서히 퇴출의 수순을 밟고 있지만, 여전히 웹 개발자/디자이너들은 그리드 사용을 주저합니다. 그리드의 경우 인터넷 익스플로러 11은 일부 속성을 제외하고 지원합니다. 그리고 지원하지 않는 속성도 벤더 프리픽스(Vendor Prefix)를 이용하면 어느정도 해결이 가능합니다. 그리드를 인터넷 익스플로러에서 호환되도록 하는 벤더

1. 그리드 기초 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 CSS 속성으로 display: grid; 로 시작합니다. 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이

인터넷 익스플로러에서 지원되지 않는 태그 타입들 타입중 몇몇(주로 HTML5에서 추가된 타입들)은 인터넷 익스플로러에서는 지원되지 않습니다.  time 타입 같은 경우 인터넷 익스플로러 11에서는 지원되지만, 아래 따로 정리한 타입들은 인터넷 익스플로러 마지막 버전인 11에서도 지원이 되지 않습니다. 인터넷 익스플로러 11이 마지막으로 나온 것이 2013년 말이고 그 무렵 이후 나온 새로운

플렉스박스는 유연한 만큼 레이아웃을 만드는 방식도 자유도가 높은 편입니다. 사용하는 속성에 따라 빠르고 간편하게 만들 수도, 복잡한 레이아웃을 만들 수도 있습니다. 1. flex-wrap 으로 레이아웃 만들기 flex-wrap은 레이아웃 배치를 하는데 필요한 많은 부분을 자동화 해줍니다. 플렉스박스 아이템의 너비, 또는 한 행에 표시할 아이템 갯수만 정해주면 여백과 정렬은 자동으로 처리됩니다. 그러나