CSS의 @media속성인 prefers-color-scheme을 소개하고 CSS의 변수를 활용하여 색상표를 만드는 방법을 알아봅니다. 추가 정보가 필요하다면 모질라재단의 prefers-color-scheme 속성에 대한 설명을 참고하세요. 컴퓨터나 스마트폰을 사용할 때 다른 앱은 어두운 테마를 사용하는데 웹페이지가 밝거나 하면 번갈아서 볼 때 눈이 피로해질겁니다. 웹페이지도 다른 앱들과 같은 테마를 사용하고자 할 때 쓸 수 있는 방법이 미디어 속성 prefers-color-scheme 입니다. 라이트 / 다크 모드의 기준 윈도우 11의 경우에는 개인설정 > 색 항목에서 모드를 변경할 수 있습니다. 안드로이드는 기종마다 차이가 있지만 일단은 설정 메뉴 어딘가에서 변경할 수 있는 모양입니다. 기본적인 사용..
[CSS] 페이지를 OS의 설정에 따라 다크/라이트 모드로 보여주기
태그는 키보드 입력을 나타냅니다. 문서에 단축키 표시 등을 넣을 때 사용합니다. Ctrl+C로 내용을 복사할 수 있습니다. 와 같은 방식으로 사용합니다. 스타일 시트 kbd { font-weight: bold; font-size: 0.8em; vertical-align: middle; margin: 0 0.3rem; border: 1px solid #aaa; border-radius: 4px; display: inline-block; padding: 1px 8px; background: linear-gradient(178deg, #fff, #fff, #fff, #ddd); box-shadow: 1px 1px 2px #777; }
스킨 업데이트: <kbd> 스타일 추가
그리드 레이아웃은 가상의 격자에 요소를 배치합니다. 여기서는 배치를 할 요소들을 감싸는 부모 요소를 컨테이너(container)라 하고 배치할 대상인 자식 요소를 아이템(item)이라 하겠습니다. 컨테이너에 의해 배치된 아이템은 컨테이너의 속성과 조합되어 배치되고 정렬합니다. 아이템 속성 배치 .item { grid-column-start: 열이름 or 열번호; grid-column-end: 열이름 or 열번호; grid-row-start: 행이름 or 행번호; grid-row-end: 행이름 or 행번호; } .item { grid-column: 시작열 / 끝열 grid-row: 시작행 / 끝행 } 그리드의 행이나 열을 지정해서 아이템을 배치합니다. 각 번호는 1부터 시작해서 열은 오른쪽으로 행은 아래..
CSS: 그리드(Grid) 아이템 속성
그리드 레이아웃은 가상의 격자에 요소를 배치합니다. 여기서는 배치를 할 요소들을 감싸는 부모 요소를 컨테이너(container)라 하고 배치할 대상인 자식 요소를 아이템(item)이라 하겠습니다. 그리드 컨테이너는 아이템을 배치하지만 아이템 아래에 있는 요소의 배치까지 관여할 수는 없습니다. 즉, 위와 같은 마크업에서 컨테이너(.container)는 아이템(.item)을 배치하는데 관여할 수 있지만, 아이템의 자식 요소(.sub-item)는 관여할 수 없습니다. 그리드의 특별한 길이 단위 그리드 템플릿 등을 조정할 때 px, em, rem, % 등 알려진 익숙한 단위를 사용할 수 있습니다. 또한 auto, min-content, max-content와 같은 내용물에 따라 크기를 조정하는 키워드를 사용할 ..
CSS: 그리드(Grid) 컨테이너 속성
그리드 레이아웃은 가상의 격자를 만들어 내부에 요소를 배치하는 방법입니다. 웹 페이지의 기본 레이아웃부터 반복해서 배치하는 카드 내부의 요소를 배치하는 등 다방면에 활용할 수 있습니다. 저 또한 대부분의 요소에 그리드를 활용하고 있습니다. 그리드 맛보기 그리드를 사용하여 레이아웃을 배치하는 방식을 살펴봅니다. 웹페이지 레이아웃 body { display: grid; grid-template-columns: 1fr 650px 200px 1fr; grid-template-rows: repeat(3, auto); grid-template-areas: ". header header ." ". main aside ." ". footer . ."; } header {grid-area: header;} main {g..
CSS: 그리드(Grid) 예제
목표 ```python print("python") 마크다운 문법으로 코드 블록을 사용한 예시입니다. 티스토리를 기준으로 마크다운 코드 블록은 다음과 같이 변환됩니다. ```html print("python") 구문 강조 도구인 highlight.js를 사용하면 구문 강조를 위한 태그와 도구가 다녀갔다는 흔적인 클래스를 남기게 됩니다. print("python") 오늘은 변환한 코드블럭이 어떤 언어를 사용하는지 보여주는 박스를 추가했습니다. 사용한 트릭 & 팁 티스토리 외부 자바스크립트에서 스킨 URL을 다루는 방법 images에 추가하는 스킨 파일은 skin.html에서는 상대경로 표기로 접근할 수 있지만 외부에서 불러오는 스크립트 파일은 변환 대상이 아니기 때문에 곤란합니다. 그래서 한 가지 트릭을 ..
오늘의 스킨제작: highlight.js, 구문강조 박스 꾸미기
플러그인을 사용하지 않더라도 티스토리에서 그림을 클릭하면 원본 크기의 그림을 어두운 배경과 함께 볼 수 있는 라이트박스(Ligthbox)를 적용합니다. 오늘은 자바스크립트를 이용하여 기능을 변경합니다. 목표 포스트에 그림을 추가하면 티스토리에서는 아래와 같은 마크업으로 변환합니다. 여기서 라이트박스 이벤트는 span이 담당합니다. 우리는 이 span을 img와 분리해서 별도의 버튼으로 만들게 됩니다. 크게보기 스크립트 function lightbox_modify() { let wrapper = article.querySelectorAll('figure.imageblock'); wrapper.forEach(function(elem){ let img = elem.querySelector(..
오늘의 스킨제작: 라이트박스수정하기
단어 사이는 하이픈(-)으로 프로그래밍에 익숙한 경우 카멜 표기법(camelCase)이 파스칼 표기법(PascalCase)을 사용하는데 익숙해져 있습니다. 하지만 CSS를 다루는 경우에는 스네이크 표기법(snake_case)과 유사하지만 밑줄 대신 하이픈을 사용하는 방식을 많이 사용합니다. (X) topbarTitleText (O) topbar-title-text BEM 방법 BEM 방법은 블록(Block), 요소(Element), 변경(Modifier)을 기준으로 나누어 선택자의 이름을 정하는 것입니다. 각각은 이중 밑줄(__)으로 구분합니다. 블록은 어디에 사용하는지를 나타내고, 요소는 대상의 종류를 나타냅니다. 가령, 네비게이션 바의 카테고리가 가지는 선택자 명칭은 nav__category 가 됩니..
스킨 제작: CSS 이름규칙
간혹 같은 페이지인데도 오페라, 크롬, 사파리, 엣지에서 보이는 모습이 다른 경우가 있습니다. 특히나 모바일에서는 생각과 다른 모습으로 보이는 경우가 있는데요. 이것은 별도의 스타일을 지정하지 않으면 브라우저에서 제공하는 스타일 기본값을 사용하기 때문입니다. 이런 문제를 해결하는 방법으로는 크게 두가지가 있습니다. reset.css: 브라우저가 지정한 모든 스타일을 지운다 normalize.css: 기본 지정 스타일을 통일한다. reset.css reset.css는 현재 이 스킨이 사용하는 스타일 초기화입니다. 모든 속성을 지우고 스킨이 지정한 스타일만 보여줍니다. 파일의 크기가 작다는 장점이 있지만 당연하다 싶은 스타일마저 다시 설정해야 합니다. normalize.css normalize.css는 모든..
브라우저 기본 스타일 초기화: reset.css와 normalize.css
End of content
No more pages to load