Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

2018/07 16

CSS의 선택자_세번째 | 속성선택자_가상클래스

안녕하세요 웹아이 입니다.!! CSS의 선택자 중에 가상클래스에 대해서 알아보겠습니다. 가상클래스는 '슈도클래스'라고도 합니다.웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 지정하여 사용하는 것을 말합니다. :link 선택자문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용할 때 사용합니다.텍스트 링크는 기본으로 파란색 글씨와 밑줄로 표시되는데, 링크의 밑줄을 없애거나 글자의 색상을 바꿀 때 사용합니다. a:link { color:black; text-decoration:none; } A 태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 검은색으로 적용합니다. :visited 선택자문서 안의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용할 때 사용합니다..

Web/CSS 2018.07.21

PHP 등급 출력 도와주세요! | 다중 if문을 이용한 등급 출력!

Q.0-100 사이 점수를 하나 입력받는 변수를 설정하고 입력된 값이 조건에 해당하면 등급을 출력다중 if문 사용 등급과 점수 함께 출력 하다가 잘 안되서ㅠ 도와주세요. A.해당 문제는 다중 if문으로 해결 가능합니다.^^ 다중 if문은 if(조건1){ 조건1 True }else if(조건2){ 조건2 True }else if(조건3){ 조건3 True }else{ 모든 조건 False } 위와 같은 방식으로 사용하실 수 있습니다.갯수는 상관없이 필요한 만큼 늘리실 수 있습니다. 맨 위의 조건부터 체크를 해서 조건이 맞는 곳에서 실행을 하고 뒤의 조건문은 무시가 된 채로 멈추게 됩니다. 예를 들어 if($a > 95){ 조건1 실행 }else if($a > 80){ 조건2 실행 }else if($a > ..

Kin 2018.07.16

CSS의 선택자_두번째 | 속성선택자

안녕하세요 웹아이입니다. 속성선택자태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다. [속성] 형식지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중 href라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다. [속성 = 값] 형식주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다. 선택자 속성 선택자 가상클래스 선택자 선택자· 속성 선택자· 가상클래스 선택자 A 태그 중에서 target=“_blank”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다. [속성 ~= 값] 형식[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일..

Web/CSS 2018.07.16

PHP 출력 도와주세요! | For문 중첩을 이용한 줄바꿈

Q.저렇게 일자로 나오는 출력을 밑에 사진처럼 줄바꿈 해서 나오게 도와주세요 A.안녕하세요. 웹아이입니다.저 문제를 해결하기 위해서 공통되는 조건을 찾아야 합니다.0-0, 0-1, 0-2...이렇게 출력이 되고 있고앞에 숫자가 $i변수이고 뒤에 숫자가 $j 변수 입니다.출력되야 하는 정답을 보면 뒤에 숫자가 5일때 한줄 내려서 처리 하라는 조건을 알 수 있습니다.뒤에 숫자는 $j 변수에 담겨져 있고 한줄 내려서 엔터 처리하는건 태그 입니다.그리고 해당 조건을 처리할 수 있게 해주는게 if문 입니다. if(조건){ 조건이 맞을 때 실행 }else{ 조건이 틀릴 때 실행 } 이러한 것들을 조합해서 수정을 해본다면... 저렇게 if문을 중간에 추가 해줌으로써 해결 할 수 있을것 같습니다.^^

Kin 2018.07.14

CSS의 선택자_첫번째 | 태그를 선택해서 CSS 입히기

안녕하세요 웹아이입니다. CSS의 선택자(Selector)선택자 { 속성:값 } h2 { color:red; } 여기서 선택자는 h2가 되겠죠속성이 어디에 적용되는지 표시한다고 해서 '선택자'라고 합니다.!! 전체 선택자 (Universal Selector)모든 요소에 스타일을 적용할 때 전체선택자를 사용합니다.별표(*)를 사용합니다. * { margin:0; padding:0; } 태그 선택자 (Tag Selector)특정 태그에 스타일을 적용할 때 사용합니다. p { font-size:12px; font-family:"돋움"; } P 태그 내부에 있는 텍스트에글꼴 사이즈를 12px, 글꼴 모양을 돋움으로 적용하라는 의미 입니다. 클래스 선택자 (Class Selector)특정부분에 스타일을 적용할 때..

Web/CSS 2018.07.14

그누보드만 설치해도 홈페이지가 생긴다?? | WAMP 로컬서버에 그누보드 설치하기

거인의 어깨를 통해 한단계 빠르고 쉽게 목표를 달성하는건 현명 한다고 합니다. 홈페이지 만들때 항상 들어가야하는 회원관리, 게시판 등 매번 만들 필요 없잖아요?? window 컴퓨터에 설치된 WAMP에 그누보드 설치하는 방법을 준비했습니다.^^ 아직 동영상 제작도 그렇고 설명하는 것도 초보 입니다.^^ 그래도 최대한 쉽게 설명하고자 많은 노력중이니 이해해주셔요!~~~ 댓글로 알고 싶으신 코딩이나 개발 팁이 있으시면 남겨주세요!! 다음 동영상 제작시 참고하도록 할께요!~~~

Web/PHP 2018.07.12

CSS의 기초_세번째(CSS 적용 우선순위)

안녕하세요!웹아이 입니다~ 스타일의 적용 우선순위에 대해서 알아보겠습니다.스타일의 우선순위는단계적으로 우선순위가 정해집니다. 예를 들면 스타일은 단계적으로 적용됩니다. 이렇게 하면,p태그의 글자는 blue 색상으로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 나중에 쓴 스타일이 적용되는거죠! 하지만 예외가 있습니다.!important이걸 써주게 되면 상황이 바뀝니다. !important 를 써준 스타일이 우선 적용 됩니다. 스타일은 단계적으로 적용됩니다. 이렇게 작성해주면,p태그의 글자는 red가 우선순위로 적용이 됩니다. 스타일은 단계적으로 적용됩니다. 그리고 !important 보다도 우선순위로 적용할수 있는방법이 있습니다.그건..바로 스타일은 단계적으로 적용됩니다. 태그 안에 직접 넣어주는 것이..

Web/CSS 2018.07.11

[무료이미지] 해외 무료이미지 다운 사이트 16개

안녕하세요웹아이_디헤 입니다:D 매번 클라이언트마다 요구하는 이미지는 많은데..살수도 없고...그릴수도 없고......너무 스트레스를 많이 받아왔어요 구글이미지도 많이 썼지만고퀄이 아닌게 많죠...해외사이트들은 고퀄 무료 이미지가 많더라구요! 이미지 누르시면 이동됩니당:) pixabay flickr Unsplash All-free-download freedigitalphotos GRATISOGRAPHY everystockphoto LibreStock StockSanp freerange NegativeSpace freenaturestock THE STOCKS PEXELS sockvault Stencil

Web/Design 2018.07.09

CSS의 기초_두번째 (CSS 어디에 쓰지?)

안녕하세요.웹아이입니다 :D 스타일의 기본형태선택자 {속성:값} p {color:blue;} 여기서 보면p가 선택자(selector) / color가 속성(attribute) / blue가 속성값(value)이 되는것입니다.쉽게 말해 p를 선택해서 color속성에 blue값을 줘라!! 가 되는거에요 한가지 선택자에 여러가지 속성을 적용할 경우, h2 { font-size:20px; color:purple; } 위와 같이세미콜론(;)으로 구분하여 나열하면 되요~ 그러면 스타일정보를 어디에 기록해두나요?스타일은 내부스타일시트와 외부스타일시트로 사용할 수 있습니다.(물론 지난 시간에 말씀드렸듯이 태그 안에 직접 사용도 가능하지만 권장하지 않습니다. ) 내부스타일시트문서안에서 head안에 써 넣는 것입니다. (..

Web/CSS 2018.07.06

php 문서내의 자바스크립트 코드를 해석 부탁드림니다.

Q. 1. ploginframe ID(아이디)를 가진 엘리먼트를 보여준다?? 2. window.frames["ploginframe"].location = "plogin.php";는 window.location.href = "plogin.php"; 와 무었이 다르고 사이에 프레임을 넣은 읨는 무었인지?3. document.getElementById("ploginframe").reload(true);는 새로고침인데 history가 남지 않아서 뒤로가기를 할수 없다?? 여기저기 찾아봐서 의미는 대충 알겠는데 정확한 뜻을 알고 싶습니다. A.1. ploginframe ID(아이디)를 가진 엘리먼트를 보여준다?? - ploginframe ID를 가진 앨리먼트를 화면상에 보여줍니다. 예를 들면 레이어 팝업을 예를 ..

Kin 2018.07.06