클로리셔 작은 공간

CSS - Display : Flex 1. 인라인 요소를 가운데 오게 하는 방법 - height 값과 line-height 값을 같이 사용하면 중간에 오게 할 수 있습니다. 단, 한 줄일때만 사용할 수 있습니다. - 많이 사용하는 방법은 아니며 활용성이 좋은 방법은 아닙니다. 2. 블록요소를 가운데 오게 하는 방법 - 블록요소 양쪽에 auto 값을 주면 가운데 정렬이 가능합니다. margin: 0 auto; 보통 위 아래는 0을 주고 양쪽은 auto 사용. - auto는 자동값 또는 기본값을 의미합니다. 3. 테이블 구조를 이용하는 방법 - vertical-align: middle 속성을 이용한 가운데 정렬 방법입니다. - display: table을 잘 사용하지 않고 구조가 복잡해지기 때문에 잘 사용하..

1. 계층 선택자 종류 예시 이름 하위 선택자 (Descendant Selector) div p { color:#fff;} div 태그의 모든 자식 중 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다. 자식 선택자 (Child Selector) div > p { color:#fff;} div 태그의 모든 자식 중 첫번째 자식 p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 형제 선택자 (sibling Selector) div ~ p { color:#fff;} div 태그의 인접한 형제 p 태그를 모두 선택하여 글씨 색을 하얀색으로 변경합니다. 인접 형제 선택자 (Adjacent Sibling Selector) div + p { color:#fff;} div 태그의 인접한 형제 첫번째 p 태..

정의(Definition) 상대단위 (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다. 절대단위 (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다. 속성값 설명 px 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다. em 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다. ex 부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다. % 부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다. rem 루트(root em) 요소의 크기를 기준으로 상대적인 값을 갖습니다. vw ..

CSS3는 현재 완료된 속성도 있지만 개발을 하고 있는 속성도 있습니다. 최신 속성은 브라우저마다 다른 방식으로 지원하기 때문에 접두사(Prefix)를 붙여 호환성을 맞추어 줍니다. 시간이 지나고 표준화가 되면 접두사를 쓰지 않아도 됩니다. 접두사 설명 -webkit- 웹킷 방식의 브라우저 (크롬, 사파리, 웨일, 오페라) -moz- 게코 방식의 브라우저 (파이어 폭스) -o- 오페라 브라우저 (12버전 이하), 12버전 이상은 -webkit-으로 표현 -ms- 마이크로소프트 인터넷 익스플러러

HTML 카테고리(Content Categories) 카테고리 설명 1. 메타데이터 콘텐츠(Metadata Content) 문서의 메타 정보와 관련된 요소입니다. 2. 플로우 콘텐츠(Flow Content) 대분분 body요소 안에서 사용하는 요소들입니다. 3. 섹션 콘텐츠(Section Conetnt) 웹 문서의 섹션 영역을 정의하는 요소입니다. 4. 헤딩 콘텐츠(Heading Content) 섹션의 제목과 관련된 요소입니다. 5. 프레이징 콘텐츠(Phrasing Content) 문장과 텍스트가 관련된 요소입니다. 6. 임베디드 콘텐츠(Embedded Content) 다른 소스를 가져오거나 삽입시키는 컨텐츠와 관련된 요소입니다. 7. 인터랙티브 콘텐츠(Interactive Content) 상호작용을 위..

1. for() 반복문 let array = ['포도', '사과', '바나나', '망고']; for(let i = 0; i < array.length; i++) { console.log(array[i]);// 포도, 사과, 바나나, 망고 } 2. for in() 자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in 반복문을 제공한다. 위 for 문의 예제는 아래와 같이 바꿔 사용할 수도 있다. let array = ['포도', '사과', '바나나', '망고']; for( let i in array ) { console.log(array[i]);// 포도, 사과, 바나나, 망고 } 3. forEach() foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다. (ES6부터..

아래에 코드펜 예제를 보면, 중첩된 요소에 있어 이벤트를 발생시킨다면 어떻게 될까? See the Pen bubbling capturing by leejunghyun (@mygumi) on CodePen. target 을 클릭하게 되면 [ target -> child -> parent -> root -> body ] 순으로 알림창을 뜨는 것을 확인할 수 있다. 보다시피 이벤트 핸들이 등록 된 중첩된 요소들이 하위에서 상위순으로 이벤트가 전파되었다. 위와 같이 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 는 두 가지 방식으로 구분된다. 이 두 가지 방식이 바로 버블링과 캡처링이다. ⊙ 버블링과 캡쳐링 캡처링 - window 로부터 이벤트가 ..

자바스크립트에서 'use strict';는 뭘 하는 것이고, 왜 그걸 써야 하나요? Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로 함수를 엄격한 운용 context 안에서 실행시킬 수 있게 합니다. 이 엄격한 context는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다. 1. 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다. 2. 상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 예외를 발생시킵니다. 예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요. 3. 혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다. strict mode는 파일 전체에 적용시킬 수도 있고, 특정한 함수 안에서만 적용시킬 수도 있습니다. //..

1. justify-content CSS justify-content: flex-start [기본값] | flex-end | center | space-between | space-around | space-evenly .flex-item { justify-content: center; } flex item의 ‘진행 축’ 정렬과 간격을 제어하는 ‘justify-content’. justify-content 속성은 ‘진행 축’ 정렬과 아이템 사이의 간격을 제어합니다. flex-direction: row | row-reverse 인 경우 x축 정렬을 제어합니다. flex-direction: column | column-reverse 인 경우 y축 정렬을 제어합니다. 2. align-items CSS alig..