<script>
const imTag = document.querySelector('p');
imTag.addEventListener('click', onChangeName);
function onChangeName() {
let name = prompt('이름을 입력하세요');
imTag.textContent = '나는 ' + name + ' 입니다';
}
</script>
자바스크립트 언어의 핵심은 웹에 할당된 태그와 속성 이외의 많은 것을 변수로 담을 수 있으며, 그 변수를 프로그래밍으로 변환함으로써 수많은 동적인 변화를 일으키는 것처럼 표현하기도 하며, 실제로 적용도 가능합니다. 실제로 적용하기 위해서는 서버에 적용이 필요하겠지만 사용자 입장에서는 많은 것이 변한 것으로 착각 할 수 있습니다.
제가 예제로 사용한 click이외에도 사용자 이벤트로 할당된 수많은 이벤트가 존재하며 사용하고자 하는 이벤트가 존재하지 않더라고 개인적은 견해와 지식에 따라 변경 가능합니다.
이를 이용항 Jquery라는 엄청난 기능을 가진 프레임워크도 생성되었으며, 그 이외에도 개인이나 업체에서 이 기능을 이용한 API가 무긍무진합니다. 이를 이용하여 개발 한다면 개발의 시간을 단축 할 수 있을뿐 아니라 오류나 유지보수 면에서도 이득을 볼 수 있습니다.
API는 이미 만들어진 코드 재활용 개념으로 볼 수 있으며, 개발자들이 어려운 부분들을 사용자가 이해하기 쉽게 분석하여 개발해 놓은 인터페이스로 볼 수 있습니다.
다음으로는 이를 이해 하셨다면 전문가들에서는 Server side, Client side라고 하는 단어를 사용하는데 이는 서버에서만 처리 가능 한것과 클라이언트 즉 브라우저에서만 처리해야 하는 것을 분리 하여 개발하는 것을 의미 합니다.
카카오톡과 구글과 같이 많은 기능과 디자인을 담은 웹페이지의 경우 아주 많은 태그 그리고 개발언어를 포함하고 있습니다. 하지만 기본은 HTML의 기본문법을 지키고 있는것을 확인할 수 있습니다.
구글의 메인포털의 소스보기를 해보았을때 내용입니다.
위의 내용을 보면 감이 잡히시겠지만 모든 웹페이지는 HTML의 표준규격을 준수하고 있습니다.
웹서버를 생성하기 위해서는 많은 지식이 필요하겠지만 이번 블로그에서는 단순한 HTML의 정보만 공유할 것입니다.
따라서 간단한 주제의 내용만으로 HTML를 다룰 수 있도록 하겠습니다.
메모장으로 똑같이 코딩한다음 실행 결과 입니다.
코드를 리뷰해 드리자면 기본적으로 사용하는 태그는 규격일뿐 화면에 따로 표시되지 않습니다.
<!DOCTYPE html>, <html><head><body>가 이에 포함됩니다. 그 외에도 <meta><link><script>와 같이 기능을 위한 태그도 존재합니다.
간단히 설명하자면 <!DOCTYPE html>선언은 HTML 태그는 아니지만, 선언된 페이지의 버전을 나타내는 중요한 선언문입니다. 현재 사용하고 있는 HTML버전은 HTML5입니다. HTML도 제가 처음배울때랑 바뀐부분들이 많습니다.
예전에 !doctype을 선언하기위해서는 좀더 많은 타이핑이 필요했습니다. SGML, DTD등의 개념을 알아야 하기 때문에 복잡한 설명은 생략하도록 하겠습니다. 간단히 HTML의 시작이라고 이해하면될 것 같습니다.
<html> html 태그는 모든 웹사이트에서 한번만 선언되는 웹 코딩의 처음과 끝을 알리는 기능으로 생각하면 됩니다.
<html>사이의 <head>태그 또한 html 태그사이에서 한번만 선언되는 html의 중요 정보나 중요기능을 링크를 포함하는 태그라고 보시면 됩니다. 예로 들자면 웹사이트의 제목이라든지 사용하는 스타일, 문자셋, 기타 웹사이트 한번 정의할만한 것들을 모아놓은 태그라고 생각하시면 이해하기 빠를 것입니다.
<body> 태그는 본문을 의미합니다. 페이지마다 변경되는 부분을 이곳에 코딩하여 페이지 마다 다른 페이지를 만든다고 생각하시면 되겠습니다. 하지만 저희같은 경우에는 HTML파일을 생성하기 때문에 모든 웹페이지 마다 html구문의 맞추어 코딩하여야 합니다.
레이아웃을 설정하면 <html><head>및 배너 등의 모든페이지에 표시되는 정보를 설정하여 본문을 분리하여 개발 할 수 있습니다. 중복된 정보를 지속적으로 코딩하지 않아도 되기때문에 개발 및 성능, 유지보유에 유리합니다. 레이아웃 설정은 다음에 다루도록 노력해 보겠습니다.
▶ HTML의 태그(Tag)
HTML은 tag를 이용하여 개발하는 언어 입니다. 기본적으로 태그라고하는 것은 다음과 같이 표기합니다.
...
<body>
<!-- p tag : 단락 태그라고도 하며, 내용이 바뀌어 단락을 을 바꾸어 줄때 쓰는 것입니다.-->
<p>Hello, World</p>
<p>안녕하세요. 만나서 반갑습니다.</p>
<!-- 아무런 태그도 사용하지 않을 경우 -->
Hello, World
안녕하세요. 만나서 반갑습니다.
</body>
...
실행결과
실행 결과를 보시면 알시겠지만 <p> 태그를 단락을 나누어 주는 기능을 합니다.
위의 <p>태그를 사용할 경우는 문단을 끝내고 줄내림이 설정되었지만, 아래의 예시로 아무런 태그를 사용하지 않을 경우 띄어쓰기 정도로 인터프리터는 인식하게 됩니다. 참고로 띄어쓰기를 10번하거나 줄내림을 10번하더라도 한번 입력한 것으로 인식되는 것입니다. 직접 테스트 해보는것이 이해에 도움되리라 믿으며 넘어가도록 하겠습니다.
입력한 그대로 표시 할 수 있는 태그는 <pre> 태그를 이용하면됩니다. <pre> 태그를 이용하면 띄워쓰기 줄내림등 타이핑한 내용 그대로 화면에 표시해 주는 태그입니다.
▶ 태그와 속성
<head> 태그와 <body>등 태그를 제외한 <body>와 </body> 태그의 중간에 위치하는 본문코드 입니다.
<!-- font 태그는 글꼴 및 글자 스타일을 변경 합니다 -->
<font color="green" size="20">Hello,</font> World!!
실행결과
위 결과와 같이 HTML에서는 태그에 정해진 속성을 이용하여 색상, 크기, 링크등 많은 기능을 쉽게 변경가능합니다.
<font>태그의 경우에는 색상 크기 글꼴등 폰트에 관련된 것들을 수정가능합니다. 태그의 속성을 이용하지 않더라도 css를 이용하여 똑같은 기능을 구현 하실 수 있습니다. 다음 단락에서 설명하겠습니다.
웹개발을 하다보면 많이 접하게되는 단어 W3C와 관련있습니다. 나중에 궁금증이 생기면 찾아보시면 좋을거 같습니다(웹의 발전과 관련된 내용이니 좋은 공부가 되실 수도 있겠네요).
▶ CSS 스타일 및 스타일시트
태그는 기본적으로 style속성과 class 속성을 제공합니다.
style속성은 CSS 문법을 이용하여 태그의 스타일을 변경하여 다음 예시처럼 글자색이나 테두리등을 설정가능합니다.
class속성은 CSS 문법을 이용하여 style sheet를 생성하여 스타일을 미리 생성한 후 지정할 수 있습니다.
이 기본 문법이 무슨 내용이 있겠냐고 하시겠지만 모든 개발이 이렇게 기본적인 문법으로 발전하게 된 것을 이해해야합니다. 소개된 태그는 많지 않지만 HTML에 존재하는 태그만해도 엄청 많은 태그들이 있습니다. 모두 사용할 필요는 없지만 충분히 이해하고 쓸만한 태그들을 습득하시길 바랍니다.
HTML의 기본과 CSS의 기본만을 충분히 익히고 응용가능하다면 기본만을 충실히 한것만으로도 훌룡한 웹을 만들 수 있습니다.
물론 웹디자인을 잘 디자인해야하겠지만, 기본적인 기능만으로도 충분히 디자인을 개발할 수 있다는 점 알아주셨으면 합니다..
꼭 고급기술을 먼저 습득하기 위해 시간을 할애하기 보다는 기본에 충실한 코딩을 하길 권장드립니다.
충분히 익숙해 진뒤 고급 라이브러리 같은 것을 접한다면 새로운 세계를 맛볼 수 있기 때문입니다.
기본에 충실하지 못하다면 아무리 잘만들어진 라이브러리를 손에 넣더라도 100프로 자신의 것으로 만들기 어렵기 때문입니다. 오히려 이해가 되지 않기 때문에 거치장 스러울수도 있습니다.
지금까지는 UI의 구현에 대한 기본적인 기능을 소개해 봤습니다.
다음엔 Javascript와 javascript를 이용해 만들어진 프레임워크 Jquery를 한번 다뤄 보겠습니다.
html과 css는 디자인을 구현하기 위한 것이었다면 Javascript와 Jquery의 경우에는 화면을 동작시키는 기능을 합니다.
예로들자면 햄버거 메뉴(세줄 아이콘 메뉴), 버튼이나 태그 선택시 동작, 데이터 연동, 로딩화면 구현, 스크롤시 에니메이션 기능등 웹화면에서 보이는 일반적인 동작들을 구현 할 수 있는 개발입니다.
javascript는 HTML과 개발 문법이 다르고, 분야도 다양하기 때문에 정리한 후 다음 블로그에 작성해 보도록 하겠습니다.
오늘은 Asp.net mvc를 이용하여 구글 트렌드의 일별 급상승 인기 검색어를 RSS를 분석해 보여주는 기능을 작성해 보려합니다.
바로 시작하겠습니다.
1. RSSFeed로 asp.net mvc 프로젝트를생성합니다.
2. RSSFeed 프로젝트에 Models에 RSSFeed.cs 를 추가합니다.
내용은 다음을 타이핑 합니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace RSSFeed.Models
{
public class RSSFeed
{
public string Title { get; set; }
public string ApproxTraffic { get; set; }
public string Link { get; set; }
public string Description { get; set; }
public string PubDate { get; set; }
}
}
3. RSSFeedController.cs 파일을 Controllers에 생성합니다.
내용은 다음을 타이핑 합니다.
using RSSFeed.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Text;
using System.Web;
using System.Web.Mvc;
using System.Xml.Linq;
namespace RSSFeed.Controllers
{
public class RSSFeedController : Controller
{
// GET: RSSFeed
public ActionResult Index()
{
ViewBag.URL = "https://trends.google.com/trends/trendingsearches/daily/rss?geo=KR";
return View();
}
[HttpPost]
public ActionResult Index(string RSSURL)
{
WebClient wclient = new WebClient();
//한글이 깨지는 문제해결
wclient.Encoding = Encoding.UTF8;
string RSSData = wclient.DownloadString(RSSURL);
//소문자를 읽을 경우 오류로 인식된다.
XDocument xml = XDocument.Parse(RSSData);
var RSSFeedData = from x in xml.Descendants("item")
select new RSSFeed
{
Title = ((string)x.Element("title")),
ApproxTraffic = x.DescendantNodes().ElementAt(3).ToString(),
Link = ((string)x.Element("link")),
Description = ((string)x.Element("description")),
PubDate = ((string)x.Element("pubDate"))
};
ViewBag.RSSFeed = RSSFeedData;
ViewBag.URL = RSSURL;
return View();
}
}
}
