본문 바로가기
[css] 포스트에서 자주 사용되는 hover시 effect주기 사이트 포스트에서 많이 사용되는 hover시 style 입니다. image background가 들어가고, view more 문구가 나타납니다. HTML XXX CSS .cover-thumbnail-list-1 ul li .thum { position: relative; } .cover-thumbnail-list-1 ul li .thum:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0); transition: background-color .5s; } .cover-thumbnail-list-1 ul li:hover .thum:before { wi..
[html] 유튜브 iframe 코드로 변환 ifram 변환 사이트 - 유튜브 태그 생성기 https://remindori.com/tool/youtube Tool • ReminDori remindori.com 유튜브 동영상 퍼가기 유튜브 동영상 하단의 공유 기능에서 퍼가기 메뉴를 이용합니다. 직접 소스 만들기
[html] html5 구문 html5 구문
[css] 줄바꿈, 공백, 띄우기 css 처리 (ft. white-space) white-space white space는 여백이라고 하는데 css의 white-space 속성은 문장의 공백, 공란이라고 생각하면 됩니다. 다음 줄(공백이 여러개일경우) 공백, 들여쓰기 자동 줄바꿈(영역안 처리) normal 공백 1개만 표시 공백 1개만 표시 O nowrap 공백 1개만 표시 공백 1개만 표시 X pre 공백 있는 그대로 표시 공백 있는 그대로 표시 X pre-wrap 공백 있는 그대로 표시 공백 있는 그대로 표시 O pre-line 공백 있는 그대로 표시 공백 1개만 표시 O 문장 띄우기, 공백, 줄바꿈 보여주기 연속된 공백을 그대로 표시하고, 긴 줄도 줄 바꿈하지 않고 표시 메모장 구현시 저장된 데이터를 불러올때, 사용자가 입력한 공백, 띄어쓰기 그대로를 출력해야 하므로, whi..
[css] 체크박스 스타일 커스텀 체크 박스 스타일 커스텀 체크 전 input[type="checkbox"].클래스명 { appearance: none; width: 넓이 값; height: 높이 값; background-image: url("이미지 주소"); } 체크 후 input[type="checkbox"].클래스명:checked { background-image: url("이미지 주소"); }
[css] 텍스트 줄바꿈 해결 텍스트가 영역을 넘칠때 줄바꿈 처리하는 css 줄바꿈 처리 css 태그 안에 텍스트 입력을 하고 바로 출력시 줄바꿈이 적용안되었을 경우, 줄바꿈을 그대로 적용해주는 css white-space: pre-line; before after
[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의 거리에서 보는..
[css] 반응형 16:9 비율 유지 박스 컨텐츠 영상 삽입 16:9의 비율을 유지하는 이미지, 컨텐츠 영역을 만듭니다. 웹 또는 앱에 유튜브 영상 화면을 삽입할 경우, 유튜브 영상의 비율(영상 화면 삽입 이미지 사이즈)인 16대 9의 비율로 영역을 만들어 컨텐츠를 삽입니다. css에서 부모 요소와 padding-top 속성을 이용하여 너비와 높이를 일정 비율로 하는 크기의 박스를 만들 수 있습니다. 이런 방법으로 유튜브 영상 사이즈 16:9 비율 크기의 요소를 만들어 사이트에 삽입할 수 있습니다. 일정 비율 크기 설정 예제 html css .container { width: 400px; background-color: gold; } .item { width: 100%; height: 0; padding-top: 50%; } 화면 해당 요소에 height: 0; ..
[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가 많습니다. 부모 요소 혹은 요소에 css로 text-align: center 또는 margin: 0 auto 값을 주어도 브라우저가 유동적으로 움직임에 따라 요소가 가운데 유지가 안되는 한계를 가지고 있을 경우, 사용하는 정가운데에 배치하는 방법입니다. 가운데 배치 적용한 예 아래와 같이 브라우저 너비를 줄였을 경우에도 계속해서 이미지가 가운데 잘 배치되어있습니다. 처음 화면 브라우저 너비 줄였을 경우 화면 예제 코드 css 요소 가운데 정렬 구현 방법 left: 50%으로 브라우저의 절반만큼 왼쪽에서부터..
[css] 레이아웃 position 배치 사용법(ft. css 포지셔닝) css 레이아웃의 방법, positon 입니다. position position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수도 있습니다. 레이아웃 시, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 화면상 배치 순서가 다를 경우에 사용합니다. position 값 static: 오소를 이동하거나 겹칠 수 없는 원래 그대로의 상태로 요소를 문서의 흐름에 맞추어 배치합니다. relative: relative로 지정된 요소는 left와 top 속성으로 이동할 수 있으며, absolute로 지정된 요소의 부모 역할(깃발)을 합니다. absolute: 다른 요소와 겹칠 수 있고, left와 top 속성을 이용..
[css] position으로 가운데 배치, 정렬 css로 가운데로 정렬하는 방법입니다. 수직 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { height: 특정 사이즈 px 지정; position: absolute; top: 0; bottom: 0; margin: auto 0; } 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; position: absolute; left: 0; right: 0; margin: 0 auto; } 수직, 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; height: 특정 사이즈..
[css] 구글 메터리얼 아이콘 사용 방법(ft. 무료 아이콘 제공 사이트) google material icons을 사이트에 설치, 적용하는 방법입니다. 웹사이트 개발할 때 퍼블리싱, 프론트 개발 시점에 꼭 사용되는 것이, 아이콘입니다. 특히 자주 사용하는 icon은 검색에 사용되는 돋보기, 위치 표시의 place, 이미지, 화살표 등입니다. 이런 아이콘들은 현업에서 매번 디자이너에게 요청할 수 없고, 혹은 디자이너가 없을 때 알아서 찾아 작업해야하는 경우가 있습니다. 이렇게 아이콘 적용이 필요할때 추천하는 사이트가 있는데요. 바로, 구글에서 제공하는 google material icons입니다. 구글 메터리얼 아이콘 사이트를 통하여 설치하고, 사이트에 적용하는 방법을 알아보겠습니다. google material icons 검색 구글에서 google material icons을..
[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용) 웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 태그 방식 원하는 폰트 선택 여기서 사용할 폰트와 폰트 사이즈를 선택합니다. Noto Sans KR 폰트를 적용하여, 해당 페이지로 이동한 후 원하는 사이즈 Regular 400과 Bold 700을 선택하면, 오른쪽 바에 해당 정보가 나옵니다. 아래 메뉴에서 태그 부분와 font-family 복사합니다. 사이트에 구글 폰트 적용 웹에디터에서 복사한 태그 코드를 태그 사이에 붙여넣기 합니다. style sheet 또는 태그 사이에 복사한 font-family 코드를 붙여 넣기 합니다. 아래와 같이 로컬 서버를 띄워서 개발자 도구를 통하여 적용이 잘 된 ..
[css] reset css cdn 설치(ft. 기본 css style 세팅) reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for npm and GitHub 사이트 이동 중간에 보이는 /npm/reset-css@5.0.1/reset.min.css 의 클릭 후 Copy HTML 선택하여 내용 copy css cdn 코드 삽입 vs code와 같은 코드 편집기로 이동하여 index.html 파일에서 복사한 코드를 link 태그로 추가하면 이제 브라우저에서 제공하는 기본적인 style이 이렇게 초기화 완료됩니다.
반응형

티스토리툴바