안녕하세요. 문범우입니다.
저는 현재 서울시립대학교에서 멋쟁이사자처럼 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에 맞는 파일을 다운 받습니다.
그리고 다운받은 파일을 실행시킵니다.
그럼 위의 사진과 같은 창이 뜰텐데 설치되고 있다는 것이니까 잠시 기다려주시면 됩니다.
약간의 시간을 기다리고 나면 위와 같은 프로그램이 열리게 됩니다. 바로 저것이 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속성에 대해서는 아래 사이트에서 더 자세한 설명을 만날 수 있습니다.
이제 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)을 이용해주시면 좋을 것 같습니다.
'LikeLion' 카테고리의 다른 글
| LikeLion at UOS #6_ Cloud9으로 Ruby on Rails 시작하기 (0) | 2018.04.09 |
|---|---|
| LikeLion at UOS #5_ 페이지 제작 실습(2) (0) | 2018.04.02 |
| LikeLion at UOS #4_ jQuery 연습하기 (0) | 2018.03.30 |
| LikeLion at UOS #3_ 페이지 제작 실습(1) (0) | 2018.03.28 |
| LikeLion at UOS #2_ HTML 태그들과 CSS 기초 (0) | 2018.03.22 |