반응형
-
HTML&CSS2020.11.26 CSS 버튼 애니메이션 만들기 폼에 사용하는 버튼들 중 가장 대표적인 것은 "저장", "취소" 같은 선택 버튼입니다. 밋밋한 버튼보다는 마우스 호버(hover)시에 버튼이 활성화 되는 효과를 주면 보기에도 좋고, 사용자에게 누를 수 있는 버튼이라는 것을 알려주는 안내 역할을 하기도 합니다. 간단한 트랜지션 애니메이션 효과로 마우스호버 효과를 적용할 수 있습니다. 먼저 버튼 2개를 만듭니다. 저장 취소 ".btn" 클래스로 버튼 디자인을 입힙니다. .btn{ b.. -
HTML&CSS2020.11.26 CSS 유닛(Unit) 단위와 픽셀과의 관계 CSS 에는 꽤 많은 유닛 단위가 사용됩니다. 모바일 기기, 또는 레티나(Retina) 디스플레이와 같은 고해상도 기기가 나오기 전에는 웹의 세상은 픽셀(px) 단위를 사용하는 것이 기본이었습니다. 그리고 CSS 규격에는 96ppi(Pixel per inch) 라는 실제 크기에 대한 픽셀의 갯수도 정해져 있었습니다. 우리가 사용하는 픽셀 단위의 CSS 크기 단위는 1인치 너비에 96개의 픽셀이 들어가는 것을 기준으로 하고 있습니다. 모니터 크기.. -
HTML&CSS2020.11.25 CSS 초기화(Reset) CSS 초기화를 하는 이유 모든 웹 브라우저에는 기본 설정값이라고 하는 미리 정해둔 CSS 기본 속성 값들이 있습니다. 아무런 CSS 속성을 사용하지 않아도 HTML 태그만으로 표시할 때 이 기본 값 속성들이 적용됩니다. 우리가 아는 대부분의 데스크탑 웹 브라우저는 기본 글자 크기를 "16px" 로 사용하고 있고, 글자색은 검정색, " " 태그에는 "8px"의 마진(margin) 속성이 기본 속성 값으로 정해져 있습니다. 윈도우용 크롬 웹.. -
윈도우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)을 이용해 구획 영역을 합치는 방법입니다. 우리가 만드는 그리드 레이아웃은 웹페이지의 전체 구조를 생성하는 것 일수도 있지만, 배너나 아이템 목록 처럼 조금 더 단순하고 반복되는 항목들의 나열일 수도 있습니다. 그리드 속성, 또는 속성 값 중 열을 기준으로 구획하..
반응형
