TigerCow.Door


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


최근 멋쟁이 사자처럼 6기 운영진으로 활동하며, 지난 8월말에 해커톤을 진행하였습니다.

저는 방학간 파이썬, 장고 스터디를 진행하며 함께 공부한 친구들과 장고를 활용한 공유일기장 플랫폼 웹사이트를 개발하였습니다.


aws ec2 프리티어을 이용하여 배포까지 완료하였으나, 실제로 서비스 론칭등의 계획은 없습니다.

장고를 직접 활용해보고 6기 인원들에게는 배포까지 해보는 경험으로써의 토이 프로젝트였습니다.


활용된 스택은 다음과 같습니다.


python: 3.6.5


django: 2.0


postgresql: 10.4



해당 프로젝트에서 저는, 프로젝트 전체 기획 및 진행을 담당하며 세부적으로는 데이터베이스 설계 및 구축, 교환일기장 기능 개발을 담당하였습니다.



- 서비스 소개


카카오톡 소셜 로그인



장고를 활용한 공유일기장 플랫폼에서는 카카오톡 소셜로그인을 통해 누구나 쉽게 서비스를 이용할 수 있도록 개발하였습니다.



메인화면 달력 및 작성한 일기 확인하기


사용자는 메인화면에서 달력을 확인할 수 있고, 그 전에 작성한 일기들은 해당 요일에 제목이 표시됩니다. 제목을 누르면 해당 일기로 이동할 수 있습니다.



일기 작성하기


사용자는 일기 쓰기 탭을 눌러서 일기를 작성할 수 있습니다.

제목, 작성할 교환일기장, 감정, 날씨, 사진, 내용을 입력합니다.

하나라도 작성되지 않을시에는 저장되지 않고 빈칸을 알려줍니다.



교환일기장


교환일기장에서는 개인이 작성한 일기 뿐아니라 다른 사람의 일기를 확인할 수 있습니다. 관심사가 같거나, 친구들끼리 함께 일기를 작성하고 싶을때는 교환일기장을 만들거나, 참여하여 함께 일기를 작성할 수 있습니다.



이 외에도 일기를 보관할 수 있는 '뜯어가기' 기능과 댓글기능 등을 구현하였습니다.



배포된 프로젝트의 모든 코드는 아래 깃헙에서 확인하실 수 있습니다.

https://github.com/doorBW/LAN-Diary


이 외에도 추가적인 질문등은 언제든지 댓글 및 이메일, 카카오톡을 이용해주세요 :)

블로그 이미지

Tigercow.Door

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

댓글을 달아 주세요

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

이번 포스팅은 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

Web Programming / Back-end / 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

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

댓글을 달아 주세요