내 인생에도 예쁜 꽃이 피었으면 좋겠다

검색어 : 반응형 웹,div 이미지 http://www.nextree.co.kr/p8622/ CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다. 반응형 웹(Responsive Web)그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종..

검색어 : 반응형 웹 ,div 이미지 http://www.slideshare.net/jisuyoun/ui-294395621. 폭관련 속성을 '%'단위로 적용해서 유동적으로 변경되게 한다.2. device-width 값을 설정해서 모바일 스타일을 컨트롤 가능하게 한다.3. media-query로 원하는 해상도별 스타일 조정을 한다. 반응형 웹디자링 레이아웃 패턴들http://www.tendency.co.kr/new/TLab/tlab_view.asp?sbdtype=0000300007&bno=11 반응형 웹은 모바일에 대응 하기 위한 웹 디자인 및 개발 방법론입니다. 특히 요즘같이 웹사이트 디자인이 점점 단순해지는 경향 속에서는 더욱 돋보이는 기술 중에 하나 입니다. 그렇다고 무턱대고 모든 것을 반응형으로 제..

검색어 : float:left 가운데 정렬 float:left 썼을 때 가운데정렬 방법 http://www.hozz.net/tc/101 웹표준에 관심을 가지면서 table보다는 div 사용을 장려하고 사용하는 그런 모습을 보면서 웹표준 웹표준 입에 달고 살길래 초보자를 위한 관련사이트가 많은 줄 알았습니다. (여기서, 초보자라 함은 div보다는 table로 익숙하게 써왔고 앞으로도 그러려고 했던 css 같은것을 잘 모르는 SCAC같은 사람들을 뜻합니다) 그런데 찾아보니 준비중인 사이트도 많고 이런 말 하기는 그렇지만 확실히 "부실"합니다. div로 table 효과를 내는데에 있어서 float:left (혹은 right)를 사용하는 예제가 있어서, 또 달린 댓글들을 보면서 테이블의 셀이 나열되는 효과를 내..

이미지 클릭하면 크게 보이기썸네일 클릭하면 크게 보이기이미지클릭하면 다른 곳에 보이기 이미지 비율 유지 function doShow(imgSrc){document.getElementById("bigimage").src = imgSrc;} function ImgChk(obj){ FixX=200; FixY=200; temp = new Image(); temp.src = obj.src; if((temp.width-FixX)FixY) { obj.height=FixY; obj.over=1 } } else { if(temp.width>FixX) { obj.width=FixX; obj.over=1 } } obj.style.display = ""} function imgsizekeep(){ var divs = docu..

검색어 : css 이미지 비율 유지 비율 유지하며 이미지 사이즈 조절하기http://ymson.tistory.com/entry/%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%A9%B0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9D%B4%EC%A6%88-%EC%A1%B0%EC%A0%88%ED%95%98%EA%B8%B0참조 : stackoverflow.com/questions/1143517/jquery-resizing-image $(document).ready(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the imag..

[Tip] CSS 가운데 정렬http://webdir.tistory.com/31 콘텐츠를 가운데 정렬하는 일은 굉장히 빈번한 일이다. 기억해 두자.~ 인라인 요소는 text-align 속성을 이용해서 가운데 정렬이 가능하지만 블럭 요소들은 중앙 정렬되지 않는다. 고정폭의 블럭 요소 중앙 정렬 CSSp { width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */ margin: 0 auto;}auto값은 요소 안의 마진 여백이 왼쪽 마진과 오른쪽 마진 사이에서 대등하게 나눠짐을 의미한다. Quirks Mode를 대비한 중앙정렬은 아래와 같다.CSSbody { text-align: center; /* Quirks Mode 를 위한 가운데 정렬 */} p { text-align: left; /*..

http://www.androidside.com/bbs/board.php?bo_table=B57&wr_id=768 html / javascript / jquery / css / mobile 등의 수집 위키.https://github.com/nolboo/nolboo.github.io/wiki 구굴 웹사이트 서핑 중 좋은 정보 인듯 해서 공유 차원에서 글을 적습니다.CSS 관련 해서 참고 하시고 많은 도움 받았으면 합니다. 0.CSS의 기본적인 형태 및 속성 설명 링크 : http://ko.learnlayout.com/ 1.Use Reset.css ff, ie 등 브라우져가 처리 하는 방법이 다릅니다. 동일하게 재설정 할 필요가 있습니다. 프레임워크가 사용하는 몇몇 reset.css 안내 야후 reset C..

http://blog.daum.net/_blog/BlogTypeView.do?blogid=0AZTB&articleno=7529893&_bloghome_menu=recenttext 댓글 못 남기게 되어 있어서 url적어 둡니다. DIV 중앙정렬 완벽 해결법 지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다. 지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요. 우리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠..

http://www.homejjang.com/07/how_to.php HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다. 외부 스타일 시트(External Style Sheet) 내부 스타일 시트(Internal Style Sheet) HTML태그내에 스타일 지정(Inline Styles) 외부 스타일 시트(External Style Sheet) css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. 이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다. 반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경..

시작하기에 앞에여기서 에러가 난다면 이 소스 밑에 무슨 짓을 해도 다 에러다 모두 다.다다다다다다 div 글씨쓰기 HTML DIV tag: 영역내 글자(폰트) 종류, 크기, 색상, 굵기, 줄간격 등을 설정하는 방법 http://howways.blogspot.kr/2014/01/HTML-DIV-to-Change-Font-family-size-style-color-weight-line-height-ect.html DIV 영역내 글자(폰트)의 글꼴, 크기, 기울임, 색상, 굵기, 줄간격 주기 색 상 color: 색상이름 또는 색상코드 ; 굵 기 font-weight: bold ; 기울임 font-style: italic; 크 기 font-size: 숫자px, 숫자% 또는 숫자em ; 글 꼴 font-famil..