그누보드를 설치 할 때 아래의 과정을 거쳐야한다.




그리고 가끔 이런 문구를 만날 수 있다.



Warning: mysqli_connect(): (HY000/1045): Access denied for user '(아이디)'@'localhost' (using password: YES) in (경로)/lib/common.lib.php on line 1435

Connect Error: Access denied for user '(아이디)'@'localhost' (using password: YES) 


mysqli_connect(): (28000/1045) 이든 mysqli_connect(): (HY000/1045) 이든 대부분의 경우 DB의 아이디와 비밀번호가 틀렸을 때 이 페이지를 볼 수 있다.


직접 서버를 만들었다면 DB 아이디를 다시 한번 확인해줘야 하며 웹호스팅의 경우에는 호스팅한 업체(사이트)에서 다시 한번 확인해야한다.


(닷홈)


이처럼 호스팅 업체에서 사이트의 DB정보를 볼 수 있다.


간혹 웹호스팅을 신청하고 생성할 때 DB 설치를 하지 않는 곳도 있는데 이런 경우에는 DB를 새로 만들어 줘야한다.


(호스팅어)


+ 가비아(Gabia)를 사용할 경우 조금 다르다.



이처럼 host 와 DB 앞에 db를 추가해줘야 한다. 


ex)

Host : db.abc.com

User : aaa

Password : pass123

DB : dbaaa




과거에는 PC로만 인터넷에 접속했기 때문에 웹 사이트 디자인을 할 때 PC의 모니터를 기준으로 했다면 요즘은 PC, 테블릿, 스마트폰 등 다양한 기기들의 출현으로 글씨가 작게 보이는 등의 문제가 발생했다. 그런 이유로 PC버전과 모바일버전의 웹사이트를 따로 제작하게 되면 비용, 시간, 인력이 모두 2배로 들기 때문에 비효율적이다. 그리고 드디어 반응형 웹이라는 기술이 등장했다.


반응형 웹이라는 것은 다양한 기기, 환경마다 최적화된 웹사이트를 제공하는 것을 말한다.





반응형 웹의 장점


1. 유지보수가 간편하다.

- 모바일 버전과 데스크톱 버전을 따로 만들 경우 새로운 내용을 추가하거나 수정할 때 개별적으로 수정하는 반면 반응형 웹에선 한번에 할 수 있다.


2. 모바일 점유율의 증가.

- 모바일로 인터넷에 접속하는 사람들을 위한 모바일화면에 최적화된 화면을 구성할 수 있다.


3. 마케팅에 유리하다.

- 각 기기들에 최적화된 화면을 제공함으로써 웹 사이트에서 보여주고자 하는 내용을 잘 전달할 수 있다.


4. 검색 엔진 최적화가 가능하다.

- 검색 엔진 최적화(SEO, Search Engine Optimize)란, 포털 사이트나 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말하는데 데스크톱 전용 웹사이트와 모바일 전용 웹사이트 등으로 사이트가 나눠지면 주소 또한 나눠지게 되고 이런 경우, 검색엔진이 검색 결과를 나타냄에 있어서 불리함을 가진다. 반면에 반응형 웹을 이용하여 웹 사이트를 만들면 하나의 주소만을 사용하게 되어 검색 결과 노출에 유리함을 가지게 된다.


5. 미래 지향적 기술이다.

- 미래에는 테블릿, 스마트폰뿐만 아니라 TV, 냉장고, 내비게이션 등 더 다양한 기기들로 웹 사이트를 접속할 수 있게 될 것이다. 그렇기 때문에 다양한 화면에 최적화가 가능한 반응형 웹 기술이 필수적이다.



반응형 웹의 단점


1. 기획력과 디자인의 어려움

- 기기, 환경마다 최적화된 구조를 설계해야 하기 때문에 제작함에 있어서 조금 더 어렵다.


2. 높은 비용

- PC만 지원하는 웹 사이트 제작보다 더 많은 비용이 발생하며 유지 보수 비용 또한 높다.




반응형 웹을 만들기 위해서는 미디어 쿼리가 필요하다. 


미디어 쿼리는 CSS3부터 지원되는 기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용시켜 주며 이를 이용하여 화면 크기가 달라질 때 스타일을 바꿀 수 있고 반응형 웹을 만들 수 있다.





html, css, js 파일 등 웹 서버에 파일을 올렸는데 적용이 안된 경험을 한 적이 있는가?


이런 경우에 패치된 내용을 확인할 수도 없고 원인을 모른다면 정말 답답한 상황이 찾아온다.


이러한 현상이 일어나는 이유는 방문한 페이지를 다시 접속할 때 더 빠르게 보여주기 위해서 웹 브라우저에서 웹 캐시(문서, 그림, 파일 등)를 저장하기 때문이다.


이러한 기능 덕분에 우리는 더 빠른 페이지 로딩이 가능하지만 때로는 오래된 정보를 보여주는 경우가 생기기도 한다.


앞서 말한 새로운 파일이 적용이 안된 이유도 이것 때문이다.


그래서 우리는 웹 브라우저에서 캐시를 무시하거나 지우는 방법에 대해 알아야 한다.


OS와 브라우저에 맞는 방법을 찾아 여러 가지 방법들을 해보면 좋을 것 같다.


[캐시 무시하기]


1. 인터넷 익스플로러


Ctrl + F5(새로 고침)


2_1. 구글 크롬(window)


Ctrl + F5(새로 고침)


Shift + F5(새로 고침)


2_2. 구글 크롬(mac)


Cmd + Shift + R


2_3. 리눅스


Ctrl + F5


3_1. 사파리(버전 4 이상)


Shift + 새로 고침


3_2. 사파리(버전 3 이하)


Cmd +  R


4. 오페라


Ctrl + F5(새로 고침)


Shift + F5(새로 고침)


5. 캉커러


F5(새로 고침)


[캐시 지우기 & 설정 끄기]


1. 인터넷 익스플로러


* 캐시 지우기


1. Ctrl + Shift + Del

2. '임시 인터넷 파일 및 웹 사이트' 체크

3. '삭제' 버튼


* 캐시 설정 바꾸기


도구 -> 인터넷 옵션 -> 검색 기록 -> 설정 -> 캐시 및 데이터베이스 ->'웹 사이트 및 데이터베이스 허용' 에서 변경


2. 구글 크롬


* 캐시 지우기


1. Ctrl + Shitf + Del

2. '다음 항목 삭제' 옆 목록에서 '전체' 선택

3. '캐시 삭제' -> '인터넷 사용정보 삭제'


3. 파이어폭스


* 캐시 지우기


1. Ctrl + Shift + Del

2. '삭제할 기간' -> '전체' 선택

3. '캐시' 선택 -> '지금 삭제' 클릭


* 캐시 설정 바꾸기


설정 -> 고급 -> 네트워크 -> '자동 캐시 크기 관리' 체크 후 '제한 용량' 값 '0' 으로 변경


위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.


CSS Cascading Style Sheet 의 줄임말이다.


html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 ''에 해당한다.


그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.


비유하자면 물고기의 ''에 해당한다.


CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.

  • 목록1
  • 목록2
  • 목록3
위의 목록은 <ul> 태그와 <li>  태그를 이용해서 만든 것이다. 이것에 css 효과를 주면

  • 목록1
  • 목록2
  • 목록3


이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.



HTML


위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.


이것을 css 로 한다면


CSS


이며 소스는 아래와 같다.


<style>

.cssfont{color:red;}

</style>


<p class="cssfont">CSS</p>


이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.


다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.


html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.


CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.


html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)


<html>

<head>

<style></style>

</head>

<body>

</body>

</html>


또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)


<html>

<head>

<link href="외부 css 파일 경로" rel="stylesheet" type="text/css">

</head>

<body>

</body>

</html>


그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때 <!-- 주석 --> 이랫다면 

css에서는 /* 주석 */ 를 사용한다.


css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.


p{

color:red;

}


위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.


선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다. 


간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.

HTML 이란?


Hyper Text Markup Language

 : World Wide Web(www)을 위한 마크업 언어이며, 

제목이나 문단, 표, 꼬리글 및 기타 요소를 이용하여 콘텐츠의 구조를 정의함으로써 웹 문서를 만드는 기능을 제공한다.


(*.txt), (*.jpg) 파일 이름 끝에서 많이 봤을 것이다.


컴퓨터에서 쓰는 모든 파일에는 각각 고유의 형식이 있다. 


웹에도 *.html(또는 *.him) 이라는 형식이 존재하고 형식에 맞게 문서를 저장해야 한다.


HTML 로 작성된 웹 문서를 사용자에게 보여주는 프로그램이 웹 브라우저이다. ex) explorer, firefox, chrome




HTML의 역사


 1989년

   팀 버너스 리가 HTML 개념을 만듦 

 1994년

   W3C 발족 

 1995년

   HTML2 제안

 1997년

   HTML3.2, HTML4 제안

 1998년

   웹 표준 프로젝트 시작

 2000년

   XHTML1 제안

 2004년

   WHATWAG 발족

 2007년

   W3C에 HHTML 워킹그룹 발족 

 2008년

   HTML5 첫 드래프트 발표

 2009년

   W3C, XHTML2 워킹그룹 

 2014년

   HTML5 최종 표준안 발표


'Web development > HTML & CSS' 카테고리의 다른 글

CSS 초기화 파일(초기화 코드)  (0) 2017.07.15
HTML 기본 구조(기본 틀, 초기설정, 세팅)  (0) 2017.07.15
UTF-8 과 EUC-kr  (0) 2017.07.14
HTML 태그 요약  (0) 2017.07.14
HTML 문서 구조  (0) 2017.07.13

+ Recent posts