세연아빠의 개발과 일상의 모습

Mysql Workbench 설치Mysql Workbench 설치 데이터 베이스 사용자라면 설치된 데이터베이스의 특성에 맞는 데이터베이스 툴들을 하나이상 사용하고 있을것이다. 이번엔 mysql 사용자들에게 인기있는 관리툴인 workbench 의 설치법에 대하여 포스팅을 해보겠다. 1 다운로드 사이트 우선 workbench 을 다운로드 받을 수 있는 사이트에 적속을 해보자 url 은 아리와 같다. https://www.mysql.com/downloads/ 사이트 중간부분에 다운로드 부분을 클릭하면 아래와 같은 페이지로 이동을 하게 된다. 2 설치하기 다운로드된 파일을 다운로드된 폴더에서 실행을 클릭한다 next 버튼클릭 물론 next 설치버전 선택화면 complete 버젼 선택 최종 install 버튼 클..

jQuery Ajax 사용법jQuery Ajax 사용법 Ajax 기존의 웹 브라우저는 서버로부터 페이지 단위로 받고 처리가 되었지만 간단한 작업을 위해 페이지 전체를 로딩할 필 요없이 xml 파일 조각 단위로 데이터를 받아 처리할 수 있기 때문에 전체 페이지를 다시 로드하지 않아도 되어 불필요 한 페이지 로딩이 필요 없을 뿐만 아니라 엑티브한 페이지 구성을 할 수 있어 유용하게 쓰이는 기술이다. 사용법방 테스트 작업 1 LIKE 연산자의 피해야할 형식 아이작 호출부 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354Ajax 간단 테스트 function id_addr(tt,gubu..

반응형 웹 미디어쿼리반응형 웹 미디어쿼리 미디어 쿼리(Media Queries)는 새로운 기술이 아니다. 이미 오래전에 미디어 타입 이라는 이름으로 선을 보인적이 있다. 미디어 타입은 미디어 종류만 감지하기때문에 세부적인 사항은 감지할 수 없었다. css3 가 등장하면서 미디어 타입이 미디어 쿼리라고 바뀌면서 기기 의 종류뿐 아니라 해상도, 비트수, 가로, 세로 여부등 세세한 부분까지 감지할 수 있는 기술이 탑재 되었다. 3 미디어 쿼리의 기본문법 [only 또는 not] @media [미디어유형] [and 또는 ,콤마] [조건문] {실행문} and 는 앞뒤 조건이 모두 사실일때 뒤에 따라오는 것을 해석하라는 의미입니다. ,콤마는 앞뒤 조건 중 하나만 사실이어도 뒤에 따라오는 것을 해석하라는 의미입니다...

반응형 웹 만들기반응형 웹 만들기 반응형 웹에 대한 1차 포스팅에서 반응형 웹이란 어떤것이며 무엇을 위해 만들어 졌는지에 대하여 알아보았다. 그럼 이번시간에는 반응형 웹은 어떻기술들로 만들어 지는지에 대하여 알아보는 시간을 가져보자 크게 반응형 웹을 만드는 기술은 3가지로 분류할 수있다. 1 가변그리드 가변그리드란 웹화면 구현에 있어 px(픽셀) 단위대신 %(비율, 가변)으로 처리하는것을 말한다. 만일 고정된 px 로 화면에 사이즈를 정한 다면. 모바일 화면에서는 화면이 작게 보여질 수 밖에 없고, 이런 문제를 비율로 보여지도록 처리하여 적당한 사이즈로 처리되도록 한다. 1234567891011#wrap {/* width:960px; */ width: 90%;height:500px;margin:0 aut..

반응형 웹 무엇인가? 장점 및 만들기반응형 웹 무엇인가? 장점 및 만들기 반응형 웹이란? 최근에 반응형 웹이란 이야기들을 많이들 한다. 기존에 홈페이지가 있든 새롭게 홈페이지를 만들게 되든 시대에 맞게 홈페이지를 만들어야 한다는 생각을 가지게 되므로 주목받게 되는 웹기술이다. 뭐 특별한건 없다 반응형 웹(Responsive Web) 단어의 뜻에서도 알 수 있듯이 웹이 반응한다는 이야기인데 무었에 반응 을 할까? 바로 브라우저의 창 크기에 반응한다는 말이다. 그럼 이게 왜 필요할까? 2007년 이후 스마트폰 모바일 기기가 세상에 선을 보이면서 모바일의 특성상 화면 사이즈가 PC 와는 다르므로 웹페이지 접속시 화면 사이즈가 모바일 크기로 축서되어 보인다는 점이다. 그래서 등장한 것이 바로 반응형웹이다. 모바..

CSS 외부파일 불러오기CSS 외부파일 불러오기 웹페이지를 작성시 스타일시트의 위치는 Colored by Color Scriptercs 이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^

CSS DIV 속성 positionCSS DIV 속성 position DIV 태그는 division 의 줄임말로 html 문서에서 화면 분할, 레이아웃 등을 잡는 태그로 사용된다. 웹표준에서는 태그대신 태그를 이용하여 작성하게된다. 그렇다고 테그가 웹표준에 어긋나는 것이 아니라 다만 용도에 맞게 제대로 사용되어지도록 처리되어지는 것이라 하겠다. 한번 알아보도록 하자 1 DIV 태그 태그는 한 문단에 CSS(스타일시트)를 적용시키기 위해 사용됩니다. 속성 설명 STYLE CSS 속성을 연속적으로 설정할 수 있으며, 각 속성의 구분은 ; 세미콜론으로 구분한다. 2 position 속성 특정 위치에 배치시키기 위해서 사용되며, html 태그는 상대적인 좌표만 설정 할 수 있지만 position 속성의 abso..

CSS 폰트(Font) 글꼴속성CSS 폰트(Font) 글꼴속성 CSS 중 폰트과 관련된 속성들을 알아보고 사용법을 숙지하도록 해보자. 1 font-family font-family 는 글꼴 종류를 설정하기 위해서 사용됩니다. 사용예) font-family: 굴림체; font-family: 굴림체, 돋움체; 등으로 콤마(,)를 이용하여 글꼴을 연속적으로 설정할 수 있습니다. 왼쪽 글꼴 기준으로 설정되며, 왼쪽 글꼴 이 없으면 그 다음 글꼴이 적용됩니다. 2 color 속성 color 속성은 모든 테그에 사용할 수 있는 속성으로 문자 색을 설정합니다. color 속성은 색상 상수나 색상값을 이용하여 설정할 수 있습니다. 사용예) color: #00FF88; , color: blue 3 font-size 속성..

CSS hover 사용법CSS hover 사용법 CSS 스타일시트 hover 는 해당 객체위에 마우스를 올려놓았을때 변화를 주어 엑티브한 페이지를 구성할때 사용됩니다 사용법은 아래에 예시를 보고 알아보도록 하겠습니다. 1 샘플보기 123456789101112131415161718192021 CSS HOVER TEST .haver { width:250px ; height:250px; }p:hover, h1:hover, a:hover { background-color: black; color: white; text-align:center; line-height:250px;font-size: 150%; }​ CSS HOVER TEST PAGE ! Colored by Color Scriptercs css hov..

CSS margin / paddingCSS margin / padding 웹페이지 작성시 자주사용하는 CSS(스타일시트)중 , , , 등 모든 태그는 네모난 박스 형태로 화면에 표시가 가능합니다. 1 박스 만들기123456789101112131415161718192021222324 CSS 박스테스트 #big_box { width:300px; height:300px; padding: auto; text-align:center; border:1px solid gray; } #box{ width:200px; height:200px; margin: 50px; border:1px solid red; text-align:center; line-height:200px; } CSS 는 쉽다. Colored by Col..