분류 전체보기 (226) 썸네일형 리스트형 IOS CSS팁 1. 가로 화면 텍스트 대응 - 모바일에서 화면 가로로 눕힐때 폰트 사이즈 변형 방지 *{-webkit-text-size-adjust:none;} 2. 버튼 기본 모양 reset input {-webkit-appearance: none;-webkit-border-radius: 0;} 3. 숫자에 전화번호 링크 방지 - 번호만 입력해도 전화번호로 인식하고 링크가 걸림 출처 : http://www.happycgi.com/16611 스터디 - SCSS scss는 css 전처리기 이다. css를 작성할때 중복 등 불편함을 해소하고자 생긴거라고 생각하면 될것같다. 처음 학원을 다니면서 배울때 css로 배웠기 때문에, scss라는게 있다고는 들었어도 막연하게 사용법이 어려울것이라고 생각하곤 시도해 보지 않았다. 헌데 점점 class명이 복잡해지고, 복잡한 구조의 사이트들을 만들면서 css 작성이 쉬워질수 있는 방법을 찾아보았고, scss 사용법을 가볍게 공부하고 실제 프로젝트에 도입함으로써 css 작업 효율성이 개선되었다. 여러 사이트들을 돌아다니며 공부한 scss에 대한 기본 study 내용이다. 내가 보려고 정리한 것이기 때문에 다소 중구난방이다. - Ruby 언어로 이루어져 있기 때문에 먼저 컴퓨터에 Ruby 설치 -> https://rubyinsta.. 생활코딩 스터디 - javascript_2 생활코딩에서 자바스크립트 언어에 대한 공부를 시작했다. jquery나 쓸줄 알지 javascript는 걸음마 떼는 기분으로 공부하고 있다^-ㅠ 어쨌든 흥미롭고 재미있다. 1. 숫자와 문자 1) 숫자 : 따옴표 없는 형식 ex) alert (1+1) -> 결과값 2 ● +,-,*,/ 등 사칙연산 뿐만 아니라 복잡한 계산도 가능하다. ex) Math.pow(3,2) -> 3의 2승, 결과값 9 Math.round() 반올림 / Math.ceil() 올림 / Math.floor() 내림 / Math.random() 0부터 1.0 사이의 랜덤한 숫자 2) 문자 : 따움표로 감싸야 한다. String 이라고 함. ex) alert("Hello World") ● 숫자를 따옴표로 감싸면 문자가 된다● 문자 안에서 작.. 생활코딩 스터디 - Ajax javascript 공부를 하다가 ajax 사용법을 알게 되었다. 새로고침 없이 특정 부분에 다른 파일의 내용을 불러올 수 있다니 증말 신세계 ! 다만 ajax를 사용하면 검색엔진 최적화가 안된다는 치명적인 단점이 있는데, 이걸 pjax 라는걸 사용함으로써 해결 할 수 있다. * ajax를 통해 새로고침 없이 웹서버와 통신이 이루어진다. 사용자에게는 좋은 경험을, 서버 운영자에게는 지출을 줄여주는 이득! * 메뉴를 이동할 때, 부분적으로 웹페이지를 갱신할 수 있도록 해준다.구조의 재사용~!* ajax는 비동기 실행~! ajax가 실행되고 있는 중에도 다른 코드들이 실행될 수 있음. * 바뀔 수 있는 부분은 서버로부터 동적으로 가져와서 넣음. * ajax는 웹 서버를 통해서만 동작함. 로컬에서 확인 불가능.. 생활코딩 스터디 - javascript_1 생활코딩 web2 javascript 동영상 강의로 가볍게 자바스크립트 수업을 시작했다. 이 수업 이후에 자바스크립트 언어 공부를 시작할 예정! 자바스크립트는 역시 어렵다....^-ㅠ * javascript 데이터 타입 숫자 -> 1 (1+1=2)문자 -> "1" ("1"+"1"="11") * String = 문자열 바뀔 수 있는 값 = 변수바뀔 수 없는 값 = 상수 * === : 비교연산자비교연산자의 값은 true 와 false (boolean 불리언) 으로 나뉜다. * 배열 만들기 -var xxx(변수이름) = ["값1","값2","값3"]; 불러오기 - 값의 index번호로 (index번호는 0부터 시작)xxx[0] 배열 안의 컨텐츠가 몇개인가 (개수는 1부터 시작)-xxx.length; 배열에 컨.. 그림자가 긴 텍스트 (only css) See the Pen Pure CSS Long Shadow by Rafael González (@rgg) on CodePen. 텍스트 네온사인 애니메이션 (only css) See the Pen cibuh by Timothy M. LeBlanc (@WhiteWolfWizard) on CodePen. 텍스트 배경 애니메이션 (only css) See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen. 텍스트가 스크롤 되는듯한 효과 (only css) See the Pen Title Scroller by Jordan Halvorsen (@halvo) on CodePen. 부드럽게 나타나는 텍스트 See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen. 오늘 하루동안 열지않기 레이어 팝업 html 오늘 하루동안 보지 않기 CLOSE css #pop{position:absolute; // 이외에는 자기 마음대로 설정} .close div{float:left; text-align:right;} #check{font-size:12px; font-family:'돋움'; padding-left:10px;} #close{float:right; font-size:13px; padding:5px; font-weight:bold;} #close a {color:#fff;} javascript 1.head 태그 안에서 먼저 cookie 세팅을 해줘야한다. 2. 팝업 소스가 적힌 뒤에 적용되어야 하는 script가 있다. 와 사이에 script 로 넣음. 화면이 로드되었을때 delay 후 스크립트 적용 화면이 로드되었을때 무언가 fade in 된다던지, 효과를 넣을때 간단하게 쓸수있는 함수. $('#section_01').delay(200).queue(function(){ $(this).addClass('active1'); }); 이런식으로 선택자에게 delay함수를 써주고, addClass를 해주면 된다. 이때, 미리 css 에서 section_01이 active1 클래스를 가졌을 때 특정 부분의 opacity가 1이 되도록 하고, section1에는 transition: all 1s ease 0.5s 등으로 애니메이션 효과를 준다. 예시) html 나타나는 부분 css #section1 .content{opacity: 0; transition: all 0.3s;} #section1.active .c.. 화면 크기(width)에 따라 스크립트 적용 pc버전과 모바일 버전에서 적용되어야 하는 script가 다른 경우가 많다. 이럴때 쓸 수 있는 함수. 스크립트 적용시, 하나의 함수를 선언해서 함수 안에서 적용하는게 훨씬 안정적이다. function 함수이름(){ var winWidth = $(window).width(); if (winWidth >= 1024) { //viewport가 1024보다 클때 적용되는 스크립트 } else { //viewport가 1024보다 작을때 적용되는 스크립트 } } //함수지정 함수이름(); // 함수선언 이런식으로 함수 지정 후 선언해주면 끝 ! [추천] 유료이미지 사이트 추천, 유토이미지 웹디자인을 하다보면, 상업적 이용 완전 무료인 pixabay나 출처를 남겨야하는 freepik 등의 무료 이미지 사이트에서 이미지와 백터등을 충당하기엔 상당히 무리가 따르는 것을 느낄수 있다. 아무래도 stock 이미지랑은 퀄리티 자체가 다르고, 아무리 조심하더라도 저작권 문제가 신경쓰이며, 또 가장 큰 문제는 내가 원하는 구도의 원하는 이미지가 잘 없다는점. 그래서 회사에 당당하게 유료 이미지 사이트 결제를 요구하기로 마음먹고 여러 이미지 사이트를 살펴보았다. 일단, 너무 비싸면 안됬다. 왜냐...난 일개 1년차 웹디자이너일 뿐이고...요구할수 있는것은 크지않고... 무엇보다 우리 사수님이 처음부터 허용하지 않으셨기 때문에...^^ 그리고 사용범위가 넓어야 했다. 우리 회사 홈페이지에만 사용하는게 아니.. [Tip] PDF 파일 용량 줄이기, smallpdf 간혹가다 홈페이지에서 PDF 파일 (예를들어, 카달로그)을 다운받을 수 있도록 해달라는 업체들이 있다. 그런데 PDF파일 용량을 보면.....하하..... 제일 용량이 큰 곳 중에는 400MB가 넘는곳도 있었다. ...우리회사에서 쓰는 호스팅으로는 어림도 없는 크기였다. 카달로그만 다운로드 받아도 좀있으면 트래픽 초과에 걸릴 삘. 그래서 PDF 크기를 확! 줄여주는 사이트를 찾다가 발견한 사이트, smallpdf. https://smallpdf.com/compress-pdf 사용법은 세상간단! 1. 중간에 Drop PDF here에 용량을 줄이기 원하는 파일을 드래그해서 드롭하거나, 저 부분을 클릭해서 파일을 선택한다. 2. 사이트에서 pdf파일을 uploading할때까지 기다린다. 참고로, 내가 올린 .. css 속성 정렬 바꿔주기 나는 원래 CSS를 모든 속성마다 ENTER를 했다. 그래서 CSS 파일이 정말 끝도없이 길어졌다. 1000줄은 기본으로 넘어가곤 했다. 그래도 난 불편한지 몰랐다. 처음부터 그렇게 작성했으므로. 그러다가 우연한 기회에 반드시 css를 인라인으로 써달라는 홈페이지를 코딩하게 됬는데, 세상에! 신세계 아닌가. CSS를 띄어서 쓰면 각 속성 찾기에는 편할지 몰라도 코드 찾는게 좀 어려웠는데 인라인으로 쓰니 속성이 아무리 길어봤자 1-2줄이면 끝나니까 바로바로 찾을수 있어서 너무너무 편했다. 상대적으로 띄어서 쓰는것이 불편하게 느껴졌다. 처음에는 손에 익은 코딩 방법을 바꾸려니 조금 어색했는데, 이제는 잘 적응해서 CSS를 인라인으로 쓰면서 편하게 코딩하고있다. 문제는 내가 이전에 코딩해둔 CSS파일들. 죄다.. [Tip] 간편하게 파비콘 만들기, CONVERTICO admin버튼제작이나, 홈페이지에 들어가는 사진 보정, 파비콘 등등... 참 여러가지를 빼먹는 경우가 있었다. 그럴 때마다 작은것 하나하나까지 신경써야 한다고 혼이났다. 맨날 혼나는데...왜 맨날 까먹는것일까...8ㅅ8 그래도 요즘은 습관처럼 익숙해져서 알아서 하는것 같다. 하하^^ 파비콘, 즉 .ico 파일을 가장! 간편하게 만드는 방법. 1. http://convertico.com/ 에 접속한다. 2. 중간의 Drop your .png files here, or click to select them manuallty ! 가 보일것이다. 말 그대로, 저 네모 박스 위에 .ico로 변환하고픈 파일을 끌어다 놓거나, 저 부분을 클릭해서 파일 불러오기로 파일을 선택하면 된다. 3. 1초정도 기다린다. 4. .. [포토샵] 필터 기능으로 화이트밸런스 조정하기 1. 화이트밸런스를 맞출 사진을 불러온다. 그리고 원본 레이어를 두고 레이어를 하나 복사. 2. Filter - Blur - Average 선택 -> 이 사진의 중간값으로 레이어가 채워진다. 3. Adjustment - Levels 선택. Levels 창에서 스포이드가 3개가 있는데, 그중 중간의 스포이드 선택. 4. 스포이드로 2번의 레이어를 클릭시, 알맞은 톤으로 화면 색상이 변경된다. 5. 레이어 창을 보고 가운데 레이어를 숨겨준다. -> 완성 ! 이렇게 간편하게 화이트밸런스를 맞출수 있다니 ! 물론 약간 어색한 감이 없지않아 있지만 가장 간편하게 수정 가능한듯. 출처 : http://dnfoto.net/221171711057 CSS 폰트 아이콘 사이트 모음 http://fontawesome.io/icons/ http://cssicon.space/#/ - 여기는 cdn주소를 쓰는 방식이 아니라 아예 소스를 가져다 쓰는형식. http://ionicons.com/ https://material.io/icons/ 가장 잘 쓰는 것은 역시 fontawesome이지. cdn주소만 링크하면 수백개의 아이콘을 손쉽게 사용할수 있다. CSS 폰트로 제작되어서 색상을 바꾸는것이나 크기 조절도 매우 쉽다. [기사] CSS의 7가지 단위 Korean (한국어) translation by June H Yeo (you can also view the original English article) 우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단하지만 새로운 문제에 맞닥드리면 해결하기 어려워집니다. 웹은 항상 성장하고 있고, 새로운 해결법 역시 계속 성장하고 있습니다. 그러므로, 웹 디자이너와 프론트 엔드 개발자로서 우리의 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다. 우리의 특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다. 오늘, 저는 이전엔 알지 못했던 몇 가지의 CSS 방법을 알려드리려고 합니다. 몇몇 수치 단위들은 픽셀이나 em과 .. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
