Front-end 개발

1. 사용방 변수의 이름을 지정할 때에는 변수 맨앞에 -- 을 붙여주워야 합니다. --primary-color, --secondary-color, --font-size와 같은 CSS 변수를 정의하고, 해당 변수들을 사용하여 태그 요소에 스타일을 적용할수 있습니다. 2. 장점 변수를 사용하면 전역적으로 일관된 디자인을 유지하면서 유지보수가 용이해집니다. /*:root를 사용한 간단한 코드 예제 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; } body { font-size: var(--font-size); } h1 { color: var(--primary-color); } p { color: var(--..

1.포토샵 드롭섀도 CSS 전환 해주는 사이트로 접속합니다. http://psd-to-css-shadows.com/ Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows CSS3 Code box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity); box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset; te psd-to-css-shado..

1.웹 글꼴이란? 사용자 디바이스에 글꼴이 설치되 있지 않아도 웹 브라우저에서 사용할수 웹 전용 글꼴입니다. 2.웹 글꼴의 장,단점? 장점 : 사용자 디바이스에 폰트가 없어도 의도한 폰트로 보여줄수 있습니다. 단점 : 폰트 파일을 다운받아 적용시켜야 함으로 웹사이트 로드시 속도 저하가 발생합니다. 3.웹 글꼴 종류 TTF : True Type Font, 트루타입 글꼴이다. 1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식. 한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술로 넘어가고 최신 Windows의 기본 글꼴은 대부분 OTF로 대체되었다. 제어점이 3개인 2차 베지어 곡선(Quadratic Bezier)을 사용한다. 출처 : htt..

1. console.log TEXT 노출, CSS 적용 하기 개발 작업시 가장 많이 사용하지만 console 을 이용하여 콘솔창 꾸미기가 가능합니다. 미리 스타일을 지정하고 포매팅 합니다. const font_style=` font-family:verdana; color:#FF6D00; font-size:20px; background:black; background-color:#9C27B0; line-height:1.3; padding:0; border-radius:0; `; console.log('%chttps://ttowa.tistory.com/', font_style );​​ console.log 관호 안에 텍스트와 스타일을 지정 합니다. console.log('%cttowa.tistory.com'..

1. text-size-adjust 란? Viewport가 변경되면 폰트 사이즈가 변경됩니다. (아이폰의 경우 Viewport가 변경되면 자동으로 폰트를 조절) 반응형 웹사이트 제작시 폰트가 원치 않게(크거나 작음) 보이는 경우가 있습니다. 이를 방지하기 위한 방법으로 폰트를 고정 합니다. (text-size-adjust : none) 비표준 속성이므로 벤더 프리픽스를 사용 해야 합니다. Value Description auto 화면 폭에 맞게 크기가 자동으로 조절됩니다.(device별로 크기가 다를수 있어서 비추천) none(기본값) 화면 크기에 따라 자동조절 하지 않는다. percentage (%) 퍼센트(%)로 크기를 조절합니다. (모든 device에서 동일한 텍스트 크기 부여 가능) inherit..

1. CSS(미디어쿼리) 사용하여 브라우저 내 특정 영역만 출력(PDF) 하기 미디어 쿼리 print(프린트) 선언하기 @media print { //프린트 출력시 비노출 영역 추가하기 #header, #sec_2{display:none} }​ background(백 그라운드)사용 시 해당 속성을 보여 주게 합니다. @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } ※지원 가능 브라우저를 체크하세요. (IE, Firefox에서는 인쇄창에서 배경포함 인쇄를 선택 해야 보여집니다.) https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-a..

1. CSS Ketframes로 이미지 모션 만들기 한장씩 제작된 이미지가 아닌 한장으로 만들어진 스프라이트 이미지로 모션 구현(모션용 제작 이미지 필요) img 내 position 변경 2. 소스 및 스프라이트 이미지 (Result 탭 에서 확인가능) 3. 스프라이트 이미지 장,단점 서버에 요청을 한 번만 함 (장점) 하나의 이미지 파일만 관리 (장점) 이미지가 크다면 로딩시 오래 걸림 (단점) 이 글이 도움이 되었다면 ♡(공감)를 눌러 주세요.