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

보호되어 있는 글입니다.

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

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

ES5까지 var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 하지만 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 함수 레벨 스코프(Function-level Scope) 함수의 코드 블록만 스코프 인정. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다. var 키워드 생략 허용 암묵적 전역 변수를 남발할 가능성이 크다. 변수 중복 선언 허용 의도하지 않은 변수값의 변경이 일어나 혼란을 높일 수 있다. 변수 호이스팅 변수를 선언하기 이전에 참조할 수 있다. ES6는 이러한 var 키워드의 단점을 보완하기 위해 let..