👉🏻 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..

🌊 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 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..

🙋‍♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..

css3 transition 안녕하세요 TriplexLab입니다. css3 속성중 transition은 원하는 요소에 자연스러운 1.변형을 일으키거나 2.애니메이션효과를 줄 수 있습니다. 오늘은 transition 변형에 관해서 알아보도록 하겠습니다. css3 속성은 최신 기술이기 때문에 인터넷 익스플로러 9 이하 버전은 지원하지 않습니다. Can I use... Support tables for HTML5, CSS3, etc caniuse.com 저 같은 퍼블리셔들이 혹은 프론트앤드 개발자들이 항상 최신 기술에 관해서 브라우저들의 버전들 마다 호환성을 지원해주는지 안해주는지 확인해주는 싸이트가 있습니다. 속성명 설명 transition-property: width 어떤 속성에게 변형을 적용할지 지정합니..