전체 글

[CSS] 넓이가 다른 width %값 주기. 1. 클래스 명으로 지정하기. 장점 첫 번째, 마지막 자식 요소에서 항상 margin이나 padding요소를 넣지 않아도 된다. 클래스를 지정해서 운영하기 편리하다. 단점 태그 이름이 많아진다. .container { width: 1280px; margin: auto; background: #ddd; } /* Q. 왜 row에 margin을 줄까? */ .row { margin: 0 -50px; } .col { float: left; padding: 0 50px; } /* col에 %로 된 클래스 명을 지정. */ .col-1 { 10%; } .col-2 { 20%; } .col-3 { 30%; } .col-4 { 40%; } .col-5 { 50%; } ...

일러스트에서 path으로 만들면 선이 끊겨지지 않아 일반 선(line..?)으로 만들었다. (분명 방법이 있을 것 같은데 일러스트를 잘모르겠다..) 일단 다음에 만들때는 선을 이어그리되 하나씩 분할이 되도록 선을 만들어야겠다. 그리고 IE 버전은 거의 지원이 안되니 크롬에서 보기로만 하고.. svg만드는게 어려워서 여러 플러그인이 많던데 이를 활용해서 좀 더 유연하고 다양하게 제어할 수 있도록 연습해봐야겠다~~~!😋 Reference nykim.work/35 [SVG] SVG 다루기 1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수..

fullpageScroll.js

보호되어 있는 글입니다.

dummyimage.com/ Dynamic Dummy Image Generator - DummyImage.com Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text color Colors are represented as hex codes (#ffffff is white) Colors always follow the dimensions, https://dummyimage.com/250/ff dummyimage.com 이미지 임의로 넣는 사이트

css에서 선택자에 대해 필요한 것만 학습했는데, 이렇게 유용하게 쓰일지 몰랐다. 형제선택자를 통해 구조를 면밀히 짤 필요를 느껴 정리해보았다. 2021.03.18 - [🔥 TIL] - [CSS] 선택자 사용하여 % 값으로 템플릿 설정하기 선택자를 보고 위의 글을 보는데 이해가 빠를것같다. 1 2 3 4 [1] 이 변경. /* 자신을 의미. */ li:first-child:last-nth-child(4) { color: red; } [1] 을 뺀 나머지 변경. 인접형제결합자(~) /* 자신을 뺀 나머지. */ li:first-child:last-nth-child(4) ~ li { color: red; } [2] 만 변경. 자신과 나머지 형제들은 변경되지 않는다. 형제결합자(+) /* 자신의 바로 아래 형..

ishadeed.com/article/min-max-css/ Min and Max Width/Height in CSS - Ahmad Shadeed Learn how min-width, max-width, min-height, and max-height work in CSS ishadeed.com 정리하기

[CSS] 형제 선택자 / 속성선택자 형제 선택자 같은 부모를 가지는 요소. 1. 인접 형제 선택자 선택자 사이를 +를 사용하여 나타낸다. 앞 요소 바로 뒷 요소만 선택. h1 + ul { color: red; } 2. 일반 형제 선택자 선택자 사이를 ~를 사용하여 나타낸다. 앞 요소 뒤에 있는 모든 뒷 요소 선택. h1 ~ ul { color: red; } 속성 선택자 각 태그가 가지고 있는 속성에 접근하는 방식. 적절한 id와 class 이름이 없을 경우 애용한다. 속성 선택자(attribute selector)는 HTML의 속성명과 속성값을 선택자로 지정할 수 있다. // p 태그(tag) // style 속성명(attribute) // color: red 속성값(value) 1. [attribut..