반응형
-
윈도우102020.11.21 윈도우10 업데이트와 함께 인터넷 익스플로러 1000개 사이트 차단이 시작되었습니다. 예고되었던 거지만, 드디어 인터넷 익스플로러 강제 퇴출이 시작되었습니다. 대부분 해외사이트지만, 사이트를 접속하면, 다음과 같은 마이크로소프트 지원 페이지로 강제 리다이렉트 되고 신형 엣지 브라우저가 실행되면서 해당 사이트를 보여줍니다. 윈도우10 인터넷 익스플로러 업데이트가 적용되었는지 확인하려면 인터넷 익스플로러 10/11 로 미국 뉴스사이트인 "cnn.com" 을 들어가보면 됩니다. 드디어 인터넷 익스플로러.. -
HTML&CSS2020.11.21 CSS로 이미지를 영역 안에 배치하기 - object-fit / object-position 인터넷 익스플로러 호환성 이슈로 사용빈도가 낮은 속성 중에는 이미지나 요소를 정렬하고 배치하는 과정을 극단적으로 쉽게 해주는 속성들이 여러 개 있습니다. 그중 이미지나 비디오를 영역 안에 적절하게 정렬해서 배치하는 속성으로 "object-fit" 과 "object-position" 이 있습니다. 이미지와 비디오에 동일한 배치 속성이 적용되며, 이미지를 배치하는 방법으로 알아보겠습니다. 이미지를 영역 안에 배치하는 모든 배치 영.. -
HTML&CSS2020.11.20 CSS 기능 쿼리로 속성 지원 체크하기 - @support CSS 는 CSS 속성이 웹 브라우저에서 지원되는지를 체크해서 지원되는 경우와 되지 않는 경우에 대한 구분 처리를 할 수 있습니다. 웹 브라우저 호환성에 따른 구분 처리를 할 수 있기 때문에 자바스크립트 없이도 많은 웹 브라우저 호환성 문제를 해결할 수 있습니다. 인터넷 익스플로러를 제외한 모든 웹 브라우저가 지원을 하므로, 특히 인터넷 익스플로러 지원 여부를 체크해 예외 처리를 해야 하는 경우 유용하게 사용할 수.. -
HTML&CSS2020.11.19 플렉스박스와 그리드의 가운데 정렬 플렉스박스와 그리드는 유연한 레이아웃을 만들 수 있는 HTML의 최신 박스 모델입니다. 기존에는 HTML 요소 안에 아이템(들)을 가운데 정렬하기가 여러가지로 불편했었는데, 이런 점들까지 획기적으로 개선해서 전용의 정렬 속성을 제공합니다. 플렉스박스와 그리드 안의 아이템을 수평, 수직으로 가운데 정렬하려면 다음처럼 CSS 속성으로 구현할 수 있습니다. 가운데 정렬을 위한 "align-items" 와 'justify-content" 속성은.. -
HTML&CSS2020.11.19 CSS 1줄 코딩으로 반투명 유리 배경 효과 구현하기(backdrop-filter) 반투명으로 아웃 포커싱된 배경을 만드는 CSS 기법은 여러 가지가 있지만, 만드는 방법이 다소 복잡한 편입니다. 새 CSS 속성을 사용하면 반투명 유리 배경 효과를 단 1줄의 CSS 속성으로 만들 수 있습니다. CSS 속성 중 "backdrop-filter"가 있습니다. 속성 값은 여러 가지를 지정할 수 있지만 우리가 만드려고 하는 반투명 흐린 배경 효과를 만드는데는 "blur" 속성 값을 사용합니다. 다음처럼 작성하면 blacdrop-filter: blur.. -
HTML&CSS2020.11.19 CSS 그리드(Grid) - 4. 그리드 영역 구획하기 1. 영역 구획 속성들 시작/끝 위치로 영역 지정 바둑판 모양으로 나누어진 그리드의 셀 영역 1개에는 1개의 자식 요소(태그)가 자리를 차지합니다. 행, 또는 열의 크기를 바꿀 수는 있지만, 모든 행, 또는 열 안에 1개의 요소(태그)가 자리를 차지하는 것에는 변함이 없기 때문에 여러 셀에 걸쳐서 영역을 차지하는 레이아웃을 표현 하기에는 부족합니다. 그리드 속성 중에는 2개 이상의 셀을 하나로 합쳐서 자식 요소(태그)를.. -
카테고리 없음2020.11.19 CSS 그리드(Grid) - 3. 열 구획 속성(Attribute)과 메서드(Method) 그리드는 레이아웃을 동적으로 만들고 영역을 배치할 수 있는 다양한 방법을 제공합니다. 그중 가장 대표적인 방법이 앞서 배웠던 영역 매핑(Area mapping)을 이용해 구획 영역을 합치는 방법입니다. 우리가 만드는 그리드 레이아웃은 웹페이지의 전체 구조를 생성하는 것 일수도 있지만, 배너나 아이템 목록 처럼 조금 더 단순하고 반복되는 항목들의 나열일 수도 있습니다. 그리드 속성, 또는 속성 값 중 열을 기준으로 구획하.. -
팁.활용.확장2020.11.17 구글 검색엔진 검색바 광고와 티스토리 블로그 검색 바 충돌 현상 해결 방법 11월 11일 부터 구글 애드센스 광고 단위로 구글 검색바를 블로그에 붙여서 블로그 안에서 구글 검색 결과를 표시할 수 있는 기능이 추가되었습니다. 구글 검색 결과 안에 광고가 표시되기 때문에 구글 검색 결과 + 애드센스의 조합을 내 블로그 안에서 표시해주는 하이브리드 광고 방식입니다. 기존의 애드센스 광고 단위를 새로 추가해서 티스토리 블로그에 애드센스 광고 코드를 붙여서 광고를 표시하는 것처럼 구글 검색.. -
HTML&CSS2020.11.11 CSS 그리드(Grid) 인터넷 익스플로러 11 과 호환성 구현하기 그리드(Grid) 속성을 사용하는데 최대의 걸림돌은 인터넷 익스플로러입니다. 인터넷 익스플로러가 서서히 퇴출의 수순을 밟고 있지만, 여전히 웹 개발자/디자이너들은 그리드 사용을 주저합니다. 그리드의 경우 인터넷 익스플로러 11은 일부 속성을 제외하고 지원합니다. 그리고 지원하지 않는 속성도 벤더 프리픽스(Vendor Prefix)를 이용하면 어느정도 해결이 가능합니다. 그리드를 인터넷 익스플로러에서 호환되도록 하는 벤.. -
HTML&CSS2020.11.11 CSS 그리드(Grid) - 2. 그리드 기초와 속성 1. 그리드 기초 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 CSS 속성으로 display: grid; 로 시작합니다. 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이 정의되지 않으면 "display: g..
반응형
