TigerCow.Door

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

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

지난 포스팅을 시작으로 Ruby on Rails를 시작했습니다.

따라서 이번 포스팅의 내용은 다음과 같은 순서로 진행됩니다.


- 지난 내용 복습

- Array 개념

- Range

- Lotto 번호 생성 페이지 만들기

- 이미지 넣기



1. 지난 내용 복습


지난 포스팅에서는 먼저 MVC 패턴과,

ruby on rails가 무엇인지 알아보았습니다.

우리가 앞으로 다루게 될 ruby on rails 는 백엔드(backend) 작업으로써, ruby 언어를 이용한 프레임워크입니다.

백엔드를 다루다보면 사소한 문법실수나 기타 실수때문에 아예 웹페이지가 뜨지 않을때도 많습니다. 따라서 하나하나 꼼꼼히 살펴보고, 에러가 발생했을때는 에러메세지를 보고 직접 해결해보는 연습을 하시면 좋습니다.

개인적인 팁을 드리자면, 에러가 발생했을 때, 사용하고 있는 언어나 프레임워크를 시작으로 에러메세지를 구글링하면 해결방안이 나올 때가 있습니다.

예를 들어, ruby on rails를 사용하다가 abc 라는 에러가 발생하면, 구글에 ruby on rails abc error 와 같은식으로 검색하시면 됩니다.


그리고 이어서 우리는 Cloud9을 통해 ruby on rails를 시작하는 방법에 대해서 알아보았습니다.

cloud9은 우리가 특정 프레임워크를 우리의 컴퓨터에 직접 설치하지 않고 가상으로 사용할 수 있도록 해주는 서비스 입니다. 일반적으로 IDE 라고 불리는데, cloud9 이외에도 국내에서 구름IDE등이 존재합니다.

현재 기존의 cloud9은 신규가입이 불가하여 서울시립대학교 멋쟁이사자처럼에서는 대표님께서 따로 결제를 진행하여, 다른 학생들을 팀에 초대하여 cloud9를 이용하는 방식을 사용하고 있습니다. 다른분들께서는 기존의 cloud9말고 aws c9이라는 서비스를 무료로 이용할 수 있지만 워크스페이스(가상환경)를 하나만 생성할 수 있는 등의 제약이 있습니다.


또한 간단하게 ruby on rails 프레임워크를 이용해보는 시간을 가졌습니다.

home이라는 컨트롤러를 생성하여 컨트롤러에서 다루는 변수를 view로 가져와 출력해보기도 하였습니다.



2. Array 개념


이번에는 바로 ruby on rails에서 직접 코딩하기보다 간단한 개념을 하나 익혀보겠습니다. 하지만 바로바로 결과를 확인할 수 있도록 cloud9을 실행해서, 코드로 확인해보면서 진행하겠습니다.


먼저 cloud9 서비스를 키고 새로운 ruby on rails 워크스페이스를 생성합니다.

워크스페이스가 생성되고 나면 아래에 있는 창을 bash라고 했었습니다. 터미널이라고도 불리는 것으로써 윈도우에서의 cmd(명령 프롬프트)라고 생각하시면 됩니다.

해당 bash 창에서 다음과 같이 명령어를 입력합니다.



irb 라고 입력하면, 위의 사진과 같이 ~~~ $ 였던 것이 ~~~ > 으로 바뀝니다.

간단히 말해서 irb란, 루비 프롬프트, 루비의 대화형 창에 들어오게 하는 명령어입니다. 해당 창에서는 ruby 언어를 통한 코딩이 바로바로 가능합니다.



이제 Array 에 대해 알아보면서 해당 irb 창에서 바로 테스트 해보겠습니다.

array란 배열이라는 의미입니다. 

배열이라는 것은 다음 그림과 같은 것 입니다.



위의 그림과 같이 1부터 6이 담긴 상자가 이어져 있습니다.

그리고 index 라고 하는 각 상자에 대한 번호가 부여되어 있습니다.

쉽게 생각해서 이러한 형태를 배열이라고 생각할 수 있습니다.

즉, 우리가 위의 형태를 가진 배열을 a라고 설정한다면 a[0] = 1이고 a[3] = 4가 될 것입니다.


ruby 에서는 이러한 배열을 만들기 위해서 처음에 다음과 같이 명령을 내려줍니다.


a = Array.new


이 명령어를 통해서 a라는 이름의 새로운 배열을 만들게 됩니다.

그리고 위와 같은 명령어를 통해 생성되는 배열은 기본적으로 어떠한 상자도 가지고 있지 않은, 단순히 배열로써의 성격만 띄고 있는 상태의 배열입니다. 만약 처음부터 3개의 상자를 가진 배열을 만들고 싶다면,


a = Array.new(3)


과 같이 입력하면 됩니다.

바로 irb 를 통해서 진행해보도록 하겠습니다.



irb 에서는 만들어진 배열을 바로 결과로 보여줍니다.

이때 a = Array.new(3) 을 통해 세개의 상자가 생기긴 했는데 우리가 따로 입력하지 않은 nil 이라는 값이 들어있는 것을 볼 수 있습니다.

배열을 처음 만들게 되면 우리가 어떠한 값을 넣을 것인지 지정해주지 않았으므로 아무 값도 들어가지 않습니다. 이럴때 컴퓨터는 어떠한 값도 존재하지 않는다는 것을 표현해주기 위해서 null 또는 nil 이라고 표시합니다. 즉, null 또는 nil 이란 0이나 기타 어떠한 값도 아닌, 아무것도 없는 값을 의미합니다.


이제 우리가 새롭게 만든 배열 a 에 특정 값을 넣어보도록 하겠습니다.

새로운 값을 삽입하기 위해서는 push라는 함수를 이용합니다.


a.push(3)


위와 같이 (배열).push(삽입할 값) 을 입력함으로써 배열에 새로운 값을 입력할 수 있습니다.



그런데 우리가 처음에 3개의 상자를 가지게 만들어서 생겼던 nil이 사라지지 않고 그대로 존재하고 있습니다.

push 함수는 기존의 상자에 대해 값을 변경하는 등의 작업이 아닌, 새로운 상자를 만들면서 우리가 입력한 값을 넣어주는 함수이기 때문입니다.

그럼 nil 값을 가지고 있는 3개 상자의 값을 바꿔보도록 하겠습니다.

처음에 배열에 대해서 소개해드릴때 각 상자는 자신의 위치, 인덱스를 가지고 있다고 말씀드렸습니다.

이러한 인덱스를 이용하여 값을 바꿀 수 있는데, 이때 인덱스의 시작값은 0입니다.

즉, 현재 a[0] == a[1] == a[2] == nil 인 것입니다.

따라서 각 상자에 새로운 값을 넣어주도록 하겠습니다.



각 상자에 대한 인덱스를 이용하여 값을 바꿔줌으로써 현재 a라는 배열은, [1, 2, 3, 4, 5, 10] 이라는 형태를 가지게 되었습니다.


이번에는 배열에서 지정한 개수의 요소를 랜덤하게 뽑는 함수 sample에 대해서 알아보겠습니다. 현재 a 배열에는 6개의 요소가 들어있는데 이중 랜덤하게 하나의 요소를 뽑도록 하는 함수입니다. 다음과 같이 사용합니다.



또한 sample 함수의 뒤에 소괄호를 통해 숫자를 써주면 그 값만큼의 요소를 랜덤하게 뽑을 수 있습니다.



3. Range


이번에는 Range에 대해서 알아봅니다.

단순하게 값에 대한 범위를 말하는 것이라고 생각하시면 됩니다. 즉, 우리가 1부터 45를 표현하려고 하는데 이를 단순하게 1, 2, 3, 4, 5, ... 44, 45 이런식으로 표현하는 것이 아니라 보다 쉬운 방법을 사용하는 것입니다.

ruby 에서는 점 두개( .. )를 이용해서 범위를 표현합니다.

즉, 1~45는 1..45 로 표현할 수 있습니다.



4. Lotto 번호 생성 페이지 만들기


이제 위에서 알아봤던 개념들을 바탕으로 Lotto 번호를 만들어내는 페이지를 제작해보도록 하겠습니다.

먼저 여러분이 사용하셨던 irb 창을 나가기 위해 exit를 입력합니다.



먼저, ruby on rails가 이용하는 MVC패턴 중 Controller를 만들어보도록 하겠습니다.

아래 명령어를 통해 home 이라는 컨트롤러와 함께 index라는 액션을 함께 생성합니다. (액션이라는 것에 대해서는 아래에서 설명하겠습니다.)


rails generate controller home index

or

rails g controller home index


위의 명령어를 통해서 app > controllers 안에 home이라는 컨트롤러가 생성되며 app > view 에 home이라는 폴더가 생겼을 것입니다.

먼저 app > controllers 안에 있는 home 컨트롤러를 확인해보겠습니다.



위와 같은 파일이 열립니다.

2,3번째 줄을 보시면 def index ~ end 라는 것이 적혀있습니다.

이것이 아까 우리가 컨트롤러를 만드는 명령어에서 함께 만든 index 액션입니다.

액션이라는 것은, 우리가 특정 view에 대해 서버측에서 어떻게 행동할지(데이터를 처리하거나 기타 로직을 수행하는 등) 작성되는 곳 입니다.

즉, 하나의 액션에는 하나의 view가 대응됩니다.


위에서 우리가 index라는 액션을 만들었기 때문에 아까 확인했던 app > view > home 안에도 index.html.erb 라는 view가 생성되었을 것입니다.


이제 우리의 index 액션에 우리가 처리하고자 하는 코드를 작성해보도록 하겠습니다.


로또 번호 생성 페이지를 제작할텐데, 간단히 로또 번호에 대한 규칙을 확인해보면 아래와 같습니다.


- 1~45의 숫자가 존재한다.

- 7개의 숫자를 추첨한다.

- 숫자는 중복되지 않는다.


크게 위의 3가지 규칙이 존재합니다.

그럼 먼저 1~45의 숫자를 만들어서 배열에 담아보도록 하겠습니다.



위의 3번째 줄을 보시면, lotto_num 이라는 이름으로 1~45의 값을 갖는 배열을 만들어주었습니다.

우리가 배열에 대해서 알아볼때, 새로운 배열은


a = Array.new


와 같은 방식으로 만들었는데, .new 를 이용한 방식으로 배열을 생성하게 되면 내용이 비어있는 상자들만 가진 배열을 만들게 됩니다. 이후 각각의 상자들의 값을 수정해주어도 상관없지만, 좀 더 편하게 만들기 위해서는 위의 사진과 같은 코드를 이용하여 처음부터 1~45 각각의 값을 갖는 상자들을 만들었습니다.


그럼 이제 1~45의 숫자를 가지고 있는 lotto_num 배열에서 7개의 숫자를 추첨해보도록 하겠습니다.


우리가 위에서 알아본, 배열에서 랜덤하게 요소를 뽑는 sample 함수를 이용합니다.



또한 뽑게되는 7개의 숫자는 모두 view 에서 사용되어야 하는 변수이므로 변수이름 앞에 @를 붙여주도록 합니다.


이렇게 7개의 숫자를 추첨하였습니다.

하지만 아직 하나의 문제가 남아있습니다.

지금 추첨하는 7개의 숫자는 서로 중복될 수 있습니다.

단순히 1~45의 숫자를 가진 배열에서 랜덤하게 하나를 뽑을 뿐이지, 이미 뽑힌 숫자는 안된다라는 등의 조건을 걸지 않았기 때문입니다.

어떻게 해결할 수 있을까요?


다양한 방법이 존재하지만, 그 중에서도 심플한 방법을 사용해보도록 하겠습니다.

바로, 추첨되는 번호를 1~45숫자를 가진 배열에서 삭제시키는 방법입니다.

삭제를 할때는


<배열>.delete(삭제하고자 하는 요소 값)


와 같은 delete 함수를 이용합니다.

작성된 코드는 아래와 같습니다.



이렇게 하면 위에서 알아본 3가지 규칙에 따른 로또 번호 생성이 완료되었습니다.

그럼 이렇게 추첨한 번호들을 view에서 보여주도록 하겠습니다.


app > view > home 폴더를 들어가면 index.html.erb 라는 파일이 있습니다.


해당 파일에 우리가 추첨했던 로또 번호들을 아래와 같이 작성하면 되겠습니다.


지난 포스팅에서도 설명 드렸듯, html.erb에서 ruby를 사용하기 위해서는 특별한 구문을 사용해야 합니다.

위에서와 같이 쓰려고하는 내용을 <%=  %>로 묶어 줍니다.

위와 같이 코드를 작성하고 run project 를 한 후에 주소창에 /home/index 를 붙여서 확인하면 다음과 같습니다.



이렇게 올바른 결과가 출력되고, 새로고침을 할 때마다 번호들이 새롭게 추첨되는 것을 볼 수 있습니다.


우리가 위에서 했던 방법말고, 반복문을 이용해서 코드를 더 짧게하는 등의 방법도 가능합니다. 크게, 반복문을 사용하거나, sample 함수를 응용해보는 방법입니다.

각각에 대한 코드는 아래에 공개하겠으나 꼭 스스로 한번 생각해보고, 코드를 작성해보고 난 후에 확인하시기를 바랍니다.


* 반복문 사용하기

꼭 직접 도전해보고 확인하세요(클릭)



* sample 함수 응용하기

꼭 직접 도전해보고 확인하세요(클릭)



5. 이미지 넣기


마지막으로 해볼 것은 우리가 단순히 숫자로 출력했던 것들을 이미지로 출력하게끔 하는 것입니다.

먼저 사용되는 이미지 압축 파일은 다음과 같습니다.

images.zip

해당 파일을 다운받아서 확인해보시면 아시듯 1~45번의 공으로된 이미지가 1~45이름으로 저장되어 있습니다.



이제 다운받은 이미지를 넣기 위해 위의 사진과 같이 app > assets > images 폴더를 클릭한뒤 상단 탭에 있는 File > upload local file > select files 를 누르고 다운받은 이미지 45개를 첨부합니다.



그리고 index.html.erb 파일의 코드를 위와 같이 수정합니다.

루비에서 image_tag를 작성하고 그 뒤 소괄호에 파일이름을 넣으면 자동으로 이미지를 불러와 줍니다. 또한 이미지파일 이름을 적을때 #{} 를 이용하면 중괄호 안에 우리가 컨트롤러에서 지정한 변수를 사용할 수 있습니다.


이와 같이 수정한 후에 결과를 확인해보면 아래와 같이 이미지로 로또 번호가 생성되는 것을 확인할 수 있습니다.



이렇게하여 로또 번호 생성 페이지를 만들어 보았습니다.

새롭게 알아보고 있는 ruby on rails 를 학습하며 낯설고 어려운 점도 많겠지만 하나하나 천천히 따라오다보면 어느새 잘 이해되고 스스로 할 수 있게 될 것입니다.

잘 이해가 안되거나, 에러가 나는 부분들은 댓글이나 이메일을 통해서 말씀해주시면 최대한 도움드리도록 하겠습니다.


블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc

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

4월 2일에 페이지 제작 실습(2)를 포스팅을 한 이후에 오랜만에 정리하는 것 같네요.

그 동안 서울시립대학교 멋쟁이사자처럼에서는 수업을 진행했으나, 새로운 걸 배우기 보다 그 동안 배웠던 내용을 토대로 특정 웹페이지들을 선정하여 그대로 만들어보고, 더 나아가 새롭게 JQuery를 적용해 보는 등의 수업을 진행하였습니다.

이전의 포스팅들에서 모두 다루었던 내용들이기 때문에 따로 포스팅은 하지 않았습니다.


그리고 4월 8일 일요일수업에서는 Ruby on Rails 수업을 시작하였습니다.

아직은 local(자신의 컴퓨터) 자체 환경에서 진행하지 않고, Cloud9 이라는 서비스를 이용하여 진행합니다.

따라서 해당 포스팅은 아래와 같은 순서로 진행될 예정입니다.


- Ruby on Rails 이란

- MVC pattern

- Cloud9 이용하기

- Ruby on Rails 버전 확인 및 버전 변경

- Ruby on Rails 기초



1. Ruby on Rails 이란



Ruby on Rails 이란 쉽게 말해서 Ruby 라는 프로그래밍 언어를 기반으로 한 MVC패턴의 프레임워크입니다.

Ruby, MVC패턴, 프레임워크.. 모두 처음 들어보셨을텐데요, 하나씩 간단하게 알아보도록 하겠습니다.


먼저, Ruby란 프로그래밍 언어의 하나입니다.

혹시 C, Java, Python 등에 대해서 들어보셨나요? 모두 프로그래밍 언어들 입니다. 즉 우리가 사용하는 언어가 한국어, 영어, 일본어 등 여러개가 있듯 컴퓨터에게도 컴퓨터가 이해할 수 있는 여러가지 언어가 있습니다. 그리고 Ruby 는 그 중 하나인 것입니다.

재미있는 점은, Ruby 언어의 철학 중 하나가, 스트레스 없는! 즐거운 프로그래밍이라는 것입니다. 나중에 직접 사용해보시면 느끼시겠지만 이러한 철학대로 루비는 매우 직관적이고 이해하기 쉬운 문법 구조를 가지고 있습니다.

따라서 코딩을 처음하시는 분들, 비전공자 분들도 쉽고 빠르게 익히실 수 있는 장점이 있습니다.

또한 세계적으로 정말 많이 사용하는 언어이기도 합니다 :)


그럼 MVC전에, 프레임워크에 대해서 알아볼게요.

프레임워크(Frame-work)란, 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조이며, 소프트웨어 개발에 있어서 하나의 큰 뼈대역할을 해준다. 라고 나무위키에 나와있습니다.

쉽게 말해서, 우리는 웹 어플리케이션을 만드려고 하고있죠?

이러한 상황에서 프레임워크는, 우리가 웹 어플리케이션을 만드는데 보다 쉽고 빠르고 멋있게 만드는데 도움을 주는 녀석이라고 생각할 수 있습니다.

예를 들어보면, 여러분들이 발표자료를 만들 때 PPT를 처음부터 다 디자인하고 만들면 물론 좋겠지만, PPT가 처음인 분들에게는 매우 어렵고 낯선 작업일 수 있습니다. 이럴때 우리는 보다 쉽게 만들기 위해서 템플릿이라는 것을 통해 만들어 내곤하죠? 쉽게 생각해서 프레임워크가 이러한 템플릿역할을 한다고 생각하시면 됩니다.

웹 어플리케이션을 아예 처음부터 만드는데에는 보안이나 구조등에 대해서 매우 신경쓸일이 많고 작업해야 할 것들도 매우 많습니다.

따라서 우리는 고급개발자분들께서 만들어 놓은 프레임워크를 이용하여 빠르고 쉽게 웹 어플리케이션을 만들게 됩니다.


그럼 다시한번, Ruby on rails 는 뭘까요?

처음에 말씀드렸듯이 Ruby on rails는 Ruby 라는 언어를 기반으로 한 프레임워크입니다. 즉, Ruby 언어를 이용해서 웹 어플리케이션을 보다 쉽게 만들수 있도록 돕는 것이라고 할 수 있겠습니다.


우리 멋쟁이사자처럼에서는 Ruby 언어에 대한 문법수업을 따로 진행하지 않고, Ruby on Rails 를 이용하며 웹 어플리케이션을 만들면서 그때 그때 필요한 문법들을 공부해볼거에요.

위에서 말씀드렸듯이 Ruby는 매우 직관적이고 이해하기 쉬운 문법 구조를 가졌기 때문에 너무 걱정하지 않으셔도 괜찮습니다.



2. MVC pattern



전체적인 MVC패턴을 나타내면 위의 그림과 같습니다.


저의 블로그를 예시로 한번 생각해볼게요.

먼저 제 블로그의 메인화면으로 오려면 우리는 주소창에 

http://doorbw.tistory.com/

이라는 URL을 입력합니다.

이것이 요청을 보내는 것입니다.

'서버야, 나한테 http://doorbw.tistory.com/ 주소를 가진 웹 어플리케이션을 보여줘!' 라는식으로 요청을 보내는 것이죠.

해당 요청을 받은 서버에서는 주로 MVC(Model View Controller)패턴으로 이루어져 있습니다.


먼저 요청을 받은 Controller는

'그래, 잠깐만! Model아 http://doorbw.tistory.com/ 주소에 맞는 모델을 찾아줘' 라고 Model 한테 요청에 대한 결과 값을 찾도록 지시합니다.


즉, Model은 Controller의 요청에 따른 데이터를 찾아서 알맞은 데이터를 Controller 한테 보내줍니다.

'Controller야 너가 요청에 대한 데이터 여기있어!'

이때 Model 은 데이터베이스, 변수, 초기화 값 또는 이런 데이터를 가공하는 컴포넌트를 이야기합니다.


그럼 해당 데이터를 받은 Controller는 이것을 View에게 전달합니다.

'View야 여기 사용자가 요청한 데이터야!'


이렇게 해서 데이터를 받은 View는 실제로 사용자에게 시각적으로 http://doorbw.tistory.com/에 대한 화면을 응답으로 나타냅니다.


이것이 전체적인 MVC 패턴의 과정입니다.

우리는 그동안 HTML과 CSS, JavaScript를 공부하면서 시각적인 프론트엔드(Frontend)를 배웠습니다.

그리고 이제 Controller 와 Model에 대해서 배워 볼 것인데 이것을 Ruby on rails라는 프레임워크를 통해서 배워볼 것입니다.



3. Cloud9 이용하기



우리는 위에서 설명드린 Ruby on Rails 를 이용하기 위해 Cloud9 IDE 서비스를 이용합니다.

Cloud9 IDE 서비스는 간단하게, 가상컴퓨터, 가상환경을 제공해주는 서비스라고 생각하시면 됩니다.

우리의 노트북, 컴퓨터도 있는데 이런 서비스를 이용하는 이유는, Ruby on Rails가 윈도우환경에서는 설치하는 작업등이 약간 까다롭기 때문입니다.

그럼 Cloud9 에서는 쉽나요?

네, 쉽습니다. 우리가 Cloud9 IDE에서 하나의 가상환경을 만들때 Ruby on Rails 를 이용할 것이라고 명시해주면 Ruby on Rails를 이용할 수 있는 기본적인 환경을 다 셋팅해주기 때문에 매우 간편합니다.


그런데 작년기준으로 aws에서 Cloud9(이하 c9)을 인수하게 되어서 현재는 aws c9 과 기존 c9 두개의 서비스가 존재하고 있습니다.

기존 c9유저는 그대로 이용가능하나 신규가입은 불가합니다.

이와 다르게 aws c9은 신규가입이 가능하지만 워크스페이스를 1개 밖에 못만든다는 단점이 있습니다.


현재 멋쟁이사자처럼에서는 aws c9을 이용하여 수업을 진행하고 있는데, 저희 서울시립대학교 멋쟁이사자처럼에서는 기존의 c9을 이용합니다.

신규가입이 불가능하지만, 기존 유저가 c9에서 pro로 업그레이드하며 매달 결제를 하면 기존유저뿐 아니라 신규유저를 초대하여 함께 이용가능합니다.

따라서 본 포스팅에서는 기존 c9을 이용합니다.

(aws c9을 이용하시는 분들도 내용에 있어서는 차이가 없지만, 새롭게 워크스페이스를 만드는 것이 불가할 뿐입니다.)


현재 서울시립대학교 멋쟁이사자처럼 6기분들에게는 uos_likelion이라는 팀 이름으로 초대메일이 갔을 것입니다.

해당 메일을 확인하고 링크를 통해 c9에 가입하시길 바랍니다.


가입후에 아래와 같은 화면이 뜨게 됩니다.



좌측에 있는 파란색 목차중에 uoslikelion이라는 팀이 있는 걸 확인하세요.

(서울시립대 분들 중 해당 항목이 나타나지 않는 분들은 연락바랍니다.)


팀을 확인했으면, Workspaces에서 + 버튼을 눌러 새로운 워크스페이스를 만듭니다.



그리고 위의 내용처럼, 워크스페이스의 이름을 작성해주시고(주황색이 뜨면 안됩니다. 첫번째 글자는 숫자가 불가하다는 등의 규칙이 있습니다.) 그 아래 Team에서 uoslikelion을 선택하고, 아래 템플릿을 고르는 곳에서 Ruby를 선택해주시길 바랍니다.

이후 아래에 있는 초록색 버튼을 눌러 워크스페이스를 생성합니다.

약간의 시간이 소요될 수 있습니다.



워크스페이스가 생성되면 위와 같은 창이 뜨게 됩니다.

좌측에 보면 다양한 폴더와 파일들이 있을 텐데, 한번에 다 설명드리는 것보다 필요한 것들에 대해서 그때그때 설명드리려고 합니다.

이렇게 해서 Ruby on Rails 기반의 c9 워크스페이스 생성을 진행했습니다.



4. Ruby on Rails

    버전 확인 및 버전 변경


여러분께서 이용하시는 특정 프로그램에도 버전이 있듯이, Ruby on Rails 라는 프레임워크에도 당연히 버전이 있습니다.

그럼 방금 우리가 생성한 워크스페이스의 Ruby on Rails의 버전을 확인해보겠습니다.

워크스페이스에서 아래부분(기본적으로는 파란색)을 보시면 bash 라는 탭이 눌러져 있습니다.

해당 탭은, 우리가 윈도우에서 사용하는 cmd(맥에서는 터미널), 프롬프트와도 같은 것입니다. 여기에 특정 명령어들을 입력해서 몇가지 작업을 합니다.

bash 창이라는 이름을 기억해두시길 바래요.


이제 버전확인을 위해서 bash창에 아래와 같은 명령어를 입력합니다


rails -v



명령어를 입력하면 위와 같이 Rails 4.2.5 라고 버전을 알려줍니다.

(aws c9을 이용하시는 분들은 5.~ 버전이 나올 것입니다. 추가적인 버전 변경없이 그대로 사용하셔도 되고 버전변경 하셔도 상관없습니다.)


이제 이 Rails의 버전을 5.0.6 으로 올려야 합니다.

최신버전은 더 높지만, 현재 멋쟁이사자처럼 메인강의에서 5.0.6버전으로 진행하기때문에 해당 버전으로 올리도록 하겠습니다.


워크스페이스 좌측 폴더 및 파일 목록에서 Gemfile 이라는 파일을 더블클릭합니다.




그럼 위와 같은 코드가 작성된 파일이 열립니다.

여기서 5번째줄을 보시면 gem 'rails', '4.2.5' 라고 적혀있을텐데 이것을 위의 그림의 코드처럼 gem 'rails', '5.0.6' 으로 바꿉니다.

그리고 컨트롤+s (맥: 커맨드+s) 를 눌러서 저장합니다.

위 그림에서 탭칸쪽을 보시면 Gemfile이라는 파일 옆에 회색 동그라미가 보이는데 이것은 수정되었지만 저장되지 않았다를 표시해주는 것입니다.


저장을 하고 난 후에 bash 창에 아래와 같은 명령어를 입력합니다.


bundle update



해당 명령어를 입력하면 무언가 계속 진행됩니다.

약간의 시간이 소요되니 잠시 기다리면 됩니다.

기다리고 나서 다시 입력할 수 있는 상태가 되면 아래와 같이 버전을 확인해봅니다.



레일즈의 버전이 5.0.6으로 변경된 것을 확인할 수 있습니다.



5. Ruby on Rails 기초


이제 Ruby on Rails 의 기초를 배워보겠습니다.

우리가 위에서 MVC 패턴에 대해서 알아보았는데, 이제 직접 컨트롤러를 만들어보고 약간의 확인해보도록 하겠습니다.

컨트롤러를 만들때는 bash 창에 아래와 같은 명령어를 입력해서 만듭니다.


rails generate controller home index


위의 명령어는 home 이라는 이름을 가진 controller 를 생성하는 명령어입니다. 이때 home 은 단순히 컨트롤러의 이름이기 때문에 여러분들께서 편하신대로 설정하셔도 됩니다. 또한 그 뒤에 있는 index 를 함께 만들어주는 옵션입니다. index에 대해서는 추후 공부해볼 것이니 일단 그대로 써줍니다.



위와 같이 명령어를 입력하면 bash 창에서도 뭐가 막 생기는 걸 볼 수 있고, 실제로 좌측 목록에서도 새로운 파일이나 폴더들이 생긴것을 확인할 수 있습니다.

혹시 컨트롤러의 이름을 잘못 입력하거나 잘못 만들었다 하시는 분들은 어떻게 할까요?

새로생긴 파일들을 하나하나 찾아서 지우는 것이 아니라 하나의 명령어로 간단히 지울 수 있습니다.

만약 컨트롤러를 지우고 싶을땐 아래와 같은 명령어를 입력합니다.


rails destroy controller home index


물론 home은 여러분께서 지우고자 하는 컨트롤러의 이름입니다.


이제 실제로 컨트롤러를 약간 사용해보겠습니다.

좌측 목록에서 app > controller > home_controller.rb 파일을 더블클릭합니다.



위와 같이 class 와 def 가 쓰여진 코드를 확인할 수 있습니다.

해당 파일은, home이라는 컨트롤러에 대해서 진행할 작업을 코드로 작성해주는 곳입니다.

구체적으로는 추후에 천천히 배우도록 하고 간단하게 Controller 에서 view로 변수를 전달해보도록 하겠습니다.

아래와 같이 위의 파일에 코드를 작성합니다.



코드에서도 쓰였듯이, local_var 와 @global_var 라는 것을 만들고 문자열을 대입해주었습니다.

의미상으로 정확히 지역변수, 전역변수와는 좀 다르지만 이해를 위해 일단 저렇게 네이밍을 해보았습니다.

이때 두 변수의 차이가 있는데 view에서도 사용되는 변수라고 되있는 변수는 이름앞에 @ 가 붙어있습니다.

우리가 컨트롤러 내에서 자체적으로 변수를 사용하여 작업할 때도 있지만, 당연히 컨트롤러에서 나온 데이터를 view 로 넘겨줘야할 때도 있습니다.

이럴때 view 로 넘기고자 하는 변수의 이름 앞에 @ 를 붙여야 합니다.


그럼 @ 를 붙인 변수를 사용해보도록 하겠습니다.

app > view > home > index.html.erb 라는 파일을 더블클릭합니다.



해당 파일을 열면 1번과 2번 줄의 코드만 작성되어 있습니다.

우리가 그동안 학습했던, 익숙한 html의 코드입니다.

이제 여기에 우리가 아까 컨트롤러에서 넘긴 변수를 사용해 볼 것입니다.

다시한번 파일명을 보시면 단순히 .html 로 끝나는 것이 아니라 그 뒤에 .erb 라고 되어 있습니다. 해당 확장자는 html 파일에서 ruby 언어를 알아들을 수 있도록 하는 것입니다.

그럼 어떻게 ruby 언어를 사용할까요?

위 그림의 3번째 줄을 보시면 


<%= @global_var %>


와 같이 작성되어 있습니다. 이 처럼 ruby 언어를 사용하기 위해서는 

<%=  %> 로 작성하고자 하는 ruby 코드를 묶어줘야합니다.

또한 추후에 배울 반복문(for 등)을 사용하기 위해서는 약간 다른,

<% %>와 같은 구조를 사용하는데 이건 나중에 더 자세히 다뤄보도록 하겠습니다.

위의 그림처럼 3번째줄에 코드를 작성하고, 실제로 잘 나오는지 확인해보도록 하겠습니다.


워크스페이스의 상단을 보시면 run project 가 있습니다.

해당 버튼을 누르면 아래 bash가 있던 창에 새로운 탭이 열리며 아래와 같이 뜹니다.



해당 창은 실행되고 있는 우리의 웹페이지를 일시적으로 배포해준 것에 대한 창입니다.

해당 창을 확인해보시면, Your code is running at ~

이라는 부분의 주소를 클릭하여 open 을 누릅니다.

그리고 주황색의 무슨 창이 뜨시면, open app 을 누릅니다.

(안떠도 상관없습니다.)

그러면 아래와 같은 화면이 뜹니다.


여기서 주소창 맨뒤에, /home/index 를 입력합니다.

저같은 경우엔 

https://review-0408-doorbw.c9users.io/home/index

가 되겠습니다.

그럼 아래와 같은 페이지가 뜨게됩니다.


우리가 컨트롤러에서 넘겨서 html 파일에서 사용한 @global_var 가 정상적으로 출력되어야합니다.


여기서, 첫 화면에서 위의 화면이 뜨지 않고 home/index 를 입력해야 하는 것은 route 설정과 관련되어 있습니다.

이에 대해서는 추후에 공부해보도록 하겠습니다.



이렇게 해당 포스팅부터는 새로운 back-end에 대해서, 그 중에서도 ruby on rails 에 대한 시작을 하였습니다.

해당 포스팅과 관련이 없어도 궁금하거나 의문이 생기는 부분이 있다면 언제든지 댓글이나 이메일을 통해 질문해주시면 감사하겠습니다 :)

블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / 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

Data-Analysis / AI / back-end / 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

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc

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

서울시립대학교 멋쟁이사자처럼에서 지난 25일, 일요일에 수업을 진행했는데 개인노트북에 문제가 생겨서 바로 정리하지 못하고 이제서야 하게 되었습니다.

해당 수업부터 프론트엔드에 관련되서는 작년 서울시립대학교 멋쟁이사자처럼 5기의 김도현님께서 수업을 진행해주시겠습니다.

먼저 해당 포스팅에 대한 내용 순서는 아래와 같습니다.


- Class, Id

- position, float

- z-index, fonts

- link, stylesheet

- 페이지 제작을 통한 실습



1. Class , id

id는 태그에서 1개만 적용이 가능합니다.

예를 들어, 특정 태그에 id_1 과 id_2 를 함께 적용하고 싶다고해도 불가능 한 것입니다. 하나의 태그에는 하나의 id만 적용이 가능합니다.

하지만 이와 반대로 class는 복수 적용 가능합니다. 즉, 특정 태그에 class_1과 class_2를 적용시키고 싶다면 띄어쓰기로 구분하여 두개의 클래스를 모두 명시해줌으로써 모두 적용시킬 수 있습니다.



바로 코드를 통해 확인해보도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #id_1{
        background-color: blue;
        width: 250px;
        height: 250px;
      }
      .class_1{
        background-color: red;
        width: 250px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id = "id_1">
      loremloremloremloremloremloremloremloremloremlorem
    </div>
 
    <div id = "id_1">
      loremloremloremloremloremloremloremloremloremlorem
    </div>
 
    <div class = "class_1">
      loremloremloremloremloremloremloremloremloremlorem
    </div>
 
    <div class = "class_1">
      loremloremloremloremloremloremloremloremloremlorem
    </div>
  </body>
</html>
 
cs


위의 코드에서는 4개의 division을 생성하여 2개에는 id_1 을 id로 지정시켰으며 나머지 2개의 division에는 class_1을 class로 지정하였습니다.

추가적으로 위에서 말씀드렸듯이 여러분께서 직접 id_2와 class_2를 만들어 적용시켜보시면 그 차이를 아실수 있습니다.



2. span, div


span과 div에 대한 것은 지난 포스팅에서도 말씀드렸던 부분입니다.

간단히 되짚어 보자면, span은 특정 문장이나 문단, 단어와 같은 것에 대해 스타일을 달리하는 등의 작업이 필요할 때 해당 부분을 span태그로 묶어서 스타일을 적용합니다. 이와 다르게 div태그는 html내에서 요소를 묶는 개념으로 box로 생각하시면 될 것 같습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #id_1{
        background-color: blue;
        width: 250px;
        height: 250px;
        margin-left: 40px;
        margin-top: 40px;
        padding-left: 20px;
        padding-top: 20px;
      }
      .class_1{
        background-color: red;
        width: 250px;
        height: 250px;
        margin-left: 80px;
        margin-top: 120px;
        padding-left: 30px;
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id = "id_1">
      <span>loremloremloremloremloremloremloremloremloremlorem</span>
    </div>
 
    <div id = "id_1">
      <p>loremloremloremloremloremloremloremloremloremlorem</p>
    </div>
 
    <div class = "class_1">
      <span>loremloremloremloremloremloremloremloremloremlorem</span>
    </div>
 
    <div class = "class_1">
      <p>loremloremloremloremloremloremloremloremloremlorem</p>
    </div>
  </body>
</html>
 
cs




3. position, float


기본적으로 position과 float는 태그가 아닌 태그에 대한 속성 값 입니다.

둘다 기본적으로 요소의 위치를 잡아주는데 사용하지만 속성의 이름이 다른 것과 같이 사용법이나 특징에 차이가 존재합니다.

기본적으로, 개별 속성의 위치는 position을 이용합니다. position는 default 값으로 static 값을 가지고 있으며, 추가적으로 설정할 수 있는 값으로는 relative, absolute, fixed 가 있습니다.

각각의 값에 대해 간략히 설명드리면 아래와 같습니다.

static은 말씀드렸듯이, position에 대한 기본값으로, 굳이 static으로 설정하는 일은 거의 없습니다. 단지 앞에서 설정된 position을 무시하는 등의 작업이 필요할 때 사용될 수도 있습니다.

relative는 static값을 가졌을 때 요소의 위치를 바탕으로 계산된 위치를 나타냅니다. 즉, position이 relative값을 가지고, 이때 top과 left를 각각 10px로 준다면 해당 요소가 static일때의 위치를 기준으로 위쪽과 왼쪽에서 10px만큼 떨어진 곳에 위치하게 됩니다.

absolute는 단어그대로 절대적 위치를 지정합니다. 요소의 초기 위치와 상관없이 화면자체 상에서의 좌표를 바탕으로 계산됩니다.

마지막으로 fixed는 화면에 고정되도록 하는 값입니다. 즉, 스크롤을 내려도 fixed의 값을 가지는 요소는 고정적인 위치에 그대로 위치합니다.


그리고 float는 요소의 위치를 정렬해주는 요소입니다. 쉽게말해서, A라는 요소의 float값을 left로 설정한다면 해당 요소는 왼쪽에 위치하게 됩니다.

float에 대한 설명은 아래 사이트에서 보다 쉽게 설명해주고 있기에 참고하시면 좋을 것 같습니다.


https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1


저는 아래와 같은 코드를 구현하여 직접 확인해보았습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .clearfix::after {
        content: "";
        clear: both;
        display: table;
      }
      .wrap{
        margin-left: 100px;
      }
      #id_1{
        background-color: blue;
        width: 250px;
        height: 250px;
        margin-left: 40px;
        margin-top: 40px;
        padding-left: 20px;
        padding-top: 20px;
        float: left;
      }
      .class_1{
        background-color: red;
        width: 250px;
        height: 250px;
        margin-left: 80px;
        margin-top: 120px;
        padding-left: 30px;
        padding-top: 30px;
        float: right;
      }
      .element1{
        background-color: yellow;
        position: relative;
        left: 200px;
        top: 150px;
        width: 300px;
        height: 300px;
      }
      .element2{
        background-color: green;
        position: fixed;
        left: 30px;
        top: 20px;
        width: 300px;
        height: 300px;
      }
 
    </style>
  </head>
  <body>
    <div class="wrap clearfix">
 
      <div id = "id_1">
        <span>loremloremloremloremloremloremloremloremloremlorem</span>
      </div>
      <br>
      <div id = "id_1">
        <p>loremloremloremloremloremloremloremloremloremlorem</p>
      </div>
      <br>
      <div class = "class_1">
        <span>loremloremloremloremloremloremloremloremloremlorem</span>
      </div>
      <br>
      <div class = "class_1">
        <p>loremloremloremloremloremloremloremloremloremlorem</p>
      </div>
 
      <div class = "element1">
        Hello World!
      </div>
    </div>
 
    <div class = "element2">
      Hello Hello world!
    </div>
 
  </body>
</html>
 
cs


또한 아래 사이트에서 position과 float, display에 대한 설명을 함께 해주고 있습니다. 설명이나 개념자체가 약간은 어렵게 나와있지만 한번 쯤 읽어보시는 것도 좋을 것 같습니다.

http://blog.wystan.net/2009/01/12/relationships-between-position-float-display



4. z-index, fonts


z-index는 깊이감을 줍니다. 깊이감을 준다는 것이 어떤 디자인적 요소로 깊이감을 준다는 것이 아니고, 쉽게 말해서 요소들간의 위아래를 지정해 주는 것이라고 생각하시면 됩니다. 기본적으로 z-index의 기본값은 0으로 설정되어 있습니다.

숫자가 높을 수록 화면에서 위에 있는 것이고, 음수값도 가능합니다.

예를 들어, A요소가 z-index값을 -3으로 가지고 있고, B요소는 0, C요소는 2로 가지고 있다면 세개의 요소가 겹쳐져 있을 때, C요소가 제일 위에 있을 것이고 그 아래에 B요소, 그리고 A요소가 있을 것입니다.


다음은 웹페이지에서 매우 중요한 폰트입니다.

폰트에 대해서는 직접 외부에서 폰트를 끌어와 사용하는 방식을 설명드리려고 합니다. 

바로 진행해보기전에 간단한 개념을 확인해본다면, html에서 글씨체를 나타낼때 serif라는 것은 글씨의 끝(?)부분이 꺾여져있는, 명조체와 같은 글씨체를 말하며 sans-serif는 꺾여져 있지 않은, 즉 고딕체와 같은 글씨체를 말합니다.

수업에서는 google font를 사용하였습니다.

먼저 아래 google font사이트를 접속하여 마음에 드는 폰트를 찾습니다.

https://fonts.google.com/



저는 가장 처음에 있는 Roboto라는 글씨를 골랐습니다. 

자신이 마음에 드는 글씨체를 골랐으면 두께나 크기 등을 적절히 선택합니다.

물론 이는 추후 html에서도 글씨의 크기나 bold와 같은 특징을 설정할 수 있지만 처음에 가져온 폰트를 기준으로 설정됩니다.

글씨체를 골랐으면 글씨체 우측에 있는 + 버튼을 누릅니다. 해당 버튼을 누르면 위의 사진과 같이 - 표시로 바뀔 것입니다.


그리고 화면 우측아래에 검정색 팝업같은 것이 뜰텐데 그것을 누르면 아래사진과 같은 창이 뜨게 됩니다.



그리고 위의 사진과 같이, 1번 @import를 누르고 그 아래에 있는 코드를 복사합니다. 자신의 코드에 style태그가 존재한다면 style태그를 제외한 두번째 줄만 복사하여 자신의 코드 style태그 내부에 붙여넣기 하시면 됩니다.


그리고 이후에 해당 폰트를 사용하기 위해서는 font-family 라는 속성을 사용합니다. 추가적으로 font-family에는 여러개의 폰트를 적용시킬 수 있습니다. 그렇다고 여러개의 글씨체가 랜덤이나, 중복되서 적용되는 것이 아닙니다. 예를 들어, font-family: A, B, C 라고 지정을 해주었다면 먼저 해당 속성이 적용된 곳의 폰트는 기본적으로 A폰트로 적용이됩니다. 그런데 A폰트에서 한글지원을 안하거나 특정한 특수문자를 지원하지 않거나 부득이 하게 해당 폰트가 제대로 불려오지 못했거나 사라진 경우에, A폰트의 적용을 받지 못한 글자는 그 다음인 B폰트의 적용을 받습니다. 따라서 보통 이렇게 외부에서 폰트를 가져오는 경우에는 해당 글씨체와 함께, 해당 글씨체에 대해 제대로 적용받지 못하는 글자나 특수문자를 위해 또 다른 글씨체를 보조적으로 함께 명시해줍니다.

이때, 외부 폰트는 작은 따옴표( ' ' )를 이용하여 명시하고 그렇지 않은 기본폰트는 따옴표를 사용하지 않아도 됩니다.



5. link stylesheet


이번 내용은 지난시간에 알아보았던, css적용 방법 3가지 중에 따로 css파일을 만들어서 link태그로 연결해주는 것에 관한 것입니다.

우리가 그렇게 css를 적용한다는 것은 알았는데 왜 그렇게 할까요?

물론 그 이유에는 다양하겠지만, 몇가지 이유를 생각해본다면, 코드가 복잡해질 때 css코드와 html코드를 분리함으로써 보다 깔끔하게 코드를 유지할 수 있으며 더불어 중복코드를 방지할 수도 있을 것입니다.

또한 css에 대한 내용을 다른 사람에게 비공개로 하고 싶을때 해당 css파일을 암호화시켜서 다른사람들이 볼 수 없게끔 할 수 있습니다.



이렇게 해당 수업에 대한 내용을 한번 정리해보았습니다.

추가적으로 수업에서는 아래와 같은 사이트의 메인화면을 직접 제작해보았습니다.


물론 메뉴가 이동하는 등의 js적인 부분이나 우리가 배우지 않은 제외하고 단순히 메인화면을 보았을 때 나오는 것을 시각적으로만 그대로 따라해보았습니다.

해당 내용에 대해서는 따로 설명을 드리지 않고 코드만 첨부하도록 하겠습니다.


페이지 전체 코드


추가적으로 궁금한 점이 있는 분께서는 댓글이나 이메일을 이용해주세요 :)


블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / 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를 작성하는 것은 앞으로도 많이 알아볼 예정이니 이정도만 알아두시면 좋을 것 같습니다.


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


HTML code


CSS code




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

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

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

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

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

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


블로그 이미지

Tigercow.Door

Data-Analysis / AI / back-end / 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

Data-Analysis / AI / back-end / Algorithm / DeepLearning / etc