클로리셔 작은 공간

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- 마이크로소프트 인터넷 익스플러러

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

세상이 변화하는 발전의 속도보다 조금 더 빠르게 웹은 발전하고 있습니다. 특히 그 중에서도 CSS의 활용도가 높아지면서 복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. 코드의 재사용성을 위해 쉽게 유지보수 하기위해 확장을 가능하게 하기위해 클래스명으로도 무슨 의미인지 예측 가능하도록 하기위해 SMACSS (Scalable and Modular Architecture for CSS) 정의 CSS에 대한 확장형 모듈식 구조 (by Jonathan Snook) CSS의 프레임워크가 아닌 하나의 스타일 가이드 사용목적 Class명을 통한 예측 재 사용 쉬운 유지보수 확장 가능 SMACSS의 유의사항 파생된 CSS 셀렉터 사용금지 ID 셀렉터 사용금지 !important 사..

:: 해당 요소의 일부분에 적용되는 가상선택자에는 콜론을 두개 :: 붙이고 : 해당 요소 전체에 적용되는 가상선택자에는 콜론을 하나 : 붙인다.