프론트엔드/CSS

CSS transition 속성이란? (feat. 애니메이션 부여)

CSS transition 속성이란? 아래 4개의 속성을 한번에 정의할 수 있는 약식 표기(shorthand property) 속성이다. transition-property: transition 이 적용될 CSS 속성을 정의 transition-duration: transition 애니메이션이 얼마만큼의 시간을 거쳐 일어날지에 대한 속성을 정의 transition-timing-function: transition 애니메이션이 어떠한 형태로 일어날지에 대한 속성을 정의 transition-delay: 얼마만큼 기다렸다 transition 애니메이션이 일어날지 정의 예제 /* 필요한 만큼 속성을 이용하면 된다. */ /* property name | duration */ transition: margin-r..

CSS 접두사 (CSS Prefix, webkit, moz, ms, o) 가 의미하는 것은?

CSS 접두어 (CSS prefix) CSS 접두어에는 -webkit-, -moz-, -ms-, -o- 등이 존재한다. CSS 속성이 여러 브라우저에서 작동하도록 하는데 이용된다. 각 브라우저에는 CSS 를 해석하고 웹페이지를 렌더링하는 엔진이 있다. 모든 엔진이 CSS 를 같은 방식으로 해석하지는 않는다. 특히 실험적인 기능이나 새로 등장하는 기능들에 대해서는 더 그렇지 않은데, CSS 접두어는 이러한 경우에 중요한 역할을 한다. 각 접두어에 매칭되는 브라우저 이름 -webkit-: 크롬, 사파리, 새 버전의 오페라 브라우저에 대한 접두어이다. iOS 환경에서의 거의 모든 브라우저에 대해서도 해당한다. -moz-: 파이어폭스에 쓰이는 접두어이다. -ms-: 마이크로소프트의 브라우저에 쓰이는 접두어이다...

CSS 작성 방법론 중 하나인 BEM 방법론이란?

BEM 방법론 (BEM Methodology) 이란? 대규모 프로젝트에서 CSS 코드를 관리하는 방식 중 하나이다. BEM 은 Block, Element, Modifier 의 약자이다. Block 하나의 엔티티로 그 자체로 의미가 있다. ex) header, container, menu, checkbox, input Element 그 자체로는 의미가 없으나, block 에 묶여 의미를 가지게 되는 요소이다. ex) menu item, list item, checkbox caption, header title Modifier Block 이나 Element 에 들어가는 flag 이다. 외관이나 행위를 변경하기 위해 사용한다. ex) disabled, highlighted, checked, fixed, siz..

flex 엘리먼트 꽉 채웠을 때 자동 줄넘김되게 하기

문제 flex 레이아웃을 사용하는데, flex-direction: row 를 사용하면 강제로 부모 엘리먼트의 크기에 맞춰서 자식 엘리먼트의 크기를 줄여버린다. 원본 크기 그대로를 사용하면서 줄넘김이 될 수는 없을까? 해결 flex-wrap: wrap 속성을 사용하면 된다. 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

img 태그 사용시 아래의 4px 의 미묘한 빈공간이 생기는 이유

문제 img 태그 이미지에 테두리를 주었을 때, 아래쪽에 미묘한 4px 의 빈 공간이 생긴다. 원인 이는 img 태그의 기본 display 속성이 inline 이어서 그렇다. inline 의 기본 vertical-align 은 baseline 이다. 이는 알파벳의 특성 때문에 설정되어 있는 부분인데, 'abc'와 다르게 'gjy'와 같은 알파벳은 기준선을 기점으로 아래쪽으로 튀어나와 있다. 이를 내림 영자 (descenders) 라고 한다. 해결 방법 vertical-align 을 middle 혹은 top 과 같은 다른 속성으로 바꾼다. 혹은 display 를 block 으로 바꿔준다. 다만 이 방법은 img 태그 자체가 display: block 을 따르게 되기 때문에 vertical-align 이 사..

CSS display 속성의 특징

display 속성의 특징 CSS 에서 display 속성은 해당 엘리먼트와 내부 엘리먼트가 어떤 모양을 가질지를 결정한다. 복잡해보이지만 실제 엘리먼트의 display 속성은 block 혹은 inline 두가지만 존재한다고 보면 된다. 참고: block or inline element flex, grid 와 같은 속성은 사실상 block 과 같은 속성인데, 자식 엘리먼트를 보여주는데만 그 차이가 있다. 자식 엘리먼트를 보여주는 방식도 보통 아래 3가지 중 하나를 따른다. 참고: flow layout, grid, flex display 속성을 모르면 삽질하기 쉬운 부분들 html 의 다양한 태그들에는 '기본 display 속성' 이 부여되어 있다. 이를테면 span 태그에는 inline 속..

CSS 접기 펴기 애니메이션 만드는 방법 (height: auto 일 때 문제 해결)

접기, 펴기 애니메이션 만드는 방법 CSS transition 을 이용하여 애니메이션 효과를 입힌다. JS 를 이용해 height 값을 동적으로 조정해준다. div { transition: 3s; height: 500px; /* -> 50px 와 같이 변경하면 애니메이션이 적용된다. */ } 그런데 위의 방법의 경우, height 값이 auto 일 때 애니메이션이 적용되지 않는 문제가 생긴다. 해당 엘리먼트에 들어올 값이 유동적이어서 height 값이 auto 여야 하는 경우엔 max-height 을 이용해줌으로써 애니메이션을 적용할 수 있다. 주의! height 쓰지 말고 오직 max-height 만을 이용해서 크기를 제어해야 애니메이션이 먹힌다. 레퍼런스 https://stackoverflow.com..

CSS Box-sizing (박스 사이징) 이란?

Box-Sizing 이란? box-sizing 은 width 와 height 이 계산되는 방식을 지정한다. box-sizing: content-box 의 의미 box-sizing: content-box 인 상태에서 width:100% 를 지정한다면, 이는 부모 엘리먼트의 border 와 안쪽 너비를 포함한 공간을 의미한다. 부모 엘리먼트의 경계선과 안쪽 여백에 대한 고려를 하지 않는 방식이다. 이 때문에, 아래에 추가적으로 설정된 10px 는 부모 엘리먼트를 뚫고 나온다. #childContainer { box-sizing: content-box; width: 100%; border: solid #5b6dcd 10px; padding: 5px; } box-sizing: border-box 의 의미 이는 ..

CSS Functional Notation 이란?

CSS Functional-notation 이란? CSS 값 의 일종으로 특별한 데이터 처리 혹은 계산을 하거나 복잡한 데이터 값을 표현하는데 이용된다. 문법 selector { property: functional-notation([argument]? [, argument]!); } 함수의 종류 애니메이션 타임라인 아직은 scroll() 밖에 존재하지 않는다. 이마저도 Experimental 이다. scroll() 변환 요소의 모양을 변환시키는 함수들이다. matrix() ... 수학 수학적인 계산을 도와준다. calc() 필터 이미지 등에 필터를 걸거나 색상을 변경하는데 유용하다. blur() 색상 다양한 기준을 통해 특정 색상을 잡는데 유용하다. hsl() 이미지 태그가 유효할 때..

CSS @keyframes (키 프레임) 란?

@keyframes 란? CSS At-rules 의 일종이다. 애니메이션의 시퀀스를 정의할 수 있다. transitions 으로 정하는 것보다 더 세부적으로 제어가 가능하다. 예제 from, to 사용 @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } 퍼센티지 사용 @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } } 주의사항 @keyframes 내부의 !important 키워드는 무시된다.

CSS At-Rules (@import, @font-face 등) 란?

CSS At-rules 란? (@import, @namespace 등) CSS 의 At-rules 란 CSS Statement(CSS 문) 의 한 종류이다. CSS 문은 CSS 가 어떻게 동작할지에 대해 지시한다. At-rules 는 At 기호 ('@', U+0040 COMMERCIAL AT) 으로 시작하여 다음 세미콜론 (';', U+003B SEMICOLON) 혹은 다음 CSS 블록이 나오기 전까지 내용이 포함된다. 문법 내부 블록을 활용하지 않는 At-rules /* General structure */ @identifier (RULE); /* Example: tells browser to use UTF-8 character set */ @charset "utf-8"; ..

CSS 핵심 개념 요소들

CSS 핵심 개념 요소들이란? CSS 가 해석됨에 있어서 그 근간이 되는 개념들이다. 알아놓으면 CSS 의 구동 원리를 파악하는데 큰 도움이 된다. CSS Syntax (문법) Comments (주석) Specificity (구분법) CSS Selector 와 같은 구분자에 대해 세세하게 설명하는 개념이다. Inheritance (상속) Box model (박스 모델) Layout mode (레이아웃 모드) Visual formatting models (비주얼 양식 모델) Margin Collapsing (마진 붕괴) 값 Initial values (초기 값) Computed values (계산 값) Used values (사용된 값) Actual values (실제 값) Value definition ..