그냥 개발자 블로그

웹퍼블리싱에서 패딩(padding)과 마진(margin)은 필수 요소이며 가장 많이 사용 됩니다. 따라서 비슷하지만 다른 패딩과 마진의 대한 이해가 꼭 필요 합니다. 예를 들어 다음과 같이 css 를 적용했다고 가정 합니다. padding:20px;margin:20px;border:1px solid #fff;display:inline-block;width:200px;height:200px; html에는 다음과 같이 적용됩니다. 패딩(padding)은 div 요소 안쪽에 공간을 만들며, 마진(margin)은 요소 밖에 공간을 만듭니다. 따라서 패딩을 사용한 경우 div의 가로 세로 크기 200px 보다 영역이 커지며, 마진을 사용한 경우에는 div의 가로 세로 크기는 200px 그대로가 되는것 입니다. 또..

홈페이지 및 쇼핑몰을 운영하다 배너 및 스타일(css)를 수정했는데 수정한대로 안보여질때가 있습니다. 이유는 캐시 때문인데 스마트폰으로 모바일웹을 방문하면 우리는 느끼지 못하지만 임시파일(캐시) 형태로 이미지나 스타일(css)가 저장됩니다.그래서 다음에 재방문할때 보다 빠르게 열리는 것 입니다. 하지만 변경전 파일이름이나 변경후 파일이름이 같아서 수정된 것을 스마트폰이 인식하지 못할때가 있습니다.시간이 한참 지나면 자연스레 수정된 것으로 반영하지만 당장 수정을하고 정상적으로 수정되었는지 확인하기엔 불편합니다. 이럴땐 캐시를 삭제하여 바로 수정된 내용을 확인하실 수 있습니다. 가장 많이 사용되는 모바일 브라우저 크롬과 네이버앱을 대상으로 설명드립니다. 1. 크롬 캐시 삭제 하기 1. 우측 상단에 설정 버튼..

보다 유연한 홈페이지 관리를 위하여 코딩 및 파일을 직접 수정, 보완을 많이 합니다. css(스타일) 파일 내용을 수정하거 이미지를 새로 만들어 동일한 이미지로 업로드하여 덮은 경우 종종 홈페이지에서 변경한대로 보이지 않을때가 있습니다. 이유는 캐시 때문입니다. 컴퓨터로 홈페이지를 방문하면 우리는 느끼지 못하지만 내 컴퓨터에 임시파일(캐시) 형태로 css (스타일) 및 이미지 파일이 저장됩니다. 이후 같은 홈페이지를 방문할때 내 컴퓨터에서 가져올수 있는 css 및 이미지 파일이 있다면 그것을 가져와 빠르게 홈페이지를 엽니다. 위와 같은 기능은 모든 웹 브라우저에 있습니다. 그러나 간혹 변경전 파일이름이나 변경후 파일이름이 같아서 수정된걸 웹 브라우저가 인식하지 못하여, 내 컴퓨터에서 임시파일(캐시)을 가..

모든 사이트들은 xxx.xxx.xx.xxx 형식의 아이피 주소를 가지고 있습니다. 따라서 http://xxx.xxx.xx.xxx와 같이 해당 사이트의 아이피를 입력하면 원하는 사이트로 이동할 수 있습니다. 그러나 숫자로 구성된 아이피는 여러개를 기억하기 힘들고, 숫자를 잘못 입력하면 원하지 않는 사이트로 이동될 수도 있습니다. 이러한 점을 보안하고자 dns 개념이 나왔습니다. xxx.xxx.xx.xxx 와 같은 형식의 아이피를 work6.kr 과 같이 문자 형태로 컴퓨터가 기억하게 해주는것 입니다. 컴퓨터 어딘가에는 xxx.xxx.xx.xxx -> work6.kr 과 같은 내용이 저장되어 있습니다. 그래서 우리는 http://work6.kr 과 같이 문자로 된 주소를 입력하여 사이트를 이용할 수 있습니다..

div를 횡으로 배열하기 위하여 inline-block을 사용했는데 div와 div의 사이에 의문의 공간이 생기죠. 이럴때 여러가지 방법의 해결 방법이 있는데 간결한 해결법으론 marin-left:-4px 를 주는것 입니다. margin-left:0px; margin-left:-4px; copyright (c) 워크식스

CSS는 웹의 많은 영역중에서도 가장 탈취하기 쉬운요소이며 탈취된 CSS는 변형되어 사용되곤 하는데요. CSS 탈취를 막는건 어렵지만 해석하고 읽어내기 어렵게 만드는건 어떨까요? 아래 링크에서 확인해보세요. http://csscompressor.com/

- 엑셀 다운로드 border 굵기 어떠한 양식 그대로 엑셀로 출력하려고 하다가 보면 문제가 되는 부분이 테두리(border) 인데요. 아무리 1px를 주어도 굵은 테두리가(border)가 만들어지지요. 그럴때 해결 방법은 아래와 같아요. border : thin solid gray;

textarea를 통해서 글을 작성 할수 있는 공간을 많이 만드는데요.textarea에서 작성된 내용은 데이터베이스에 저장될때 문자로만 저장될뿐 html 태그가 저장되지는 않죠. 하지만 contenteditable 속성을 위용하면 쉽게 div를 textarea 처럼 에디터 영역을 꾸밀수가 있죠.사용법은 아래와 같아요. 단순히 위와 같이 적어주시면 div 내에 타이핑이 가능하게 되면서 타이핑 된 내용은 자동으로 태그들이 만들어 집니다. 다음과 같이 테스트를 해보았는데요.아래처럼 태그들이 자동으로 만들어져요. div 내에서는 글씨굴게 처리와 같은 간단한 Ctrl+B 를 누른다면 이 또한 적용되요. contenteditable 속성과 자바스크립트를 적절히 이용한다면 상용화된 에디터와 똑같이 만들수 있어요. 하..