본문 바로가기

CSS6

CSS 우선순위 같은 속성이 동시에 부여 될 때 우선순위를 매김 기본 룰 - 뒤에 선언하는 css가 우선순위가 높다. (CSS 이름에서 부터 짐작 할 수 있음) - 높은것부터 나열 - !important - inline style - id - class - 다른 attribute - pseudo class ex) first-child - tag element - pseudo element ex) ::before - 우선순위가 같다면 개수가 많은 선언이 우선순위가 높다 (올림픽 랭킹 산정 로직) class 끼리 우선순위 현업에서 헷갈리는 케이스에 대해 좀더 설명하려 한다. class끼리 곂쳤을 때에도 우선순위를 결정해야한다. class 끼리 우선순위는 마치 올림픽 메달 개수에 따라 랭킹을 매기는 방식과 같다. 은메달 10.. 2024. 1. 9.
CSS > inline, block, inline-block inline 새로운 라인에서 시작하지 않고 내용만큼 너비를 차지 너비와 높이를 설정하더라도 적용되지 않음 margin 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않음 padding은 적용됨 ex) span, a, em See the Pen CSS > Display > inline by Daewoong Kim (@daewoong-kim) on CodePen. block 새로운 라인에서 시작하며 해당 라인에서 최대한 전체 너비를 차지 상위요소의 전체 너비를 차지 width, height, margin, padding 속성 모두 반영 됨 ex) div, p, h1 See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen. inline-block.. 2023. 8. 28.
CSS Specificity 개념 선택자의 우선권 기준 오른쪽에 위치할 수록 우선권을 갖는다 요소 선택자 > 클래스 선택자 > ID 선택자 > 인라인 스타일 > !important See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen. 2023. 8. 26.
CSS Inheritance 개념 부모(상위)요소에 적용된 값을 자식(하위)요소가 물려받는 것 상속되는 속성 (폰트에 관련된 것) color font-size font-family letter-spacing 상속 되지 않는 속성 outline margin border padding See the Pen css inheritance by Daewoong Kim (@daewoong-kim) on CodePen. 2023. 8. 26.
CSS Box Model Front End 개발 처음 하다보면 이 Box Model 때문에 원하는대로 크기를 조절 못하는 경우가 많다. 나 역시 그랬다. Element를 감싸고 있는 이 Box Model를 이해하면 제멋대로 동작하던 CSS를 이해하게 될것이다. 개념 Element를 감싸고 있는 걸 Box Model 이라고 정의하고 Content > Padding > Border > Margin 으로 구성된다. Box Model를 살펴 보자 box-sizing box-sizing를 이용해서 Box Model를 확인해보자 box-sizing 속성은 element가 어떻게 width, height 가 계산되는지 설정할수 있게 한다. box-sizings는 content-size와 border-size로 나뉘며 기본값은 content-.. 2023. 8. 24.
Lottie란 무엇인가 Prologue 기획자로부터 요청이 왔다. 버튼안에 있는 문구에 에니메이션을 넣을 수 있냐고... 가이드를 보고 열심히 css animation으로 개발해보았다. 그래서 초안을 공유해드렸더니, 갑자기 모션 디자이너로부터 연락이 왔다. 디자이너님께서 lottie.json 파일로 적용시키면 된다고 한다 (오잉???) lottie가 무엇이고, 어떻게 적용하는지 알아보자 개념 After Effects로 만들어진 고퀄리티 Animation을 web, app에서 쉽게 구현해주는 library입니다. Animation을 json 파일로 export 시켜 개발자에게 공유하여, 개발자들은 이 파일로 에니메이션을 추가합니다. Lottie는 개발자, 디자이너에게 엄청나게 유용합니다. 디자이너가 만든 에니메이션을 개발자가 다.. 2023. 6. 15.

티스토리툴바