[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%; } ...

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 이미지 임의로 넣는 사이트

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..

2021.03.18 요소를 퍼센트로하여 적응형이나 반응형에서도 자유롭게 쓸 수 있는 템플릿이다. 이해를 확실히 하고자 다시 정리하게 되었다. 본 기법은 다양하게 응용할 수 있다. 원본 문서에서는 li 요소 갯수에 따라 블록 안의 배경색을 다양하게 매기는 것을 예시로 들었다. flexbox를 사용할 수 없는 환경이라 가정한다. 다음 코드에서는 float: left 를 사용하여 li 요소들을 띄운 상태이다. li { float: left; } /* li가 하나일 때 */ li:first-child:nth-last-child(1) { width: 100%; } /* li가 두개일 때 */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~..

label 태그 태그 안에는 , 태그가 들어가면 안된다. children() / find() .children() 메소드 div(할아버지) ul(부모) li(자식) span(손자1) span(손자2) .find() 메소드 div(할아버지) ul(부모) li(자식) span(손자1) span(손자2) .container * { display: block; border: 1px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } $(function() { // 1. children() $('ul.child').childern('*').css({border: '2px solid red'}); // 2. find() $('ul.find').find..