본문 바로가기

분류 전체보기

 (224)
[링크] 홈페이지의 얼굴, 썸네일 이미지 설정 https://brunch.co.kr/@jiyeonsongofnt/11 홈페이지 url를 붙여넣어서 누군가에게 보낼때, 그 홈페이지에 대한 미리보기 ( 제목, 설명, 이미지 )가 나오는 경우를 본적 있을것이다. 당황스럽게 내 블로그는......내....얼굴...부분이... 확대되어 나오더라...8ㅅ8 이 이미지를 지정하는 방법 (meta 태그 사용법)에 대해 나와있는 글.
한글 폰트 import 모음 나는 보통 google font를 import 시켜서 사용한다. 영문 폰트와 한글폰트 모두. 트래픽 문제도 있지만, 일차적인 문제는 우리 사수님이 무조건 web font를 사용하시길 원하셔서....ㅎ_ㅎ 그중에서 내가 (최근들어) 제일 자주 쓰는것은 단연 Noto sans CJK kr ! 일전에는 나눔스퀘어나 나눔바른고딕 폰트를 애용했는데, 나눔바른고딕은 font weight를 bold로 줬을때 너무너무너무너무 안예뻐진다는 단점이 있었고 (심지어 부피도 커지더라. 줄바뀜현상 발견) 나눔 스퀘어는........ 처음에 봤을땐 참 예뻤는데 지금 봐서는 폰트가 좀 가볍다는 느낌이 들었다. noto sans는 구글과 어도비가 합작해서 만든 폰트로, 본고딕 이라고도 한다. 한글, 중국어, 일본어가 지원되므로 한국..
웹디자인, 웹 목업 프로그램 PowerMockup 파워목업 하나의 홈페이지를 웹디자인 할때, 목업, 즉 스케치 작업은 반드시 필요하다. 대략적으로 어느 위치에 무엇이 들어가고, 어떤 형식일지에 대해서 정해놓고 난 다음에 그 위치에 따라 포토샵 작업을 하는것이 훨씬 시간도 단축되고 작업 방향이 명확하기 때문이다. 지금까지는 대충 손으로 슥슥 그리고 보는 식이었는데, 나도 이제는 목업 프로그램을 이용해서 가이드를 잡아놓으면 좋지 않을까 싶어서 웹디자인 목업 프로그램을 검색해 보았다. powermockup은 파워포인트를 이용해서 목업을 만들수 있도록 해주는 프로그램이다. 그러니까, 파워포인트에 웹디자인 목업에 활용할 수 있는 다양한 쉐이프 툴을 추가해 주는 것이라고 보면 된다. http://www.powermockup.com/ 웹사이트에 들어가면 바로 TRIAL 버전..
텍스트 관련 효과세트 1 1. 버튼 hover 효과 2. 텍스트 지직거리는 효과 3. 글자 깨진 효과 4. 텍스트 바뀌는 애니메이션 5. 텍스트 네온사인 효과 6. 텍스트 쉐도우 여러종류 7. 텍스트에 흐르는 윤곽선 효과 주기
조경회사 메인 디자인
장갑제조 회사 메인디자인
치과 의료기기 회사 메인디자인
[w3.js] 하나의 버튼으로 Toggle show 하나의 버튼으로 나타나게 했다가 사라지게 했다가 하는 효과를 줄때, 스크립트 짜기가 귀찮을 때가 있다. 그럴때 굉장히 간단하게 할수있는 방법! 먼저 w3.js를 import 한 다음에, Toggle Hide/Show 이렇게 onclick 속성 값으로 w3.toggleShow('컨트롤할 대상') 을 주면 바로 된다 ^______________^ 출처 : https://www.w3schools.com/w3js/w3js_toggle_show.asp
디바이스 해상도에 따라 스크립트 적용 예제소스 // 모바일 브라우저 가로크기 체크 if (document.body.clientWidth
모바일에서 기본적으로 적용되는 css 없애버리기! 가끔 코딩하고 나면 모바일에서 input이나 select가 운영체제에 따라서 안예쁘게 바뀌어 버리곤 한다. 특히 아이폰 기본 select와 input 디자인 쉣.... 이럴때 간단하게 사용할수 있는 css 속성 ! ^__^ -webkit-appearance: none;-moz-appearance: none;appearance: none; 이것만 추가하면 된다 ㅎ.ㅎ
상업적으로 사용 가능한 무료폰트 / 이미지 사이트 -서울시 : 서울한강체, 서울남산체, 서울한강 장체 5종, 서울남산 장체 5종-부산시 : 부산바다체-아산시 : 이순신체-제주도청 : 제주고딕,제주명조,제주한라산-한국청소년활동진흥원 : 청소년체-동그라미재단 : 동그라미재단 서체-구글 노토 산스 CJK : 어도비 본고딕-네이버 : 나눔글꼴모음(나눔스퀘어, 나눔바른펜, 나눔바른고딕, 나눔글꼴에코, 나눔손글씨, 나눔고딕, 나눔명조)-우아한형제들 : 한나체,주아체,도현체,연성체-스포카 : 스포카 한 산스-야놀자 : 야체-한글과컴퓨터 : 함초롬체-한겨레 말글연구소 : 한겨레결체-조선일보 : 조선일보명조체‘폰트 ‘KoPub돋움’, ‘KoPub바탕’ 사진 제공=한국출판인회의2.상업적으로 사용해도 무방하나 제약이 있는 경우-디컴즈 : 전라북도체, 김제시체 (앱이나 기기..
단어 단위로 줄바꿈되기, word-break 속성 업체에서 계속 컴플레인 들어왔던게 단어 단위로 끊어지지 않아서 문장이 자연스럽게 연결되지 않는다는 것이었다. 이 쉬운 속성을 몰랐다니 ! 단어 단위로 끊고싶은 곳에 word-break : option; 만 주면 된다 ^__^
캐싱처리를 위한 파라미터 값 처음 알게된것! 서버에서 직접 작업할때, css에서 어떤걸 수정하고 아무리 f5를 눌러도 적용되지 않아서 답답한 경우가 있다. 캐싱처리가 되지 않아서라고..! css / js파일을 링크하는 head 안에 해당 파일 이름 뒤에 ?m=20170504 이런식으로 날짜를 붙이게 되면, 컴퓨터가 자기가 저장했던 파일을 쓰면 안되고 새로 불러와야 하는구나, 하고 인식하고 리로드 할때마다 새로 불러온단다. 그래서 파일을 수정할때 뒤의 숫자를 꼭 변경해야 한다 ㅎ.ㅎ
제이쿼리 간단한 tab메뉴 HTML 첫번째메뉴 첫번째 탭 내용 두번째메뉴 두번째 탭 내용 CSS ul{list-style:none;} a{text-decoration:none;} .tab_wrap{width: 567px; float:left;} .tab_wrap{position:relative; width: 567px; float:left;} .tab_wrap>li>a { display:block; position:absolute; width:78px; text-align:center; background:#ffffff; color:#555; border:1px solid #dce3e9; border-bottom:0; padding:7px 16px; font-weight:bold; margin-left: 40px;} .tab_wr..
크로스 브라우징 관련 js 윈도우 7의 기본 브라우저가 IE9 버전이다. 심지어 아직 윈도우 xp를 사용하는 사람들도 꽤 많이 있다 ^_ㅠ 그래서 최소한 ie9버전까지는 크로스 브라우징이 가능해야 한다. 물론 크롬과 ie에서 동일하게 보이는것은 말할것도 없고. ie8버전까지 크로스 브라우징 한다면 꽤 많이...힘들다.......ㅠ...... 홈페이지: http://code.google.com/p/html5shiv/ - HTML5 요소를 지원하지 않는 브라우저(IE8 이하)에서 해당 요소를 지원할 수 있게 해주는 라이브러리. - 구버전 IE가 부분에 넣음 홈페이지: http://css3pie.com/ - CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리 - 구버전 IE에서도 둥근 외곽선, ..
jquery cdn주소 제이쿼리 Migrate ( IE하위버전에서 상위버전 jqurey 인식하게 하는것)은 cdn주소를 못찾았다. 폴더에 직접 넣어서 script 경로로 넣어야 할것 같다. Google : https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js MS : https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js CDNJS : https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js JSDelivr : https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js jquery : https://code.jquery.c..
자동차 부품회사 홈페이지 시안 홈페이지가 아예 없는 회사라서 무에서 유를 창조해야 했다. 물론 차장님이 회사에서 보내온 회사소개서에서 내용을 정리해서 주셨지만........................... 앞의 식품회사에 비해 조금 힘들었다 ㅠ.ㅠ
레이어 팝업 오늘하루동안 열지않기 나도 아직 테스트 해보지 못한것. 하루 동안 이 창을 열지않음 [닫기] [출처] 레이어팝업_오늘하루 창닫기|작성자 휘성별님
select박스로 페이지 이동하기 (링크걸기) 가끔가다보면 select박스에서 하나의 option을 클릭 했을 때, 페이지가 이동하는 형식이 있다. 보통 family site나 서브페이지 내에서 네비게이션을 이용할때 많이 쓴다. 이 기능을 주는건 굉장히 간단하다. 이동1 이동2 [출처] select 링크 이동|작성자 휘성별님 이렇게 option의 value값에 이동할 페이지를 써주고, select에 onchange="window.open(value,'_self'); 이것만 추가해주면 끝!
식품업체 홈페이지 서브시안 이제 서브시안까지 완료! 업체에 서브 내용 검수맡는것만 남았다. ㅎ.ㅎ
맨위로
Total : Today :
728x90

티스토리툴바