안녕하세요. 애드소프트 입니다.

Visual studio를 주로 사용하면서 마이크로소프트 솔루션을 많이 이용하여 연동하는데

특별한 공을 들이는 경우가 적었습니다.

이번에 개인적으로 웹사이트를 개발할려고 하다보니 상용 RDBMS인 MSSQL이 설치비와 유지비가 

생각보다 많다고 느껴 오픈 RDBMS를 찾다가 MariaDB를 사용해 보게되었습니다.

연동이 어려운것은 아니지만 시행 착오를 격게되어 다른 분들도 생각하고 계시다면

도움이 될거 같아 포스팅해 봅니다.

Microsoft에서 제공하는 Entity Framework에 Code First라는 기능을 제공하는데요.

다 아시겠지만 이기능을 이용하면 DB를 수동으로 작성하지 않아도 자동으로 Scheme랑 Data부분을 

등록 수정 할 수 있답니다.

서두가 길었습니다.

간단하게 사용방법을 알아보도록 하겠습니다.

처음 접하는 분이시라면 Microsoft Docs에 잘 설명되어 있으니 한번 사용해 보세요.

새 데이터베이스에 Code First-EF6 | Microsoft Docs

프로젝트 생성 

새로운 프로젝트를 만들도록 하겠습니다.

Visual Studio 2019 기준입니다. 참고하세요^^

Visual Studio를 실행하여 "새 프로젝트 만들기(N)" 메뉴를 선택합니다.

프로젝트 형식에서 웹을 선택하거나 검색을 이용하여 다음 항목을 찾아 프로젝트를 생성하여 줍니다.

프로젝트 명을 입력하고 프로젝트가 생성될 경로를 설정하도 만들기 버튼을 눌러줍니다.

MVC를 이용하기 때문에 MVC를 선택했고 인증을 이용하기 위해 인증부분을 SQL를 이용하도록 선택하였습니다.

외부인증도 제공하니 개별사용자인증을 이용하도록 하겠습니다.

프로젝트가 생성되었습니다.

Code First를 이용하기 위해 DB를 설치해야합니다.

Download MariaDB Products & Tools | MariaDB

위 사이트에서 MariaDB Community Server를 다운받아 설치하면 됩니다.

추가로 Connector도 하나 설치해 주세요. 다음 경로에서 다운받아 설치하시면 됩니다.

MySQL :: Download Connector/NET

설치 방법은 시간상 생략하도록 하겠습니다.

마지막으로 Nuget Packeage 관리자를 이용하여 "Mysql.Data.Entity"를 찾아 설치해 줍니다.

시간이 걸리니 잠시 기다려 주세요. 설치가 시작되면 다음과 같이 팝업창을 보실 수 있습니다.

확인을 눌러주세요

설치는 모두 완료 되었습니다. 설정부분을 보도록 하겠습니다.

설치가 완료되었다면 솔루션 탐색기 상의 Web.config 내용을 살펴 봅시다.

  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
  </configSections>
  <connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-CodeFirstForMariaDB-20210324111441.mdf;Initial Catalog=aspnet-CodeFirstForMariaDB-20210324111441;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
  
  ...
  
      <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="mssqllocaldb" />
      </parameters>
    </defaultConnectionFactory>

위 내용으로 기본 설정되어 있는데 이부분을 MariaDB로 설정을 변경해야 합니다.

MariaDB는 MySQL이 Oracle로 상용화 되면서 파생된 오픈 소스로 알고 있는데 자세한 내용은 구글을 이용하시면 좋을거 같아요. 이 말씀을 드리는 이유는 설정시에 MySQL이라는 이름을 자주 보게 될 것입니다.

Models 폴더의 IdentityModels의  내용과 비교해보면 연동관계를 아실 수 있습니다.

    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext()
            : base("DefaultConnection", throwIfV1Schema: false)
        {
        }

        public static ApplicationDbContext Create()
        {
            return new ApplicationDbContext();
        }
    }

web.config에 등록된 DefaultConnection에 설정된 DB연동 정보와 IdentityModels의 DefaultConnection의 Scheme가 연동되는것을 알 수 있습니다.

web.config의 다음 부분을 

  <connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-CodeFirstForMariaDB-20210324111441.mdf;Initial Catalog=aspnet-CodeFirstForMariaDB-20210324111441;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

  ...

  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
      <parameters>
        <parameter value="mssqllocaldb" />
      </parameters>
    </defaultConnectionFactory>
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
    </providers>
  </entityFramework>

다음과 같이 수정해 줍니다.

  <connectionStrings>
    <add name="DefaultConnection" providerName="MySql.Data.MySqlClient" connectionString="server=localhost;userid={사용자ID};password={패스워드};database={기본DB};persistsecurityinfo=True" />
  </connectionStrings>  
  
  ...
  
   <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
    <providers>
      <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" />
      <provider invariantName="MySql.Data.MySqlClient" type="MySql.Data.MySqlClient.MySqlProviderServices, MySql.Data.Entity.EF6, Version=6.10.9.0, Culture=neutral, PublicKeyToken=c5687fc88969c44d" />
    </providers>
  </entityFramework>

중요한 것은 connection string의 name 부분과 model의 base에 들어 있는 DefaultConnection이 일치해야합니다.

Models - IdentityModels.cs 파일을 다음과 같이 수정합니다.

using System.Data.Entity;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
//add using
using MySql.Data.Entity;

namespace CodeFirstForMariaDB.Models
{
    // ApplicationUser 클래스에 더 많은 속성을 추가하여 사용자의 프로필 데이터를 추가할 수 있습니다. 자세한 내용은 https://go.microsoft.com/fwlink/?LinkID=317594를 참조하세요.
    public class ApplicationUser : IdentityUser
    {
        public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
        {
            // authenticationType은 CookieAuthenticationOptions.AuthenticationType에 정의된 항목과 일치해야 합니다.
            var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
            // 여기에 사용자 지정 사용자 클레임 추가
            return userIdentity;
        }
    }

    //add type
    [DbConfigurationType(typeof(MySqlEFConfiguration))]
    public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext()
            : base("DefaultConnection", throwIfV1Schema: false)
        {
        }

        public static ApplicationDbContext Create()
        {
            return new ApplicationDbContext();
        }
    }
}

설정 후 패키지 관리자 콘솔을 열어 줍니다. "도구-Nuget 패키지 관리자" 에서 찾을 수 있습니다.

패키지 관리자 명령창에 다음 명령을 입력합니다.

오류가 나서 찾아 봤더니 MySqlConnector가 참조로 등록되지 않아 발생하는 오류이네요.

경로 찾기도 귀찮으니 nuget 패키지로 설치 하도록 하겠습니다.

패키지 관리자에 다음 명령어를 입력합니다.

Install-Package MySqlConnector

설치가 완료되면 다시 Enable-Migragions -Force 를 실행합니다.

Code First가 설정된것을 확인 하실 수 있습니다.

Update-Database 명령을 이용하여 기본 테이블을 업데이트 합니다.

이런 오류가 발생한다면 다음과 같이 조치하세요.

Migrations 폴더의 IdentityModels.cs 파일입니다.

        public Configuration()
        {
            AutomaticMigrationsEnabled = true;
            AutomaticMigrationDataLossAllowed = true;
        }

다시 명령을 실행해 보시면 다음과 같은 결과를 보실 수 있습니다.

DB를 확인해보겠습니다.

기본적인 테이블이 생성되었습니다.

시간상 사용법은 다음기회에  포스팅하기로 하겠습니다.

감사합니다.

안녕하세요. 애드소프트(Addsoft)입니다.

오늘은 C# asp.net mvc를 이용하여 구글 RSS Feed를 파싱해 볼까합니다.

일단 프로젝트를 Addsoft로 생성하였습니다.

프로젝트에 Models폴더에 RSSFeed.cs 파일을 생성합니다.

내용으로 다음을 코딩하여 줍니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Addsoft.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; }
    }
}

Controllers 폴더에 RSSFeedController를 생성하고 다음을 코드를 입력합니다.

using Addsoft.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 Addsoft.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();
        }
    }
}

Views -> RSSFeed 폴더의 Index.cshtml 파일 추가 합니다.

<!-- products -->
<section class="products py-5">
    <div class="container py-lg-5 py-3">
        <h3 class="heading mb-md-5 mb-4"><strong>구글 트렌드</strong> 일별 인기 급상승 검색어</h3>
        <br />
        @using (Html.BeginForm())
        {
            <input type="URL" name="RSSURL" placeholder="Enter RSS Feed URL Here..." class="form-control" value="@ViewBag.URL" style="width:85%; float: left;" />
        <input type="submit" class="btn btn-danger" style="width: 10%; float: right;"/>

            <br />
        }
        <table class="table table-hover">
                <tr>
                    <th>제목</th>
                    <th>조회수</th>
                    <th>링크</th>
                    <th>설명</th>
                    <th>게시일</th>
                </tr>
                @if (ViewBag.RSSFeed != null)
                {
                    foreach (var item in ViewBag.RSSFeed)
                    {
                        <tr>
                            <td>@item.Title</td>
                            <td>@item.ApproxTraffic</td>
                            <td><a href="@item.Link">@System.Web.HttpUtility.UrlDecode(@item.Link)</a></td>
                            <td>@item.Description</td>
                            <td>@item.PubDate</td>
                        </tr>

                    }
                }
        </table>
    </div>
</section>

저는 bootstrap을 이용했습니다.

필요하시면 다음을 이용하시면됩니다.

코딩위치는 Views => Shared => _Layout.cshtml에 추가하시면 됩니다.

    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>

Views => RSSFeed => index.cshtml을 선택하시고 디버깅 해보시면 실행 결과를 볼 수 있습니다.

예제는 다음 URL에서 확인 해 보실 수 있습니다.

https://addsoft.co.kr/RSSFeed/Index 

원하는 내용이 없다고 놀라지 마시고 스크롤 좀만 내려주세요.

검색 후에도 처음 내용과 같이 보이니 스크롤 좀만 내려주세요.

홈페이지 만들다가 멈춰 둔 곳에 추가 해뒀습니다 ^^;

공용 레이아웃으로 배너를 넣어놧더니 수정하기 번거롭네요 ㅎㅎ

맨트가 개발중에 정해진게 없어서 생각나는대로 대충 넣어 놨더니 이상하게 보이네요.  _ _)

참 십쥬~ 

오늘 시간이 늦어 포스팅을 마치 도록 하겠습니다.

감사합니다.

Javascript란?  

Javascript와 친숙해 질 수 있도록 최선을 다하겠습니다.

이 블로그의 기본 전제조건은 이전에 블로그한 내용 다음과 같습니다.

학습이전에 이전 블로그를  참고하세요.

HTML 기초 이 것만 이해해도 반은 시작이다.

전제조건은 기본적인 컴퓨터 능력, HTML, CSS기초입니다.

목표는 Javascript가 어떤 역활을 하는지, 어떤 일을 할 수 있는지, 웹사이트에 어떤 작용을 하는지 알아볼까 합니다.

자바스크립트는 화면상의 전체적인 변화를 주기 보다는 부분적인 변화를 주기위해 사용합니다.

예로들자면 전체 페이지 상의 리스트가 존재한다면 그 리스트만을 새로고침 하고 싶은 경우 이겠죠.

또한 부분적인 데이터만 서버에 전송하여 저장하고 싶은 경우가 될수도 있구요.

표준 웹 기술은 다음과 같이 3개층으로 나눌 수 있을거 같습니다.

간단한 샘플을 사용하도록 하겠습니다.

<p>안녕 애드소프트.</p>

그리고 CSS를 통해 예쁘게 꾸밀 수도 있습니다.

p {
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif,
	text-align: center;
	border: 1px solid #000;
	border-radius: 10px;
	padding: 3px 10px;
	cursor: pointer;
	color: green;
	background-color: yellow;
}

자바스크립트의 동적인 기능 추가하도록 하겠습니다.

<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로 적성된 문서는 htm또는 html이라는 확장자를 가집니다.

전문툴을 사용해도 좋고 단순히 메모장을 이용하여도 문법만 맞춘다면 웹서버가 없어도 웹 브라우저로 소스코드가 작성된 파일을 더블클릭 하는 것 만으로도 직접 실행가능합니다.

▶ HTML의 기본문법

<!DOCTYPE html>
<html>
	<head>
    	<title>기본 HTML 문법입니다.</title>
    </head>
    <body>
    	Hello, World!!
    </body>
</html>

카카오톡과 구글과 같이 많은 기능과 디자인을 담은 웹페이지의 경우 아주 많은 태그 그리고 개발언어를 포함하고 있습니다. 하지만 기본은 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를 생성하여 스타일을 미리 생성한 후 지정할 수 있습니다.

<a href="script:void(0);" style="color:aqua; border: solid 1px;" class="temp" >Hello, World!!</a>

<style>
    .temp {
        font-size: large;
        padding: 20px;
    }
</style>

실행결과

▶ 스타일시트 파일 생성과 적용  

편한 작업을 위해 html과 같은 경로에 style.css라는 파일을 생성하겠습니다.

내용은 다음을 입력합니다.

p {
	margin: 0;
    padding: 20;
    color: green;
    font-size: 16px;
}

a:hover {
	color: yellow;
}

Html파일은 다음과 같이 수정합니다.

<!DOCTYPE html>
<html>
	<head>
    	<link href="./style.css" rel='stylesheet' type='text/css' />
    	
        <title>기본 HTML 문법입니다.</title>
    </head>
    <body>
	<p>Hello, World!!</p>
	<a href="script:void(0);">Hello, World!!</a>

    </body>
</html>

실행결과

스타일시트 파일내용을 보면,

a:hover는 마우스 오버시 색상을 노란색으로 지정하고 있습니다. 

아무스를 올리면 다음과 같이 표시됩니다.

그리고 나머지 <p>태그의 경우 전역적으로 글자색은 녹색을 지정하였고, 글자크기는 16픽셀을 지정한 것을 볼 수 있습니다.

이렇게 지정한 style sheet 파일은 본문 코드의 다음 구문으로 임포트 할실 수 있습니다.

<link href="./style.css" rel='stylesheet' type='text/css' />

오늘은 HTML 기본문법을 공부해 보았습니다.

이 기본 문법이 무슨 내용이 있겠냐고 하시겠지만 모든 개발이 이렇게 기본적인 문법으로 발전하게 된 것을 이해해야합니다. 소개된 태그는 많지 않지만 HTML에 존재하는 태그만해도 엄청 많은  태그들이 있습니다. 모두 사용할 필요는 없지만 충분히 이해하고 쓸만한 태그들을 습득하시길 바랍니다.

HTML의 기본과 CSS의 기본만을 충분히 익히고 응용가능하다면 기본만을 충실히 한것만으로도 훌룡한 웹을 만들 수 있습니다. 

물론 웹디자인을 잘 디자인해야하겠지만, 기본적인 기능만으로도 충분히 디자인을 개발할 수 있다는 점 알아주셨으면 합니다..

꼭 고급기술을 먼저 습득하기 위해 시간을 할애하기 보다는 기본에 충실한 코딩을 하길 권장드립니다.

충분히 익숙해 진뒤 고급 라이브러리 같은 것을 접한다면 새로운 세계를 맛볼 수 있기 때문입니다.

기본에 충실하지 못하다면 아무리 잘만들어진 라이브러리를 손에 넣더라도 100프로 자신의 것으로 만들기 어렵기 때문입니다. 오히려 이해가 되지 않기 때문에 거치장 스러울수도 있습니다.

지금까지는 UI의 구현에 대한 기본적인 기능을 소개해 봤습니다.

다음엔 Javascript와 javascript를 이용해 만들어진 프레임워크 Jquery를 한번 다뤄 보겠습니다.

html과 css는 디자인을 구현하기 위한 것이었다면 Javascript와 Jquery의 경우에는 화면을 동작시키는 기능을 합니다.

예로들자면 햄버거 메뉴(세줄 아이콘 메뉴), 버튼이나 태그 선택시 동작, 데이터 연동, 로딩화면 구현, 스크롤시 에니메이션 기능등 웹화면에서 보이는 일반적인 동작들을 구현 할 수 있는 개발입니다. 

javascript는 HTML과 개발  문법이 다르고, 분야도 다양하기 때문에 정리한 후 다음 블로그에 작성해 보도록 하겠습니다.

오늘도 행복한 하루 되세요.