문과 출신 프리랜서 프론트엔드 개발자 in Japan

css2에 추가된 CSS counters CSS counters를 이용하면 텍스트를 추가한 연속 번호를 자동으로 편리하게 매길 수 있습니다. 예) 제1 장, 제2 장 또는 1.1,1.2와 같이 연속되는 숫자에 반복되는 문자나 기호, 숫자를 추가할 수 있습니다. 실제로 써보면 ol태그보다 더 자유롭게 스타일 적용도 할 수 있고 일일이 태그에 적지 않아도 되는 점이 편리해서 자주 쓰게 됩니다. 1. counter-reset 우선 CSS counters를 사용하려면 먼저 counter-reset 속성(초깃값 0)을 사용하여 초기화해야 합니다.. 주의할 점은 리셋은 카운터를 사용할 요소를 감싸는 부모 요소나 아니면 더 큰 요소(body)에 써야 그 안에서 1,2,3,4... 넘버링이 된다는 것이다. 만약 카운터..

티스토리 블로그의 카테고리 중 Monologue는 나의 혼잣말을 적으려고 만든 것이라 폰트를 구글 웹폰트에서 제공하는 나눔 펜 스크립트 폰트를 사용하고 싶었다. https://fonts.google.com/specimen/Nanum+Pen+Script Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 컴퓨터 크롬 브라우저, 사파리 브라우저에서는 표시되는 나눔 펜 스크립트가 아이폰으로 보니 그냥 기본 고딕체로 나온다. 엇?? 왜지?? 하고 확인해보니 내가 업로드한 css가 적용이 되지 않은 상태로 화면 표시가 되어 있다는 것을 알았다. 모바일은 모바일 전용 html과 css를 ..

:nth-last-child() 의사 클래스는 형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴을 나타내는 인수 1개를 선택합니다. 이 의사 클래스는 첫 번째 요소부터 순서를 매기지 않고 제일 마지막 요소부터 순서를 매기는 점을 빼면 본질적으로 :nth-child와 같습니다. ● 뒤에서부터 x번째 제일 기본적인 쓰임새 /* 리스트의 마지막 요소로부터 x번째 요소 */ li:nth-last-child(x) { } li:nth-last-child(3) { background-color: #bdd4ff; } 감자 고구마 배추 가지 오이 무 호박 옥수수 콩 감자 고구마 배추 가지 오이 무 호박 옥수수 콩 ● 마지막 /* 리스트의 마지막 요소를 선택 */ li:nth-last-child(1) { } li:n..

:nth-child() 의사 클래스는 하나의 인수를 지정하여, 형제 그룹의 요소 중 요소의 위치를 선택하기 위한 패턴을 말합니다. 요소의 위치는 앞에서부터 시작합니다.(1부터) ● x번째 제일 기본적인 쓰임새 /* 리스트의 x번째 요소 */ li:nth-child(x) { } li:nth-child(3) { background-color: #3fff3f; } 사과 딸기 포도 수박 배 사과 딸기 포도 수박 배 ● 첫 번째 /* 리스트의 첫 번째를 선택 */ li:nth-child(1) { } li:nth-child(1) { background-color: #3fff3f; } 사과 딸기 포도 수박 배 사과 딸기 포도 수박 배 ※ 첫 번째를 선택하는 구조 선택자 :first-child도 있지만 형제 그룹 속에..

아직 익숙하지 않은 아토믹 디자인의 구조에 대해 간단히 정리해보고자 한다 Atomic Design은 디자인 시스템을 중심으로 한 설계 방법에 대해 쓰인 Brad Frost의 책 제목이다. 웹상에 공개된 서적이라 ↓ 링크로 들어가서 읽을 수 있다. http://atomicdesign.bradfrost.com/ Atomic Design by Brad Frost Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before. atomicdesign.bradfrost.com Atoms 원자(原子) UI구조상 더 ..