본문 바로가기
반응형

분류 전체보기

CSS 유닛(Unit) 단위와 픽셀과의 관계 0 2020. 11. 26. CSS 에는 꽤 많은 유닛 단위가 사용됩니다. 모바일 기기, 또는 레티나(Retina) 디스플레이와 같은 고해상도 기기가 나오기 전에는 웹의 세상은 픽셀(px) 단위를 사용하는 것이 기본이었습니다. 그리고 CSS 규격에는 96ppi(Pixel per inch) 라는 실제 크기에 대한 픽셀의 갯수도 정해져 있었습니다. 우리가 사용하는 픽셀 단위의 CSS 크기 단위는 1인치 너비에 96개의 픽셀이 들어가는 것을 기준으로 하고 있습니다. 모니터 크기나 해상도에 따라 96픽셀에 대한 실제 크기는 달라지지만, 규격은 어쨋든 그렇게 정해져 있습니다. 레티나 디스플레이나 고해상도 모니터가 일반화 되면서 픽셀 단위로는 다양한 기기에 대한 웹 표현이 어려워지면서 여러가지 CSS 단위들이 추가되었습니다. em. rem, ..
CSS 작성 초기화(Reset) 방법 0 2020. 11. 25. CSS 초기화를 하는 이유 모든 웹 브라우저에는 기본 설정값이라고 하는 미리 정해둔 CSS 기본 속성 값들이 있습니다. 아무런 CSS 속성을 사용하지 않아도 HTML 태그만으로 표시할 때 이 기본 값 속성들이 적용됩니다. 우리가 아는 대부분의 데스크탑 웹 브라우저는 기본 글자 크기를 "16px" 로 사용하고 있고, 글자색은 검정색, "" 태그에는 "8px"의 마진(margin) 속성이 기본 속성 값으로 정해져 있습니다. 윈도우용 크롬 웹 브라우저는 기본 글꼴로 맑은 고딕(Malgun Gothic) 을 사용합니다. 같은 웹 브라우저임에도 맥OS용과 리눅스용은 사용 기본 글꼴이 다릅니다. 화면의 일관성을 위해서라면 CSS로 웹 폰트를 사용해 모든 운영체제제에서 같은 웹페이지 화면이 되도록 만들 수도 있습니다..
윈도우10 업데이트와 함께 인터넷 익스플로러 1000개 사이트 차단이 시작되었습니다. 0 2020. 11. 21. 예고되었던 거지만, 드디어 인터넷 익스플로러 강제 퇴출이 시작되었습니다. 대부분 해외사이트지만, 사이트를 접속하면, 다음과 같은 마이크로소프트 지원 페이지로 강제 리다이렉트 되고 신형 엣지 브라우저가 실행되면서 해당 사이트를 보여줍니다. 윈도우10 인터넷 익스플로러 업데이트가 적용되었는지 확인하려면 인터넷 익스플로러 10/11 로 미국 뉴스사이트인 "cnn.com" 을 들어가보면 됩니다. 드디어 인터넷 익스플로러 랑 이별을 하게되나 봅니다. 완전 퇴출은 2021년 8월로 되어있지만, 그전에 순차적으로 차단 정책을 추가로 적용해서 완전히 밀어낼 예정입니다. 국내는 구시대 공공기관 사이트들이 아직도 인터넷 익스플로러에서 최적?의 화면을 보여주고 있어서 내년 여름이나 되어야 부랴부랴 난리를 치지 않을까 싶습니다.
CSS로 이미지를 영역 안에 배치하기 - object-fit / object-position 0 2020. 11. 21. 인터넷 익스플로러 호환성 이슈로 사용빈도가 낮은 속성 중에는 이미지나 요소를 정렬하고 배치하는 과정을 극단적으로 쉽게 해주는 속성들이 여러 개 있습니다. 그중 이미지나 비디오를 영역 안에 적절하게 정렬해서 배치하는 속성으로 "object-fit" 과 "object-position" 이 있습니다. 이미지와 비디오에 동일한 배치 속성이 적용되며, 이미지를 배치하는 방법으로 알아보겠습니다. 이미지를 영역 안에 배치하는 모든 배치 영역을 구분하기 쉽게 다음처럼 영역 안에 이미지() 1개만 배치합니다. .wrap{ width: 300px; height: 200px; border: 3px dashed #888; background-color: #f0f0f0; } .fitimg{ background-color: #f..
CSS 기능 쿼리로 속성 지원 체크하기 - @support 0 2020. 11. 20. CSS 는 CSS 속성이 웹 브라우저에서 지원되는지를 체크해서 지원되는 경우와 되지 않는 경우에 대한 구분 처리를 할 수 있습니다. 웹 브라우저 호환성에 따른 구분 처리를 할 수 있기 때문에 자바스크립트 없이도 많은 웹 브라우저 호환성 문제를 해결할 수 있습니다. 인터넷 익스플로러를 제외한 모든 웹 브라우저가 지원을 하므로, 특히 인터넷 익스플로러 지원 여부를 체크해 예외 처리를 해야 하는 경우 유용하게 사용할 수 있습니다. "@support" 구문은 기능 쿼리(Feature query) 라고 합니다. 기능 쿼리는 특정 속성, 또는 기능이 지원되는지를 체크해서 지원되는 경우, 또는 지원되지 않는 경우 CSS를 재정의해서 호환성 문제를 해결합니다. 사용은 다음과 같이 하며, 속성이 지원되는 경우와 지원되지..
플렉스박스와 그리드의 가운데 정렬 0 2020. 11. 19. 플렉스박스와 그리드는 유연한 레이아웃을 만들 수 있는 HTML의 최신 박스 모델입니다. 기존에는 HTML 요소 안에 아이템(들)을 가운데 정렬하기가 여러가지로 불편했었는데, 이런 점들까지 획기적으로 개선해서 전용의 정렬 속성을 제공합니다. 플렉스박스와 그리드 안의 아이템을 수평, 수직으로 가운데 정렬하려면 다음처럼 CSS 속성으로 구현할 수 있습니다. 가운데 정렬을 위한 "align-items" 와 'justify-content" 속성은 플렉스박스, 또는 그리드의 셀 영역 안에 있는 아이템이 영역 크기보다 작아서 여백이 있는 경우에 적용되는 속성입니다. .wrap{ width: 400px; height: 400px; border: 10px solid #888; background-color: #f0f0f..
CSS 1줄 코딩으로 반투명 유리 배경 효과 구현하기(backdrop-filter) 0 2020. 11. 19. 반투명으로 아웃 포커싱된 배경을 만드는 CSS 기법은 여러 가지가 있지만, 만드는 방법이 다소 복잡한 편입니다. 새 CSS 속성을 사용하면 반투명 유리 배경 효과를 단 1줄의 CSS 속성으로 만들 수 있습니다. CSS 속성 중 "backdrop-filter"가 있습니다. 속성 값은 여러 가지를 지정할 수 있지만 우리가 만드려고 하는 반투명 흐린 배경 효과를 만드는데는 "blur" 속성 값을 사용합니다. 다음처럼 작성하면 blacdrop-filter: blur(10px); 배경 이미지 안에 있는 요소는 흐림(blur) 효과가 적용되어 반투명 유리에 보이는 것처럼 배경 이미지가 비쳐 보이는 효과가 적용됩니다. 먼저 배경 이미지가 있는 간단한 HTML 영역을 하나 만듭니다. ".background" 클래스는 ..
CSS 그리드(Grid) - 4. 그리드 영역 구획하기 0 2020. 11. 19. 1. 영역 구획 속성들 시작/끝 위치로 영역 지정 바둑판 모양으로 나누어진 그리드의 셀 영역 1개에는 1개의 자식 요소(태그)가 자리를 차지합니다. 행, 또는 열의 크기를 바꿀 수는 있지만, 모든 행, 또는 열 안에 1개의 요소(태그)가 자리를 차지하는 것에는 변함이 없기 때문에 여러 셀에 걸쳐서 영역을 차지하는 레이아웃을 표현 하기에는 부족합니다. 그리드 속성 중에는 2개 이상의 셀을 하나로 합쳐서 자식 요소(태그)를 위치시킬 수 있는 속성들이 제공됩니다. 시작 위치와 끝나는 위치 경계선(Grid line)을 지정 함으로써 경계선 안에 포함된 셀 들을 하나의 영역으로 합칠 수 있습니다. 여기서 다소 생소한 용어인 "그리드 경계선" 이라는 용어가 나옵니다. 행이나 열과는 다른 것이므로 "경계선" 이라는 ..
CSS 그리드(Grid) - 3. 열 구획 속성(Attribute)과 메서드(Method) 0 2020. 11. 19. 그리드는 레이아웃을 동적으로 만들고 영역을 배치할 수 있는 다양한 방법을 제공합니다. 그중 가장 대표적인 방법이 앞서 배웠던 영역 매핑(Area mapping)을 이용해 구획 영역을 합치는 방법입니다. 우리가 만드는 그리드 레이아웃은 웹페이지의 전체 구조를 생성하는 것 일수도 있지만, 배너나 아이템 목록 처럼 조금 더 단순하고 반복되는 항목들의 나열일 수도 있습니다. 그리드 속성, 또는 속성 값 중 열을 기준으로 구획하는 속성과 메서드들을 이용하면 이런 반복되는 요소들을 일괄로 배치하고 관리할 수 있습니다. CSS 그리드에서 사용하는 메서드(Method)는 일반적인 스크립트 언어의 메서드와는 약간 다릅니다. 엑셀의 내장 함수처럼 아주 단순하고 정해진 기능 만을 할 수 있기 때문에 아주 아주 단순한 조건,..
구글 검색엔진 검색바 광고와 티스토리 블로그 검색 바 충돌 현상 해결 방법 1 2020. 11. 17. 11월 11일 부터 구글 애드센스 광고 단위로 구글 검색바를 블로그에 붙여서 블로그 안에서 구글 검색 결과를 표시할 수 있는 기능이 추가되었습니다. 구글 검색 결과 안에 광고가 표시되기 때문에 구글 검색 결과 + 애드센스의 조합을 내 블로그 안에서 표시해주는 하이브리드 광고 방식입니다. 기존의 애드센스 광고 단위를 새로 추가해서 티스토리 블로그에 애드센스 광고 코드를 붙여서 광고를 표시하는 것처럼 구글 검색 바를 블로그에 추가할 수 있습니다. 다만 이 구글 검색바를 추가하는 스크립트를 추가하면 티스토리 블로그 검색 기능과 충돌이 있습니다. 충돌 현상은 티스토리 블로그 검색 기능이 동작하지 않습니다. 블로그 검색어를 입력하고 전송(엔터, 또는 검색 버튼/아이콘 클릭)하면 검색어 없이 검색 폼이 전송됩니다...
반응형
닫기

티스토리툴바