태그는 키보드 입력을 나타냅니다. 문서에 단축키 표시 등을 넣을 때 사용합니다. 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> 스타일 추가
객관식 퀴즈나 간단한 심리테스트 등에 이용할 수 있는 마크업 규칙과 그것을 작동하게 하는 스크립트를 만들어보려고 합니다. 이전 글 오늘의 JS 놀이: 정적 페이지를 위한 퀴즈 엔진을 만들 계획에 이어서, 계획을 실제로 작동하게 하는 스크립트를 제작합니다. 스크립트는 초기화 단계와 작동 단계로 나눌 수 있습니다. 퀴즈 초기화 document.addEventListener('DOMContentLoaded', (event) => { // 컨텐츠 로드 후에 할 일 }); 웹 페이지가 모든 요소를 표시할 준비가 끝나면 퀴즈를 초기화하도록 합니다. 모종의 이유로 마크업을 모두 표시하기 전에 작동해버리면 오류로 인해 멈출 수 있거든요. document.addEventListener('DOMContentLoaded',..
오늘의 JS 놀이: 정적 페이지를 위한 퀴즈엔진 제작
복잡한 일은 최대한 스크립트에 맞기고 간단한 마크업만 사용하여 객관식 퀴즈를 구현하고 총점을 확인할 수 있는 자바스크립트 엔진을 만들어보려고 합니다. 티스토리에 써볼 생각이니 하나의 정적 페이지 안에서 출제와 결과가 모두 나와야 합니다. 간단한 마크업 대충 문제라는 내용 대충 답안이라는 내용 대충 10점짜리 답이라는 내용 대충 결과페이지라는 내용 적당히 점수: / 다시하기 이런 식으로 만들 수 있도록 스크립트를 구현할 생각입니다. 태그 자체가 다르니 스타일시트에서 관리하기에도 나쁘지 않을 듯하고, 굳이 있는 태그 안에 class니 id니 data-quiz니 넣어가며 불편하게 만들고 싶은 생각이 없어요. 만들때 만큼은 간단했으면 좋겠습니다. 간단한 기능 문제를 내는 페이지는 각각 태그로 구분합니다. 봐야 ..
오늘의 JS 놀이: 정적 페이지를 위한 퀴즈엔진을 만들 계획
그리드 레이아웃은 가상의 격자에 요소를 배치합니다. 여기서는 배치를 할 요소들을 감싸는 부모 요소를 컨테이너(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, 구문강조 박스 꾸미기
콘솔에서 가지고 놀기 highlight.js highlight.js는 웹 문서에 있는 코드 블록의 프로그래밍 언어에 맞춰 문법 강조를 할 수 있도록 해주는 자바스크립트와 스타일시트입니다. 웹페이지에 불러오면 hljs라는 이름의 오브젝트를 사용하여 기능을 사용할 수 있습니다. 지원하는 기본 언어 별다른 옵션 없이 지원하는 언어는 hljs.listLanguages()를 통해 알 수 있습니다. 크롬 웹브라우저를 사용하는 경우에는 개발자도구( F12 )의 Console 탭을 이용하여 사용할 수 있습니다. highlight.js의 9.16.2 기준으로 다음 내용을 출력합니다. (34) ["apache", "bash", "coffeescript", "cpp", "cs", "css", "diff", "go", "ht..
오늘의 스킨제작: highlight.js 가지고 놀기
highlight.js는 다양한 언어, 다양한 테마를 제공하는 자바스크립트 기반 문법 강조 도구입니다. 오늘은 스킨에 highlight.js을 적용하는 방법과 제게 필요한 몇 가지 응용을 해볼 생각입니다. highlight.js 불러오기 스타일시트나 라이브러리를 제공하는 CDN CDN(콘텐츠 전송 네트워크; Content Delivery Network)는 많은 사람들이 사용하는 콘텐츠를 미리 여러 지역의 네트워크에 저장해놨다가 접속자가 요청하면 콘텐츠를 가장 빠르게 보내줄 수 있는 곳과 자동으로 연결하는 서비스입니다. 스킨의 파일크기 20MB 제한도 있으니 유명한 스타일시트나 자바스크립트 라이브러리 등은 CDN을 이용하는 것을 추천합니다. CDN을 통해 highlight.js 적용하기 우선 데모페이지를 ..
오늘의 스킨제작: highlight.js, 소스코드 하이라이팅
End of content
No more pages to load