본문 바로가기

🔥 TIL

(16)

2021.04.16 // fullpageScroll.js plugIn fullpageScroll.js

2021.04.07 말줄임을 설정할 때 display: -webkit-box에 대해 궁금했다. 이 속성은 블록에 float대신 사용할 수 있으며 블록을 수직, 수평으로 배치하거나 역순으로 배열하거나 임의의 순서로 배치할 수 있다. 말줄임표 오른쪽, 왼쪽에 아이콘을 넣는다고 가정하면 padding-left, padding-right를 뺀 나머지 너비에 말줄임텍스트가 배치된다. 조건. 말줄임표가 한줄로 필요하며 양쪽 사이드에 아이콘이 있다. 이 때 아이콘 두개는 absolute나 float 으로 처리한다. 말줄임의 양 사이드에 padding 값을 준다. display: -webkit-box를 사용하여 padding을 포함하지 않는 넓이를 준다. white-space: nowrap은 한 줄로 표시되며 말줄임(...)이 생성되지 ..

2021.04.07 // width calc() 주기 보호되어 있는 글입니다.

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

2021.03.22 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] 속성 선택자 정리 [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..

[CSS] 형제요소로 갯수 알아내기 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) ~..

[HTML] label 태그 / [jQuery] childern() , find() 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..

이전 1 2 다음

티스토리툴바