지속가능한 개발 노트:)

요소를 클릭했을 때 요소의 텍스트를 input의 value값으로 넣어보겠습니다! HTML 삽입 미리보기할 수 없는 소스 예시로 보여드렸듯이, 배송시 요청사항에 응용해서 사용할 수 있겠네요! 지금 코드보다 좀 더 깔끔하게 정리 할 수 있을거 같긴 합니다! 일단 오늘은 잘 작동하니까 여기까지!! 글 읽어 주셔서 감사합니다.

부모 div(초록색 보더) 안에 2개의 div 요소가 있고, div 1은 상단에 위치하며, height값이 고정이며, div 2는 하단에 위차하고 나머니 공간을 채워주길 원합니다. .flex { display:flex; flex-direction:column; height:100%; } .flex .div1{height:100px;} .flex .div2{flex-grow:1;} flex를 이용하여 손쉽게 해결한 듯 했습니다. 그. 러. 나 문제는 div2의 컨텐츠 양이 많아지면 부모 div를 넘어가네요... 이럴 경우 해결방법!!! min-height:0; 가변 자식 요소에 min-height:0;을 줍니다. flex 아이템의 min-height, min-width 초기값은 auto이며, 초기값인 fl..

css를 이용하여 파이 차트를 만들기! :before 을 이용하는 방법 HTML 삽입 미리보기할 수 없는 소스 가장 많이 사용하는 방법인듯 합니다. 50%까지는 간단하게 표현할 수 있지만, 60%이상을 표현하기 위해서 또 다른 애니메이션을 작성해야하기에 약간 복잡한 거 같네요... svg를 이용한 방법 HTML 삽입 미리보기할 수 없는 소스 svg에 대한 이해도가 있어야 사용할 수 있는 방법이긴 하지만, 위 방법보다는 어떻게 표현되는지, %의 수치와 도형의 수치를 일치하게 표현할 수 있어서 훨씬 직관적인 방법인 거 같습니다. conic-gradients를 이용한 방법 HTML 삽입 미리보기할 수 없는 소스 제일 간단하고 좋은 방법이 아닐까 싶네요ㅎㅎ 나누고 싶은 영역의 각도만 작성해준다면 순식간에 완성하..

슬라이드를 구현할 때 공수를 줄여주는 매우 고마운 swiper!! 사진 갤러리(?) 와 같이 2개의 슬라이더가 같이 동작하도록 구현해야 할 때가 있는데요, 그런 경우를 위해 아래 방법으로 swiper 2개 혹은 n개를 연동하여 A슬라이더와 B슬라이더가 서로를 제어하도록 구현하시면 되겠습니다!! HTML 야무지게 작성하고, A-1 A-2 A-3 A-4 A-5 A-6 B-1 B-2 B-3 B-4 B-5 B-6 css 필요한 거 쏙쏙 넣고 (swiper.css 필수!) .swiper-container { width: 600px; text-align: center; } .swiper-container .swiper-wrapper { display:flex; } .swiper-container .swiper-sl..

TV를 시청하다 보면 하단에 공지 및 안내 자믹이 흐르는 것을 본 적 있으시죠? 웹에서는 어떻게 구현하면 좋을지 알려드릴게요!! 아주 간단하게는 html의 marquee 태그를 사용하면 됩니다. HTML 삽입 미리보기할 수 없는 소스 정말 간단해서 고민한 머쓱해질 지경이랄까요....ㅎㅎㅎㅎ 간단하게 속성을 파악해볼까요? ● 의 속성 - width / height : 스크롤의 크기나 비율 지정 - bgcolor: 스크롤의 배경색상 지정 - direction : 스크롤의 움직임 방향(up, down, left, right)을 지정 - behavior : 스크롤 방식을 설정(scroll, slide, alternate) - loop : loop에 작성한 횟수만큼 반복, 기본값은 무한반복 - scrollamou..