TigerCow.Door


안녕하세요. 문범우입니다!


어느덧 날씨가 더워지는 5월!

대학생들에게 5월에 빼놓을 수 없는 행사 중 하나는 대학 축제죠?

그래서 우리 서울시립대학교 멋쟁이사자처럼에서는 축제 안내사이트를 제작해보았습니다.


먼저, 완성된 사이트는 아래 주소를 클릭하시면 됩니다.!


http://uos.likelion.org


웹으로 보시는 분들은 이게뭐지..? 할 수도 있어요 :'(

간단하게 정보를 제공받고, 확인하기 위해 모바일에서 보았을 때 이쁘도록 제작되었기 때문에 모바일로 확인하시는 것을 추천드립니다!






해당 사이트를 개발하면서, 저는 전체적인 기획 및 총괄, 백엔드 구성, 행사화면 제작을 담당하였습니다.

초기에 개발에 참여하고자 인원들을 신청받고, 개발 목표와 의도, 범위 등을 설정하였습니다.

이에 대한 전체적인 내용은 아래, 축제 사이트 개발 github 을 통해 확인하실 수 있습니다 :)


https://github.com/doorBW/UOS_festival


처음에는 어떤 구조로, 어떤 디자인으로 할지 너무나 막막했으나, 우리 멋쟁이 사자처럼 6기들과 함께 이야기하고, 아이디어를 주고 받으며 기초적인 구조를 잡았습니다.

이후 초기 프론트 담당인원들이 세부적인 디자인을 기획하고, 백엔드 담당인원들은 각 페이지 구성을 진행하였습니다.

시간이 지나고 보니 백엔드 분야로 처리할 것이 거의 없어서, 백엔드 인원을 모두 프론트로 참여시켜서 개발을 진행하였습니다.

인원당 하나의 페이지를 만들고, 만들어진 페이지를 백엔드 담당인원이 받아서 전체적으로 연결시키는 등의 방식으로 개발이 진행되었습니다.


사이트 내에서 엄청나게 대단한 기술이나, 효과는 없지만 처음으로 실질적으로 배포되는 서비스 페이지를 개발하는 멋쟁이 사자처럼 6기 인원들에게는 매우 큰 도움이 되었을 것이라고 생각합니다. :)


물론 저도 오랜만에 오랜시간동안 함께 협업함으로써 서로 이야기하고, 아이디어를 나누며 개발하는 일을 하게 되어서 너무나 신나게 작업하였습니다.


개발에 참여한 멋쟁이 사자처럼 6기 모두 수고하셨습니다 :)


- 추가적으로 사이트 자체 또는 사이트 개발에 대한 모든 문의는 댓글을 달아주시거나 공지사항을 통해 저의 개인 이메일 또는 카카오톡을 통해서 연락주세요!


블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요. 문범우입니다.

해당 포스팅은 서울시립대학교 멋쟁이사자처럼, 4월 1일 수업에 대한 내용입니다.


금일 수업에서는 그동안 진행했던 내용을 바탕으로 하나의 웹페이지를 그대로 따라 구현해보는 실습을 진행하였습니다.

따라서 해당 포스팅에 대한 순서는 아래와 같습니다.


- 지난 시간 복습

- 구현해 볼 웹 페이지 소개(HTML/CSS)

- Jquery 구현



1. 복습


지난 시간에는 주로 Jquery에 대해서 알아 보았습니다.

그 동안 html과 css로 구현한 웹 페이지는 정적인 형태였습니다.

이에 추가적으로 배워본 Jquery는 동적인 형태의 페이지를 구현하는데 사용됩니다.

예를 들어 메뉴 버튼에서 마우스를 가져간 항목의 글자가 더 찐해지거나 색상이 바뀌는 것, 무언가를 클릭했을 때 요소의 등장이나 사라짐등의 효과등을 구현합니다.


Jquery는 JavaScript기반의 라이브러리로써 우리가 단순히 JavaScript를 사용하여 동적인 페이지를 구현하는 것보다 더 간편하고 쉽게 동적인 페이지를 구현할 수 있도록 도와줍니다.

Jqeury에 대한 보다 자세한 내용은 지난 포스팅에 대한 내용을 참고하시길 바랍니다.

http://doorbw.tistory.com/119?category=697742



2. 구현해 볼 웹 페이지 소개(HTML/CSS)


이제 여러분들께서 그동안 배우고 공부해본 HTML과 CSS를 이용하여 하나의 페이지를 그대로 구현해 볼 것입니다.

Jquery를 이용해야 하는 부분도 있지만 그러한 것들은 잠시 내려두고 단순히 HTML과 CSS를 그대로 따라해봄으로써 우리가 웹페이지를 만들때 어떤식으로 구조를 잡아야하고 실제로 우리가 배운 속성들에 대해 연습해보는 경험이 될 것입니다.


우리가 보고 그대로 구현해 볼 웹 페이지는 아래와 같습니다.

http://themes.khaitawng.com/Regina/index.html


물론 처음 진행하시는 분들은 막막하고 어려울 수 있겠지만 그동안 배운 것들을 최대한 응용해보면서 구현하시면 가능할 것이라 생각됩니다.

서울시립대학교 멋쟁이사자처럼에서는 약 1시간30분동안 이것을 진행하였고 마처 완성하지 못한 부분은 과제로 진행하여 다음 수업까지 완성시켜서 오기로 하였습니다.


무작정 세부적으로 코드를 구현하는 것 보다는, div을 통해 구조를 잡으면서 필요한 class와 id를 적절히 선언해두고 전체적인 구조가 잡히면 하나씩 세부화시키는 연습이 필요합니다.


HTML과 CSS가 완료된 코드는 아래와 같습니다.

꼭! 미리 확인하기 보다 먼저 코드를 작성해보시길 바랍니다.

HTML/CSS 코드 보기(클릭)




3. JQuery구현


꼭 위의 2번과정을 통해 HTML과 CSS를 완성시키고 JQuery를 구현하시길 바랍니다.

이번 내용에서 다루게 될 JQuery내용은 지난 시간 포스팅에서 진행했던 내용과 크게 차이점은 없습니다.


우리가 보고 따라한 페이지에서는 크게 두가지의 jQuery효과가 있을 것입니다.

하나는 메뉴에 마우스를 가져갔을 때 해당 메뉴의 글씨가 검정색으로 변하는 효과와, More out team-> 이라는 메인 문구에 마우스를 가져갔을 때 해당 div의 배경은 검정색, 글씨는 하얀색으로 변하는 효과입니다.

두 효과모두 지난 포스팅에서 배웠던 내용이고, 비슷하기 때문에 첫번째 효과에 대해서만 설명드리도록 하겠습니다.


먼저 script로 둘러 쌓인 태그 내에서 아래와 같은 코드로 JQuery 준비를 시작합니다.


$(document).ready(function(){


});


이제 해당 코드 내부에 JQuery를 구현합니다.

먼저 생각해볼 점은,

1. 메뉴는 원래 회색글씨 -> 기본 css에서 default로 지정되어야 하는 값

2. 마우스를 올리면 검정글씨 -> mouseover시 css 변경

3. 마우스가 내려가면 다시 회색글씨 -> mouseout시 css 변경

이렇게 됩니다.

1번은 기본 css에서 적절히 구현하셨을 거라 생각하기에 2번과 3번을 JQuery로 구현해보겠습니다.


2번에 대한 코드는 아래와 같습니다.


1
2
3
4
5
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
});
cs


위와 같이 코드를 구현하면 웹페이지에 메뉴에 마우스를 올렸을 때 해당 메뉴의 글씨가 검정색으로 변하는 것을 확인할 수 있습니다.

위의 코드에서 this라는 것이 쓰였는데, this는 앞에 있는 요소들을 그대로 가져오는데 사용됩니다.

그리고 3번을 추가적으로 구현하면, 마우스가 해당 메뉴를 벗어났을 때 다시 메뉴의 글씨가 회색으로 변할 것입니다.

3번까지 구현된 코드는 아래와 같습니다.


1
2
3
4
5
6
7
8
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').mouseover(function(){
        $(this).css('color','black');
    });
    $('.about, .team, .work, .blog, .contact').mouseout(function(){
        $(this).css('color','gray');
    });
});
cs


이렇게 해서 메뉴에 마우스를 가져갔을 때, 해당 메뉴의 글씨가 검정색으로 변하면서 highlight와 같은 효과를 구현할 수 있습니다.

또한 같은 효과를 다른 방식의 코드로써 구현할 수 있는데 이는 아래와 같습니다.


1
2
3
4
5
6
$(document).ready(function(){
    $('.about, .team, .work, .blog, .contact').hover(
        function(){$(this).css('color','black')},
        function(){$(this).css('color','gray')}
    );
});
cs


위에서는 hover라는 함수를 사용하여, mouseover와 mouseout을 동시에 지정할 수 있습니다.


이렇게해서 4월1일의 서울시립대학교 멋쟁이사자처럼에 대한 수업의 정리가 되었습니다.

해당 수업에서는 무언가 알려드리는 것보다, 여러분들께서 직접 구현해보고 코드를 작성해보시는 것이 중심이 되었습니다. 다른분들께서도 꼭 코드를 직접 구현해보시길 바랍니다.

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc


안녕하세요. 문범우입니다.

이번 포스팅은 지난 3월 28일 일요일 서울시립대학교에서 진행된 강의를 바탕으로 작성되었습니다.

해당 강의를 진행해주신분은 서울시립대학교 멋쟁이사자처럼 5기 김도현님 입니다.


이번 포스팅에서는 먼저 지난포스팅에서 했던 내용을 간단하게 복습해보고 jQuery라는 것에 대해 알아본 후에 간단한 실습 몇가지를 진행합니다.


1. 복습


먼저 지난 수업때 학습했던 내용들에 대해서 간단히 복습을 하겠습니다.


우리는 지난 강의들을 통해 Class와 Id에 대해서 알아 보았습니다.

각각이 어떻게 사용되는지 한번 더 생각해보면, 하나의 태그에 Class는 여러개 적용시킬 수 있으며 Id는 하나만 적용시킬 수 있습니다. 

이를 응용해본다면, Navigator와 같이 한번만 사용되는 것은 Id로 스타일을 만들어서 적용시키면 되겠죠?


또한 스타일을 적용시키는 방법은 총 3개가 있었습니다.

1. html의 태그내에서 직접 적용시키는 방법

2. html의 head태그 안에서 style 태그를 통해 적용시키는 방법

3. css파일을 만들어서 이를 html와 연결시켜 적용시키는 방법


그리고 이런 세가지 방법에 대해 스타일이 적용되는 우선순위도 알아보았습니다.

1 > 2 > 3 순위로 우선순위가 높습니다. 즉 css파일에서 A요소의 height를 100으로 적용시켰어도, 실제로 html파일에서 해당 요소에 대한 태그에 height를 200으로 적용시키면 A요소의 height는 200이 됩니다.


또한 clearfix는 화면의 폭을 줄였을 때 글씨가 잘리지 않고 아래로 예쁘게 내려가게 해주는 역할을 합니다.

반응형 웹(화면의 크기에 따라 반응하는 웹)을 만들때 주로 사용되기도 합니다.



2. jQuery란?


이번에는 jQuery에 대해서 알아보도록 하겠습니다.

아, 물론 새로운 걸로 넘어왔다고 앞으로 html과 css에 대해서 안하는건 아닙니다. 앞으로의 수업들에서 지속적으로 웹페이지를 만들고 따라해보면서 그때 그때 필요한 것들은 계속 설명드릴 예정입니다.


그럼, jQuery에 대해서 알아보기 전에 간단하게 나마 알아야 하는 것이 있습니다. 바로 JavaScript라는 것인데요, 자바스크립트(JavaScript)란 웹 페이지를 동적으로 만들어 주는데 사용하는 언어입니다.

즉, 우리가 그동안 다루었던 html이나 css는 동적인 언어입니다.

웹페이지에서 구현했을 때 말그대로 멈춰있다, 라고 생각할 수 있습니다. 이와 달리 자바스크립트는 동적언어로써, 어떤 요소가 움직이거나 경고창을 띄우거나 등의 구현을 할 수 있도록 하는 언어입니다.


그래서? 오늘 우리가 배울 jQuery는 도대체 무엇일까요?

jQuery는 위에서 설명드린 자바스크립트의 라이브러리 중 하나입니다.

라이브러리란, 간단하게 도서관을 생각하시면 됩니다. 즉, 자바스크립트를 보다 쉽고 강력하게 사용하기 위한 도구라고 생각하시면 됩니다.

jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나라고도 합니다.



3. jQuery 사용하기


그럼 바로 jQuery를 사용해보도록 하겠습니다.

먼저 아래에 있는 jQuery 공식 사이트에 접속해서 다운로드를 누릅니다.


https://jquery.com/


그럼 아래와 같은 화면이 뜰텐데 여기서 파란색으로 표시되어 있는 것을 눌러 jquery를 다운 받습니다.


만약 해당 링크를 눌렀을 때 파일로 다운받아지지 않고 웹으로 켜지시는 분들은 Ctrl(맥은 command)을 누른 상태에서 해당 링크를 눌러주세요.

그럼 jquey-3.3.1.min.js 라는 파일이 다운 받아질텐데 해당 파일을 우리가 작업할 html 파일과 같은 위치로 옮겨주도록 합시다.

( jQuery, JavaScript의 문법등에 대해서는 codecademy를 활용합시다! )



4. 페이지 뼈대 잡기


그럼 이제 jQuery를 사용하기전에 기본적인 뼈대를 잡기위해 html과 css를 작성해보도록 하겠습니다.

아래와 같은 화면을 만들 것이고 해당 코드도 바로 첨부하지만 그대로 복붙 하지 마시고 꼭 하나씩 작성해가면서 손에 익히도록 연습하시길 바랍니다.


전체 코드 보기


위의 코드에서 몇가지만 추가적으로 설명드리도록 하겠습니다.


전체적으로는 우리가 그동안 알아보았던 태그나, 속성들이 사용되었는데 style내용의 초반부에 a 태그에 관해 a:visited, a:hover 가 있습니다.


먼저 a:visited에 대해서 알아보면, a 태그는 어떤 링크를 걸어주는 태그로써 태그된 내용을 누르면 우리가 지정한 페이지 등으로 이동하게 됩니다. 

그런데 여러분께서 가끔 이런 링크들을 클릭했을 때를 생각해보면 누르기 전과 눌러서 다른 페이지를 다녀오고 나서 해당 링크의 색상이 바뀌었을 때가 있었을 것입니다. 이러한 속성을 설정하는 것이 a:visited 입니다. 즉, a태그에 대해 방문한 후에는 어떻게 할 것인가를 설정하는 것입니다.


그리고 a:hover는 여러분께서 마우스 포인터를 해당 링크 위로 가져갔을 때를 의미합니다. 위의 코드에서는 두개다 color: black;으로 설정되어 있기에 마우스를 위로 가져가도 포인터가 변할 뿐 색상은 그대로이고 링크를 클릭하여 해당 사이트를 방문하고난 뒤에도 해당 링크는 그대로 검은색입니다.

~:hover는 보다 밑에 있는 main_btn이라는 class에서도 사용됩니다. 해당 설정에서는 마우스 포인터를 바꾸는 설정을 진행하였습니다.


추가적으로 a 태그 내부에 있는 text-decoration은 링크에 밑줄이 쳐져 있는 등의 효과를 설정합니다. 해당 코드에서는 text-decoration: none;으로 설정하여 a태그를 통한 링크에서 밑줄 등의 효과가 없습니다.



5. jQuery 적용시키기


이제 3번에서 다운 받았던 jQuery를 실질적으로 적용시켜보도록 하겠습니다.

실제 수업에서는 마우스를 특정 요소위에 두었을 때 다른 요소가 보이게 하거나 사라지게 하는 것, 글 색깔이 바뀌는 것, 특정 요소를 클릭하면 다른 요소가 사라지는 것 등 총 4개에 대해 실습을 진행하였습니다.


전체적인 코드는 맨아래에 첨부하겠지만, 해당 포스팅에서는 마우스를 어떤 요소에 올렸을 때 해당요소의 색이 바뀌는 것과 클릭 했을때 다른요소가 사라지는 것, 두개에 대한 설명만 진행하겠습니다.


먼저 jQuery의 기본적인 형태는 아래와 같습니다.


$(document).ready(function(){


<jQuery 내용>


});


위의 코드의 의미를 살펴보면, document, 즉 해당 페이지가 인코딩이 완료되어 준비가 되었을 때, 를 의미합니다.

즉, 우리가 작성 중인 해당 웹페이지의 인코딩이 전부 완료된 다음에 이제 내부에 우리가 작성하는 jQuery의 코드가 실행되는 것입니다.

그럼 이제 실제로 jQuery에 대한 내용을 작성해보도록 하겠습니다.


먼저 첫번째는 마우스를 메인버튼(main_btn)에 가져갔을때 해당 요소의 바탕화면과 글자색이 변하는 것입니다.

완성되는 코드는 아래와 같습니다.


$(".main_btn").mouseover(function(){

          $(".main_btn").css("background-color","black");

          $(".main_btn").css("color","white");

});

        $(".main_btn").mouseout(function(){

          $(".main_btn").css("background-color","white");

          $(".main_btn").css("color","black");

});


위의 코드에 대해서 살펴보면, 첫번째 문장에서 ".main_btn" 으로 main_btn 이라는 클래스( . )에 대해서 mouseover가 발생했을때, 즉 해당 클래스가 적용된 요소위에 마우스가 올라왔을때 아래 내용을 실행합니다.

2,3번째 문장을 보면 main_btn 클래스가 적용된 요소의 css를 설정하는데, 배경화면을 검정으로 그리고 글자색을 흰색으로 설정합니다.

즉, 1~3번째 문장을 정리해보면, 마우스가 main_btn 이라는 클래스가 적용된 요소의 위에 위치하게 되면 같은 클래스를 적용받는 요소의 배경화면은 검정색, 글자색은 흰색으로 만들어 주는 내용입니다.


이어서 5번째 문장은 똑같이 main_btn 클래스가 적용된 요소에 대해 서술되고 있으며 이때 mouseout, 즉 마우스가 해당 요소의 위에 있지 않을 때에 대한 동작을 서술합니다.

6,7번째 문장이 그 동작인데, main_btn 클래스를 적용받는 요소의 배경화면을 흰색, 글자색을 검정색으로 만드는 것입니다.


물론 해당 코드는 처음에 알아보았던  


$(document).ready(function(){


<jQuery 내용>


});


에서 <jQuery 내용> 안에 들어가야 합니다.


이어서 두번째로 만들어볼 jQuery는 마우스로 클릭했을 때 다른 요소가 사라지도록 하는 효과입니다.

먼저 코드는 아래와 같습니다.


$(".main_btn").click(function(){

          $(".image3").fadeOut(700);

});


좀 전의 코드보다 짧고 간단합니다. 한번 살펴볼게요.

해당 코드에서도 main_btn 클래스를 적용받는 요소에 대해 동작을 이야기 합니다. main_btn 클래스를 적용받는 요소가 click 되었을 때, 그 다음 효과를 하게 되는데 그 효과는 2번째 문장입니다. 

그것은, image3라는 클래스를 적용받는 요소가 fadeOut을 700ms동안 하게 됩니다. fadeOut이란 요소가 바로 사라지는게 아니고 시간이 지나면서 사라지도록 하는 효과인데 그 시간을 괄호에 작성하여 설정합니다. 이때 시간의 단위는 ms로써 1000을 적으면 1초가 됩니다.



이렇게 2가지의 jQuery효과를 만들어 보았습니다. 물론 위의 코드들을 익혀서 자신이 스스로 만들어 볼 수도 있습니다.

jQuery는 인기있는 만큼 인터넷에서도 구글링을 통해 많은 정보를 얻을 수 있으니 해당 포스팅에서 이야기하는 것들 뿐 아니라 더 찾아보면서 익히시면 금방 실력을 높이실 수 있을 것 입니다.

마지막으로 3월 28일 수업에서 작성된 최종 코드를 첨부합니다.


UOS LIKELION 3.28 code


추가적으로 궁금하거나 잘 해결이 되지 않는 점들은 댓글 및 이메일로 연락주세요 :)

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc



안녕하세요. 문범우입니다.

저는 현재 서울시립대학교에서 멋쟁이사자처럼 6기 운영진을 진행하고 있습니다.

앞으로 서울시립대학교 멋쟁이사자처럼에서는 매주 수요일/일요일에 강의를 진행하는데 최대한..! 저도 수업에 열심히 참여해서 수업이 마친뒤 정리해서 블로그에 포스팅할 계획입니다.

수업에 참여하지 못한 UOS LIKELION 분들이나 추가적으로 웹프로그래밍에 관심있으신분들께서 살펴보시면 좋을 것 같아요:)


오늘 멋쟁이 사자처럼 UOS에서 진행된 수업은 아래와 같습니다.



하나씩 따라가면서 진행해보도록 하겠습니다.


0. 들어가기에 앞서


먼저 오늘부터 본격적으로 LIKELION 시립대학교 6기 수업이 진행되는데, HTML이나 CSS 등 웹 프로그래밍에 대한 것을 바로 시작하기 전에 잠깐 살펴보고 넘어갈 사항들이 있습니다.

먼저 앞으로 우리가 먼저 다루게 될 내용들은 HTML, CSS 더 나아간다면 JavaScript 정도로 프론트엔드(Front-end)라고 불리는 것입니다.

웹 프로그래밍에서는 프론트엔드(Front-end)와 백엔드(Back-end)로 크게 구분되는데 이 두가지는 무엇일까요?



위의 그림은 프론트엔드와 백엔드로 나누어져 있습니다. 프론트엔드는 평화로운 분위기에서 남자가 아이를 들고있는 모습인데, 백엔드에서 보니 전혀 다른 모습이 펼쳐지고 있습니다 :)

그렇다고 해서 프론트는 이쁘고 좋은거, 백엔드는 그렇지 않은 것, 힘들고 무서운 것이라는 뜻이 아니라 정말 그림에서 보여주듯 프론트엔드와 백엔드는 같은 것에 대한 것이지만 그 차이가 존재함을 말하는 것 같아요.


조금 더 정확하게, 프론트엔드와 백엔드의 차이점에 대해서 알아볼까요?

처음 개발을 접하시는 분들에게는 좀 어려운 말들일 수 있으나 그냥 그렇구나~ 하고 쓱 읽어보시면 좋을 것 같아요.


우리가 어떤 웹사이트, 예를 들어 네이버에 들어갔을때 우리의 컴퓨터 화면에 나타나는 영역이 바로 프론트엔드입니다. 네이버의 경우에는 네이버의 로고와 검색창, 그리고 각종뉴스, 로그인 하는 구역 등등이 나타나겠죠?

하지만 백엔드의 경우에는 우리의 눈에는 보이지 않는 영역을 다룹니다. 다시 말해 서버에서 작동되는 기술들을 다루게 되는데, 예를 들어 여러분이 네이버에 로그인을 하게 되면 네이버의 서버에 저장되어 있는 여러분의 정보를 통해 로그인이 성공됩니다. 이러한 과정이나 알고리즘등을 백엔드에서 처리한다고 합니다.


즉, 프론트엔드는 사용자와 직접적으로 만나게 되면서 상호작용이 이루어 지는 것이고, 백엔드는 사용자와 직접적으로 만나지는 않지만 프론트엔드와 연결되며 기술적인 부분을 처리하는 것이죠.


쉽게 말해서!

프론트엔드는 눈에 보이는 것, 백엔드는 눈에 보이지 않는 것이라고 생각하셔도 될 것 같습니다 :)


그럼 앞서 말했듯이, 먼저 수업에서는 HTML과 CSS 그리고 좀 지나서는 JavaScript 까지 다루게 될텐데 이러한 것들은 프론트엔드에 속하게 되는 기술들입니다.


그리고, 우리가 지금까지 이야기하면서 웹(Web)이라는 단어를 매우 많이 사용했는데, 웹에는 도대체 어떤 것들이 존재하는지, 간단하게 살펴볼게요.

웹(Web)은 다음과 같이 구성되어 있습니다.


1. 웹 서버(Web Server)

   클라이언트의 요청에 따라서 HTML 문서를 클라이언트에게 제공해 주는 주체


2. 웹 클라이언트(Web Client)

   필요한 HTML 문서를 웹 서버에 요청하는 주체


3. 웹 브라우저(Web Browser)

   웹 서버로부터 받은 HTML문서를 해석하여 사용자에게 글이나 그림으로 보여주는 주체


우리가 흔히 사용하는 크롬이나 인터넷익스플로러와 같은 것들이 바로 웹 브라우저이고, 우리가 네이버에 들어갈 때, 네이버한테 어떠한 특정 모습을 기대하고 그것을 띄어달라고 하죠? 그러므로 우리가 웹 클라이언트! 그리고 그러한 네이버의 모습을 제공해 주는 것이 웹 서버입니다.


이론적인 내용들을 몇개 살펴보았는데, 위의 내용들이 아직 잘 이해가 되지 않을 수도, 잘 와닿지 않을 수도 있습니다.

너무 걱정마시고 그냥 그렇구나! 하고 간단히 넘어가셔도 됩니다.



1. Atom 설치


오늘은 첫 수업인 만큼, 우리가 앞으로 웹 프로그래밍을 하는데 도움이 되도록 하는 몇가지 설정들을 진행할 거에요. 그중 첫번째가 Atom이라는 텍스트에디터 설치입니다.

우리가 HTML이나 CSS등의 코드를 작성할 때 보다 쉽게 할 수 있도록 도와주는 프로그램인데, 어떤 점에서 쉽게 도와주느냐를 확인해 본다면, HTML이나 CSS 등은 메모장으로도 코드를 작성할 수 있습니다.

에이 설마~ 하는 분들을 위해, 아래의 코드를 메모장에 붙여 넣기 한 다음 메모장으로짠코드.html 이라는 이름으로 저장을 해볼게요!


1
2
3
4
5
6
7
8
9
10
<html>
<head>
  <meta charset="UTF-8">
  <title>메모장!</title>
</head>
<body>
  <h1>메모장으로도</h1>
  <h3>웹사이트를 만들수있네!</h3>
</body>
</html>
cs


위의 코드를 복사해서 메모장에 붙여넣기 한 후, 아래 사진과 같이 인코딩을 UTF-8로 설정하고 적당한 파일 이름뒤에 .html 을 붙여서 파일을 저장합니다.

이때 인코딩을 설정하는건 한글이 깨지지 않도록 하기 위함이고, 파일 뒤에 .html 을 붙이는 건 이 파일이 html형식의 파일이야라고 알려주는 것이라고 생각하시면 됩니다.




그리고 해당 파일을 실행시키면, 각자가 자주 사용하는 웹브라우저를 통해 아래와 같은 모습이 뜰거에요 :)



이렇게 메모장으로도 HTML 코드를 통해 웹사이트를 제작할 수 있습니다!

하지만, 웹사이트를 만드는 데 위의 코드처럼 10줄, 이렇게 단순하지는 않을거에요. 더 길때도 있고 하나의 파일말고 다양한 파일들이 서로 상호작용하는 사이트 일 수도 있습니다.

근데 그때마다 이렇게 메모장으로 작성하는 것은 개발자에게 매우 불편한 일이 될 수 있기 때문에, 우리는 텍스트 에디터를 사용합니다.

메모장말고 왜 텍스트 에디터를 사용하냐! 라고 물으신다면.. 수없이 많은 장점들이 있기 때문에 따로 설명드리지 않아도 될 것 같아요 :'( 일단 써보시면 아실꺼에요..


우리는 앞으로 Atom 이라는 텍스트 에디터를 사용할텐데, 텍스트 에디터는 Sublime text3 나 VSCode 등 다양한 것들이 존재합니다. 만약 Atom 이름이 맘에 안든다거나.. 다른 것들이 더 멋져보인다! 하시면 다른 걸 쓰셔도 무방하지만 해당 수업에서는 Atom으로만 진행을 할 예정이니 처음 하시는 분들은 Atom을 통해 맛보시는 걸 추천드립니다 :)


Atom 설치는 매우 간단합니다. 먼저 아래 URL을 클릭해서 Atom 공식 홈페이지에 접속하고 자신의 OS에 맞는 파일을 다운 받습니다.


https://atom.io/


그리고 다운받은 파일을 실행시킵니다.



그럼 위의 사진과 같은 창이 뜰텐데 설치되고 있다는 것이니까 잠시 기다려주시면 됩니다.



약간의 시간을 기다리고 나면 위와 같은 프로그램이 열리게 됩니다. 바로 저것이 Atom입니다.

저는 설치하고 다른 작업을 하다가 찍은 사진이라 처음에 환영하는 페이지가 아닌데, 처음 설치하신분들은 Welcome 등과 같은, Atom이 여러분께 환영을 표하는 메세지가 담긴 창이 함께 뜰거에요.

텍스트 에디터에는 참 많은 기능들이 숨어있습니다. 물론 그걸 처음부터 외우는 건 좋지 않다고 생각해요. 여러분께서 개발을 진행하며 필요한 단축키들을 하나씩 익히시면 됩니다. 

텍스트에디터에 대한 단축키들은 구글에 검색해보시면 많이 나오기도 하고 아래 사이트를 참고하셔도 좋아요 :)


http://kkotkkio.tistory.com/89



2. 웹사이트 기초


그럼 먼저 새로운 파일을 하나 만들어 볼까요?

윈도우를 기준으로 설명드리면, Ctrl + n 을 누르면 새로운 창이 하나 뜹니다. 맥은.. 아마 커맨드 + n 일거에요 :'(

그럼 untitled 라는 제목의 창이 뜨는데, 아직 파일로써 저장되지 않은 창인 것입니다. 여기서 Ctrl + s 를 눌러 파일을 저장해보도록 할게요.

우리는 먼저 html 파일을 작성해볼 것이니까, 파일명은 자유롭게 하고 맨뒤에 .html 을 적어주기만 하면됩니다.

저는 아래 사진과 같이 0321review.html 이라는 이름으로 저장하였습니다.



그럼 이제 Atom이, 아 지금 사용자가 이 파일에는 html 코드를 적는구나! 라고 생각할거에요.

이제 코딩을 시작해 볼텐데, 먼저 아래 사진과 같은 코드를 따라서 써봅시다.



위 코드를 보시면 1번 줄에서 나와있는 것은 현재 작성되는 html 문서가 html5 버전의 문서라는 것을 의미해주는 코드입니다.

그리고 2번줄에서 <html> 이라고 적혀있습니다.

HTML에서는 기본적으로 태그들이 서로 내용을 감싸고 있는, 가두고 있는 형태를 가집니다.

즉 다시 말해 2번줄의 <html> 이 시작지점이고 9번줄의 </html>이 닫히는 지점인 것입니다.

우리는 이러한 것들을 각각 '태그'라고 이야기 해요. 즉 <html> ~ </html> 은 html태그라고 하는 것이고 그 아래에 있는 head나 body도 각각 head태그, body태그 라고 이야기를 합니다.


그럼 3~5번줄과 6~8번줄을 살펴보면 html 태그안에 head태그와 body태그가 존재하시는 것을 볼 수 있습니다.

위와 같은 형태가 웹사이트에서의 아~주 기본적인 형태라고 생각하시면 될 것 같아요.

앞으로 공부하면서 점점 복잡해지겠지만, 모든 사이트가 html 태그 안에서 head태그와 body태그를 가지고 있습니다.


그리고 각각의 태그에는 어떠한 '속성' 값들을 지정해줄 수 있습니다.

예를 들어 해당 사이트에서 글자 방향이 어떻게 될지, 언어는 무엇이 될지등은 html 태그에서 속성을 설정해줄 수 있습니다.

속성을 설정하는 방법은 다음 사진과 같습니다.




두번째 줄의 html 태그의 꺽쇠가 닫히기전에 lang과 dir이라고 적힌 부분이 있습니다. 즉, lang이라는 속성은 "ko"이고 dir이라는 속성을 "ldr"이야, 라고 말해준거에요.

근데 lang이 뭐고 dir이 무엇일까요?

추후에 속성들에 대해서는 또 공부를 할테지만 간단히 살펴본다면, lang은 language의 의미를 가짐으로써 언어가 어떤 것인지 설정해주는 것입니다. 그리고 ko는 korea의 줄임말 이구요. 또한 dir은 방향성을 설정하는 속성인데 해당 사이트의 글 순서가 왼쪽에서 오른쪽인지, 오른쪽에서 왼쪽인지 등을 설정합니다. 그리고 ldr 이라는 것은 left->right라는 의미를 가집니다.

속성들은 직접 설정하지 않아도 default 값(기본 값)으로 가지고 있는 값이 있기 때문에 따로 설정을 해주지 않아도 괜찮은 속성들이 있습니다.

우리가 방금 설정한 lang과 dir 또한 default 값으로 방금 설정한 것들이 설정되어 있습니다. 단지 어떤 것이 속성인지 맛보기 하느라 굳이 한번 해봤어요 :)


lang속성에 대해서는 아래 사이트에서 더 자세한 설명을 만날 수 있습니다.

http://mygumi.tistory.com/52


이제 head 태그로 넘어가봅시다.

Head태그에는 기본적으로 메타데이터나 style등이 담깁니다. style에 대해서는 CSS를 설명드리면서 다시 설명드리겠습니다.

그럼 메타데이터가 무엇일까요? 먼저 아래 코드를 한번 살펴보겠습니다.



4번줄을 보시면 meta라는 태그로 charset="utf-8" 이라는 속성을 지정해주었습니다. 이것은 해당 사이트에서 사용되는 인코딩을 utf-8이라고 지정해준 것입니다. 

메타데이터는, 데이터에 대한 데이터로써 우리가 작성하는 사이트에 대한 정보를 가지는 것이라고 생각하시면 될 것 같아요.

즉, 우리는 meta 태그를 통해 charset="utf-8" 이라는 속성을 지정해줌으로써 지금 만드는 사이트의 인코딩을 설정해준 것입니다. 그리고 위에서 html은 어떤 태그들의 열고닫음으로 내용들을 묶는다고 했는데 meta 태그는 특별히 닫는 태그가 없어도 무방합니다.


그리고 그 아래 5번째 줄에서는 title이라는 태그가 있습니다. 해당 태그는 여러분이 웹브라우저에서 사이트를 켰을때 제일 상단에 뜨게 되는 제목을 설정해주는 것입니다.



위의 사진에서 빨간색으로 동그라미 쳐진 부분을 title 태그로 설정하는 것입니다.


그런데, 그 밑에 화면에는 빈화면으로 아무것도 뜨지 않고있어요.

이제 그 내용을 채워 볼 건데, 그것을 바로 body태그에서 진행합니다.

body태그에 간단하게 아무 내용이나 아래 코드처럼 작성해볼게요.



그리고 아까 실행한 사이트를 다시 새로고침 해보면 아래와 같이 방금 작성한 내용이 화면에서 보이게 됩니다.



그런데 글이 너무 밋밋한것 같죠? 글씨도 너무 작은 것 같아요!

코드를 아래와 같이 수정해볼게요.



아까 작성한 내용을 h1 태그로 묶어주었습니다. 그리고 사이트를 새로고침 해보니,



위와 같이 글씨 크기도 커지고 두꺼워진것 같기도합니다!


이와 같이 HTML에서는 특정 태그들을 통해서 글씨의 크기나 모양등을 설정할 수 있습니다.

또한 단순히 글만 적어내는 것이 아니고 사진을 담을 수 있는 태그도 존재하고, 박스형태를 잡아주는 태그들도 존재합니다.

그리고 그러한 태그들에서 특정 글씨만 색깔을 준다던지, 배경색을 주는것, 제목에만 밑줄을 긋거나 기울임을 주는 효과는 style 속성이나 CSS등을 이용하게 됩니다.


이번 포스팅에서는 여기서 마무리를 하고, 방금 말씀드린 여러 태그들과 기초적인 CSS에 대해서는 다음 포스팅에서 살펴보겠습니다!


2018년 6기 멋쟁이사자처럼을 진행하시는 모든분들을 진심으로 환영하고, 앞으로 열심히 공부하시면서 멋진 개발자가 되기를 바랍니다 :)

앞으로 시립대학교에서 진행되는 수업들을 바탕으로 포스팅을 진행할텐데 궁금한 점이나, 문의사항등에 대해서는 댓글 및 이메일(doorbw@outlook.com)을 이용해주시면 좋을 것 같습니다.

블로그 이미지

Tigercow.Door

Web Programming / Back-end / Database / AI / Algorithm / DeepLearning / etc