프론트엔드 첫걸음

이미지와 이미지에 대한 설명이 반복되는 페이지에서 이미지에 대한 설명은 padding이 필요하고 이미지는 padding없이 가득 채워야하는 경우가 있다. 이때 이미지에 대한 설명이 들어가는 요소에 개별적으로 패딩을 반복해서 줄 수도 있지만 이미지 컨테이너 요소의 margin을 조정하면 padding이 필요한 자식요소에 일관된 padding값을 적용할수있다. See the Pen Untitled by JEONG (@cona) on CodePen.

너무나도 기본중의 기본인데 나처럼 확실하게 모르고 있었던 사람 있으리라 생각하며 기록으로 남긴다. See the Pen hegiht 100%가 필요한 이유 by JEONG (@cona) on CodePen. grandParent에 height 100px을 지정해주었다. parent에 height 100%가 없다면 child는 height 30%해줘도 부모의 height를 모르기때문에 30%가 적용되지 않는다. parent에 height:100% 을 사용하지 않고, child div에서 grandParent div의 높이를 상속받고 싶다면 relative를 사용하면 된다. See the Pen height 100% 없이 relative로 부모 높이 상속받기 by JEONG (@cona) on CodePen..

See the Pen React Accordion 2 by JEONG (@cona) on CodePen. 제목을 저렇게 지은 이유는 transition 으로 펼쳐지는 아코디언을 구현할때 가장 어려웠던 부분이 바로 scrollHeight였기 때문이다. 펼쳐지는 부분 (보통 질문에 대한 답이 있는 부분) 의 높이가 각각 다른데 transition 하는 요소에서 펼쳐졌을때의 height를 100%로 하면 transition이 적용되지 않는다. scrollHeight로 펼쳐졌을때의 px 을 대입해주어야 한다.

https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 여기 들어가서 내가 바꾸려는 색을 filter로 바꿔줍니다. 그 filter styled을 svg 아이콘의 class명으로 주면 됩니다.

길이가 다른 list item을 중앙정렬 하려면 ! 길이가 다른 list들을 list들의 위치를 지정해주는 div를 설정해서 위치를 잡아주어야한다....!! See the Pen list 가장 긴 item을 기준으로 중앙정렬하기 by JEONG (@cona) on CodePen.

clip-path 생성기 https://bennettfeely.com/clippy/ 클립패스 트랜지션 예시 See the Pen Untitled by JEONG (@cona) on CodePen. 클립패스 애니메이션 예시 See the Pen clip-path animation by JEONG (@cona) on CodePen.

overflow-x: hidden; overflow-y: scroll;

https://codepen.io/cona/pen/wvQvPmy?editors=0110 {children} {children} .loop-slider { .inner { display: flex; width: fit-content; animation-name: loop; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: var(--direction); animation-duration: var(--duration); } }

css border로 삼각형을 그릴수 있다는 것을 알게되었다. 충 격... border가 왜 삼각형이 되는거야... 알고보니 우리가 아는 border는 각각 그 모서리에 각도를 가지고 있었던 것이었다...!! .border { width: 100px; height: 100px; border: 10px solid red; border-right: 10px solid transparent; } 그러니까 내부의 크기를 0으로 하고 border로만 영역을 채운뒤에 세 변의 border를 삭제하면=> 남아있는 border가 삼각형모양으로 보이는것이다.. 응용하면 딱지모양 ☒ 도 만들 수 있고, 가운데가 비어있는 딱지 모양도 만들수 있다..! See the Pen button style by JEONG (@cona..

background-clip text : 백그라운드 이미지를 텍스트에만 border-box : border까지 padding-box : padding까지 context-box : content내에서 background-position: 배경화면 위치 background-position: left 20px; /* 0% 20px; */ background-position: 50% 50%; /* center; */ background-position: bottom 50px right 100px; /*아래로부터 50px, 오른쪽으로부터 100px*/ background-position: 100px 50px; /* 왼쪽으로부터 100px, 위로부터 50px */ background-size /* Keyword v..