지속가능한 개발 노트:)

변수(variable)은 데이터를 저장할 수 있는 메모리 공간을 의미하고, 저장된 값은 변경될 수 있죠. 이런 변수를 css에서도 사용할 수 있습니다. 인터넷 익스플로러에는 지원이 되지 않기 때문에 사용을 거의 안했지만, 이제 인터넷 익스플로러가 사라졌으니, 유용하게 사용하기 위해 더 자세히 알아둬야겠습니다 ㅎㅎ 1. css변수 선언 및 사용 변수의 이름을 지정할 때 변수 맨 앞에 --를 붙여줍니다. 그리고 변수를 사용할 때는 var(변수명)으로 호출합니다. /*전역변수 선언*/ :root{ --main-bg:#e7e7e7; } /*지역변수 선언*/ .content{ --content-bg: #000; } /*변수 호출*/ .main{ background:var(--main-bg); } 2. css변수 ..

종종 디자인에 보더에 그라데이션이 들어가는 경우가 있습니다. 배경에 넣는 건 나름 익숙하지만 보더에?! 약간 생소할 때가 있어 정리해보려합니다! 1. 사각형 border (feat. border-image ) HTML 삽입 미리보기할 수 없는 소스 border 속성엔 두께와 solid만 지정하시고, border-image를 이용해 사각형 border에 간단히 그라데이션 줄 수 있습니다. border-image는 요소 주변의 테두리를 이미지로 지정하는 속성으로, url에 이미지 파일을 연결시키거나, 그라데이션을 넣어 줄 수 있습니다. border-image:url(./img/abcd.png); border-image:linear-gradient(to top, #FF6D60, #98D8AA) border-i..

부모 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 삽입 미리보기할 수 없는 소스 제일 간단하고 좋은 방법이 아닐까 싶네요ㅎㅎ 나누고 싶은 영역의 각도만 작성해준다면 순식간에 완성하..

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