💅styled components 안녕하세요 triplexlab 입니다. 오늘은 styled components에 대해서 이야기를 해보도록 하겠습니다. 👉props로 style을 변경 class를 추가해서 style를 변경하고 싶은 상황이라고 가정하면 props로 전달해서 삼항연산자로 변경하면 될것 같다고 생각을 합니다. import styled from "styled-components"; const Sample = () => { return ( ) }; const ItemStyle = styled.div` padding: 16px; margin: 8px; background-color: ${(props) => props.completed ? "slateblue" : "aliceblue"}; `; ex..

일반 HTML 파일 include/imports 하는 방법 안녕하세요 TriplexLab 입니다. 정적 파일 html Include하기 오늘은 일반적인 html파일을 Include 하는 방법에 관해서 살펴보도록 하겠습니다. 해당 포스트는 How To Include HTML W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 내용(링크) 참고해서 커스텀 마이징한것 입니다. ..

🤟 Icon Font 정리 안녕하세요 TriplexLab입니다. 오늘은 벡터 이미지를 Icon Font로 만들어보는 것을 정리해 보겠습니다. figma, Illustrator, sketch 등등의 벡터 이미지를 추출할 수 있는 디자인 툴을 사용하다 보면 벡터로 이미지를 SVG 파일로 뽑긴 뽑았는데... 코드를 그대로 html 파일에 넣으면 너무 길어져서 코드 깊이가 길어지면 길어질수록 감당할 수가 없어지는 경험을 해본 적 있으신가요?? 그래서 Icon Font로 만들어서 class로 불러와 사용해보겠습니다. 먼저 다음 사이트를 방문하시면 IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io 다음과 같은 화면이 나옵니다. 뭐 사용하고 싶은 아이콘 있으..

👉🏻 text 줄 간격 표현하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 css로 text 줄 간격 표현하기에 관해서 2가지를 살펴보도록 하겠습니다. 일단 test를 위해서 임의 text를 html에 넣은 상태입니다. css 탭에 가서 보시면 주석으로 설명을 넣은 상태입니다. text 한 줄로 표현하기와, text 여러 줄 표현하기 대해서 살펴보도록 하겠습니다. 👉🏻참고 링크 작업하실 때 다음과 같은 링크를 참고하시어 지원해야 하는 브라우저에 맞게 적용하시면 됩니다. "-webkit-box-orient" | Can I use... Support tables for HTML5, CSS3, etc caniuse.com "-webkit-line-clamp" | Can I use... Support..

📱 모바일 웹 앱에서 100vh이 가진 문제(윈도우창 리사이즈) 안녕하세요 TriplexLab 입니다. 오늘은 모바일 웹 앱에서 100vh이 가진 문제에 대해서 살펴보도록 하겠습니다. 이 글은 아래 글들을 참고했습니다. Avoid 100vh On Mobile Web Viewport units in CSS sound great. If you want to style an element to take up the full screen height, you can just set height: 100vh and voila - you have a perfect fullscreen element, which resizes as the viewport changes! Sadly, this is not the cas..

👉🏻반응형 이미지 비율 유지하기 바로 코드를 보면서 설명하겠습니다. padding-top에 calc을 사용해서 계산 식을 넣어서 비율 계산할수 있습니다. 참고: aria-label은 웹에 더 정확한 정보를 전달하기 위해서 사용하는 속성 & 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용합니다.!! 👉🏻유튜브와 같은 iframe 영상 비율도 유지 이번에는 유튜브와 같은 iframe 태그 영상 비율도 유지해보도록 하겠습니다.

👉서서히 변하는 애니메이션 keyframes 안녕하세요 TriplexLab 입니다. 오래간만에 HTML+SCSS(CSS3)에 글을 작성하네요:D keyframes를 사용해서 서서히 변하는 애니메이션을 만들어 보겠습니다. *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; align-items: center; justify-items: center; margin: 0; background-color: #000; } div { width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80..

📡 Live Sass 컴파일하기 안녕하세요 TriplexLab 입니다. 오늘은 VS code에서 Live Sass Compiler 확장 프로그램에 관해서 살펴보도록 하겠습니다. 뭐 사실 실무에서는 Node.js를 사용해 npm에 있는 node-sass을 사용하겠지만 여기서는 초 간단하게 scss를 사용하고 싶은 분들을 위해서 설명을 하도록 하겠습니다. 예를 들어서 다음과 같은 디렉토리 구조가 있다고 합시다. 다음과 같은 Live Sass Compiler 확장 프로그램을 설치 합시다. 이 확장프로그램은 폴더별 컴파일 기능을 지원해줍니다. 확장프로그램 설치 후 settings.json파일을 열고 아래와 같이 설정해주면 각각의 디렉토리 경로안에 scss 파일을 css 파일로 컴파일해준다. "liveSassCo..

🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..

💡 CSS에서 데이터 속성 사용하기 안녕하세요 TriplexLab 입니다. 오늘은 css에서 데이터 속성 사용는 방법에 관해서 살펴보도록 하겠습니다. HTML 문법 HTML 태그에 data-로 시작하는 속성을 사용해서 어떠한 데이터든 몰래 담아놓을수 있습니다. ... CSS 에서 접근하기 data- 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있습니다! 다음과 같이 접근해서 데이터 값을 가져올수도 있습니다. (유용하게 사용할수 있을것 같네요ㅎㅎ) article::before { content: attr(data-columns); // 3 } article::before { content: attr(data-index-number); // 12314 } article::before { con..

👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ 하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다. (개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 ..

😏 CSS 선택자 :nth-child 안녕하세요 TriplexLab 입니다. 오늘은 CSS 선택자 :nth-child 대해서 정리해볼게요 📌 다섯 번째 요소 만 선택하기 li:nth-child(5) { color: green; } 📌 6번째 부터 요소 선택 li:nth-child(n+6) { color: green; } 📌 처음 부터 다섯 가지만 선택하십시오. li:nth-child(-n+5) { color: green; } 📌 매 넷째 선택, 처음 시작 li:nth-child(4n-7) { /* or 4n+1 */ color: green; } 📌 홀수 또는 짝수 만 선택 li:nth-child(odd) { color: green; } li:nth-child(even) { color: green; } 📌..