본문 바로가기
[css] 넘치는 텍스트 줄바꿈 처리 css를 이용한 넘치는 텍스트 줄바꿈 처리입니다. 넘치는 텍스트 줄바꿈 처리 div {word-break:break-all;} before after
[css] 강제 가로 모드 세로화면에서 강제로 가로 모드로 적용하는 법입니다. 모바일 화면 웹을 만들 때, 텍스트가 꽉 찬 테이블(시간표, 식단표)를 만들때 세로 화면에서 강제로 가로모드의 화면을 만들때가 있습니다. 단순히 스타일에 transform: rotate(-90deg); 만 준다면 기존의 가로폭이 세로에 적용이 되어 여전히 좁은 폭의 막혀있습니다. 강제 가로모드 css transform: rotate(-90deg); transform-origin: top left; position: absolute; top: 100%; left: 0; width: 100vh; //세로 너비를 적용 height: 100vw; //가로 너비를 적용
[css] table border에 border-radius 적용하기 table border에 border-radius 적용하는 방법입니다. 스타일에서 border-radius와 border를 적용시 border가 rounded 처리가 안될 때가 있습니다 . 이럴때는 스타일에 추가적으로 border-collapse: seperate 을 추가하여 기본값이 collapse에서 seperate로 변경해줍니다.
[css] 웹페이지 이미지 영역에 맞추어 영상 삽입 웹페이지에서 정해진 이미지 영역에 딱 맞추어 영상 삽입하는 방법입니다. 주로 웹사이트나 블로그의 상세 페이지에서 html, css로 페이지를 만들때 미리 만들어 놓은 이미지 안에 맞추어 유튜브와 같은 영상을 띄울 때 사용하는 css 적용 방법입니다. 편하게 inline 방식으로 구현하였습니다. 구현 화면 웹페이지 이미지 영역에 맞추어 영상 삽입 정해진 이미지의 위치와 영역을 알맞게 정해줍니다. iframe 태그의 부모 요소를 영상 비율인 16대9 사이즈에 맞추어 높이를 설정해 주어야 영상이 일정 비율로 반응형으로 출현합니다. 56.25% -> 100% : 56.25% = 16 : 9 유튜브 ifram 코드 가져오기 유튜브 해당 영상의 메뉴에서 공유 > 퍼가기에 iframe 코드를 복사하여 사용합니다.
[html] 자바스크립트 코드 없이 자동완성 검색 구현하기 js코드 없이 html 만으로 자동완성검색을 구현합니다. 구현화면 자바스크립트 코드 없이 자동완성 검색 구현 html 코드
[css] tailwind fontsize, color 커스텀 하는 법 tailwind 에서 fontsize, color 커스텀 하는 방법입니다. ailwind.config.js 파일에서 아래와 같이 color 추가하면 됩니다. postcss.config.js가 아니라 tailwind.config.js 이니 주의 하세요. 여기서 주의할 점: extend: { .. } extend 객체로 fontsize와 color를 한번 더 감싸줘야 기존 tailwind에서 제공하는 기본 style을 유지하면서 추가할 수 있다. tailwind.config.js 코드 module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { fontSize: { xs: ['12px', { lineHeight: '18px..
[html] input type="number" 에서 소수점 자리 허용 기능 input 박스에서 소수점 자리까지 허용하는 속성입니다. 소수점 두 자리 수 허용시 input 태그에 step="0.01" 속성을 추가합니다. 소수점 한 자리수 허용시 input 태그에 step="0.1" 속성을 추가합니다. input 박스 소수점 경고창 소수점 한자리 수의 조건을 지키지 않을 경우, html에서 아래와 같은 유효한 값을 입력해 주세요... 경고창을 노출합니다.
[css] loading bar css with tailwind, 로딩이 필요한 경우 (ft. tailwind) tailwind, css로 작업한 간단한 로딩바입니다. 구현 화면 구현 영상 로딩이 필요한 이유 loading은 보통 결과값이 도출 되기 이전에 몇 초 동안 실행하여 사용자가 대기중 임을 인지할 수 있도록 UX로서 필요합니다. 또한 react에서 비동기로 데이터를 가지고 올 경우, 결과 값에 데이터가 들어오기 전에 화면이 먼저 렌더링 되면서 null값인 상태에 에러를 발생시키므로 결과값에 데이터가 들어오기 전에는 loading을 실행하여 에러를 방지합니다. html css /* spinner */ .loader { border-top-color: #FFE9A4; -webkit-animation: spinner 1.5s linear infinite; animation: spinner 1.5s linear ..
[css] grid 반응형 layout 적용 grid를 이용한 반응형 레이아웃 입니다. grid를 이용한 style을 적용하면, 미디어쿼리를 사용할 필요 없이 스크린 화면 사이즈에 맞추어 반응형 레이아웃을 구현할 수 있습니다. 구현 화면 css div { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 15px; } fr fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미 아래의 경우 100px, 25%를 사용하고 남은 공간을 1fr은 ‘1/3’, 2fr은 ‘2/3’ 만큼 사용 .container { grid-template-columns: 1fr 2fr 100px 25%; } auto-fill 행과 열의 크기게 맞게 ..
[css] 모달창 오픈시 css로 스크롤 방지 모달창(팝업) 오픈시 css를 통한 스크롤 방지입니다. css를 이용한 scroll을 방지 모달창이 오픈되었을때, 감싸고 있는 부모요소에 아래의 스타일을 적용하면 됩니다. 모달창 open이 true시 적용하고, false시 없애주어 scroll 기능을 되살려줍니다. .wrapper = { position: fixed; width :100%; height: 100%; overflow: hidden; }
[css] 이미지 애니메이션 효과 (ft. 무한 회전, 사라지기, 출현하기) css를 이용한 이미지 애니메이션 효과입니다. 웹이나 앱의 인트로 화면에서 주로 이미지 애니메이션 효과를 사용하게 됩니다. CSS - 무한 회전 애니메이션 .img { animation: rotate_image 6s linear infinite; transform-origin: 50% 50%; } @keyframes rotate_image { 100% { transform: rotate(360deg); } } CSS - 나타나는 애니메이션 .img2 { animation: rotate_image 6s linear infinite, scale1 6s linear infinite; transform-origin: 50% 50%; } .img2 { animation: rotate_image 6s linear ..
[html ] data- 속성 (ft. dataset, data-key, data property) html에 태그 안에 의미있는 속성을 추가하여 자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. data- 속성 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 사용법은 태그 안에 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 자바스크립트와 css로 특정 html 요소에 접근이 가능합니다. blue pink 자바스크립트에서 data 속성 접근 dataset을 통해 접근합니다. 이벤트 위임을 통해 부모에 이벤트를 등록하여, 여러 하위 요소 중 event.target으로 action을 일으킨 특정 요소에만 접근할 수 있습니다. 인터넷 익스플로어10 이하는 dataset을 지원하지 않아 getAttribute()를 대신 사용합니다. let btn = docum..
[css] tailwind dialog 창 사용 예제 부모 컴포넌트 const [openAlert, setOpenAlert] = useState(false) const onOpenAlert = () => { setOpenAlert(!openAlert); } 자식 컴포넌트 AlertDialog.tsx import React from 'react'; const AlertDialog = ({ openAlert, onOpenAlert }: any) => { return ( ); }; export default AlertDialog;
[html] html 특수기호 코드 찾기 html 특수기호를 이용한 마크업이 필요할때, 이용하는 사이트입니다. html 특수기호 검색 사이트 구글에서 html entities를 검색해서 아래의 페이지로 들어가거나, 바로 아래의 링크로 이동해주세요. 원하는 기호를 찾아, 바로 복사하여 마크업 하면 됩니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 자주 쓰는 html 특수 기호들 html 특수기호 마크업 예제 카피라이트(저작권) 의미하는 기호는 아래의 html 특수기호로 표시합니다. © 저작권 html 특수기호 사용방법 © Goddino. All Rights Reserved. 구현 화면
[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과 CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지로 회전하면서 다시 앞면 이미지가 나오게 됩니다. 카드 뒤집기와 같이 이미지를 앞면, 뒷면을 교차적으로 출력하면서 3차원의 애니메이션 효과를 css를 통하여 구현할 수 있습니다. css로 3차원 애니메이션 효과 기본 동작 html 앞면(이미지 앞면) 뒷면(이미지 뒷면) css body { padding: 30px; } .container { width: 150px; height: 200px; perspective: 300px; //부모의 자식 요소가 3차원의 애니메이션 효과를 가질때, 300px의 거리에서 보는..