CSS
Next.js에 Tailwind CSS 적용하기
Next.js에 Tailwind CSS 적용하기
2021.01.21Tailwind CSS Tailwind CSS는 Bootstrap과 흡사한 UI 프레임워크 입니다. Tailwind CSS는 커스터마이징이 가능한 저수준 CSS 프레임 워크로, 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공합니다. 대부분의 UI 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다. 하지만, 사이트를 사용자가 지정한 디자인으로 제작하고 싶은 경우에는 많은 제약이 따릅니다. Tailwind CSS는 HTML을 떠나지 않고도 커스터마이징 가능한 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공합니다. npm/yarn을 통해 Tailwind 의존성 설치하기 Tailwind CSS 패키지를 프로젝트에 설치합니다. npm을 사용하는 경우 # Nex..
[인터뷰] 개발자 기술 인터뷰에 대한 간단한 팁
[인터뷰] 개발자 기술 인터뷰에 대한 간단한 팁
2019.10.08들어가며 요즘 여러모로 바빠져서 글을 못 올리고 있다. 최근에 면접준비를 하면서 나중에 블로그에 올려야지 생각하면서 이런저런 자료들을 노션에 정리했는데, 노션 => 티스토리 마크다운은 코드 부분 이식이 100% 안되는 듯하다. 결국 이론부는 놔두고 간단한 인터뷰 팁에 대한 부분을 먼저 올려보려한다. 대부분의 팁은 techsith라는 유튜브 채널의 영상에서 참조한 것이다. 인터뷰를 준비중인 프론트엔드 개발자라면 많은 도움을 받을 수 있는 유튜브 채널이다. 인터뷰 팁 답변 중 과정을 건너뛰지 마라. 어떤 문제나 질문에 답할 때 Don't just jump (과정을 건너뛰지 마라) 사람 본성이 바로 뛰어넘어서 답하는 것이다. 이것은 매우 잘못된 방식이다. 왜냐하면 질문이 알고보니 까다로운 내용이었거나,..
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
2019.02.05🖼️ Day5 - JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기JavaScript 30의 다섯 번째 프로젝트는 Flexbox를 이용한 이미지 갤러리 만들기 프로젝트이다. 😊 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142434445 Flex Panels 💪 Hey CAT Dance Give CAT Receive Experience CAT Today Give CAT You can Life CAT Motion Colored by Color Scriptercs🎨 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738..
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
2019.02.04🎨 Day3 - JavaScript로 CSS 업데이트하기JavaScript 30의 세 번째 프로젝트는 JavaScript를 통해 이미지의 CSS를 업데이트하는 프로젝트이다. 😃 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142 clock UPDATE CSS VARIABLES WITH JS Spacing: Blur: Base Color: Back to List Javascript30 Day3 Colored by Color Scriptercs😃 CSS 코드12345678910111213141516171819202122232425262728293031323334:root { --base: #ffc600; --sp..
디자인하면서 어떤 색 고를 지 고민한 적 있잖아?
디자인하면서 어떤 색 고를 지 고민한 적 있잖아?
2019.02.03🤯 CSS 색상 선정을 도와줄 사이트 모음 들어가기 전웹사이트 제작에서 가장 고민되는 순간 중하나가 CSS(Cascading Style Sheets, 연속적 스타일 시트)의 색상을 선정하는 순간일 것이다. 색상에 따라 웹사이트가 풍기는 이미지가 바뀔 수도 있기 때문에 다른 요소들이 잘 굴러간다고해도, 한 순간 거부감이 들 수 있는 부분이기 때문이다. 유명 브랜드들도 본인들만의 로고 색상을 통해 브랜드의 이미지를 표현하고 있다. 가산혼합가산 혼합이란 다른 색을 섞었을 때 더 밝은 색이 되는 것을 의미합니다. 예를 들어 빨강과 초록을 섞었을 때, 두 개의 컬러보다 밝은 노랑이 됩니다. 이런 방식은 주로 빛을 사용하여 컬러를 표현하는 장치, 텔레비전이나 스마트폰같은 디스플레이에 사용됩니다. 결론적으로 이것은 ..
[CSS] em과 rem의 공통점, 차이점
[CSS] em과 rem의 공통점, 차이점
2018.12.26https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 해당 글을 대부분 참고하여 간단하게 정리한 내용입니다. 더 자세한 내용을 원하신다면 해당 글을 참고해주세요. § html 태그의 font-size css 값에 따라 달라지는 px과 rem 그리고 em 유닛을 확인할 수 있는 예시 § em과 rem의 공통점 불변적인 px와는 달리 길이가 유연한 가변단위로 설정된 폰트 크기 혹은 브라우저에 의해 계산된 픽셀값으로 변환된다. 요소의 크기가 절대 변하면 안 되는 상황에서는 사용하지 말아야 한다. em과 rem의 차이점 구분 em rem 변환에 영향을 주는 값 스타일을 지정한 요소의 폰트 크기..
[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy
[CSS] 🐸 게임으로 Flex 박스 CSS 익혀보자! Flexbox Froggy
2018.12.24Flexbox Froggy Flexible 박스 레이아웃 모듈은 유연한 반응형 레이아웃 구조를 만들 수 있는 CSS의 매우 강력한 효과 중 하나이다. justify-content, align-items... 이런 저런 것들 어떻게 시작해야 할 지 모르겠다면 게임을 통해 재미있게 배울 수 있는 사이트가 있다. 바로 Flexbox Froggy이다. 이 게임의 목표는 단 하나 개구리를 수련 위에 올려놓는 것이다. 그리고 우리는 그 방법으로 CSS를 이용하게 된다. 위의 사진 스테이지를 예시로 들어보자 개구리는 display: flex 상태이고, 오른쪽 끝으로 가야 수련 위에 올라간다. 따라서 justify-content: flex-end로 오른쪽 끝으로 보내서 문제를 해결하면 된다. 약간 더 심화된 스테이지를..