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

: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구조상 더 ..