--> [HTML5/CSS] HTML과 CSS 기초 개념 이해하기

[HTML5/CSS] HTML과 CSS 기초 개념 이해하기

  1. HTML 이란 ?


HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위해 사용되는 마크업 언어로 확장자를 *.htm 또는 *.html로 지정하면 웹 브라우저를 이를 html 문서로 인식하고 로딩을 하게 됩니다. HTML은 아무 Text Editor를 사용해서 확장자만 제대로 지정해주면 브라우저로 곧바로 실행 해 볼수 있습니다. (참고로 저는 Visual Studio Code Editor를 사용하여 실습을 진행해 나갈 생각입니다. 아래 링크 게시글을 통해 확인 바랍니다. )


[Programming/JavaScript] - [JavaScript] Visual Studio Code 설치 및 시작


  1.1 HTML 기본 구조

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

cs


<!DOCTYPE html> 시작으로 HTML 문서가 시작됩니다. 이 문서가 HTML 문서임을 명시 하는거죠. 그리고 구성을 보면 <HTML>, <head>, <body> 태그로 구분이 되는 걸 확인 하실 수 있습니다. 하나씩 알아보도록 하죠.



  • <html> :  HTML 문서의 최상위 root 입니다. <html> </html> 사이에 크게 <head> 태그와 <body> 태그가 포함되어 있음을 확인 할 수 있습니다.
  • <head> : HTML 문서의 메타데이터(Metadata)를 정의합니다. 메타 데이터란 HTML 문서에 대한 정보입니다. 대표적으로 올 수 있는 태그들이 <style> 태그 (HTML에 적용되는 CSS 스타일), <script>, <link> (다른 JavaScript나 CSS 파일을 참조), <meta> 태그 등이 있습니다.
  • <body> : 본격적으로 브라우저에 표현되어야 할 태그들이 들어가는 부분입니다. 


  1.2 기본적인 태그 작성법


태그를 작성하는 방법은 기본적으로 태그를 열고 태그를 닫아주는 형태가 기본입니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        Hello !!
    </h1>
</body>
</html>
cs


<body> 태그 안에 <h1> 태그를 추가하였습니다. 형태를 보면 <h1>을 작성 (태그를 열고) </h1> 태그를 통해 태그를 닫아주는 형태를 취하고 있습니다. <h1>과 </h1> 사이에 "Hello !!" 라는 Text를 넣어주고 있습니다. 이게 일반적인 태그를 작성하는 방식입니다.


아래와 같이 예외적인 형태도 있습니다. 


1
2
3
4
5
<body>
    <a>Hello!</a> 
    <br>
    <a>Hello2!!</a>
</body>
cs


 <br> 태그는 개행을 해주는 태그로 열린 태그만 있고 닫힌 태그는 없는 것을 확인 할 수 있습니다. 저런식으로 써도 무방하긴 하지만 정석은 <br />로 쓰는것이 정석입니다. 


  2. CSS 란?


HTML로만 작성 된 웹 문서는 정말 볼품없습니다. 아래 HTML 문서를 웹 브라우저에서 실행 한 결과를 한번 살펴 보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>
        안녕하세요. 
    </h1>
    <h2>
        LKT Programmer 입니다.
    </h2>
</body>
</html>
cs



Text만 덩그러니 나오고 있습니다. (그렇게 작성을 했으니깐요 .. ) 이쁘지 않습니다.

좀더 시각적으로 이쁘게 (?) 보일 필요가 있습니다. CSS는 이러한 HTML (단순 정보를 표현)을 시각적으로 이쁘게 꾸며주는 역할을 하게 됩니다. 간단한 CSS를 통해 h1 태그와 h2 태그에 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 
    <style>
        h1 {
            background-color : red;
        }
        h2 {
            background-color : green;
        }
    </style>
 
</head>
<body>
    <h1>
        안녕하세요. 
    </h1>
    <h2>
        LKT Programmer 입니다.
    </h2>
</body>
</html>
cs


CSS는 <head> 태그 내부에 <style> 태그안에 정의합니다. 위 코드를 간단히 설명하자면 <h1> 태그에 background-color 속성으로 red를 주고 <h2> 태그에는 green을 주는 간단히 CSS를 적용한 형태라고 볼 수 있습니다. 아래는 결과 화면입니다. 



볼품없는건 마찬가지지만 어찌되었든 CSS가 제대로 적용된 모습을 확인 할 수 있습니다. 이처럼 HTML과 CSS를 통해 이쁜(?) 웹 페이지를 구성 할 수 있게 되는거죠. HTML이나 CSS의 경우는 프로그래밍 언어가 아니라 누구라도 시간을 들여 공부를 한다면 다룰 수 있는 언어라고 생각합니다.


다음 게시글부터 차근차근 각종 태그들에 대해서 공부하는 시간을 가져볼게요. 감사합니다. 

궁금하신 내용이 있으면 제가 아는 범위내에서 답변을 드리겠습니다. 

댓글(0)

Designed by JB FACTORY