< devHyebin/>

image sprite 기법이란? 이미지들을 하나씩 다운받고서 서버에게 보내면 굉장히 많은 로딩시간이 필요하기 때문에 단점을 보완하여, 여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지 로드 부담을 줄이는 방법이다. - background-position 속성으로 이미지 좌표 값을 이용하여 사용 매번 알고는 있지만 좌표까지 계산해서 해주기엔 너무 귀찮아서(?),, 사용하지 않았다.. 오늘 수업을 듣고 image sprite를 제작해주고 좌표까지 친절하게 알려주는 사이트를 알게되었다..! ✨ image sprite 쉽게 도와주는 사이트 ✨ https://www.toptal.com/developers/css/sprite-generator/ CSS Sprites Generator CSS Sprites..

"왜... 가운데로 안가지?" 인라인요소 or 블럭요소에 따라 달라지기 때문에 각각마다 고려해야할 상황들에 대해 정리해보았다! 부모요소 height 속성을 100vh 설정해줘야한다. ( 안그러면 부모요소가 컨텐츠 높이만큼 차지하기 때문에) 중앙정렬: margin 가장 많이 사용하는 방법 부모요소 display: flex; 자식요소 margin : auto; See the Pen Untitled by Webin (@hyebin-woo) on CodePen. 중앙정렬: position 부모요소 position:relative; ( 지정해주지 않을 시 최상위 요소 body가 기준점이 된다) 자식요소 postition:absolute; top:50; left:50; : 가운데로 정렬하기 transform: tr..

🙈 display: none : 해당 콘텐츠를 숨길뿐만 아니라 콘텐츠의 영역이 사라진다. 🙈 visibility: hidden : 눈에는 보이지는 않지만 화면에 렌더링 되어 공간을 가지고 있어서 다른 요소들의 위치에도 영향을 줄 수 있다. 🙈 overflow: hidden : 내부의 요소가 부모의 영역을 벗어나는부분을 보이지 않게 만드는 속성이다. 그 밖에 요소를 숨기는 속성: opacity:0 , IR기법 ✏️ 정 리 display: none과 visibility: hidden 차이 : UI적으로 볼 때 완전히 다르다. display:none은 화면상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하지만, visibility:hidden은 해당 요소가 보이지..

마진(margin) : 바깥 여백 영역, border 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할 여러 요소에 마진값이 넣어져 있을 때 의도치않게 요소의 여백이 줄어들어져있거나 여백을 늘려도 늘어나지 않는 현상들을 겪을 수 있다. 📝 마진 병합 현상(Margin Collapsing) : 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상 인접해있는 블럭 요소끼리만 일어난다. 상하만 해당한다(좌우는 해당 안함) See the Pen Untitled by Webin (@hyebin-woo) on CodePen. : 💡 해결 방법 1. 자식요소의 display속성값을 inline-block으로 바꾸기 See the Pen Unt..