[웹 초보자] HTML CSS Javascript 기본 이해하기

여러분은 HTML, CSS, JS의 차이와 역할 구분하여 대답할 수 있습니까?


왠지 알고 있는 것 같은데 구체적으로 말하기 곤란한 분들도 있겠죠? 그런 분들을 위해 HTML CSS Javascript 기본 이해하기 설명합니다.




목차


1 HTML이란

1.1 HTML 버전

1.2 HTML 작성

1.3 HTML 마크업 작성해보기


2 CSS란

2.1 CSS 버전

2.2 CSS 작성

2.3 CSS로 제목 꾸며보자


3 JavaScript 란

3.1 JavaScript 작성

3.2 JavaScript로 아코디언 메뉴를 만들어 보기


4 정리

HTML이란 -


정식 명칭은 "HyperText Markup Language (하이퍼 텍스트 마크 업 언어)"이며, 줄여서 "HTML"이라고 합니다.


쉽게 말하면 평소 여러분이 볼 수 있는 Web 페이지를 만들기 위한 토대 언어입니다. 한국어, 영어 같은 자연어가 아니라 "마크업언어"로 불리는 문서 구조가 담긴 명령어를 컴퓨터에 내리기 위한 언어가 됩니다.


Web 페이지는 HTML 마크업 됨에 따라 외형(눈에 보이는 사이트 모습)이 형성됩니다.


HTML 버전


HTML에는 다양한 버전이 있습니다. 최근에는 대부분 HTML5로 사용되지만 실질적인 기술 지원은 Internet Explorer 9 (Internet Explorer) 이상 버전이므로 주의하세요.


그래서 몇 년 전까지는 HTML4와 XHTML1.0을 주로 사용하였습니다.


인터넷은 HTML5 이외의 버전으로 작성된 Web 사이트도 많이 존재합니다. 그래서 다른 HTML 버전을 사용할 수 있느냐는 의문점이 생길 수 있는데요. HTML 버전은 파일의 "선언문"에 의해 결정됩니다.


1
2
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
cs



HTML 파일을 열면 위와 같은 코드가 있으므로, 이를 보고 어떤 버전인지 확인할 수 있습니다.


참고로 XHTML1.0의 선언 방법은 "엄밀형(strict)"과나 "프레임 설정형" 등 여러 선언 방법이 있으므로 관심이 있는 분은 알아보세요.


HTML 작성

다음은 "HTML 작성"을 소개합니다. 

HTML을 작성하고 테스트하기 위해선 아래 3가지가 필요합니다.


  • PC
  • 텍스트 편집기 (메모장도 가능)
  • Web 브라우저


이것만 있으면 당장이라도 HTML을 작성하여 결과를 확인할 수 있습니다. 다만 HTML, CSS, Javascript를 작성하고 브라우저에서 확인하려면 "디렉토리(탐색기로 볼 수 있는 폴더)"를 준비해야 합니다.


그렇다 해도 하나의 html 파일만으로 완료할 수 있지만, 폴더(디렉토리)를 만드는 것이 일반적이어서 이번에는 그 방법으로 진행합니다.


디렉터리를 생성한 뒤 HTML 파일 소스에 CSS 파일과 JS 파일을 읽어 들이기 위한 코드를 작성해야 합니다. 아래는 그 부분을 순차적으로 설명하고 있습니다.


우선, PC 어디라도 좋습니다. 관리하기 쉬운 곳에 폴더를 만드세요. 이번에 생성하는 디렉터리 구성은 다음과 같습니다.


[디렉토리 계층]



자, 준비됐다면 다음 소스를 작성해 봅시다.

HTML 마크업 작성 후 확인해보기


파일 다운로드

  1. index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>【초보자용】 HTML、CSS、Javascript 기본 이해하기</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src=""></script>
</head>
<body>
  <header>
    <!-- 헤더는 여기에 작성 -->
  </header>
  <h1>【초보자용】 HTML、CSS、Javascript 기본 이해하기</h1>
  <div id="wrapper">
    <section>
      <h2>HTML이란</h2>
      <p>본문</p>
      <section>
        <h3>HTML 버전</h3>
        <p>본문</p>
      </section>
    </section>
    <section>
      <h2>CSS란</h2>
      <p>본문</p>
      <section>
        <h3>CSS 버전</h3>
        <p>본문</p>
      </section>
    </section>
  <!-- /#wrapper --></div>
  <footer>
    <!-- 바닥글은 기에 작성 -->
  </footer>
</body>
</html>
cs



소스 코드 작성이 끝나면 저장하고 브라우저에서 확인해 보세요.




이렇게 나오면 제대로 반영된 것입니다.


페이지에 "헤더(header 태그)", "제목(h 태그)", "바닥글(footer 태그)"을 반영하는 것을 설명한 것입니다. 여기서 중요한 것은 올바른 문서 구조를 의식하여 적절한 마크업을 적용하는 것입니다.


단, 처음에는 문서 구조 등 의식하지 않고 "오로지 HTML 소스를 작성하고 표시되는 것을 확인"하는 것이 가장 좋습니다.

- CSS란? -


위애서 HTML이 무엇인지를 배웠습니다. 그럼, 이젠 CSS가 무엇인지 알아보겠습니다.


CSS의 정식 명칭은 Cascading Style Sheets(CSS 스타일 시트)라고 합니다. 페이지의 레이아웃을 형성(구성) 하기 위한 스타일시트라고 부릅니다.


위에서는 HTML만 설명하고 페이지를 표시했지만, 뭔가 아쉬운 화면이네요. 하지만 CSS를 더해줌으로서 외형을 예쁘게 바꿀 수 있습니다.


예를 들어, 글자 색상과 배경 색상, 배치 등을 자유롭게 변경할 수 있습니다.


HTML 마크업하고 CSS애서 레이아웃을 정돈한다. 이것이 Web 페이지를 만들어나갈 때의 기본적인 흐름입니다.


CSS 버전

  • CSS1
  • CSS2
  • CSS3


이렇게 CSS1에서 CSS3까지 3가지 버전이 존재합니다.


* 참고로, CSS3에서는 지금까지의 CSS에서 지원하지 않는 기능을 지원합니다.


현재는 CSS3를 주로 사용하지만, CSS3 속성에 따라 지원하지 않는 브라우저도 있습니다. 그래서 "이 브라우저에서는 제대로 표시되지만, 저 브라우저에서는 제대로 표시되지 않는다"라는 상황이 생길 수도 있습니다.


브라우저 속성에 맞춰 정확히 코드를 작성할 필요가 있습니다.


| CSS 작성


CSS를 작성하는 방법은 다양합니다.


  • 외부 파일 로드
  • head 태그 안에 코딩
  • 인라인 기술


위에서 언급한 방법 중 어느 곳을 선택해도 괜찮으며, "외부 파일 로드"가 일반적인 방법입니다.


이제 "외부 파일에 작성하는 방식"에서 CSS를 설명해 드리고자 합니다.


먼저, 방금 만든 index.html 파일에 "link 태그의 href 속성"을 아래와 같이 추가합니다.


1
<link rel="stylesheet" href="css/style.css">
cs



무슨 의미냐면 HTML 파일에서 CSS 파일을 읽어 들인다는 뜻입니다.


이 소스 코드를 추가함으로써 CSS 파일에 기술된 스타일이 웹페이지에 적용됩니다. 참고로 상대 경로에 존재하며, "절대 경로", "상대 경로", "사이트 경로 URL" 등 여러 종류가 있습니다.

| CSS로 제목 꾸며보자


그렇다면 style.css를 작성해 봅시다. 


파일 다운로드

  1. index.html
  2. style.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* 리셋 css (신경쓰지 마세요) */
{
  margin: 0;
  padding: 0;
}
 
/* 큰 틀 (신경쓰지 마세요) */
body {
  width: 100%;
}
#wrapper {
  width: 80%;
  margin: 0 auto 0 20px;
}
 
/* 제목은 여기서 부터 */
h1 {
    height: auto;
    margin: 40px 0 0 20px;
    padding: 0;
    color: #000;
    font-size: 30px;
    font-weight: bold;
    border-top: 0;
    line-height: 1.5;
}
 
h2 {
  margin: 60px 0 35px 0;
  padding: 0 0 0 15px;
  font-size: 26px;
  font-weight: bold;
  border-width: 0 0 0 4px;
  border-style: solid;
  border-color: #0f5296;
}
 
h3 {
    padding-bottom: 10px;
  font-size: 22px;
    font-weight: bold;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #e6e6e6;
}
/* 여기까지 */
 
/* 아코디언은 기서 붜터 */
/*  */
cs



css 폴더를 만들어 style.css를 저장하세요. 그리고 브라우저를 새로고침하면 이런 화면으로 바뀔 겁니다.




css는 다음과 같은 것을 설정합니다.


  • 여백 설정 
  • font 색상, 크기 변경 
  • 제목 옆에 특수 문자 추가


이처럼 CSS에서는 다양한 "속성 값"을 설정할 수 있습니다.

- JavaScript란 -


그럼, 마지막으로 JavaScript 대해 간략하게 설명하겠습니다.


JavaScript의 주요 사용 방법은 Web 페이지에 움직임을 익히는 것입니다.  이외에도 다양한 활용 방법을 다양하게 적용할 수 있습니다.


  • WEB 페이지 동작
  • WEB 어플리케이션 개발
  • 스마트폰 앱 개발
  • 게임 개발


대략 말씀드리면 이런 용도로 사용되고 있습니다!

최근에는 'Node.js'라는 서버 기능을 담고 있는 기술이 나오는 등 계속 진화하고 있습니다.


참고로 JavaScript와 Java를 혼동하기 쉽지만, 두 언어는 전혀 다르므로 주의하세요! 이름은 비슷하지만 전혀 다른 언어입니다!


JavaScript 사용하는 회사가 많으므로 JavaScript를 마스터하면 다양한 분야에서 활약할 수 있습니다.


| JavaScript 작성

그러면 실제로 JavaScript는 어떻게 사용해야 할까요?


  • HTML에 작성
  • 외부 파일 로드


이 두 패턴입니다. 


방금 작성한 "index.html"에 직접 작성할 수 있으며, 외부 파일 "script.js (임의로 지은 이름)"에 작성한 뒤 HTML 파일에서 불러올 수도 있습니다.


JavaScript에서 아코디언 메뉴를 만들자

그러면 실제로 JavaScript를 작성해 봅시다.

아코디언 메뉴란 부모 메뉴를 클릭하면 자식 메뉴가 표시되는 것을 말합니다. 메인 메뉴 - 서브 메뉴를 말합니다.


방금 만든 각각의 파일에 코딩하는 형태로 설명합니다.


먼저 "script.js" 로드 부분 바로 위에 "jQuery"를 읽어 사용하기 위한 코드를 작성합니다.


1
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
cs


이 소스가 없으면 jQuey 소스를 추가해도 의미가 없으니 주의하세요.


또한 jQuery 로드는 "script.js"보다 순서가 먼저여야 합니다.


아래는 CSS입니다.

"/ * 아코디언 여기서 부터 * /"의 주석 아래에 아코디언 메뉴 스타일을 작성합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 아코디언 여기서 부터 */
dl {
  width: 350px;
  margin: 0 auto 10px auto;
  color: #fff;
  font-size: 10px;
}
dl:first-child {
  margin-top:10px;
}
dt {
  position:relative;
  display: block;
  padding: 20px 0 20px 20px;
  background-color: #333333;
}
dt:after {
  content: ">";
  position: absolute;
  top: 35%;
  left: 85%;
  transform: rotate(90deg);
}
dt.close:after {
  content: "<";
  position: absolute;
  top: 35%;
  left: 85%;
  transform: rotate(-270deg);
}
dd {
  display: none;
  padding: 20px 0 20px 40px;
  color: #000;
}
/* 여기까지 */
cs



그리고 마지막으로 JS 파일에 jQuery 소스 코드를 작성합니다.



1
2
3
4
5
$(function() {
  $(".accordion").click(function() {
    $(this).toggleClass("close").next().slideToggle();
  });
});
cs



아래 화면을 볼 수 있다면 완성입니다!




흐름을 정리하면


  1. HTML 파일에서 jQuery CDN 읽음 (예제에선 직접 읽지만 인터넷에서 다운 받아을 수도 있습니다)
  2. CSS 파일에 아코디언 작성 (메뉴 열기 닫기)
  3. JS 파일 jQuery에서 "어떤 요소를 클릭하면 메뉴가 열거나 닫힌다"는 내용을 작성


- 정리 -


핵심 요점만 간략하게 설명했습니다. 깊이 배우고 싶다면 책을 사서 보거나 각종 스터디 사이트에서 공부하시면 됩니다.


지식이 늘어나게 되면 CSS3을 이용해 그라데이션도 만들어 보고 자바스크립트로 슬라이더와 LightBox를 사용해 보세요. 여러가지 재미있는 요소들이 여러분을 기다리고 있습니다.


ⓒ written by vicddory

이 글을 공유하기

댓글(0)

Designed by JB FACTORY