베짱이와 노는 개미

오늘은 내가 만든 웹사이트를 공개할 수 있는 "호스팅" 이라는 개념에 대해서 알아보겠다. 호스팅 과정은 생각보다 간단하지..않다 일단 우리가 만든 웹사이트를 팔아야하는 물건으로 비유해보겠다. 그럼 그 사이트를 방문하는 사용자를 클라이언트라고 하며 그 웹사이트를 파는 가게는 서버가 제공해주는것이다. 물건-웹사이트 손님-클라이언트 가게-호스트(서버) 이런 관계가 되는것이다. 이 비유를 가지고 웹사이트와 호스트의 개념에 적용해보자면 1) 클라이언트가 원하는 정보(쇼핑, 유튜브 등등)를 얻기위해 특정 주소로 찾아간다 2) 클라이언트가 원하는 정보를 요청한다 3) 서버는 그 요청이 유효한지 확인, 유효하다면 원하는 정보 제공 4) 클라이언트가 원하는 정보를 받는다. 다시말해서 원하는 정보를 요청give -> 정보..

웹 개발은 html, css java script가 담당한다 그중 html과 css 는 각각 뼈대와 디자인을 담당하는것이고 java script는 영혼을 불어넣는 역할 , 동적인 효과를 넣는 역할을 한다. 자바 스크립트는 매우 다양하게 활용되고있다. 프레임워크도 들어봤을법한 vue.js, node.js등등 많다. 자바 스크립트를 추가해보는것부터 배워보겠다. 자바스크립트 코드는 html파일에서 body태그 최하단에 추가해줘야한다. 이때 추가하는 태그는 script태그이다. 다시말해서 html파일에서 head태그가 아닌 body태그가 끝나기 직전에 script태그를 추가해서 자바스크립트를 적용할수있다. 저번 포스팅에서 외부 라이브러리를 이용하여 아이콘을 만든 그 버튼에 자바스크립트를 적용해서 동적 효과를 넣..

라이브러리란 많이 쓰이는 코드, 프로그램등을 미리 작성해놓은것을 의미한다. 라이브러리가 공개된것이라면 우리는 편하게 가져다 쓸수있는것이다.(매우 편리하고 좋은 존재) 웹개발중에서도 디자인과 관련된 퍼블리싱에 가까운 분야에서 많이 사용되는 라이브러리의 대표적인 예로는 font-awesome과 bootstrap등이 있다. 그럼 이제 라이브러리를 적용해보겠다고 치자 그러면 알아야하는 개념이 CDN이다. CDN이란 Content Delivery Network의 약자로서 컨텐츠를 전송해주는 서버 집단을 의미한다. CDN주소만 있다면 html, css, javascript파일, 이미지, 동영상과 같은 컨텐츠들을 우리가 개발하는 프로젝트로 가져올수 있다. 예를들어 font-awesome이라는 라이브러리를 적용할것이다..

오늘은 스크롤뷰에 대해서 알아보겠다. 스크롤 역시 css파일에서 속성으로 설정해줘야한다. 이떄 필요한 속성은 overflow속성이다. 스크롤뷰가 언제 필요한지 생각을 해보면 내용을 담는 컨테이너의 크기보다 내용물의 크기가 더 클때 필요하다는것을 상식적으로 생각할 수 있다.(overflow라는 뜻도 넘쳐서 흐른다 이런뜻으로 유추 가능) 여기서 스크롤뷰가 적용되기 위한 중요한 조건이 생긴다. 바로 내용물의 크기가 정해져있어야한다는 것이다. ##overflow의 속성값은 4가지가 있다. visible / hidden / auto / scroll 참고)overflow라는 속성은 overflow-x와 overflow-y라는 속성을 합친것이다. visible부터 하나씩 보자 1. overflow: visible; ..

오늘은 레이아웃을 완성해보는 시간이다. 지금까지 배운 속성들 에다가 오늘 새롭게 배울 개념(1. 선택자 조건 걸기 2.속성선택자)를 추가해서 미니홈피 홈 레이아웃을 완성해보겠다. 앞서 선택자라는 개념을 배웠다. 선택자는 css속성을 적용할 대상이라고 했다. 그 종류로는 HTML태그, class, id 등이 있다고 했다. 오늘은 이 선택자들끼리 조건을 걸고, 하위항목으로 설정하는 방식에 대해서 설명해보겟다. 조건을 건다는것이 무슨말인가 간단하게 예를들자면 name이라는 클래스 안에 있는 a태그에만 css속성을 적용해줘라 라는 조건을 의미한다. name이라는 클래스를 css파일에 저장했다면 모든 name이라는 클래스에 적용이 되지만 위와같은 조건을 건다면 그 클래스안에 a태그에만 적용이 되는것이다. 별거없다..

★데이터 조작어 DML SELECT-검색 SELECT(DISTINCT) 칼럼명(ALIAS) FROM 테이블명; //DISTINCT=중복되는건 제외 ALIAS=칼럼의 별칭,다른이름설정(괄호는 없음) "칼럼명 별칭" 는 "칼럼명 as 별칭" 과 같음 1)키워드 IN(A,B): A또는 B 2)와일드카드 %:문자열 1개이상 (EX)%A->끝자리문자가 A) _:문자열 1개 (EX)_A%->두번쨰 문자가 A) 3)함수 UCASE, UPPER:대문자로 바꾸기 LCASE, LOWER:소문자로 바꾸기 SUBSTRING: 문자열 추출 (EX)SUBSTRING('happy',3,2) -> happy라는 문자열에서 3번째문자부터 2개 뺴내기 -> pp LPAD, RPAD: 빈자리 채우기 (EX)LPAD('HI',5,'?') ..

-cmd로 mysql실행 mysql -uroot -p 패스워드입력(초기 DBMS설치시 설정했던 비밀번호) -데이터베이스 생성 create database DB이름; -데이터베이스 사용자 생성 + 권한주기 부여 grant all privileges on db이름.* to 계정이름@'%' identified by＇암호’; //모든 클라이언트에게 접근가능(%) grant all privileges on db이름.* to 계정이름@'localhost' identified by＇암호’; //해당 호스트만 접근가능 flush privileges; //권한을 주는 명령 이때 암호는 DBMS암호와 다름(설정자체가 다름) ->해당과정은 새로 생성한 db를 다루기 위해서는 필수적인 과정이다 내가 그 db를 다룰수있게끔 권..

flex 역시 일단은 display의 속성값이다. display:flex 처럼 쓰일수 있는것이다. dispaly: block, inline, inline-block만으로는 복잡한 화면 레이아웃을 구성하기에는 역부족이다. 그래서 요즘 새로 나온 기술이 바로 dispaly: flex이다. flex에 대해서 설명하기 전에 컨테이너와 아이템의 관계를 알아야 한다. 화면을 구성하는 것은 레이아웃을 배치하는것과 같은데 화면을 특성에 맞는 모양에 맞게 틀을 끼우는 과정이라고 생각하면 된다. 이때 레이아웃끼리는 상화좌우에 위치할수도 있고 하나의 레이아웃이 다른 레이아웃을 포함할수도 있고 그 위치관계는 다양하다. 바깥에 있는 레이아웃을 컨테이너라고 하고 그 안에 포함된 레이아웃을 아이템이라고 이해하면 될것같다. 물론 아..

오늘부터 드디어 미니홈피 프로젝트를 시작해보겠다. 일단 지금까지 배운 css파일 작성법, position속성 사용법 등을 활용하여 기본 레이아웃먼저 배치해보겠다. 복습하는 방식으로 글을 써보겠다. 이번 포스팅에서는 결과물 먼저 보여주는게 좋을것같다. 이렇게 만들것이다. 거창하게 시작했는데 단촐해 보인다... 자일단 배경에 보이는 체크무늬먼저 이미지 파일로 저장해줘야겟지 아무거나 이미지파일을 저장한후에 static폴더 생성하고 그안에 images 폴더 만들고 그 안에 체크무늬 이미지를 넣어둔다 이렇게 폴더를 만들어주면 되는것이다. 그리고 복습하나!! 외부 css파일로 적용하는 방법에서 제일 중요한것은 html파일에서태그에 css파일의 경로를 추가해줘야한다는점이다. 다시말해서 이 코드를 꼭 명시해줘야한다. ..

오늘은 본격적으로 position속성에 대해서 알아보겠다. position속성이란 무엇인가? 웹사이트를 꾸미는 요소들(태그)의 위치를 결정할때, 다시말해서 화면 레이아웃을 만들때 사용되는 속성 이다. 예를들어 유튜브에서 영상을 보다가 댓글을 읽기위해서 스크롤을 내린다고 할때 화면 맨위에있는 검색창은 그대로 위에 고정되어있다. 이런것이 바로 포지션속성으로 설정해준것이다. 포지션속성에는 5가지가 있다. (static, relative, absolute, fixed, sticky) 하나씩 알아보자 (#알고 넘어가야할것!! 포지션은 태그가 아니라 태그에 들어가는 속성이라는것!!) 1. static static값은 모든 태그의 기본 포지션 속성이다. 다시말해서 position값을 따로 설정해주지 않았을때의 디폴트..

오늘은 div태그와 span태그의 차이점을 먼저 알아보자 일단 비쥬얼스튜디오코드에서 div태그와 span태그를 아무거나 찍어보자 DIV 1개 DIV 2개 DIV 3개 SPAN 1개 SPAN 2개 SPAN 3개 헤딩1 a태그 p태그 그리고 크롬을 실행시켜서 결과를 보면 간단히 나오겠죠? 그러면 크롬창 오른쪽 위에 보면 점3개 옵션 버튼이 보인다. 눌러서 -를 눌러보자 그러면 해당 페이지의 html코드를 볼수있다 div태그와 span태그의 차이점을 보기위해서 이방법이 제일좋다(html공부할때 매우 좋은 방법이다) 오른쪽 코드에서 원하는 부분에 마우스를 갖다대면 해당 부분이 왼쪽 크롬창에 색칠되면서 그밑에 태그에 대한 디자인(스타일) 설명을 볼수있다. 위 사진을 보면 "DIV 3개" 텍스트에 해당하는 부분에 ..

오늘은 웹페이지를 좀더 다채롭게 꾸미기 위한 웹폰트에 대해서 알아보겠다. 웹폰트는 워드나 파워포인트와 같은 프로그램에서의 기능과 달리 폰트 설치없이 사용할수 있다는 장점이 있다. 물론 제공되는 폰트를 사용하기위해서는 https://fonts.google.com/ 에서 활용해야한다. 사용하고싶은 글씨체를 클릭한후 오른쪽 탭에 Use on the web을 보자 Use on the web을 보면 link인지 import인지 선택하는것이 나온다. link를 선택하든 import를 선택하든 그 밑에 있는 코드를 추가해주면 되는것이다 1)link를 선택한경우 html 파일 내 head 태그 안에 표시된 부분을 복사하여 붙여넣는다 2)import를 선택한 경우 2-1)css파일이 html 내부에 있다면 태그안에 넣어..