[CSS] - visibility VS display 애니메이션 적용 차이  어떻게 해야 더 깔끔하게 코드를 작성할 수 있을까? 공부중 다른 개발자분의 드롭다운 메뉴 CSS 코드를 보게 되었다. 여기서 지나칠 수 있었지만 나는 드롭다운 메뉴를 구현할 때 display(block, none)를 이용해 작성하는데왜 이분은 visibility(visible, hidden)를 사용할까? 라는 의문을 계기로 코드를 동작시켜보며 알게된 내용을 공유하고자 포스팅하게 되었다. Display우리가 흔히 사용하는 display 속성은 요소를 어떠한 형태로 나타나게 할 것인지를 말하는 속성으로 4가지가 있다.display : blockdisplay : inline-blockdisplay : inlinedisplay : no..

3D 애니메이션 구현 (backface-visibility, perspective)완성본 배운점요소 회전 시키기 (동전 뒤집기)요소를 회전시켰을 때 원근감이 느껴지도록 하려면 rotate와 perspective를 함께 사용해야 합니다.스타벅스 배지가 실제로 이미지에 붙어 있는 것 같은 효과를 주기 위해 회전 효과가 필요했는데 rotateX 뿐만 아니라, 다음처럼 스크린을 감싸는 부모 요소에 perspective라는 프로퍼티를 추가해줘야 했습니다.그 이유는 perspective가 원근감을 결정하기 때문! 1.  초기 모습, 코드 앞 뒤     2. absolute- front에 absolute를 넣어 부모 요소를 기준으로 배치해줍니다..container .item...

filter VS backdrop-filter 블러 효과    1. filter https://developer.mozilla.org/ko/docs/Web/CSS/filter filter - CSS: Cascading Style Sheets | MDNCSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.developer.mozilla.org filter는 하위요소 전체에 블러 처리를 할 수 있습니다. EX_)  주의!filter- filter 사용시 하위요소까지 효과가 적용되어 헤맸던 적이 있는데 별개의 형제요소를 새로 만들어 백그라운드를 주고 효과를 적용해서 해결했었다.- filter를 사용하니 하얀색 ..

dvh, svh, lvh (모바일 주소 표시줄 영역) 이란?    프로젝트를 하면서 팀원 중 한분의 코드에서 dvh라는 속성을 처음보고 포스팅 하게 되었습니다! 모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도 화면이 짤리는 경우가 발생합니다. 해결방법으로div {height:100vh; height:-webkit-fill-available;}위와 같이 -webkit-fill-available 값을 height값에 적용하는 방법이 있는데 이 방법은 ios에서만 적용이 되고 안드로이드에서는 적용이 안되는 문제가 있기 때문에 권장하진 않습니다. 1. svh (short viewport height)svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져옵니다. 주소 표시줄이 없어..

height VS min-height 1. heightheight: 500px을 적용한 경우 div 태그 내의 컨텐츠가 500px을 넘어가면 밖으로 삐져 나온다  2. min-heightmin-height: 500px을 하게되면 500px의 높이는 유지한채 컨텐츠가 늘어날수록 컨텐츠의 높이가 늘어납니다

Google Fonts 적용법   적용방법1. 사이트 접속https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com 2. 원하는 폰트 검색 (저는 Jua 폰트로 하겠습니다!) 3. Get font 클릭 (오른쪽 위) 4. Get embed code 클릭 5. 코드 복사 후 붙여넣기1) 원래 index.html 코드처음 화면 2) 복붙! font-family에 "Jua" 추가!! 적용 완료!!

CSS white-space 속성   ❗️white-space 속성이란?- white-space 속성은 요소 내부의 공백 문자(Whitespace) 처리와 줄바꿈 규칙을 지정합니다. ❗️사용예시white-space: normal;- normal은 초깃값 입니다!- 연속되는 공백을 하나로 합치는 속성이 있습니다  white-space: nowrap;- normal 값의 경우와 마찬가지로, 연속되는 공백을 하나로 합칩니다.  white-space: pre;-  요소에서 초깃값입니다.- 연속되는 공백을 인위적으로 하나로 합치지 않으며, 소스(소스 코드를 의미함)에서 줄바꿈 또한 그대로 유지하여 인위적인 공백의 축소를 하지 않습니다.- 텍스트가 콘텐츠 박스의 끝에 도달했을 때 자동으로 줄바꿈시키지 않습니다. 하..

CSS letter-spacing 속성    ❗️letter-spacing 속성이란?letter-spacing 속성은 텍스트의 문자와 문자 사이 간격을 지정하는 속성입니다! ❗️사용 예시letter-spacing: normal;letter-spacing: 2px;letter-spacing: -2px;letter-spacing: 0.5em;letter-spacing: -0.2rem; ❗️참고자료https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing letter-spacing - CSS: Cascading Style Sheets | MDNThe letter-spacing CSS property sets the horizontal spacing beh..

aspect-ratio에 대해 알아보자!    ❗️aspect-ratio란?- aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다. ❗️사용법❗️1. width/height 지정할 때!- /를 이용하여 width/height 비율을 지정할 수 있습니다 예시.box { width: 100px; aspect-ratio: 2 / 1; /* 100px, 50px */} 해석width를 100px;aspect-ratio: 2/1; 2대1 비율이므로 width는 100px이고 height는 50px이다! ❗️2. 한 개의 값만 지정할 때!- 앞에 width/height를 지정할때와 비슷하다- 하나의 값만 지정하면 height를 1로 간주한다 ❗️3. auto, / 두개 동시에 사용할..