김평범's OrdinaryCode

모바일 환경이 중요해지면서, 프런트 앤드 개발자들은 모두 반응형을 고려해서 작업을 한다. PC환경과 모바일 환경 모두 가독성을 잡기 위해서는 각 스크린 사이즈마다, 적당한 사이즈를 찾아서 적용하는 것이 중요하다. 📐CSS 반응형 단위 vw, vh 반응형으로 개발한 다 고하면, 대부분의 개발자들이 익숙한 단위는 %를 생각한다. 해당 %를 지정할 경우 스크린 넓이에 해당 % 맞춰서 자동 조절된다. 이와 비슷한 개념으로 이용되는 것이 vw, vh이다. vw : 뷰포트 너비의 1%, 뷰포트 가로 사이즈가 기준 vh : 뷰포트 높이의 1% , 뷰포트 세로 사이즈가 기준 CSS에서 사용하는 vw와 vh는 상대적 길이 단위로 비교대상과 비교해서 상대적인 크기를 측정하는 단위이다. 예를 들어보자, 현재 브라우저 화면이..

🐣 들어가기 전 요즘 UI상에서 사용자에게 직관적인 형태로 ON/OFF 스위치 버튼을 제공한다. 이러한 형태는 HTML input Checkbox를 이용하여 만들 수 있다. 다크 모드/라이트 모드 변환이라던지 해당 기능을 끄고 키는 경우는 기본적인 체크박스 디자인보다는 스위치 형태로 제공하는 게 사용자의 이해도가 더 높을 수 있다. ON/OFF 스위치 완성 UI 보통 ON 상태일 경우 포인트 컬러를 이용하여 상태가 들어온 상태이며, OFF상태일 경우 회색 등을 이용하여 꺼져있는 느낌으로 만든 스위치 디자인이다. HTML 코드 CSS 코드 .switch-button { position: relative; display: inline-block; width: 55px; height: 30px; } .swit..

저번 글을 통해서 css animation과 svg를 활용해서 텍스트 효과를 만들어 보았다. 오늘은 이것의 연장 선으로 css와 svg 기능, 추가적으로 가상 선택자를 이용해서 특별한 버튼 hover 효과를 만들어보기로 했다. 오늘 만들 hover 효과가 어떠한 원리로 만들어졌는지 궁금하다면 밑의 글을 먼저 읽고 오길 추천한다. ordinary-code.tistory.com/25 [css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기 🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w..

🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다. SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다 SVG를 사용하는 이유는? png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까? - SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며 - 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며 - css를 통해 다양한 효과를 줄 수 있음 단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며, 단순한 내용이 아닌 ..

🔠 타이포그래피 웹 상에서 타이포그래피의 중요성은 항상 언급이 되고 있다. (타이포그래피는 활자 서체의 배열을 뜻함) 감각적인 타이포그래피를 홈페이지에 사용하기 위해서 이미지로 만들어서 올릴 수도 있으나, 이런 이미지로 만든 텍스트는 사용자의 요구사항에 대응하기 어렵다. 문구가 바뀔 때마다 디자이너의 재 작업이 필요하며, 반응형에도 대응하기 어렵기 때문이다. 오늘은 아래의 폰트를 css를 이용해서 Text를 감각적으로 꾸며보고자 한다. 오늘 이용할 기본 코드를 먼저 복사해서 실행해보자. 텍스트는 본인 입맛에 바꿔도 좋다. 기본 코드 ORDINARY CODE https://ordinary-code.tistory.com/ 🐣 웹 폰트 준비하기 웹 폰트를 활용하면 홈페이지 상에서 내가 원하는 폰트를 이용할 수..

💜 2020 State of CSS Survey 1편에서는 레이아웃 중 가장 사랑받는 flexbox를 살펴보았다면 이번 편에서는 grid를 살펴보려고 한다. 사실 실무에서 flexbox를 너무 잘 활용하고 있었고, flexbox로 아쉬운 부분들은 기존 float방식으로 충분히 원하는 레이아웃을 짤 수 있었기에 새로운 layout에 대한 필요성을 아직 느끼지 못했다. flexbox 사용이 궁금하다면 전의 포스팅을 먼저 참고하고 오자! [css/layout] CSS Layout 방법 - 1️⃣ flexbox 💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된..

💜 2020 State of CSS Survey 2020년 State of CSS Survey 결과가 발표되었다. 개발자의 고충은 내가 만들긴 했는데 이 방법을 써도 되는 걸까?라는 의문을 항상 갖게 된다. 이럴 때 도움이 되는 것은 Survey! 2016년부터 시작된 State of Javascirpt 설문조사가 성공적으로 이뤄짐에 따라 2019년도부터 CSS Survey도 시작하게 되었다. (결과는 아래 링크를 참조해보자. 오늘도 모르는 게 너무 많은 나를 반성하게 된다.😓) The State of CSS 2020 Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've ..