개요
사람들에게 편리함을 주고 다양한 정보를 주고받으며 사람들에게 편리함을 주는 것은 바로 인터넷과 지금 보고 있는 수 많은 웹페이지가 그런 역할을 한다. 그렇다면 이 웹사이트는 어떤 것으로 구성이 되어 있을까? 그것은 바로 HTML과 CSS 그리고 Javascript로 구성되어 있다. 그렇다면 각각은 어떤 역할을 하는지 알아보자.
HTML
HTML은 Hypertext Markup Language의 약어로 이를 단순히 직역을 해보면 하이퍼본문표식달기언어 이며 이를 통해서 전체적인 웹페이지를 구성하게 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<span>Hello! World!</span>
</div>
</body>
</html>코드를 보면 대충 이렇게 생겼다. HTML의 구조는 크게 다양한 웹사이트의 기본구조를 담고 있는 HEAD부분과 전체적인 페이지의 구성과 내용을 담고 있는 Body로 이루어져있다. HTML의 기본 문법은 태그를 열고 안에 있는 내용을 채우거나 별도의 속성을 작성하여 어떤 정보를 담는지 표현을 할 수 있다. 그렇다면 위에서 부터 무슨 태그들이 어떤 것을 의미하는지 알아보자.
<!DOCTYPE html>현재 HTML의 버젼을 구분시켜주는 태그이다. 특이사항이 없다면 넘어가는 부분이다.<head></head>HEAD를 구분시켜주는 태그이다. 앞서 언급했다 싶이 HEAD부분에는 담고 싶은 이 페이지의 정보 혹은 설정들을 설정해줄수도 있고, 후에 설명할 스타일을 입혀주는 css의 연결시켜줄수 있다.<meta />Head부분에서 사용되는 태그이며 이 태그의 내용은 다양한 속성들을 통해서 더 많은 정보들을 담을 수 있도록 해준다.<title>Title</title>인터넷 브라우저 창에 보이는 제목 부분을 설정해주는 태그이다.<link rel="stylesheet" href="">앞서 언급했다 싶이 브라우저에게 별도의 스타일을 설정해주는 css파일을 연결시켜주는 태그이다.<body></body>Body를 구분 시켜주는 태그이다. body태그 안에서 부터는 실제로 웹페이지에서 보이는 부분을 설정해 줄 수있다.<div></div>흔히 사용하는 태그중 하나이다. 화면의 전체적인 레이아웃등을 구분해주기 위해 자주 사용되는 태그이다.<span></span>아무의미도 없이 글의 맥락을 구분을 하기 위한 태그중 하나이다. 위의 div와 성질이 거의 비슷하지만 하나 다른 점이 있다면 span 태그는 인라인 요소라는 것이다.
위에서 설명 한 것 외에도 정말 많은 태그들이 있고 사용된다. 모든 것을 외우는 것은 사실상 시간낭비이며 자신이 적절히 필요하다고 생각하는 것을 검색하여 적재적소에 사용하는 것이 좋다.
CSS
css는 Cascading Style Sheet의 약어로 직역하자면 계단식맵씨문서이다. 말 그대로 계단식으로 작성하며 맵씨를 설정해주는 문서이다. css가 없다면 정말 못생겼다. 밑에 사진을 보면 된다.
위키피디아 페이지를 css적용을 해지시킨 모습이다.
출처: https://dev.to/vaibhavkhulbe/the-web-without-css-18d
위와 같이 보면 정말 못생겼다. 게다가 시인성 또한 좋지 않다. 사용자가 보기 편하기 위해서라도 css작업을 하는 것은 필수다.
그렇다면 이 css는 어떻게 사용하는 것 인지 알아보자. 먼저 css를 알아보기 위해서는 문법에 대해서 알아봐야 하는데 문법 자체도 꽤 단순하다.
div{
background-color: red;
}먼저 위에서 보이는 것 같지 내가 적용하고 싶은 요소를 하나 선언해주고 중괄호를 열고 내가 원하는 속성과 그 속성값을 입력하고 ; 이 표시로 마무리하면 하나의 속성을 적용시켜줄 수 있다. 그렇다면 어떤 속성이 있는지 대충 한번 알아보자.
div {
width: 100px;
background-color: blueviolet;
color: hotpink;
font-size: 20px;
}width: 100px요소의 너비를 설정해줄수 있는 속성이다.background-color: blueviolet;요소의 배경색상을 설정해줄 수 있는 속성이다.color: hotpink;요소의 글자색을 설정해 줄 수 있는 속성이다. 속성값으로 rgb, color-hex, hsl 등등을 이용하여 다양하게 표현할 수 있다.font-size: 20px;요소의 글자의 크기를 설정해줄수 있는 속성이다.
위의 언급한 속성제외하고도 정말 수많은 속성들이 있다. 하지만 수 많은 속성을 다루기에는 무리가 있다. 자신이 원하는 속성을 검색하여 적재적소에 활용하면 된다.
JavaScript
JavaScript는 웹을 구성하는 언어중 유일한 프로그래밍 언어이며, 이 자바스크립트를 통해서 사용자와 더욱 상호작용을 가능하게 하며 심지어 원한다면 Node.js를 이용해서 서버를 구축을 할수 도 있다. 자바스크립트는 다뤄야 할 내용이 워낙 방대하고 많기도 해서 지금 당장은 다루지 않고 후에 더욱 자세하게 다루도록 하겠다.
