본문 바로가기

웹관련자료/html/css

(11)
html 높이 자동조절, height:100% 브라우저 높이만큼 높아지게 HTML 문서를 마크업할때 필요한 높이 100% div만들기. 샘플html을 첨부하니 필요한 사람은 다운받아서 확인 ㄱㄱ. 브라우저를 꽉 채우는 높이 100% div 높이 50% div
HTML 특수문자 코드 기호표(XHTML HTML Character Entity Reference 추가링크 제공) 오늘 세치혀가 작성할 글은 웹쟁이들에게 간혹 필요한 정보글이다. 이름하야 특수문자 기호표. 에디터에서 글을 작성하거나 웹페이지 마크업을 할때원하는 기호를 코드를 통해 넣어줘야 할 때가 간혹 생긴다. 예를들어 "You&Me" 라는 문자를 작성한다고 가정하면에디터, 혹은 코드상에서 "You&Me"라고 적어줘야 하는 것. (혹은 &) 에디터들의 버전이나 호환도 제각각이라 결과물이 깨질때 이런 방법(&를 표현하기 위해 코드화된 &를 써주는 방법)으로 문제를 해결 할 수 있다. 아래 도표를 참고해보자. 코드 기호 코드 기호 코드 기호 코드 기호  e e É É ĭ ĭ  f f Ê Ê Į Į  g g Ë Ë į į  h h Ì Ì İ İ  i i Í Í ı ı  j j Î..
인스타그램의 각종 아이콘모음 - 실제사이트에서 발췌한 것 오늘 작성할 글은 인스타그램의 각종 아이콘 모음!에 관한 글이다.센스있는 나답게 인스타그램의 홈페이지에서 훔쳐온(?)것이다. ▲위의 이미지파일이 실제 사이트에서 가져온 PNG파일이다.인스타그램의 로고에서부터 카메라아이콘, 새로고침 버튼 좌우버튼에 좋아요버튼 등등온갖 아이콘들의 집함체.ㅋㅋㅋㅋㅋㅋㅋㅋㅋ ▲투명PNG파일의 흰 그래픽요소들은 확인이 잘 안되니까 센스있게 검은배경처리한 것도 첨부해본다. 난 센스녀니까. 이렇게보니 자물쇠아이콘에 흰색그래픽 요소도 많다는게 보여지는 군굳굳 출처 : https://instagramstatic-a.akamaihd.net/bluebar/0b78f27/sprites/core-sprites-cd6d7d.png
로딩바 이미지와 로딩바 만드는 방법 - GIF애니메이션 오늘 작성할 글은....다양한 로딩바 이미지에 관한 글이다. 이미지 뿐 아니라 간단한 작업으로 직접 제작하는 방법도 설명하겠다. 나의 경우엔 GIF애니메이션(움짤)로 제작함. 이건 내가 직접 강좌를 보고 만든 애니메이션. 효과를 주고선 씬별로 각도변화를 줘서 흡사 회전하는 것 같은 움직임을 만든 결과물이다. 강좌 링크는 아래...ㅋㅋㅋ http://www.iceflowstudios.com/2013/tutorials/loading-circle-animation-using-photoshop-cs6/ 귀찮으면 아래서 바로보기 보면 알겠지만 만드는 방법이 생각보다 간단하다. 영어로 설명하지만 우린 어차피 화면보며 이해하는거라 크게 어려운거 없이 가능할거다!!!! 사실 내가 사용하는 포토샵 버전과 강좌에서의 버전..
에디트플러스 설치파일 + 키젠 사용방법 및 다운로드 오늘 작성할 컨텐츠는....에디트플러스 설치파일과 인증을 위한 키젠 사용방법이다. 에디트플러스(editplus) 내가 사랑해 마지않는 툴 중에 하나. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 웹쟁이라면 다들 한번이상은 사용 해 볼법한 대중적이고도 알찬 프로그램이다. 가볍고 빠른데다가 실시간 저장 등등 그 가벼움에 비해 무수히 많은 기능을 내포하고있는 멋진 프로그램. 사실 평가판으로 사용해도 무방하지만 그러면 실행 할 때마다 한번씩 평가하기 버튼을 눌러줘야하는 번거로움이......-_- 때문에 인증방법에 대한 글을 작성한다!!!!! ▲키젠의 모양새. 사용법은 매우 간단하다. 다른부분은 건드릴 필요 없이, 빨간 점으로 표기한 부분만 눈여겨보면 된다. 유저네임에 이름입력하고 나면 레지스트레이션 코드가 생..
구글맵스 API 사용해서 지도넣기 - 약도 샘플html첨부(아이프레임) 오늘 작성할 html/css글은 구글지도를 활용하여 웹페이지에 지도를 삽입하는 방법에 관한 글이다. 홈페이지를 만들다 보면...회사소개 중에서도 약도 안내나 지점 안내 등 다양한 분야에서 지도를 활용할 일이 생기는데그럴 때 사용하기 간편한 구글API를 소개 해 보겠다. https://www.google.co.kr/maps/구글맵스 접속 후 좌측 상단에 지명, 주소 등을 입력하여 원하는 좌표의 지도를 찾는다. 원하는 곳에 마우스커서를 올린 상태에서 우클릭 > 이곳이 궁금한가요?를 선택. 좌측상단에 저런 정보가 뜨는데 아래 자그마한 숫자로 된 좌표값을 한번 눌러봐주자!! 그럼 화면이 한번 움찔하며 저 좌표의 위치를 보여주게되는데본인이 첨 선택한 그 위치가 맞는지 살펴보자.제대로 된 좌표가 맞는지 한번 확인해..
[폰트]Bitstream Vera Sans Mono - 퍼블리싱이나 코딩하기 좋은 글씨체 오늘 쓸 웹관련자료(html/css) 글은 코딩하기 좋은 폰트이야기다. 디자인적으로 봤을 때 아름답고 이쁜 폰트는 아니지만글자가 차지하는 폭이 들쭉날쭉한 영문의 특성을 무시, 간격을 일정하게 맞춘 폰트다.한 글자당 2byte를 차지한다고 해야하나?ㅋㅋ비트스트림이라는 회사에서 개발한 Vera Sans Mono 폰트라는데나도 최근에서야 첨 써보았다. 그러므로 코드를 주로 다루는 개발자나 퍼블리셔들에게 유용한 글씨체가 되겠다. 아래 있는 샘플이미지를 보더라도 알수 있듯이영문대문자 오 "O"영문소문자 오"o"숫자 영 "0" 등이 전부 다르게 표기되고 영문대문자 아이"I"영문소문자 아이 "i"도 마찬가지로 구분할 수 있게 각각 다르게 표기된다. 코드를 다루는 사람이라면 다들 한번 쯤 겪어봤을.....문제;;실제로..
에디트플러스/알ftp 접속계정정보 백업하기(XP와 윈도우7) 오늘 쓸 html/css 관련글은 내가 자주쓰는 툴인 에디트플러스와 알FTP의 접속정보를 백업하는 방법에 관한 글이다. PC를 포맷하거나 새로이 세팅해야할 일이 있을때 하나하나 계정정보를 등록하는건 너무나 귀찮고 힘든 일이므로 손쉽게 백업파일로 남겨두었다가 필요할 때 덮어쓰기만 하면 된다. 설명은 XP와 윈도우로 나눠서 하겠다! 1. 에디트플러스 3 접속정보 백업 OS : XP의 경우 C:\Documents and Settings\컴이름\Application Data\EditPlus 3 OS : 윈도우 7의 경우 C:\Users(또는 사용자)\컴이름\AppData\Roaming\EditPlus 3 EditPlus 3 폴더의 *.ini 파일을 전부 복사해서 보관. 2. 알 FTP 접속정보 백업 OS : X..

반응형