webikr
webikr
웹아이
11 posts
웹아이와 함께 쉽게하는 웹공부~
Don't wanna be here? Send us removal request.
webikr · 7 years ago
Text
PHP 등급 출력 도와주세요! | 다중 if문을 이용한 등급 출력!
Tumblr media
Q.
0-100 사이 점수를 하나 입력받는 변수를 설정하고 입력된 값이 조건에 해당하면 등급을 출력
다중 if문 사용 등급과 점수 함께 출력 하다가 잘 안되서ㅠ 도와주세요.
답변은 아래 링크에서 확인하실 수 있습니다.^^
http://deveroad.kr/bbs/board.php?bo_table=kin&wr_id=9
0 notes
webikr · 7 years ago
Text
해외 무료이미지 다운 사이트 16개
Tumblr media
매번 클라이언트마다 요구하는 이미지는 많은데..
살수도 없고...그릴수도 없고......
너무 스트레스를 많이 받아왔어요
구글이미지도 많이 썼지만
고퀄이 아닌게 많죠...
해외사이트들은 고퀄 무료 이미지가 많더라구요!
아래 사이트로 가시면 무료 이미지를 받을수 있는 16개 사이트가 소개됩니다.^^
http://deveroad.kr/bbs/board.php?bo_table=study&wr_id=8
0 notes
webikr · 7 years ago
Text
CSS의 기초_세번째(CSS 적용 우선순위)
Tumblr media
스타일의 적용 우선순위에 대해서 알아보겠습니다.
스타일의 우선순위는
단계적으로 우선순위가 정해집니다.
예를 들면
<style>
p { color:red; }
p { color:blue; }
</style>
<p>스타일은 단계적으로 적용됩니다.</p>
이렇게 하면,
p태그의 글자는 blue 색상으로 적용이 됩니다.
스타일은 단계적으로 적용됩니다.
나중에 쓴 스타일이 적용되는거죠!
하지만 예외가 있습니다.
!important
이걸 써주게 되면 상황이 바뀝니다. !important 를 써준 스타일이 우선 적용 됩니다.
<style>
p { color:red !important; }
p { color:blue; }
</style>
<p>스타일은 단계적으로 적용됩니다.</p>
이렇게 작성해주면,
p태그의 글자는 red가 우선순위로 적용이 됩니다.
스타일은 단계적으로 적용됩니다.
그리고 !important 보다도 우선순위로 적용할수 있는방법이 있습니다.
그건..바로
자세한 내용은 여기에서 확인하실 수 있습니다
http://deveroad.kr/bbs/board.php?bo_table=study&wr_id=5
0 notes
webikr · 7 years ago
Text
CSS의 기초_두번째 ( CSS 어디에 쓰지? )
Tumblr media
스타일의 기본형태
선택자 {속성:값}
p {color:blue;}
여기서 보면
p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)
이 되는것입니다.
쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요
한가지 선택자에 여러가지 속성을 적용할 경우,
h2 { font-size:20px; color:purple; } 위와 같이
세미콜론(;)으로 구분하여 나열하면 ��요~
그러면 스타일정보를 어디에 기록해두나요?
스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.
(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. )
더 자세한 정보는 아래 링크를 참고하세요^^
http://deveroad.kr/bbs/board.php?bo_table=study&wr_id=4
0 notes
webikr · 7 years ago
Text
php 문서내의 자바스크립트 코드를 해석 부탁드림니다.
Q.
<script> function plogin(){  $("#ploginframe").show();  $("#ploginframeBtn").show();  $("#ploginframeBack").show();  //PCCframe.location.href = "plogin.php";  window.frames["ploginframe"].location = "plogin.php";  document.getElementById("ploginframe").reload(true); } </script>
1. ploginframe  ID(아이디)를 가진 엘리먼트를 보여준다??     <div id="ploginframe"></div> 2. window.frames["ploginframe"].location = "plogin.php";는     window.location.href = "plogin.php"; 와 무었이 다르고 사이에 프레임을 넣은 읨는 무었인지? 3. document.getElementById("ploginframe").reload(true);는 새로고침인데 history가 남지 않아서     뒤로가기를 할수 없다??
여기저기 찾아봐서 의미는 대충 알겠는데 정확한 뜻을 알고 싶습니다.
A.
1. ploginframe  ID(아이디)를 가진 엘리먼트를 보여준다??     <div id="ploginframe"></div>   - ploginframe ID를 가진 앨리먼트를 화면상에 보여줍니다.     예를 들면 레이어 팝업을 예를 들면 CSS를 display:none 상태로 감추어진 상태에서 저 코드를 실행하면     css가 display:block으로 바뀌면서 화면상에 보이게 됩니다.
2. window.frames["ploginframe"].location = "plogin.php";는     window.location.href = "plogin.php"; 와 무었이 다르고 사이에 프레임을 넣은 읨는 무었인지?   - window.location.href 는 현재 윈도우의 페이지를 이동시키는 것이구요     window.frames['ploginframe'].location 은 ploginframe라는 이름을 가진 frame의 페이지를 이동시키는 것입니다.
3. document.getElementById("ploginframe").reload(true);는 새로고침인데 history가 남지 않아서     뒤로가기를 할수 없다??   - reload()는 페이지를 새로 고침하는 것인데 일반적으로 새로고침하면 캐쉬되어 있는 정보는 바뀌지 않습니다.     하지만 reload(true)는 서버상에서 페이지를 새로 불러오는 것으로 캐쉬를 무시하고 처음부터      강제로 새로 로딩하는 것입니다.
*오늘의 지식인 카테고리는 웹아이가 지식인에 답변한 글을 포스팅 하는 카테고리입니다.
0 notes
webikr · 7 years ago
Text
CSS의 기초_첫번째
안녕하세요
웹아이 입니다.
오늘은 CSS (Cascading Style Sheet)에 대해 간단히 설명해 보겠습니다.
HTML과 CSS??
HTML이 텍스트나 이미지, 표 같은 각 요소를 이용하여 웹 문서에 뼈대를 만드는 것이라고 한다면,
CSS는 텍스트의 색상이나 크기, 이미지 크기나 위치, 표의 색상 등 웹 문서의 디자인 요소를 담당하는 것입니다.
쉽게 말해 웹페이지의 인테리어라고 이해하시면 될것 같네요!~~
CSS는 다음과 같이 태그 안에 넣어서 사용이 가능합니다.
<p style="width=100%"></p>
하지만 저렇게 태그안에 넣지 않고 선택자를 이용해서 사용해주는 경우가 많습니다.
왜 그렇게 사용해야할까요?
1. 웹 문서의 디자인과 내용을 분리할 수 있습니다.
내용을 건드리지 않고 스타일 시트를 이용해 디자인만 변경해서 완전히 다른 느낌의 문서로 만들 수 있습니다.  
2. 다양한 매체에 적합한 문서를 간단히 만들 수 있습니다.
기존의 HTML문서는 개인용 컴퓨터 웹브라우저 화면을 기본으로 하기 때문에 인쇄가 필요한 문서일 경우, 인쇄용 문서를 따로 제공해야하거나 모바일용 홈페이지가 필요한 경우, 따로 문서를 만들어야 했습니다. 하지만 대상기기에 맞게 CSS만 바꿔주면 같은 내용을 여러 매체에서 사용할 수 있습니다 :)
다시 한번 예를 들어보겠습니다.
<p style="width:100%"></p> <p style="width:100%"></p> <p style="width:100%"></p> <p style="width:100%"></p>
위와 같이 p태그가 있습니다. 또 다른 방법으로는
2번. 
<style> p {width:100%;    } </style> <p></p> <p></p> <p></p> <p></p>
위의 두가지 경우에서 p태그 전체를 width를 50%로 바꾸고 싶을때!!
1번과 같은 방법이라면 각 p태그마다 찾아다니면서 색상을 바꿔야 하는데
2번과 같이 스타일을 사용한다면 간단히 수정이 가능하겠요?
지금 예제는 단순히 4개의 p태그만 바꾸면 되겠지만  실제 웹페이지를 만들때는 몇개가 될지는 알수 없어요... 하지만 일일이 찾아서 바꾸는게 힘든건 사실입니다.
오늘은 여기까지 하겠습니다. 궁금하신 점���나 알고 싶은 것이 있으시다면 댓글에 남겨주세요^^
http://deveroad.kr/bbs/board.php?bo_table=study&wr_id=3
0 notes
webikr · 7 years ago
Text
파비콘 만드는 법 | 이미지 파일을 ico 파일로 변환 방법
Tumblr media
안녕하세요
웹아이입니다:D
**파비콘?? **
파비콘이 뭔지도 몰랐던 저... 그런데 이제 파비콘 만드는 법까지 포스팅하는 날이 오네요
파비콘은요
Tumblr media
조기 보이시는거 저겁니다..ㅋㅋㅋ
만드는 방법은 생각보다 아주 간단해요!! 일단 만들고 싶은 이미지를 1616px*로 만들어 줍니다. 저는 포토샵에서 했어요.
Tumblr media
이렇게 16*16px로 새창을 열고 
파비콘 만들 이미지를 그려주거나 불러와줍니다. 저는 고양이 발바닥으로 할거에요
Tumblr media
요런식으로 작은 이미지를 만들어줍니다. 
(참고로 배경 투명하게 해도 가능하답니다.^^)
Tumblr media
웹으로 저장 (Ctrl + Shift + Alt + S) 을 해줍니다. 저는 PNG로 저장했어요.
이렇게 만든 후 ico파일로 변환해주는 사이트에 들어갑니다.
www.convertico.com
Tumblr media
저기 ��그라미 친 부분을 클릭해서 아까 만들어 둔 PNG 파일을 선택하세요~
Tumblr media
바로 변환되는거 보이시죠? 오른쪽에 저렇게 표시가 됩니다. 화살표 버튼을 클릭하면 바로 다운로드가 됩니다. :)
Tumblr media
제대로 변환되었는지 속성을 봤어요. 파일형식이 ico로 잘 변화되었죠? 이렇게 해서 업로드 후에 메타 태그를 추가해주면 끝~~~~ 실제로 적용하는 방법은 다음 포스팅에서 진행할께요^^ 도움이 되었는지 모르겠네요 :P
0 notes
webikr · 7 years ago
Video
youtube
집에서 웹서버 운영 쉽잖아?? | 윈도우 WAMP 설치 방법!!
집에 있는 컴퓨터로 웹서버를 손쉽게 만들 수 있다는 사실을 아시나요??
네 제가 알려드리겠습니다.!! 어렵지 않으니 아래 동영상을 보시면서 따라하시면 되요!~^^ 
설치는 잘 하셨나요? 처음 찍은 동영상이다 보니 부족한 부분이 많이 보입니다.ㅠ 점점 더 좋아 질꺼라 기대하고 있어요... 
알고 싶은게 있으시면 댓글로 남겨주세요. 제가 아는거라면 강좌 만들어 보겠습니다.^^ 감사합니다.~~~
2 notes · View notes
webikr · 7 years ago
Text
PHP 구문이 화면에 그대로 출력될 경우 해결 방법!!
Tumblr media
서버이전을 하거나 PHP를 새로 설치했을 경우
모든걸 마치고 홈페이지로 접속하는 순간.......
PHP 코드들이 똻~~~~~~
멘붕이 오져..ㅎㅎㅎ 저도 가끔 멘붕이 옵니다...
그럴땐 정신을 차리고!!! 빨리 Putty 접속!!!
php.ini 파일을 vi에디터로 열구요~~~
경로는 다를수 있어요..ㅎㅎ 저같은 경우는 /etc/php.ini 랍니다..
파일을 여셨으면 /short_open_tag 라고 쳐서 찾아냅니다....
분명히 short_open_tag = Off 라고 되있으실꺼에요
꼭 그렇게 되어있으셔야하는데.....
이부분을 short_open_tag = On 으로 수정하시면 되요...
이런 문제가 발생하는 이유는.....
<?PHP
요놈입니다.ㅎㅎㅎ 저렇게 안써줘서 인식이 안되는거죠..
short_open_tab <== 이 옵션을 On 해주시면
그냥 <? 요렇게만 써도 됩니다.
http://deveroad.kr/bbs/board.php?bo_table=study&wr_id=1
0 notes
webikr · 7 years ago
Text
mysql에 중복을 방지할 수 있는 데이터 타입이 있나요???
Tumblr media
Q.
INT, DAT, TEXT등등 있잖아요.
저는 회원의 이메일 정보를 입력 받을건데요. 이메일이 중복되는지 확인하고 입력 받기도 하지마, 원래부터 그런 기능이 있는 필드의 데이터 종류가 있는지요...
A.
데이터 종류에는 중복방지 필드 타입은 없습니다.  다만 인덱스 설정하는게 있는데 primary, unique, index, fulltext가 있습니다.
primary : 중복데이터일 경우 입력 안됩니다. 값이 반드시 들어가야 합니다. (not null)
unique : primary와 같은 기능이지만 빈값을 허용합니다. (null)
index : select를 빠르게 하기 위한 색인 기능
fulltext : select시 % 검색과 비슷한 기능으로 단어단위로 검색가능하도록 설정해줍니다.
http://deveroad.kr/bbs/board.php?bo_table=kin&wr_id=3
0 notes
webikr · 7 years ago
Text
랜딩 사이트 디자인 시 작업 사이즈
Tumblr media
Q.
랜딩페이지로 디자인을 하려고 하는데 한 화면에 꽉차게 보여지려면 포토샵에서 작업할 때 가로 사이즈 몇으로 해야 할까요?
A.
이미지 사이즈가 딱히 정해져있거나 하진 않습니다. 하지만 요즘 큰 모니터 해상도가 대부분 1920px이기 때문에 꽉 찬 화면으로 작업할때는 1920px로 작업하는 경우가 많습니다. 그 이상 해상도까지 커버하려고 더 큰 이미지를 사용할 경우 이미지 용량이 커져 로딩하는데 느려질 수 있습니다.
http://deveroad.kr/bbs/board.php?bo_table=kin&wr_id=1
0 notes