웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트에서는 웹 브라우저의 밝은/어두운 테마에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS의 미디어쿼리에는 웹 브라우저의 테마(밝게/어둡게)에 따른 반응형 미디어쿼리도 있습니다. 근래의 웹 브라우저(특히 모바일 브라우저)에서는 밝은 테마와 어두운 테마를 선택하는 것을 지원하는데, 기본적으로 밝은 배경의 웹 페이지를 만들어 두고 웹 브라우저의 테마를 어둡게 했을 경우 그 테마에 맞춰 어두운 … 더 보기 “어두운 테마에서 다르게 표시되는 CSS 만들기”
이 포스트는 HTML5에서 추가된 <picture> … </picture> 태그에 관한 내용입니다. 이 태그는 기기의 환경에 따라 이미지를 다르게 표시하기 위해 고안된 태그입니다. 반응형 CSS 만들기 포스트에서 CSS에 미디어쿼리를 지정하여 기기의 환경에 따라 다른 모양으로 표시되는 페이지를 구현하는 방법을 서술한 바 있습니다. 본문 내 이미지에도 미디어쿼리를 이용하여 다른 이미지를 표시하는 기능이 있습니다. 일단, 다음 코드를 봅시다. <picture> … 더 보기 “HTML5에서 추가된 유용한 태그 <picture>”
이 포스트에서는 모바일의 가로화면 또는 세로화면에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. 반응형 CSS 만들기 포스트에서도 설명한 바와 같이 CSS에 미디어쿼리 기능이 있습니다. 반응형 CSS에는 브라우저의 최소폭에 따라 다른 CSS 코드를 지정해 줄 수 있었습니다. 미디어쿼리에서는 최소폭 뿐만 아니라 다른 여러 조건을 지정할 수 있는데 그 중 웹 페이지를 표시할 … 더 보기 “모바일의 가로세로에 따라 달라지는 CSS 만들기”
이 포스트에서는 반응형 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS에 미디어쿼리 기능이 있습니다. 같은 웹 페이지라도 인쇄하기 위한 레이아웃은 화면에 표시하기 위한 레이아웃과 다르게 해야 할 필요가 있고, 화면도 기기에 따라 해상도가 천차만별이기 때문에 다양한 해상도에서 레이아웃을 다르게 하기 위해 다양한 환경 조건에 따라 모양을 다르게 할 수 있는 기능을 제공합니다. CSS에 미디어쿼리를 적용하는 … 더 보기 “반응형 CSS 만들기”