코맹탈출하기 코맹탈출하기

불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등을 커버하기 위해 전처리기(preprocessor)는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일(Compile)합니다. 전처리기로 작성하고 CSS로 컴파일해서 동작한다. Sass 와 SCSS 차이 1. 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다.(Sass는 없고, SCSS 는 있다) 2. Sass는 =와 + 기호로 Mixins 기능을 사용했고,..

CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다. Grid-Container 속성 의미 display 그리드 컨테이너(Container)를 정의 grid-template-rows 명시적 행(Track)의 크기를 정의 grid-template-columns 명시적 열(Track)의 크기를 정의 grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성 grid-template grid-template-xxx의 단축 속성 row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의 colu..

display: flex; => 수평 정렬 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. 위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다. Flex container display Flex Container를 정의 flex-flow flex-direction와 fl..

애니메이션: 요소에 애니메이션을 설정/제어 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속 시간 설정 0s animation-timing 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 0s animation-iteration-count 애니메이션의 반복 횟수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none animation-play-state 애니메이션의 재생과 정지 설정 running animation: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수..

Transitions CSS 속성의 전환 효과를 지정 CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all(모든 속성에 적용) transition-duration 전환 효과의 지속시간 설정 0s(1s=1000ms) transition-timing-function 타이밍 함수 지정 ease transition-delay 전환 효과의 대기시간 설정 0s trainsition-timing-function 값 의미 ease 빠르게-느리게 linear 일정하게 ease-in 느리게-빠르게 ease-out 빠르게-느리게 ease-in-out 느리게-빠르게-느리게 cubic-bezier(n,n,n,n) 자신만의 ..

단축속성 background: 색상 이미지경로 반복 위치 스크롤특성; background-color: 요소의 배경 색상을 지정 기본값: transparent(투명) background-image: 요소의 배경에 하나 이상의 이미지를 삽입 기본값: none(이미지 없음) url("경로") - 이미지 경로(URL) 배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있다. 하나 이상의 배경 이미지 삽입할 경우 ,로 구분. 먼저 작성된 이미지가 더 위에 쌓임 이미지 반복적으로 출력됨 => background background-repeat: 배경 이미지의 반복을 설정 값 의미 기본값 repeat 배경 이미지를 수직, 수평으로 반복 repeat repeat-x 배경 이미지를 수평으로 반..

float 요소를 좌우 방향으로 띄움(수평 정렬) 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 됩니다. 단순 해제 clear: left(or right or both); 수평 정렬 각 요소에 float 속성을 적용되면 차례로 '정렬'됩니다. float을 사용하고 다음열로 넘길때는 해제를 하는 clear를 사용한 후에 사용해야함 float 해제 float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 '해제'해야함 1. 형제요소에 clear: (left, right, both) 추가하여 해제 float 속성이 추가된 요소의 다음 형제..

font: 글자 관련 속성들을 지정 값 의미 기본값 font-style 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(reset.css 적용시1) font-family 글꼴(서체) 지정 운영체제(브라우저)에 따라 달라짐 font: 기우릭 두께 크기 / 줄높이 글꼴; 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야한다. font-style 값 의미 기본값 normal 스타일 없음 normal italic 이텔릭체(활자) oblique 기울어진 글자 font-weight 값 의미 기본값 normal 기본 글자 두께, 400과 ..