multi-column layout : columns

multi-column layout 1. columns column-width와 column-count의 단축 속성이다. 다른 단축속성들과 마찬가지로, 생략된 값은 초기값으로 설정된다. 2. column-width length 혹은 auto로 정의할 수 있다. 실제 너비는 가능한 공간에 맞추기 위하여 넓어지거나, 좁아질 것이다. 3. column-count 정의한 수만큼 요소의 컨텐츠 안의 컬럼의 갯수를 지정한다. 해당 값이 없거나, column-width가 auto가 아닌 경우, 컬럼의 갯수는 허용 가능한 최대 수가 된다. 4. column-gap column들의 사이 값으로 브라우저의 기본 간격 값이 사용된다. 멀티 컬럼 레이아웃에서 해당 값은 1em으로 정의된다. %값은 부모 요소의 너비를 기준으로..
[JQUERY] prevent mobile context menu

prevent mobile context menu 프레스 인터랙션 시에 뜨는 기본 컨텍스트 메뉴를 막고 다른 인터페이스를 보여주고 싶을 때 사용! CSS 속성으로는 pointer-events를 사용해 아예 타겟이 되지 않도록 하는 방법도 있다. 내부 이미지에 해당 속성을 지정해 주고 링크에 아래 스크립트를 적용해주었다. See the Pen [JQUERY] prevent context menu by yulrang (@2yulrang) on CodePen. ​
CSS 도트

See the Pen <a href='https://codepen.io/MaciejCaputa/pen/bRJrLE/'>Pikachu Pixel Art | CSS Only | Box Shadow</a> by Maciej Caputa (<a href='https://codepen.io/MaciejCaputa'>@MaciejCaputa</a>) on <a href='https://codepen.io'>CodePen</a>.<br>​ 재밌는 코드가 있어서 들고와봐따 팩맨 만들기했을 때 맵을 이렇게 그렸었다내가 만들었던 꾸질꾸질한 커피게임도..
[CSS] flex

flex main-axis : 플렉스 아이템들이 놓여지는 주축 cross-axis : main-axis에 수직인 축 main-start, main-end : 플렉스 아이템이 놓여지는 시작과 끝 cross-start, cross-end : 1. flex container display 속성을 사용하여 블럭 레벨, 인라인 레벨의 플렉스 컨테이너 박스를 만들 수 있다. display:flex; display:inline-flex; flex vs inline-flex See the Pen LxgWmZ by yura (@yulrang) on CodePen. 1) flex formatting context 플렉스 컨테이너는 내용에 블럭 레이아웃 대신 플렉스 레이아웃을 사용하는 새로운 플렉스 포맷팅 컨텍스트를 설정한..
[markup] input 마크업 모음

input 0. global (공통) 1) global attribute name : 폼 컨트롤의 name을 지정. 폼을 제출할 때 쓰인다. 빈 문자열이면 안됨. dirname : maxlength, minlength : 입력할 문자의 수를 제한 disabled action method enctype, formenctype target, formtarget novalidate, formnovalidate autofocus autocomplete 1. type 1) text See the Pen [markup] input - text by yuuuuul (@yuuuuul) on CodePen. (1) attribute list = 참조 ID pattern = 정규식 placeholder = 문자열 read..
[CSS] 문법과 기본 데이터 형식

문법과 기본 데이터 형식 1. 문법 모든 레벨의 CSS는 똑같은 핵심 문법을 준수한다. 이것은 UA가 생성된 시점에 존재하지 않았던 레벨의 CSS가 제대로 파싱되도록 하기 위해서이다. 1. 토큰 CSS는 토큰들의 연속으로 이루어진다. 토큰 목록 보기 2. 키워드 따옴표로 묶여진 것이 아닌 문자열 red : 키워드 / “red” : 문자열 3. 문자와 대소문자 CSS 스타일시트는 대소문자 구별이 없다. (HTML요소 이름은 대소문자 구별이 없으나, XML에서는 대소문자를 구별한다) 식별자(셀렉터안의 요소 이름, 클래스, 아이디들)는 유니코드(ISO 10646), 영문자, 숫자, 하이픈(-)만을 포함할 수 있다. 이스케이핑 문자로 \를 사용할 수 있다. 4. 문장 CSS 스타일시트는 문장의 목록으로 구성됨...
[CSS] animation

animations 어느 시간 동안의 CSS 속성 변화를 키프레임의 집합으로써 정의할 수 있다. transition과 비슷하나, 속성 값의 변화를 명시적으로 하는데에 차이점이 있다. 애니메이션은 키프레임을 사용한 명시적 값을 필요로 한다. 반복 횟수, 시작과 끝 값의 대체가 있을 것인지, 정지여부, 시작 시간의 딜레이 등 애니메이션의 많은 부분을 조정할 수 있다. 1. 특징 한 시간 지점에 똑같은 속성에 대해 여러 애니메이션이 적용된 경우, 마지막으로 선언된 애니메이션의 것이 적용된다. See the Pen animation multiple by leeYura (@2yulrang) on CodePen 애니메이션은 애니메이션 적용 전, 딜레이 시간 만료 전, 적용 후의 계산값에 영향을 미치지 않는다. 애니..
1 2