TigerCow.Door


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

해당 포스팅은 서울시립대학교 멋쟁이사자처럼, 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가 완료된 코드는 아래와 같습니다.

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




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

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요


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

이번 포스팅에서는 HTML에서 사용되는 몇가지 태그들에 대해서 간단히 알아보고 CSS에 대한 기초적인 내용을 알아보도록 하겠습니다.

전체적인 순서는 아래와 같습니다.

 - HTML 태그

 - Emmet 이란?

 - CSS 적용 방법 3가지



1. HTML 태그


일단 지난 포스팅에서 아래와 같은 코드까지 작성을 하였습니다.



이때, h1태그로 내용을 묶어줌으로써 글씨의 크기나 모양이 바뀌었습니다.

HTML에서는 이와 같이 기본적으로 어떤 특징을 가지고 있는 여러가지 태그들이 있습니다.

물론 각 태그들에 대해서 style속성을 변경하거나, CSS를 적용하는 등의 방법으로 모양을 더 바꿀 수 있지만, 각각의 태그들이 통상적으로 사용되는 경우가 존재하고 각각의 태그들의 특징도 있기 때문에 몇가지 태그들은 알아두는 것이 좋습니다.

예를 들어 하이퍼링크와 같이 어떤 글자나 사진을 눌렀을때 특정 사이트가 열리게끔 하는 a태그와, 사진을 보여주도록 하는 img태그 등이 있습니다.

그럼 기본적인 몇가지 태그들에 대해서 간단히 알아보도록 하겠습니다.



h1~h6 태그

먼저 알아볼 태그는 지난 시간에 코드로 작성해보았던 h1태그와 같은 것들입니다. 이러한 태그는 h1~h6종류로 나누어져 있는데 기본적으로 서로 글씨의 크기에 대한 차이가 존재합니다.

아래와 같은 코드를 작성해서 확인해보도록 하겠습니다.



8번째 줄부터 13번째 줄까지 h1태그~h6태그 까지 한번씩 사용하여 코드를 작성하였습니다.

이렇게 코드를 작성하고 해당 파일을 실행시켜 확인해보면 아래와 같은 모습이 됩니다.



딱 봐도 h1~h6 태그들이 서로 어떠한 차이를 가지고 있는지 아시겠죠?

기본적으로 h1~h6 태그들은 보통 제목을 작성하는 등에서 사용됩니다. 물론 정해진 것은 아닙니다 :)

그리고 보셨듯이 h1~h6 태그들은 숫자가 낮을 수록 큰 글씨를 가지고 있습니다.



ul, ol, li 태그

이번에는 ul태그와 ol태그, li 태그를 알아보도록 하겠습니다.

ul 태그는 Unordered list 라는 뜻을 가지고 있으며 ol태그는 ordered list, li태그는 list 라는 의미를 가지고 있습니다.

먼저 아래와 같은 코드를 통해 각 태그가 어떤 모습을 가지는지 알아보겠습니다.



위의 코드에서는 ol태그로 묶인 li태그 3개와 ul태그로 묶인 li태그 3개를 나타냅니다.

각각이 어떻게 보여지는지 확인하면 아래와 같습니다.



ul태그와 ol태그의 차이점을 보셨나요?

우선, li태그는 말그대로 list로써 ul태그나 ol태그 안에서 목록을 만들어 내는 태그입니다.

li태그는 코드에서와 같이 단독으로 사용되지 않고 ol태그 또는 ul태그와 함께 사용됩니다.

그럼 ul태그와 ol태그를 살펴보면, ul태그는 위에서 말했던 것과 같이 Unordered list로써 번호(순서)없이 목록이 작성되는 태그입니다. 그리고 ol 태그는 Ordered list 로써 번호(순서)가 존재하는 목록 태그입니다.



p 태그

p 태그에서 p는 paragraph 라는 의미를 가지고 있습니다. 말 그대로 문단을 정의하는 태그입니다.



위와 같은 코드를 통해 결과를 확인하면 아래와 같습니다.




화면에서 보이듯 p태그는 단순하게 글을 담아내는 역할을 하는 태그입니다.



br 태그, hr 태그

이번에는 br태그와 hr태그를 알아보겠습니다. 방금 p태그에서 여러줄이 되도록 글을 작성해보았는데, 줄바꿈을 하고 싶다면 어떻게할까요? 단순하게 코드에서 엔터를 눌러 줄바꿈을 해볼까요?

직접 해보시면 아시겠지만 코드에서의 엔터를 했다고 해도 웹 사이트에서는 줄바꿈이 되지 않습니다.

이럴때 줄바꿈을 해주는 태그가 바로 br 태그입니다. br태그는 그 동안의 태그와 다르게 닫히는 태그가 아닙니다.

아래 코드를 통해 확인해보죠.



코드에서 두번의 br태그를 사용했습니다. 줄바꿈을 위해서 <br> 이라는 태그를 넣었지만 해당 태그는 따로 </br> 이런 것으로 닫지 않고 단일태그로 사용합니다.



그럼 hr 태그는 무엇일까요?

hr태그 또한 br태그와 비슷하게 줄바꿈을 해주지만, 줄바꿈 한 위치에 길다란 선을 그어줍니다.

좀 전에 작성한 코드에서 첫번째 br태그를 hr태그로 바꾸었습니다.



그리고 결과를 확인해봅니다.



위의 사진과 같이 줄바꿈을 한 곳에서 길다란 선이 생겼습니다.



a 태그

이번에는 a 태그에 대해서 알아보겠습니다.

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


<a href=""> 내용 </a>


위와 같은 형태를 가지는데 a 태그옆에 href 라는 속성이 있네요!

href 속성은 a 태그에 있는 내용을 눌렀을때 어디로 갈지로 명시해 주는 속성입니다.

나중에 사이트를 제작하면서 여러개의 페이지를 만들면 해당 태그를 이용해 페이지간 이동도 가능하고, 아니면 외부 사이트 URL을 명시해줌으로써 외부 사이트로 연결하게끔 하는 것도 가능합니다.

그럼 일단 여러개의 페이지를 만들어서 하는건 나중에 해보도록 하고, 먼저 구글 사이트가 켜지도록 코드를 작성해볼게요.



이렇게 href 태그에 구글 URL을 적어주었습니다.

그리고 화면을 확인해보겠습니다.



위의 사진에서 맨 아래와 같이, 여기를 누르면 구글이 켜진다! 가 나와 있고 해당 글을 누르면 구글이 켜지는 것을 확인하실 수 있습니다. 나중에 속성에 대해서 공부하면 지금 파란색으로 보이고 밑줄도 쳐져있는 것들도 없애거나, 바꿀 수 있습니다.



img 태그

이번에는 img 태그입니다. 태그이름에서도 느낌이 오듯, img태그는 image, 사진을 담는 태그입니다. 그런데 코드에 사진을 넣는 것도 아니고, 어떻게 사진을 담는 것 일까요?

먼저 img 태그의 기본 형태는 아래와 같습니다.


<img src="" alt=""/>


이미지 태그는 하나의 태그 맨 뒤에서 / 이용하여 태그를 닫습니다. 따로 </img> 처럼 하여 태그를 닫아도 상관없습니다.

이제 img 태그안에 있는 두가지 속성에 대해서 살펴볼게요.

먼저 src 속성은 소스라는 의미로 이미지의 경로나 위치, 또는 주소를 넣어줘야 합니다.

앞에서 말씀드렸듯이 우리가 코드에 이미지를 그대로 넣어버릴 수 없기때문에, 우리가 담아내고자 하는 이미지가 어디에 있는지 적어줘야 하는 것입니다. 그런데 이미지는 우리가 파일로써 가지고 있을 수도 있고 아니면 웹 상에서 존재하는 이미지를 사용할 수도 있죠.

먼저 파일로써 존재하는 이미지를 사용한다면, 그 이미지의 경로를 적어주면 됩니다. 이런 경로를 이용하는 방법에 대해서는 다음에 더 자세히 다뤄보도록 할게요.

이번에는 웹상에서 존재하는 이미지를 사용하는 것으로만 진행해볼텐데, 일단 구글의 로고를 가져와보도록 하겠습니다.

구글에 접속해서 마우스를 로고 위에 두고 오른쪽 클릭하여 '이미지 주소 복사'를 누릅니다. 그러면 구글 로고의 주소가 복사됩니다. 그리고 코드에서 src 뒤에 붙여넣기를 함으로써 주소를 입력합니다.



이렇게 코드를 입력하면,



위와 같이 구글 로고가 불러와지게 됩니다. 이미지에 대한 크기를 수정하는 건 나중에 CSS에 대해서 알아보며 배워보도록 할게요.


이제 img태그의 alt에 대해서 알아보겠습니다.

지금 우리는 구글 로고를 웹상에서 주소로 가져왔는데, 해당 이미지는 구글 서버에 존재하는 것입니다. 구글 서버에 존재하는 이미지를 우리는 주소로써 가져와서 사용한거죠. 그런데 구글 서버가 해당 이미지를 없애거나 이름 및 경로를 바꾼다면? 우리의 이미지는 정상적으로 나타나지 않을 것입니다. 물론 그렇다고 오류가 발생하여 페이지가 아예 안뜨거나 그런건 아니에요. 단순히 해당 이미지가 불러와 지지 않을 뿐입니다. 예를 들어, 여러분이 불러온 이미지의 주소를 임의적으로 수정하여 확인해본다면 페이지에 이미지가 뜨지 않을 것입니다. 그런데 사용자가 이미지가 불러와지지 않았다는 것을 알아야 할때는 어떻게 할까요? 이미지가 정상적으로 뜨지 않을때마다 p태그나 기타 태그를 이용해서 '이미지 불러오는 것을 실패했어요.' 라는식의 글을 적어주는건 너무 귀찮을 것 같지 않나요..?

이럴때 이용하는 속성이 alt 속성입니다. alt 속성은 이미지가 정상적으로 불러와지지 않을때 나타내주는 메세지를 작성하는 속성입니다. 그럼 이를 확인해보기 위해서 src 속성의 주소를 일부분 지워보고 alt에 적절한 메세지를 작성해볼게요.


+ 추가적으로 alt태그는 시각장애인분들이 웹을 이용하실때 alt태그에 작성된 내용을 음성으로(?) 읽어주는 등으로도 사용한다고 합니다. 위에서는 단순히 이미지를 불러오지 못했을때에 대한 오류메세지를 적는 것으로 설명드렸는데, 어떤이미지에 대한 설명인지를 적어주는 것이 더 바람직 할 것 같습니다. 특정 호스팅업체 등에서는 해당 태그에 대한 작성이 꼭 필요한 경우도 있다고 하니 alt태그 작성하는 습관을 꼭 가집시다 :)



위와 같이 코드를 작성해보고 페이지를 새로고침해보면,



위의 사진과 같이 우리가 alt에 작성했던 메세지가 뜨게됩니다.



div, span 태그

태그에 대한 마지막으로 div 태그와 span 태그에 대해서 알아보도록 하겠습니다.

먼저 div 태그는 division이란 의미를 가짐으로써 사이트에서 특정 구역을 분할하는, 영역을 나누는 역할을 합니다.

예를 들어, 우리가 지금까지 작성한 코드들 중에서 h1~h6 태그들 부분만 바탕색을 파란색으로 하고 싶다면, div 태그로 일정 영역을 묶어서 바탕색 속성을 파란색으로 바꾸어주면 됩니다.



위와 같이 h1~h6태그를 div 태그로 묶어주고 style속성에서 background-color 를 blue로 설정해주었습니다.

style에 대한 것은 추후에 다시 설명드리도록 할게요.

그리고 페이지를 새로고침해서 확인해보면,



위와 같이 h1~h6만 있는 부분, 즉 div태그로 묶인 부분의 바탕색이 바뀌었습니다.


그럼 span태그는 무엇일까요?

div태그는 화면에서 특정 구역을 분할하는 역할이었는데, span태그는 특정 문장만 지정하는 태그입니다.

예를 들어, 우리가 작성한 코드의 p태그 내용에서 두번째 문장을 span태그로 묶어서 해당 내용만 글씨를 키워볼게요.



위와 같이 특정 문장만 span 태그로 묶어서 style 속성을 통해 font-size를 25px로 지정하였습니다.

그리고 확인해보면,



위의 사진과 같이 우리가 span으로 묶은 문장의 글씨만 커진것을 확인할 수 있습니다.


추가적으로, div와 span태그에서 알아볼 속성이 있는데 display 라는 속성입니다.

아래 블로그에서 간단하게 설명이 나와있는데 일단 display의 속성중 inline과 block속성에 대해서 알아두시면 좋을 것 같습니다.

http://mainia.tistory.com/3295



2. Emmet 이란?


이제 CSS 들어가기전에 재미난 기능을 소개해드리려고 합니다.

바로 Emmet 이라는 기능인데요, 위키피디아의 설명에 따르면, 에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해준다.

라고 합니다.

Emmet 기능을 이용하기 위해서는 해당 플러그인을 설치해야 합니다.

Atom을 기준으로 설명해드릴게요.

먼저 Atom창에서 Ctrl + Shift + p 를 누릅니다. 그럼 검색창이 뜰텐데, 거기에 install package를 입력합니다.



그리고 위의 사진에서 첫번째 항목을 누르면 settings 창의 install packages 가 뜨게 됩니다.

그리고 검색창에 emmet 을 검색하여 첫번째로 뜨는 emmet 을 install 합니다.

얼마의 시간이 지나면 해당 패키지가 설치될 것 입니다.


설치가 완료되었다면 다시 코드를 작성하던 창으로 돌아가봅시다.

이제 살짝 emmet을 맛볼 차례인데요, 코드의 맨 아래에 li*3을 입력하고 탭을 눌러봅니다.

뜨든..! li태그 3개가 자동으로 생성됩니다.

이와 같이 emmet를 사용하면 매우 빠르고 효율적인 코딩이 가능합니다.

방금 보여드린 것은 emmet 기능의 매우 일부분입니다.

아래 블로그에 emmet 단축키에 대한 설명이 더 많이 나와있으니 참고하시면 좋을 것 같습니다.


http://webclub.tistory.com/161



3. CSS 적용 방법 3가지


이제, 오늘 포스팅의 마지막 주제인 CSS에 대해서 이야기를 해보겠습니다.

먼저 CSS를 통해 글이나 기타 다른 것들을 꾸며보기 전에, CSS를 어떻게 적용하는지 알아볼거에요.


첫번째, Inline: html에서 style 속성 이용하기

이건 좀 전에 위에서 태그들에 학습하면서도 이용해보았습니다. 단순히 아래 사진과 같이 특정 태그에서 style 속성을 이용하는 방법입니다.




두번째, Internal: Head 안에 style태그를 통해 태그별 CSS 또는 class, id를 정의하기!

이번엔 처음에 알아보았던 head 태그로 넘어갑니다.

head 태그에 style이라는 태그를 만들어 style태그 안에 코드를 작성하는 방법입니다.



위의 코드와 같이 body 태그 전에 있는 head 태그 안의 style 태그를 만들어서 그 안에 css 코드를 작성합니다.

지금 위의 코드는 li라는 태그의 색상을 변경해준 코드입니다.

어떤 태그의 속성을 설정할지, 태그의 이름을 적고 중괄호( { , } )를 만들어서 설정하고자 하는 속성을 하나씩 작성합니다. 이때 하나의 속성 설정 후에는 그 뒤에 세미콜론( ; ) 을 붙여줘야 합니다.

또한 class나 id를 정의할 수도 있는데 이는 어떤식으로 작성되는지만 확인하고 class와 id에 대한 설명은 밑에서 하겠습니다. 위의 코드에서 10번째 줄에 . 으로 시작하는 것이 class를 정의한 것이고 13번째 줄에 #으로 시작하는 것이 id를 정의한 것입니다. 그리고 20번 줄~ 23번 줄에 번갈아 가며 class와 id를 적용시켰습니다.



세번째, External: CSS 파일을 만들어서 HTML파일과 연결 시키기

이번에는 따로 CSS 파일을 만들고 이를 HTML 파일에서 연결시킨 후 CSS를 적용하는 방법입니다.

먼저 사용할 HTML 파일과 같은 위치에 .css 로 끝나는 파일을 만들겠습니다.



그리고 두번째 방법에서 작성했던 코드, style 태그 내부에 있는 코드를 가져옵니다.

그리고 HTML 파일의 style 태그는 지우셔도 됩니다.

이제 HTML 파일에서 방금 만든 CSS 파일을 연결하는 코드를 작성해주어야 합니다.

link 라는 태그를 이용해서 아래와 같이 코드를 작성합니다.



상단 코드의 6번째줄에 link 태그를 이용하여 CSS 파일을 연결하였습니다.



이렇게 CSS를 적용하는 방법은 총 3가지 입니다.

그런데 세가지 다 사용을 했을 때, 중복되는 스타일이 있다면 어떻게 될까요?

이러한 것 때문에 여기에도 우선순위가 정해져 있습니다.

우리가 위에서 알아봤던 순서대로 우선순위가 높은데, Inline, Internal, External 순으로 우선순위가 높습니다.

즉, Internal 방법에서 p태그의 글씨를 검정색으로 설정해도 Inline 방법으로 p 태그에 글씨를 빨간색으로 해두었다면, p태그의 글씨는 빨간색이 됩니다.


마지막으로 id 와 class 에 대해 간단하게 살펴보고 마무리하겠습니다.

가장 큰 차이점으로는, 특정 태그에서 class는 여러개를 적용시킬 수 있지만, id는 단 하나만 적용이 가능합니다.

또한 id가 class보다 우선순위가 높습니다.

class와 id 등을 이용하여 CSS를 작성하는 것은 앞으로도 많이 알아볼 예정이니 이정도만 알아두시면 좋을 것 같습니다.


위 내용을 통해 최종적인 코드는 아래와 같습니다.






생각보다 양이 많아졌습니다.. :'(

글도 많고.. 사진도 많고..

여기까지 다 보신분들은 정말 너무 수고하셨습니다.

기초적인 내용이라도 나중에는 잘 기억나지 않아 헤맬수 있습니다.

시간되실때 다시한번 꼭 읽어보시고 전체적으로 이해하세요 :)

궁금한점 또는 잘못된 내용이나 오타등에 대한 피드백은 댓글이나 이메일(doorbw@outlook.com)을 이용해주세요!


블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요


Tornado (python web server) 관련 3번째 포스팅입니다. 

이번 포스팅에서 다뤄볼 내용은 토네이도에서 템플릿 사용하기(Using template in Tornado) 입니다.

바로 시작해보도록 하겠습니다.


Tornado 에서는 python에서 사용할 수 있는 어떠한 템플릿 언어도 사용할 수 있습니다.

Tornado는 다른 템플릿 언어들에 비해 매우 빠르고 유연한 템플릿 언어를 기본적으로 포함하고 있다고 합니다.

자세한 내용은 Tornado의 template 모듈 문서를 참조하시면 됩니다.

http://www.tornadoweb.org/en/stable/_modules/tornado/template.html?highlight=template )


Tornado 템플릿은 마크업 언어 내에 python의 제어문과 표현식을 포함하고 있는 HTML 입니다.

아래 예제를 통해 확인해보도록 하겠습니다.

먼저 HTML 코드입니다.


1
2
3
4
5
6
7
8
9
10
11
12
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}      
  </ul>    
 </body
</html>
cs


위의 코드를 저는 template_test.html 으로 저장하고 tornado로 구동시킬 python파일과 같은 디텍토리에 넣었습니다.

7번 라인과 9번 라인은 python의 제어문을 표현한 것인데 밑에서 설명하도록 하겠습니다.

그리고 아래 python 코드를 통해 위의 템플릿을 rendering 할 수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import tornado.httpserver
import tornado.ioloop
import tornado.web
 
class MainHandler(tornado.web.RequestHandler):     
     def get(self):         
          items = ["Item 1""Item 2""Item 3"]                  
          self.render("template_test.html", title="My title", items=items) 
 
application = tornado.web.Application([     
     (r"/", MainHandler),   
]) 
 
if __name__ == "__main__":     
     http_server = tornado.httpserver.HTTPServer(application)     
     http_server.listen(8888)     
     tornado.ioloop.IOLoop.instance().start()
cs


그리고 해당 python 파일을 구동시켜서 확인합니다.

제대로 랜더링이 되었다면 아래 사진과 같은 결과를 확인할 수 있습니다.




Tornado template 는 python의 제어문과 표현식을 함께 지원한다고 하였습니다.

제어문은 {% 와 %} 로 묶어 주면됩니다.

다시 위와 동일한 HTML 코드를 확인하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}      
  </ul>    
 </body
</html>
cs


위에서 언급하였듯이 7번 라인 ~ 9번 라인을 보시면 제어문이 사용됨을 알 수 있습니다.

그리고 제어문은 {% , %}으로 둘러쌓여 있습니다.


제어문은 python의 제어문과 동일합니다.

Tornado 에서는 if, for, while, try를 지원하지만 모두 {% end %} 로 끝내주어야 합니다.

또한 extends 와 block 문을 이용하여 템플릿 상속(template inheritance)를 지원합니다.


표현식은 함수 호출을 포함한 어떤 python 표현식이나 가능합니다.

'escape() <.xhtml_escape>', '.url_escape()', '.json_encode()', '.squeeze()' 함수는 default 로 제공하고 있습니다.

또한 다른 함수를 템플릿에 넘겨주는 것 또한

템플릿 렌더 함수에게 함수 이름을 keyword argument로 넘겨주기만 하면 가능합니다.


아래 예제를 확인해보겠습니다.

먼저 python 코드입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import tornado.httpserver
import tornado.ioloop
import tornado.web
 
class MainHandler(tornado.web.RequestHandler):     
     def get(self):         
          items = ["Item 1""Item 2""Item 3"]                  
          self.render("template_test.html", title="My title", items=items, sayHello=self.sayHello) 
 
     def sayHello(self, name):
          return 'Hello, '+name + '!!!'
 
application = tornado.web.Application([     
     (r"/", MainHandler),   
]) 
 
if __name__ == "__main__":     
     http_server = tornado.httpserver.HTTPServer(application)     
     http_server.listen(8888)     
     tornado.ioloop.IOLoop.instance().start()
cs


그리고 HTML 파일 코드 입니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>   
 <head>       
  <title>{{ title }}</title>    
 </head>   
 <body>     
  <ul>        
   {% for item in items %}          
    <li>{{ escape(item) }}</li>        
   {% end %}
   <p>
       {{ sayHello('DoorBW') }}
   </p>      
  </ul>    
 </body
</html>
cs


먼저 python 파일을 보시면 10번 라인에 sayHello 라는 이름의 함수가 새로 선언되었습니다.

name 이라는 인자를 받아서, Hello, name !!! 을 출력하도록 하는 함수입니다.

그리고 랜더링 시에 sayHello = self.sayHello 를 통해 sayHello 라는 이름으로 함수를 전달합니다.


HTML 파일을 확인하시면 11번 라인이 추가되었음을 확인할 수 있습니다.

sayHello라는 이름으로 함수를 받았기에 {{ sayHello('DoorBW') }} 라는 식으로 함수를 사용합니다.


실행결과는 아래와 같습니다.


내부에서 Tornado 템플릿은 python으로 직접 번역됩니다.

템플릿에 포함된 표현식은 템플릿을 나타내는 python 함수로 글자 그대로가 복사됩니다.

다른 말로 템플릿 표현식에서 이상한 내용을 쓴다면?

당연히 그 템플릿을 실행할 떄 이상한 python에러를 접할 것 입니다.


실제로 어플리케이션을 제작할 떄, Tornado 템플릿의 모든 기능, 특히 템플릿 상속 기능을 원활하게 사용하기위해

Tornado 공식 문서에서 template module 섹션에 대한 내용을 모두 읽어보시는 것을 추천드립니다.

위 예제에서 다룬 것은 극히 일부이며 공식문서에서 보다 많은 내용들을 참고하실 수 있습니다.



이렇게 해서 파이썬 웹서버 토네이도에서 템플릿 사용하는 방법에 대해 간략히 알아보았습니다.

다음에는 Cookies(쿠키)에 관한 내용에 대해 알아보도록 하겠습니다.









블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

지난 포스팅에 이어서 계속 진행합니다!

영화를 검색하기 위해 영화제목 입력창과 버튼을 추가합니다.

bootstrap에서 CSS->우측 Forms에 들어가서 처음보이는 code를 복사해 필요한 부분만 남겨두고 지워버리겠습니다.

위의 그림에 보이는 code를 복사하여 index.html.erb 파일의 상단에 붙여놓고 필요한 부분만 남기고 지우겠습니다.







지금까지 작성한 code로 run하면 아래와 같이 화면이 구성됩니다.





이제 model 개념을 사용합니다.

bash 창에 아래와 같은 명령어를 입력합니다.


rails g model list

그리고 


rake db:migrate


( ':' 양쪽에 공백이 있으면 안돼요!)
두 명령어를 입력하면 아래 사진과 같이 db/migrate 에 새로운 파일이 생깁니다. 해당 파일의 코드를 확인할게요




해당 파일에서 t.timestamps null: false 코드 위에 아래 코드를 입력합니다.


t.string :title


지금까지 한건, 사용자가 영화제목을 입력해서 검색한 것을

db에 저장해서 정보를 갖고 있도록 하기위해 db구축(?)을 한 과정입니다.

이제 이렇게 db에서 갖고있는 정보를 화면에 띄우도록 할게요.
먼저, 버튼을 눌렀을때 새로운 영화정보가 추가된 페이지가 되도록 routes.rb 파일의 코드를 수정하겠습니다.



이렇게 
get 'new_movie' => 'movie#new_movie' 를 추가하고 이제 movie_controller.rb 파일로 넘어갑니다.
movie_controller.rb 파일에서 new_movie라는 함수를 설정해서

사용자가 영화제목을 입력하고 버튼을 눌렀을때 입력한 text를 통해 json정보를 받습니다.

그리고 해당 영화의 정보가 존재하는지 Response 값을 확인한뒤 True인 경우 db에 저장하도록 합니다.

코드를 확인하면 아래와 같고 추가적으로 index함수내에서도 바뀐 부분을 확인해야 합니다.

26번줄과 31번줄의 코드가 변경되었습니다.



그리고 이제 버튼을 눌렀을때 controller에서 새롭게 설정한 함수가 실행되도록 해야하는데

이것은 index.html.erb 파일에서 코드를 수정합니다.




위의 사진에서 2번줄을 보시면 action 구문이 추가되었습니다.

어떠한 함수를 실행할지 설정해주었구요,

5번줄에 name="title"이란 코드도 추가되어 사용자가 input에 입력한 text의 이름을 설정해주었습니다.

이렇게 까지하시면 page를 run 하셨을때 어떤 영화의 정보도 존재하지 않지만,

적절한 영화의 제목을 입력하고 추가하면 영화의 정보가 새로 생깁니다.

하지만 입력한 text에 대한 영화정보가 없다면 영화정보가 추가되지 않습니다.
마지막으로 보기좋게끔 css등의 파일의 코드를 수정하고,

영화에 대한 보다 많은 정보를 받을 수 있게끔하며, 

youtube 주소를 이용해서 해당 영화에 대한 관련 영상을 볼 수 있는 링크를 걸게 하였습니다.
먼저 최종 결과화면은, 





이렇게 나왔습니다.

각 코드들은 아래와 같습니다.


routes.rb


application.html.erb


movie_controller.rb


index.html.erb


movie.css


db/migrate/~lists 파일


코드는 위에 나온 사진들 외에는 따로 수정한 파일 없습니다.
이렇게해서 오늘 LIKELION에서 학습한 내용 한번 쭉 복습했네요.
저도 많이부족해서 제대로 설명이 되지 않았거나 잘못 된 부분들도 많을텐데

전문가분들께서 보시고 피드백주시면 정말 감사하겠습니다^^

다음번에 더 공부해서 더 좋은 내용으로 포스팅할게요~



블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요

cloud9 을 이용해서 ruby언어를 통해 영화검색 사이트를 만들거에요.

처음이신분들도 쉽게 따라올 수 있도록 진행하겠습니다.


먼저 c9을 이용해서 workspace를 만들어줍니다. 언어는 Ruby를 사용합니다! 




개발환경을 구축하기 위해 bash창에 아래와 같은 명령어를 입력하여 movie라는 controller를 생성합니다.


rails generate controller movie index


그럼 좌측에서 app폴더안에 controllers폴더 안에 views 폴더에서 movie라는 폴더가 생긴것을 확인하실수 있습니다.
그리고 index.html.erb파일을 먼저 작성해보도록 할게요!




그리고 위의 index.html.erb 파일에서 먼저 구조를 잡도록 할게요.




위와 같이 초기 구조를 잡았습니다.
그리고 저장한뒤에 run을 해준뒤 페이지를 열어보면 기본창 밖에 뜨지 않는데

이때 주소창 맨 뒤에 /movie/index 를 입력해주면 빈 화면이 뜹니다.
여기서 route를 설정함으로써 /movie/index 를 입력해주지 않아도 우리가 개발하는 페이지가 뜰도록 할게요.
아래 그림과 같이 config 폴더 안의 routes.rb 파일을 열어서 
root 'movie#index' 코드를 추가해줍니다.





 이렇게 하고 저장하신뒤에 page를 확인해보시면

주소 맨 뒤에 /movie/index를 추가하지 않으셔도 우리가 coding중인 page로 접속됩니다.
그리고 이제 bootstrap을 사용하기 위해 bootstrap 페이지에서 getting started로 들어가

아래 그림에 보이는 코드를 복사할게요.



그리고 c9에서 app/views/layouts/application.html.erb 파일로 들어가 </head> 위에 복사한 코드를 붙여 넣습니다.





그리고 다시 app/assets/sylesheets/movie.scss 파일을 열어서 아래와 같이 코드를 작성합니다.






여기까지 하셨으면 page run 하셨을때 화면의 가운데에 3:9의 비율로
빨간색, 파란색 선이 보이실 거에요.

css파일에서 설정해준것과 같이 빨간색은 poster부분이고 파란색은 content부분인데

따로 height를 설정하지않아서 선처럼 나오는 겁니다.

색깔은 제대로 되었는지 확인하기 위해 넣은 것이므로 확인되신분들은 빼셔도 됩니다! (저도 빼고 진행할게요.)


이제 영화의 정보를 가져올건데요. http://www.omdbapi.com/?t= 의 사이트에서

?t= 뒤에 영화제목을 입력하셔서 확인해보시면 json형태로 영화정보가 나오는 것을 확인하실 수 있습니다!
위의 사이트에서 정보를 가져와 저희가 coding중인 사이트에 뜨도록 할거에요.

그것을 하기위해 app/controllers/movie_controller.rb 파일에서 code를 작성합니다.




위와 같이 작성하시면, 현재 @movie_info에 star wars와 harry potter의 정보가 들어 갔음을 뜻합니다.

이제 이것들을 확인하기위해 다시 index.html.erb 파일과 movie.scss 파일에 들어가서 코드를 수정할게요.





위와 같이 코드를 수정하시고 확인하면 page에 star wars 와 harry potter의 정보가 뜨는 것을 확인할 수 있습니다.
.scss는 개인적으로 보기 이쁘게끔 수정하시면 됩니다. 이후 .scss파일 수정한 내용에 대해서는 따로 언급하지 않고 맨 마지막에서 전체적인 코드만 올릴게요!

이후 포스팅에선 사용자가 원하는 영화 이름을 입력해서 그 영화의 정보를 가져오는 기능을 구현하겠습니다.


블로그 이미지

Tigercow.Door

Back-end / Python / Database / AI / Algorithm / DeepLearning / etc

댓글을 달아 주세요