블로그 커스터마이징 하기
두서
이전 포스팅 이였던 블로그 커스터마이징에서 조금 옆으로 새어나와 html, css 그리고 javascript를 이야기 해보려고합니다.
사실 저도 html, css, javascript를 모두 아는것은 아닙니다. 제가 알고 있는 기본적인 개념을 이곳에서 풀어가보려고 합니다.
편하게 읽어주시고, 미흡한 부분은 지적해주시길 바랍니다. 에러가 난다면 함께 고민 할 수 있으면 합니다. 그런고로 언제든 덧글 달아주시거나, 연락주세요.
참고 : 입문자용으로 작성하였습니다.!
HTML, CSS 그리고 javascript
HTML
Hyper Text Markup Language의 약자로, 웹페이지를 만들기 위한 Markup언어입니다.
프로그래밍 언어로 알고 계시는 분들이 있으십니다만, 정확하게는 프로그래밍 언어는 아닙니다. “웹 페이지의 구조가 이렇게 생겼습니다.”라고 웹 브라우저에 알려주는 markup문서입니다.
html을 시작하기 위해서는 두가지 요소를 꼭 알아야 합니다. elements(엘리먼츠)와 tag(태그)입니다. 이 또한 혼용해서 사용하는 경우가 많으나, 정확히는 서로 두가지는 다른 것 입니다.
우선 tag란 “<>”(꺽쇠 괄호)사이에 어떠한 단어나, 글자를 적어 시작과 끝을 알리는 녀석입니다. elements란, 시작tag-내용-종료tag를 모두 아우르는 녀석입니다.
아직까지 제대로 모르겠지요, 예를 들어 설명하자면,
1
<p>안녕하세요 Dodev 하다 입니다.</p>
위에서,
<p>는 시작 tag입니다.</p>는 종료 tag입니다.<p>~</p>까지 전체 한 문장 전체는 elements(요소)라고 합니다.
즉, 위 예시에서는 시작태그, 종료태그 각각 1개씩 총 2개의 tag가있고, elements는 1개이지요.
자, 우선 이정도로만 할까요! HTML은 웹페이지를 만들기 위한 언어이고, HTML은 구조를 정의하는것입니다.
CSS
Cascading Style Sheets의 약자로, 말 그대로 스타일 시트 입니다. HTML로 뼈대(구조)를 잡고나서, 거기에 살을 덧붙이는것이라고 생각하시면 될것 같습니다.
CSS는 글꼴, 색, 이미지, 모양, 크기, 너비, 높이 등등 여러가지 요소들의 디자인을 정의해둔것입니다. html과 연결하여 사용됩니다.
사실 예전에는 html자체에서 뼈대를 잡으면서, 동시에 페이지를 꾸미는 일을 해야만 했습니다. 그러다보니 여간 번거로운 일이 아니였습니다. html을 아주 조금이라도 수정하려고 하면, 전체를 다시 봐야하기 때문이였죠.
그래서 World Wide Web Consortium (W3C)이라는 기관이 설립되어, 문서작업과 꾸미는 작업을 두가지로 분리하여 웹 표준을 정의해주었답니다.
문서를 고쳐야 한다면 디자인은 신경쓰지 않고 contents를 수정합니다. 디자인의 변경이 필요하면 css파일을 확인하여 수정할 수 있습니다.
CSS는 HTML이 만들어둔 구조에 디자인을 입히는것으로 생각해주시면 됩니다.
Style 적용 방법은 3가지가 있습니다.
- tag에 sytle을 속성처럼 사용(In-line)
- html 문서안에 style 태그를 사용(Internal)
- css파일을 별도로 만들어 html과 연결하여 사용(External)
그 중 마지막을 사용하는것이 좋습니다. 권장사항입니다! 사용방법은 이후에 다루도록 하겠습니다!
CSS는 더 발전하여 SASS(Syntactically Awesome Stylesheets)가 나오게 됩니다만, 이번 게시글에서는 따로 다루지 않겠습니다.
javascript (+jquery, Ajax)
javascript란, 정적 페이지를 동적 페이지로 만들어주는 녀석입니다. 객체 기반의 스크립트 프로그래밍언어 입니다. 줄여서 js로 부르기도 합니다. 앞에 ‘java’라는게 붙어있어서 많이들 오해하시는데, ‘java’와 ‘javascript’는 엄연히 다릅니다! 전혀 다릅니다!!
js는 보통 엔드유저단에서 동작하나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍이 가능합니다. 프로그래밍 언어이나 별도의 컴파일러를 설치하지 않고도 웹 페이지에서 바로 정상작동 하는데, 이는 웹 브라우저 자체에서 js를 인식하고 컴파일 해주기 때문입니다!
정적 페이지를 동적 페이지로 만들어주는 녀석이라고 했는데, 여기서 정적 페이지란, 컴퓨터에 있는 텍스트파일을 단순히 열어 보기만 하는것과 같은 페이지 입니다. html(+css)로만 작성된 웹 페이지가 그렇지요. 2000년대 초반만 해도 정적 페이지가 꽤 많았습니다만, 현재에는 찾아보기가 어렵지요. 대부분의 웹 페이지는 동적 페이지입니다.
동적 페이지란 정적페이지에 여러가지 변수들에 의해 작용을 받아 사용자가 보는 페이지가 달라지는, 동적으로 변하는 페이지입니다. 아주 간단한 예를 들어, 새로고침할때마다 변하는 시간을 보여주는 페이지 또한 동적 페이지 입니다.
js와 함께 거론되는 jquery(제이쿼리)란, javascript 라이브러리(library)입니다. 문서 탐색, 문서 조작, 이벤트 처리 등 javascript를 더 편하게 사용하기 위해 나온 녀석입니다.
비슷하게 많이 언급되는 Ajax(에이젝스 또는 아작스)도 있습니다. Ajax 또한 javascript library입니다. Asynchronous Javascript And Xml의 줄임말이며, 특정 데이터를 불러올때, 그것을 위해 웹 페이지 전체를 새로고침(reload)하지 않고, 해당되는 데이터만을 갱신할 수 있도록 해줍니다.
Vanilla JS(바닐라 자바스크립트, 바닐라 제이에스)라고 하는 녀석도 종종 눈에 띄는데요, 별도의 프레임워크나 라이브러리를 사용하지 않고, 자바스크립트를 사용하는것을 뜻합니다.
이것도 이 정도만 하겠습니다. 너무 많은 양이라 하고싶은 말이 잔뜩있지만 천천히 하도록 할게요.자바스크립트(javascript)는 정적으로 작성된 HTML(혹은 HTML+CSS)를 동적 페이지로 작동하도록 해 주는 것입니다.
마무리
어느정도 개념이 잡히셨길 바랍니다. 아직도 잘 모르셔도 괜찮습니다. 개념이 잡히셨다면 ‘음, 이걸 어떻게 쓸까?’하고 생각해주시고 아직 잘 모르시겠다면 ‘아 모르겠다 일단 해봐야 알 것 같아’라고 생각해주시길 바랍니다.
네, 어찌되었든 실전으로 들어가야 하는 단계로 넘어왔습니다. 다음 포스팅에서는 각각을 좀 더 자세히 알아보고 사용해보도록 합시다. 감사합니다!
Comments powered by Disqus.