[기초]PHP개발자라면 알아야 할 웹페이지의 구성

2021. 3. 26. 09:55

우리가 흔히 사용하는 여러가지 웹사이트(웹페이지)들은 공통적인 구성을 가지고 있다. 대부분의 웹페이지는 html로만 구성돼 있지 않다. 대부분 아래와 같이 구성돼 있다.

1. html

2. CSS

3. javascript

4. jquery

5. PHP같은 서버프로그래밍

물론 이렇지 않은 사이트도 있겠지만 많은 사이트들이 이렇게 구성돼 있다.

대표적인 PHP사이트를 하나 확인해보자.

www.ppomppu.co.kr/

뽐뿌

사람이 좋아 함께하는 곳... 뽐뿌! 쇼핑특가, 휴대폰 정보의 중심지

www.ppomppu.co.kr

위사이트는 뽐뿌라는 사이트다. PHP로 개발한 사이트이며 우리나라에서 일일 접속자수로 방귀 좀 뀌는 사이트다.

이 사이트의 홈에서 소스보기를 해 보자. 엄청나게 소스가 길기 때문에 이곳에 다 보여줄 수는 없지만 대충 아래와 같은 소스들이 나타난다.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

맨 첫부분이다. 헤더라고도 한다. meta tag들이 보인다. meta태그는 검색시 중요한 포인트가 된다.

<!--[if IE]>

<![endif]-->

그 다음은 CSS를 적용해놓았다. 가져다 사용할 CSS를 링크로 대신했다. 저 링크를 복사해서 브라우저에서 접속해보면 CSS내용을 확인할 수 있다.

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-1778193-1', {'cookieDomain': 'ppomppu.co.kr'});

ga('require', 'linkid', 'linkid.js');

ga('send', 'pageview');

</script>

그 다음은 javascript에 대해 선언했다. jquery를 사용하기 위한 jquery링크가 보인다. 그외에 여러 js파일을 적용한 것을 알 수 있다. 이 파일들 또한 주소를 복사해서 브라우저에서 접속해 보면 내용을 볼 수 있다.

맨아래에 구글 애널리틱스를 위한 스크립트 코드가 보인다.

</ul>

<li><a href="http://www.ppomppu.co.kr/zboard/zboard.php?id=ppomppu">뽐뿌게시판 </a></li>

<li><a href="http://www.ppomppu.co.kr/zboard/zboard.php?id=event2">이벤트게시판 </a></li>

<li><a href="http://www.ppomppu.co.kr/zboard/zboard.php?id=buy">구매게시판 </a></li>

<li><a href="http://www.ppomppu.co.kr/zboard/zboard.php?id=freeboard">자유게시판 </a></li>

<li><a href="http://www.ppomppu.co.kr/zboard/zboard.php?id=free_gallery">자유갤러리 </a></li>

<li><a href="http://www.ppomppu.co.kr/market_bbs.php">장터최신글</a></li>

</ul>

</div>

</div>

</div>

</div>

<!--

그리고 본문이 나타난다. body라고도 한다. 대표적인 div나 ul, li등이 보인다.

자 이제 소스의 마지막 부분을 보면 아래와같은 소스가 있다.

//-------------------------------------------------------------------

// gif 다운로드 보기 시작

//-------------------------------------------------------------------

function jfnGifLayerPopupView(imgurl, w, h)

{

var img_w = w;

var img_h = h;

if( $(document).width() < w - 20 )

{

img_w = $(document).width() - 20;

img_h = Math.round((h) * (img_w/w));

}

w = img_w; h = img_h;

$('#gif_down_layer_box').css({width:w, height:h});

$('#gif_download_img').css({width:w, height:h});

$("#gif_download_img").attr("src", imgurl);

jfnGifLayerPopupShow(w,h);

}

function jfnGifLayerPopupShow(w,h){

var $el = $('#gif_down_layer'); //레이어의 id를 $el 변수에 저장

var isgif_dim = $el.prev().hasClass('gif_dimBg'); //gif_dimmed 레이어를 감지하기 위한 boolean 변수

// if( $(document).width() < w - 20) w = $(document).width() - 70;

$('#gif_down_layer_box').css('width', w+'px');

$('#gif_down_layer_box').css('height', h);

isgif_dim ? $('.gif_down-layer').fadeIn() : $el.fadeIn();

var $elWidth = ~~($el.outerWidth()),

$elHeight = ~~($el.outerHeight()),

docWidth = $(document).width(),

docHeight = $(document).height();

// 화면의 중앙에 레이어를 띄운다.

if ($elHeight < docHeight || $elWidth < docWidth) {

$el.css({

marginTop: -$elHeight/2,

marginLeft: -$elWidth/2

})

} else {

$el.css({top: 0, left: 0});

}

function jfnGifLayerClose()

{

$('.gif_down-layer').fadeOut();

setTimeout(function(){

$("#gif_download_img").attr("src", "//cdn.ppomppu.co.kr/images/lazyloading.jpg");

}, 400);

return false;

}

//-------------------------------------------------------------------

// gif 다운로드 보기 종료

//-------------------------------------------------------------------

</script>

이것도 스크립트인데 위에서 본것처럼 파일로 불러온것이 아니고 이렇게 직접 소스에 입력해 놓은것이다.

이렇게 일반인들은 관심을 두지 않을 페이지 소스를 확인해봤다. 개발자는 자주 보아야하는 부분이니 앞으로 자주 보게 될 것이다.

그런데 위에서 언급한 것중에 PHP부분은 확인할 수 없었다. 그걸 눈치챘다면 너는 개발자가 될 자격이 있다. 물론 눈치 못 챘다고해서 실망할 필요는 없다.

PHP는 소스보기를 통해서 볼 수 없다. PHP뿐만아니고 서버사이드스크립트는 모두 사용자가 보는 사용자 화면(브라우저)에서는 보이지 않는다.

위에서 보이는 것들은 대부분 프론트엔드스크립트라고 보면 된다. 좀더 복잡한것은 차차 공부하도록 하자.

'PHP강좌 > 기초강좌' 카테고리의 다른 글

리눅스(UBUNTU 우분투)에 APM설치(Apache+PHP+Mysql) (0)	2021.03.27
[기초]PHP 개발자라면 알아야 할 웹서버의 구성 (0)	2021.03.26
[기초]PHP의 변수, 상수, HTML (0)	2021.03.26
[기초]PHP 개발자를 위한 bootstrap의 활용 (0)	2021.03.26
[기초]PHP 개발자라면 알아야할 인터넷 상식 (0)	2021.03.26

아빠는개발자

[기초]PHP개발자라면 알아야 할 웹페이지의 구성

'PHP강좌 > 기초강좌' 카테고리의 다른 글

+ Recent posts

티스토리툴바